14. 클래스

14-1. 객체지향 프로그래밍 소개

14-1-1. 객체지향 프로그래밍의 개념

14-2. 클래스 정의

14-2-1. 클래스의 개념

14-2-2. 클래스 기본 문법

class ClassName {
    constructor() { }
    method1() { }
    method2() { }
}

• ClassName: 클래스의 이름을 나타낸다. 클래스 이름은 일반적으로 단어의 첫 글자를 대문자로 표현하는 파스칼 케이스(Pascal Case)를 사용한다.

• constructor: 클래스의 생성자를 나타내며, 생성하려는 객체의 프로퍼티를 초기화하는 역할을 한다. 클래스 내부에서 단 한 개만 존재할 수 있고 생략 가능하다.

• method1, method2: 클래스의 메서드를 나타내며, 생성된 객체의 동작을 표현하는 역할을 한다. 클래스 내부에서 0개 이상 존재할 수 있다.

class ClassName { }

const instance = new ClassName();
console.log(instance); // ClassName {}

class ClassName { }

const instance = ClassName();
// TypeError: Class constructor ClassName cannot be invoked without 'new'

const ClassName = class { };

14-2-3. 클래스와 객체에 관한 오해

class 붕어빵틀 { }

const 붕어빵 = new 붕어빵틀();

14-2-4. 클래스 호이스팅

console.log(Animal); // ReferenceError: Animal is not defined

class Animal { }

const Animal = 'animal';

{
    console.log(Animal); // ReferenceError: Cannot access 'Animal' before initialization

    class Animal { }
}

console.log(MyClass); // undefined
const instance = new MyClass(); // TypeError: MyClass is not a constructor

var MyClass = class { }

14-3. 메서드

14-3-1. 메서드의 종류

• constructor

• 프로토타입 메서드

• 정적 메서드

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

class Car {
    constructor() { }
    consturctor() { } // SyntaxError: A class may only have one constructor
}

class Car {
    constructor(name, color) {
        this.name = name;
        this.color = color;
    }
}

const myCar = new Car('Grandeur', 'black');
console.log(myCar); // Car {name: 'Grandeur', color: 'black'}

class Car {
    constructor(name, color) {
        this.name = name;
        this.color = color;
    }

    // 프로토타입 메서드
    getInfo() {
        console.log(`Name: ${this.name}, Color: ${this.color}`);
    }
}

const myCar = new Car('Grandeur', 'black');
myCar.getInfo(); // Name: Grandeur, Color: black

class Car {
    constructor(name, color) {
        this.name = name;
        this.color = color;
    }

    // 프로토타입 메서드
    getInfo() {
        console.log(`Name: ${this.name}, Color: ${this.color}`);
    }

    // 정적 메서드
    static drive() {
        console.log('Driving...');
    }
}

const myCar = new Car('Grandeur', 'black');
Car.drive(); // Driving...
myCar.drive(); // TypeError: myCar.drive is not a function

• 프로토타입 메서드는 인스턴스로 호출하지만, 정적 메서드는 클래스로 호출한다.

• 프로토타입 체인이 다르다. 따라서, 인스턴스로는 정적 메서드를 호출할 수 없다.

14-3-2. private 프로퍼티와 메서드

class Car {
    constructor(name, color) {
        this.name = name;
        this.color = color;
    }

    getInfo() {
        console.log(`Name: ${this.name}, Color: ${this.color}`);
    }
}

const myCar = new Car('Grandeur', 'black');

// 외부에서 인스턴스 프로퍼티 참조
console.log(myCar.name); // Grandeur
console.log(myCar.color); // black

// 외부에서 프로토타입 메서드 참조
myCar.getInfo(); // Name: Grandeur, Color: black

// 외부에서 프로퍼티 값 수정
myCar.name = 'K9';
console.log(myCar.name); // K9

myCar.getInfo(); // Name: K9, Color: black

class Car {
    #name;
    color;

    constructor(name, color) {
        this.#name = name;
        this.color = color;
    }

    getName() {
        return this.#name;
    }

    setName(name) {
        this.#name = name;
    }
}

const myCar = new Car('Grandeur', 'black');

console.log(myCar.getName()); // Grandeur
myCar.setName('K9');

// 외부에서 private 프로퍼티에 접근하여 수정할 수 없다.
// SyntaxError: reference to undeclared private field or method #name
// console.log(myCar.#name);
// myCar.#name = 'K9';
console.log(myCar.getName()); // K9

14-4. 클래스의 상속과 확장

14-4-1. extends 키워드

// 부모(슈퍼) 클래스
class Animal { }

// 자식(서브) 클래스
class Lion extends Animal { }

14-4-2. super

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

    run() {
        console.log(`${this.name} is running.`);
    }
}

class Lion extends Animal {
    constructor(name, age) {
        super(name);
        this.age = age;
    }
}

const babyLion = new Lion('Simba', 2);
babyLion.run(); // Simba is running.

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

    run() {
        console.log(`${this.name} is running.`);
    }
}

class Lion extends Animal {
    constructor(name, age) {
        // ReferenceError
        this.age = age;
        super(name);
    }
}

class Tiger {
    constructor() {
        // SyntaxError: 'super' keyword unexpected here
        super();
    }
}