[![Hits](https://hits.seeyoufarm.com/api/count/incr/badge.svg?url=https%3A%2F%2Fbyjuun.com%2Fposts%2FJavaScript%2Fdeep-dive-js-25&count_bg=%233B82F6&title_bg=%23555555&icon=&icon_color=%23E7E7E7&title=views&edge_flat=false)](https://hits.seeyoufarm.com)

클래스는 ES6에 도입되어, 프로토타입 기반 객체 지향 프로그래밍이 가능한 자바스크립트를 클래스 기반 객체 지향 프로그래밍과 비슷한 객체 생성 매커니즘을 제공한다. # **🌟 클래스 정의** 클래스는 class 키워드를 사용하여 정의한다. ```jsx // 클래스 선언문 class Person {} ``` 클래스는 함수와 마찬가지로 이름을 가질 수도 있고 갖지 않을 수도 있다. ```jsx // 익명 클래스 표현식 const Person = class {}; // 기명 클래스 표현식 const Person = class MyClass {}; ``` 클래스는 일급 객체로서 다음과 같은 특징을 갖는다. 1. 무명의 리터럴로 생성할 수 있다. (런타임에 생성 가능) 2. 변수나 자료구조에 저장할 수 있다. 3. 함수의 매게변수에게 전달할 수 있다. 4. 함수의 반환값으로 사용할 수 있다. 클래스의 몸체에는 0개 이상의 메서드만 정의할 수 있다. 클래스 몸체에 정의할 수 있는 메서드는 생성자, 프로토타입 메서드, 정적 메서드 세 가지가 있다. ```jsx // 클래스 선언문 class Person { // 생성자 constructor(name) { // 인스턴스 생성 및 초기화 this.name = name; // name 프로퍼티는 public하다. } // 프로토타입 메서드 sayHi() { console.log(`Hi! My name is ${this.name}`); } // 정적 메서드 static sayHello() { console.log("Hello!"); } } // 인스턴스 생성 const me = new Person("Lee"); // 인스턴스의 프로퍼티 참조 console.log(me.name); // Lee// 프로토타입 메서드 호출 me.sayHi(); // Hi! My name is Lee// 정적 메서드 호출 Person.sayHello(); // Hello! ```
# **🌟 클래스 호이스팅** 클래스 선언문으로 정의한 클래스는 함수 선언문과 같이 **소스코드 평가 과정, 즉 런타임 이전에 먼저 평가되어 함수 객체를 생성**한다. 이때, 클래스가 평가되어 생성된 함수 객체는 생성자 함수로서 호출할 수 있는 함수, 즉 constructor이다. 단, 클래스는 정의 이전에 참조할 수 없다. ```jsx console.log(Person); // ReferenceError: Cannot access 'Person' before initialization // 클래스 선언문 class Person {} ``` 클래스 선언문은 호이스팅이 발생하지 않는 것처럼 보이지만, 그렇지 않다. ```jsx const Person = ""; { // 호이스팅이 발생하지 않는다면 ''이 출력되어야 한다. console.log(Person); // ReferenceError: Cannot access 'Person' before initialization // 클래스 선언문 class Person {} } ``` `var`, `let`, `const`, `function`, `function *`, `class` 키워드를 사용하여 선언된 모든 식별자는 호이스팅된다. 모든 선언문은 런타임 이전에 실행되기 때문이다.
# 🌟 인스턴스 생성 클래스는 생성자 함수이며, new 연산자와 함께 호출되어 인스턴스를 생성한다. ```jsx class Person {} // 인스턴스 생성 const me = new Person(); console.log(me); // Person {} ``` 함수는 new 연산자의 사용 여부에 따라 일반 함수로 호출되거나 인스턴스 생성을 위한 생성자 함수로 호출되지만, 클래스는 인스턴스를 생성하는 것이 유일한 존재 이유이므로, 반드시 new 연산자와 함께 호출해야 한다. ```jsx class Person {} // 클래스를 new 연산자 없이 호출하면 타입 에러가 발생한다. const me = Person(); // TypeError: Class constructor Foo cannot be invoked without 'new' ``` # **🌟 메서드** 클래스 몸체에는 0개 이상의 메서드만 선언할 수 있다. 클래스 몸체에서 정의할 수 있는 메서드는 생성자, 프로토타입 메서드, 정적 메서드 3가지 이다. ## **constructor** constructor 는 인스턴스를 생성하고 초기화하기 위한 특수한 메서드다. constructor 는 이름을 변경할 수 없다. ```jsx class Person { // 생성자 constructor(name) { // 인스턴스 생성 및 초기화 this.name = name; } } ``` constructor는 생성자 함수와 유사하지만, 몇 가지 차이가 있다. constructor는 클래스 내에 최대 한 개만 존재할 수 있다. 만약 2개 이상의 constructor를 포함하면 SyntaxError가 발생한다. ```jsx class Person { constructor() {} constructor() {} } // SyntaxError: A class may only have one constructor ``` constructor를 생략하면, 다음과 같이 빈 constructor가 암묵적으로 정의된다. 그리고 이를 통해 빈 객체를 생성하게 된다. ```jsx class Person { // constructor를 생략하면 다음과 같이 빈 constructor가 암묵적으로 정의된다. constructor() {} } // 빈 객체가 생성된다. const me = new Person(); console.log(me); // Person {} ``` 인스턴스를 생성할 때, 클래스 외부에서 인스턴스 프로퍼티의 초기값을 전달하려면, 다음과 같이 constructor에 매개변수를 선언하고, 인스턴스를 생성할 때, 초기값을 전달하면 된다. ```jsx class Person { constructor() { // 고정값으로 인스턴스 초기화 this.name = "Lee"; this.address = "Seoul"; } } // 인스턴스 프로퍼티가 추가된다. const me = new Person(); console.log(me); // Person {name: "Lee", address: "Seoul"} ``` ## **프로토타입 메서드** 클래스 몸체에서 정의한 메서드는 생성자 함수에 의한 객체 생성 방식과는 다르게 클래스의 prototype 프로퍼티에 메서드를 추가하지 않아도 기본적으로 프로토타입 메서드가 된다. ```jsx class Person { // 생성자 constructor(name) { // 인스턴스 생성 및 초기화 this.name = name; } // 프로토타입 메서드 sayHi() { console.log(`Hi! My name is ${this.name}`); } } const me = new Person("Lee"); me.sayHi(); // Hi! My name is Lee ``` 생성자 함수와 마찬가지로 클래스가 생성한 인스턴스는 프로토타입 체인의 일원이 된다. ```jsx // me 객체의 프로토타입은 Person.prototype이다. Object.getPrototypeOf(me) === Person.prototype; // -> true me instanceof Person; // -> true // Person.prototype의 프로토타입은 Object.prototype이다. Object.getPrototypeOf(Person.prototype) === Object.prototype; // -> true me instanceof Object; // -> true // me 객체의 constructor는 Person 클래스다. me.constructor === Person; // -> true ``` ## **정적 메서드** 정적 메서드는 인스턴스를 생성하지 않아도 호출할 수 있는 메서드를 말한다. 클래스에서는 메서드에 static 키워르를 붙이면 정적 메서드가 된다. ```jsx class Person { // 생성자 constructor(name) { // 인스턴스 생성 및 초기화 this.name = name; } // 정적 메서드 static sayHi() { console.log("Hi!"); } } ``` 정적 메서드는 프로토타입 메서드처럼 인스턴스로 호출하지 않고, 클래스로 호출한다.// 정적 메서드는 클래스로 호출한다. ```jsx // 정적 메서드는 인스턴스 없이도 호출할 수 있다. Person.sayHi(); // Hi! ``` ### **정적 메서드와 프로토타입 메서드의 차이.** 정적 메서드와 프로토타입 메서드의 차이는 다음과 같다. 1. 정적 메서드와 프로토타입 메서드는 속해 있는 프로토타입 체인이 다르다. 2. 정적 메서드는 클래스로 호출하고, 프로토타입 메서드는 인스턴스로 호출한다. -> 이로 인해 this 바인딩이 달라진다. (정적 메서드는 클래스, 프로토타입 메서드는 호출한 객체) 3. 정적 메서드는 인스턴스 프로퍼티를 참조할 수 없지만, 프로토타입 메서드는 인스턴스 프로퍼티를 참조할 수 있다. ```jsx class Square { // 정적 메서드 static area(width, height) { return width * height; } } console.log(Square.area(10, 10)); // 100 class Square { constructor(width, height) { this.width = width; this.height = height; } // 프로토타입 메서드 area() { return this.width * this.height; } } const square = new Square(10, 10); console.log(square.area()); // 100 ``` this를 사용하지 않는 메서드는 정적 메서드로 정의하는 것이 좋다. # **🌟 클래스의 인스턴스 생성 과정** new 연산자와 함께 클래스를 호출하면, 생성자 함수와 마찬가지로 클래스의 내부 메서드 [[Construct]]가 호출된다. 클래스는 new 연산자 없이 호출할 수 없다. 1. 인스턴스 생성과 this 바인딩 - new 연산자와 함께, 클래스를 호출하면, constructor 내부 코드가 실행되기에 앞서 암뭊거으로 빈 객체가 생성된다. - 이 빈 객체가 바로 클래스가 생성한 인스턴스다 - 이때, 이 인스턴스의 프로토타입으로 클래스의 prototype 프로퍼티가 가리키는 객체가 설정된다. - 그리고 이 인스턴스는 this에 바인딩된다. 2. 인스턴스 초기화 - constructor 내부 코드가 실행되어 this에 바인딩되어 있는 인스턴스를 초기화한다. - this에 바인딩되어 있는 인스턴스(생성된 인스턴스)에 프로퍼티를 추가하고, constructor를 통해, 인스턴스의 프로퍼티값을 초기화한다. - constructor가 생략되었다면, 이 과정이 생략된다 (빈 객체) 3. 인스턴스 반환 ```jsx class Person { // 생성자 constructor(name) { // 1. 암묵적으로 인스턴스가 생성되고 this에 바인딩된다. console.log(this); // Person {} console.log(Object.getPrototypeOf(this) === Person.prototype); // true // 2. this에 바인딩되어 있는 인스턴스를 초기화한다. this.name = name; // 3. 완성된 인스턴스가 바인딩된 this가 암묵적으로 반환된다. } } ``` # **🌟 프로퍼티** ## **1. 인스턴스 프로퍼티** 인스턴스 프로퍼티는 constructor 내부에서 정의해야 한다. ```jsx class Person { constructor(name) { // 인스턴스 프로퍼티 this.name = name; } } const me = new Person("Lee"); console.log(me); // Person {name: "Lee"} ``` ## **2. 접근자 프로퍼티** 접근자 프로퍼티는 자체적으로 값을 갖지 않고, 다른 데이터 프로퍼티의 값을 읽거나 저장할 때 사용하는 접근자 함수로 구성된 프로퍼티다. ```jsx const person = { // 데이터 프로퍼티 firstName: "Ungmo", lastName: "Lee", // fullName은 접근자 함수로 구성된 접근자 프로퍼티다.// getter 함수 get fullName() { return `${this.firstName} ${this.lastName}`; }, // setter 함수 set fullName(name) { // 배열 디스트럭처링 할당: "36.1. 배열 디스트럭처링 할당" 참고 [this.firstName, this.lastName] = name.split(" "); }, }; // 데이터 프로퍼티를 통한 프로퍼티 값의 참조. console.log(`${person.firstName} ${person.lastName}`); // Ungmo Lee // 접근자 프로퍼티를 통한 프로퍼티 값의 저장 // 접근자 프로퍼티 fullName에 값을 저장하면 setter 함수가 호출된다. person.fullName = "Heegun Lee"; console.log(person); // {firstName: "Heegun", lastName: "Lee"} // 접근자 프로퍼티를 통한 프로퍼티 값의 참조 // 접근자 프로퍼티 fullName에 접근하면 getter 함수가 호출된다. console.log(person.fullName); // Heegun Lee // fullName은 접근자 프로퍼티다. // 접근자 프로퍼티는 get, set, enumerable, configurable 프로퍼티 어트리뷰트를 갖는다. console.log(Object.getOwnPropertyDescriptor(person, "fullName")); // {get: ƒ, set: ƒ, enumerable: true, configurable: true} ``` getter는 메서드 이름 앞에 `get`을, `setter`는 메서드 이름 앞에 set을 사용해 정의한다. 이때, `getter` `setter`는 인스턴스 프로퍼티처럼 사용된다. 즉, 호출하는 것이 아니라 프로퍼티처럼 참조하는 형식으로 사용한다. # **🌟 상속에 의한 클래스 확장** 상속에 의한 클래스 확장은 프로토타입 기반 상속과는 다른 개념이다. 프로토타입 기반 상속은 프로토타입 체인을 통해 다른 객체의 자산을 상속받는 개념이지만, **상속에 의한 클래스 확장은 기존 클래스를 상속받아 새로운 클래스를 확장하여 정의**하는 것이다. 상속을 통해 Animal 클래스를 확장한 Bird 클래스를 구현해 보자. ```jsx class Animal { constructor(age, weight) { this.age = age; this.weight = weight; } eat() { return "eat"; } move() { return "move"; } } // 상속을 통해 Animal 클래스를 확장한 Bird 클래스 class Bird extends Animal { fly() { return "fly"; } } const bird = new Bird(1, 5); console.log(bird); // Bird {age: 1, weight: 5} console.log(bird instanceof Bird); // true console.log(bird instanceof Animal); // true console.log(bird.eat()); // eatc onsole.log(bird.move()); // move console.log(bird.fly()); // fly ``` extends 키워드를 사용하기 때문에, 클래스 확장은 간편하고 직관적이다. 상속을 통해 확장된 클래스를 서브클래스(`subclass` -> 여기서는 `Bird`), 서브클래스에게 상속된 클래스를 슈퍼클래스(`superclass` -> 여기서는 `animal`)이라고 한다. extends 키워드는 클래스 뿐만 아니라, 생성자 함수를 상속받아 클래스를 확장할 수도 있다. ```jsx // 생성자 함수 function Base(a) { this.a = a; } // 생성자 함수를 상속받는 서브클래스 class Derived extends Base {} const derived = new Derived(1); console.log(derived); // Derived {a: 1} ``` ## **✨ super 키워드** `super`를 호출하면, `superclass`의 `constructor`를 호출한다. `super`를 참조하면, `superclass`의 메서드를 호출할 수 있다. ```jsx // 수퍼클래스 class Base { constructor(a, b) { // ④ this.a = a; this.b = b; } } // 서브클래스 class Derived extends Base { constructor(a, b, c) { // ② super(a, b); // ③ this.c = c; } } const derived = new Derived(1, 2, 3); // ① console.log(derived); // Derived {a: 1, b: 2, c: 3} ``` 서브클래스에서 `constructor`를 생략할 경우, 암묵적으로, `super`를 실행시키는 `constructor`가 실행되지만, `constructor`를 생략하지 않을 경우, 반드시 `super`를 호출해야 한다. 서브클래스의 `constructor`에서 `super`를 호출하기 전에는 `this`를 참조할 수 없다. ```jsx class Base {} class Derived extends Base { constructor() { // ReferenceError: Must call super constructor in derived class before accessing 'this' or returning from derived constructor this.a = 1; super(); } } const derived = new Derived(1); ``` super는 반드시 서브클래스의 constructor에서만 실행된다. ```jsx class Base { constructor() { super(); // SyntaxError: 'super' keyword unexpected here } } function Foo() { super(); // SyntaxError: 'super' keyword unexpected here } ``` 서브클래스의 프로토타입 메서드 내에서 super를 참조하면, superclass의 메서드를 호출할 수 있다. ```jsx // 수퍼클래스 class Base { constructor(name) { this.name = name; } sayHi() { return `Hi! ${this.name}`; } } // 서브클래스 class Derived extends Base { sayHi() { // super.sayHi는 수퍼클래스의 프로토타입 메서드를 가리킨다. return `${super.sayHi()}. how are you doing?`; } } const derived = new Derived("Lee"); console.log(derived.sayHi()); // Hi! Lee. how are you doing? ``` ## **✨ 상속 클래스의 인스턴스 생성 과정** 상속 관계에 있는 두 클래스가 어떻게 협력을 통해, 인스턴스를 생성하는지 살펴보자. ```jsx // 수퍼클래스 class Rectangle { constructor(width, height) { this.width = width; this.height = height; } getArea() { return this.width * this.height; } toString() { return `width = ${this.width}, height = ${this.height}`; } } // 서브클래스 class ColorRectangle extends Rectangle { constructor(width, height, color) { super(width, height); this.color = color; } // 메서드 오버라이딩 toString() { return super.toString() + `, color = ${this.color}`; } } const colorRectangle = new ColorRectangle(2, 4, "red"); console.log(colorRectangle); // ColorRectangle {width: 2, height: 4, color: "red"} // 상속을 통해 getArea 메서드를 호출 console.log(colorRectangle.getArea()); // 8 // 오버라이딩된 toString 메서드를 호출 console.log(colorRectangle.toString()); // width = 2, height = 4, color = red ``` **1. 서브클래스의 super 호출** - 자바스크립트는 내부 슬롯 [[ConstructorKind]]를 통해, 클래스의 슈퍼클래스와 서브클래스로 구분한다. - 서브클래스는 자신이 직접 인스턴스를 생성하지 않고, 슈퍼클래스에게 인스턴스 생성을 위임한다. (이것이 서브클래스의 constructor에서 반드시 super를 호출해야 하는 이유이다) - 서브클래스의 super가 호출되면, 슈퍼클래스의 constructor가 호출된다. **2. 슈퍼클래스의 인스턴스 생성과 this 바인딩** - 슈퍼클래스의 constructor가 실행되기 이전에 암묵적으로 빈 객체를 생성한다. 그리고 이 객체는 this에 바인딩 된다. (여기서 this는 colorrectangle) - **인스턴스는 서브클래스가 생성한 것이 아니라, 슈퍼클래스가 생성한 것이다** **3. 슈퍼클래스의 인스턴스 초기화** - 슈퍼클래스의 constructor가 실행되어 this에 바인딩되어 있는 인스턴스를 초기화 한다. (프로퍼티 추가 and 초기화) **4. 서브클래스 constructor로의 복귀와 this 바인딩** - super가 반환한 인스턴스가 this에 바인딩된다. - 서브클래스는 별도의 인스턴스를 생성하지 않고, super가 반환한 인스턴스를 그대로 사용한다. **5. 서브클래스의 인스턴스 초기화** - 서브클래스에서 인스턴스에 프로퍼티를 추가, 초기화를 한다. **6. 인스턴스 반환** - 클래스의 모든 처리가 끝나면 완성된 인스턴스가 반환된다.

클래스 [모던 자바스크립트 Deep Dive 25장]

this [모던 자바스크립트 Deep Dive 22장]