ES6 부터 class라는 키워드를 사용할 수 있게 되었습니다. 클래스란 객체를 생산하는 생산 도면 혹은 청사진이란 표현을 자주 사용합니다. 즉 엄청나게 많이 사용하는 비유, 클래스는 붕어빵의 틀이다 라는 표현이 등장합니다.
혹은 국사 시간에 많이 만나본 이미지를 떠올릴 수도 있습니다.
class 키워드 + 이름 + 중괄호로 이루어져 있습니다.
클래스의 결과물은 인스턴스를 생성하는것입니다. 생성자를 이용한 타입 생성과 그 결과가 정확하게 일치합니다.
// function Robot(name) {
// this.name = name;
// }
// Robot.prototype.sayYourName = function () {
// console.log(`삐리비리. 제 이름은 ${this.name}입니다. 주인님.`);
// }
class Robot {
// 클래스의 생성자 함수입니다. 하나의 클래스는 하나의 생성자만 정의할 수 있습니다.
// 그리고 생성자 함수는 new 키워드가 호출될때 자동으로 실행됩니다.
constructor(name) {
this.name = name;
}
// 메소드를 정의합니다. 메소드는 클래스가 생성한 인스턴스를 통해 사용할 수 있습니다.
sayYourName() {
console.log(`삐리비리. 제 이름은 ${this.name}입니다. 주인님.`);
}
}
자바스크립트만의 사용자 정의 타입 생성(객체 생성) 방법을 다른 언어의 클래스 문법처럼 바꿔준 것이 바로 자바스크립트 클래스(classes)입니다!
<aside> 💡 이처럼 내부적인 동작은 동일하지만 더 보기 좋고 편리하게 개선된 문법을 슈가신텍스 (Syntactic sugar) 라고 부릅니다. (classes 문법은 단순한 설탕문법은 아닙니다. 여러가지 추가된 문법이 있습니다.)
</aside>
클래스의 상속은 extends 키워드를 사용합니다. 상속을 받는 클래스는 ‘파생 클래스’(derived classes)라고 부릅니다.
class Animal {
constructor(name) {
this.name = name;
}
sayHello() {
console.log(`Hello, I'm ${this.name}.`);
}
}
class Dog extends Animal {
constructor(name, breed) {
super(name);
this.breed = breed;
}
bark() {
console.log('Woof!');
}
}
const dog = new Dog('Buddy', 'Labrador');
dog.sayHello(); // Hello, I'm Buddy.
dog.bark(); // Woof!
위 예제에서 Dog 클래스는 Animal 클래스를 상속받습니다. Dog 클래스의 constructor에서 super()를 호출하여 부모 클래스의 constructor를 실행하고, 자식 클래스에서 필요한 추가 속성(breed)을 정의합니다.
Dog 클래스는 부모 클래스(Animal)의 sayHello() 메서드를 그대로 사용할 수 있으며, 자신만의 메서드(bark)도 추가로 가지고 있습니다.
이처럼 상속을 사용하면 기존 클래스의 기능을 재사용하면서도 필요에 따라 자식 클래스에서 기능을 추가하거나 변경할 수 있어 코드의 재사용성과 유지보수성이 높아집니다.
<aside> 💡 #(샾)이 나오기 전에는 _(언더바)를 사용하는 경우도 있었고, 지금도 이렇게 사용하고 있는 곳이 있습니다.
언더바는 읽기 전용으로 사용하겠다는 표시입니다. 다만 강제사항이 아니라서 실제로 수정이 가능한 변수입니다. 사용하는 곳이 있기도 하니 기억해주세요.
아직 비공개 프로퍼티가 널리 퍼지진 않았습니다. 나온지 얼마 안된 문법이라 주의를 요합니다.
비공개 프로퍼티는 객체 안의 중요한 정보를 안전하게 보호하여 프로그램이 뜻하지 않게 변경되는 것을 막는 역할을 합니다.