25. 클래스

[LSH-0125]

25. 클래스

✏️ 기억에 남는 내용

클래스란?

---

프로토타입의 문법적 설탕?

클래스는 일종의 함수이며 기존 프로토타입 기반 패턴을 클래스 기반 패턴처럼 사용할 수 있도록 하는 문법적 설탕이라고 볼 수도 있지만, 생성자 함수와 정확히 동일하게 동작하지는 않는다.

• 클래스를 프로토타입 기반 객체 생성 패턴의 단순한 문법적 설탕이라고 보기보다는 '새로운 객체 생성 메커니즘'으로 보는 것이 좀 더 합당하다. (인스턴스를 생성하는 것이 유일한 존재 이유)

클래스 정의

---

class 키워드를 사용하여 정의(일반적)하거나 표현식으로 정의할 수 있다. 따라서 클래스는 값으로 사용할 수 있는 일급 객체이다.

• 클래스의 몸체에는 0개 이상의 '메서드만' 정의할 수 있다.

클래스 호이스팅

클래스 선언문도 변수 선언, 함수 정의와 마찬가지로 호이스팅이 발생하지만 let, const 키워드로 선언한 변수처럼 호이스팅된다. (호이스팅이 발생하지 않는 것처럼 동작)

클래스의 메서드

---

클래스 몸체에서 정의할 수 있는 메서드는 constructor(생성자), 프로토타입 메서드, 정적 메서드가 있다.

constructor

인스턴스를 생성하고 초기화하기 위한 특수한 메서드다.(이름 변경 금지)

프로토타입 메서드

생성자 함수에 의한 객체 생성 방식과는 달리 명시적으로 프로포타입에 메서드를 추가하지 않아도 기본적으로 프로토타입 메서드가 된다.

정적 메서드

인스턴스를 생성하지 않아도 호출할 수 있는 메서드로, 메서드에 static 키워드를 붙이면 된다.

정적 메서드 vs 프로토타입 메서드

1. 속해 있는 프로토타입 체인이 다르다.
2. 그러므로 정적 메서도는 클래스로 호출하고, 프로토타입 메서드는 인스턴스로 호출한다.
3. 정적 메서드는 인스턴스 프로퍼티를 참조할 수 없지만 프로토타입 메서드는 인스턴스 프로퍼티를 참조할 수 있다.

class Person {
    constructor(name) {
        this.name = name;
    }

    sayHi() {
        console.log('Hi! My name is ${this.name}');
    }

    static sayHello() {
        console.log('Hello');
    }
}

const me = new Person('Lee');

console.log(me.name);
// 프로토타입 메서드 호출
me.sayHi();
// 정적 메서드 호출
Person.sayHello();

프로퍼티

---

인스턴스 프로퍼티

constructor 내부에서 정의하여 클래스가 생성한 인스턴스의 프로퍼티가 된다.

접근자 프로퍼티

접근자 함수(데이터 프로퍼티의 값을 읽거나 저장할 때 사용, getter 함수와 setter 함수)로 구성된 프로퍼티로,

클래스 필드 정의 제안

'클래스 필드'란 클래스 기반 객체지향 언어에서 클래스가 생성할 인스턴스의 프로퍼티를 가리키는 용어다.

• '자바스크립트'의 클래스에서는 인스턴스 프로퍼티의 선언과 초기화는 반드시 constructor 내부에서, this에 프로퍼티를 추가해야한다.
• 하지만 '자바'의 클래스에서는 클래스 필드를 마치 변수처럼 클래스 몸체에 this 없이 선언하고, 클래스 필드를 참조할 때에도 this 없이 참조할 수 있다.
• 캡슐화를 완전하게 지원하지 않고 접근 제한자를 지원하지 않는 자바스크립트의 단점을 보완하고자 private 필드 정의 제안, 정적 필드를 정의하기 위해 static 필드 정의 제안

상속에 의한 클래스 확장

---

상속에 의한 클래스 확장은 기존 클래스를 상속 받아 새로운 클래스를 확장하여 정의하는 것이다.

• 기존 클래스의 속성을 그대로 사용하고 자신만의 고유한 속성을 추가하여 확장한다. 코드 재사용 관점에서 매우 유용하다.

extends 키워드

상속을 통해 클래스를 확장할 때 사용하는 키워드이다. 수퍼클래스 (상속된 클래스, 베이스 클래스, 부모 클래스)와 서브클래스 (상속을 통해 확장된 클래스, 파생 클래스, 자식 클래스) 간의 상속 관계를 설정한다.

• extends 키워드 다음에는 클래스뿐만이 아니라 함수 객체로 평가될 수 있는 모든 표현식을 사용할 수 있다. 이를 통해 동적으로 상속받을 대상을 결정할 수 있다. (extends 키워드)
• 따라서 String, Number, Array 같은 표준 빌트인 객체도 extends 키워드를 사용하여 확장할 수 있다.

super 키워드

super은 함수처럼 호출할 수도, 식별자처럼 참조할 수도 있는 키워드이다. 호출할 경우 '수퍼클래스의 constructor'을 호출하고, 참조할 경우 '수퍼클래스의 메서드'를 호출한다. (활용은 예제코드 참고)

📝 간단한 퀴즈

1. 클래스 몸체에서 정의할 수 있는 메서드 3종류를 쓰고 간단히 정리해보자.
2. 클래스를 확장할 때의 '상속'과 프로토타입 기반의 '상속'의 차이는 무엇인지 간단히 정리해보자.
3. 다음 코드에서 서브 클래스와 수퍼 클래스 두 쌍을 찾아보자.

class Base {}
class Derived extends Base {}

class MyArray extends Array {
    uniq() {
        return this.filter((v, i, self) => self.indexOf(v) === i);
    }
    average() {
        return this.reduce((pre, cur) => pre + cur, 0) / this.length;
    }
}

🧑🏻‍💻 연관 코드

// super 키워드 활용

class Base {
    constructor(a, b) {
        this.a = a;
        this.b = b;
    }

    saySum () {
        return this.a + this.b ;
    }
}

class Derived extends Base {
    constructor(a, b, c) {
        // super의 호출, 수퍼클래스의 constructor를 호출한다.
        super(a, b);
        this.c = c
    }

    saySum () {
        // super의 참조, 수퍼클래스의 메서드를 호출한다.
        return super.saySum() + this.c; 
    }
}

const derived = new Derived(1, 2, 3);
console.log(derived.saySum()); // 6

[BARAM1NG]

LGTM