5.1 클래스 선언
ECMAScript 6 (ES6)이 도입되면서 JavaScript에는 객체를 생성하고 상속을 관리하기 위한 새로운 구조인 class 키워드가 생겼어. 클래스는 객체를 생성하고 프로토타입을 다루기 위한 더 편리하고 이해하기 쉬운 문법을 제공해.
JavaScript의 클래스는 기존 프로토타입 기반 상속 시스템에 대한 문법적 설탕이지. 객체의 생성과 관리를 더 이해하기 쉽게 만들어줘.
클래스 선언
JavaScript에서 클래스는 class 키워드를 사용하여 선언해. 그 뒤에 클래스 이름이 와. 클래스 본문은 중괄호 {} 안에 있지.
예시:
JavaScript
class Person {
// 클래스 메서드
greet() {
console.log('Hello!');
}
}
// 클래스의 인스턴스 생성
const person = new Person();
person.greet(); // 출력: Hello!
클래스 표현식
클래스를 선언하거나 표현식으로 작성할 수 있어. 클래스 표현식은 이름 붙여지거나 익명일 수 있어.
이름 있는 클래스 예시:
JavaScript
const Person = class PersonClass {
greet() {
console.log('Hello!');
}
};
const person = new Person();
person.greet(); // 출력: Hello!
익명 클래스 예시:
JavaScript
const Person = class {
greet() {
console.log('Hello!');
}
};
const person = new Person();
person.greet(); // 출력: Hello!
5.2 클래스의 필드와 메서드
클래스 속성
ES6에서 클래스 속성은 생성자 안에서만 선언할 수 있어. 그러나 JavaScript의 새 버전(ES2022)에서는 생성자 밖에서도 속성을 선언할 수 있는 클래스 필드가 도입되었어.
생성자에서 속성을 사용하는 예시:
JavaScript
class User {
constructor(username, email) {
this.username = username;
this.email = email;
}
}
const user = new User('john_doe', 'john@example.com');
console.log(user.username); // "john_doe"
console.log(user.email); // "john@example.com"
클래스 필드를 사용하는 예시 (ES2022):
JavaScript
class User {
username = 'default_username';
email = 'default@example.com';
constructor(username, email) {
this.username = username;
this.email = email;
}
}
const user = new User('john_doe', 'john@example.com');
console.log(user.username); // "john_doe"
console.log(user.email); // "john@example.com"
설명:
- 첫 번째 예시에서 속성
username과email은 생성자 안에서 선언되고 초기화돼 - 두 번째 예시에서는 속성
username과email이 생성자 밖에서 클래스 필드로 선언돼
클래스 메서드
클래스는 클래스 본문 안에 정의된 메서드를 포함할 수 있어. 이 메서드들은 자동으로 생성된 객체의 프로토타입에 추가돼.
클래스 메서드의 예시:
JavaScript
class Animal {
speak() {
console.log('Animal speaks');
}
eat() {
console.log('Animal eats');
}
}
const animal = new Animal();
animal.speak(); // 출력: Animal speaks
animal.eat(); // 출력: Animal eats
5.3 클래스 사용 예시
복잡한 객체 생성
클래스를 사용하면 다양한 메서드와 속성을 가진 복잡한 객체를 만들 수 있어.
예시:
JavaScript
class Car {
constructor(brand, model) {
this.brand = brand;
this.model = model;
}
startEngine() {
console.log(`${this.brand} ${this.model} engine started.`);
}
stopEngine() {
console.log(`${this.brand} ${this.model} engine stopped.`);
}
}
const myCar = new Car('Toyota', 'Camry');
myCar.startEngine(); // 출력: Toyota Camry engine started.
myCar.stopEngine(); // 출력: Toyota Camry engine stopped.
GO TO FULL VERSION