15. class

📌 15-1 클래스란?

ES6에서 추가된 새로운 객체 생성 방식으로 클래스 기반 객체지향 언어처럼 사용할 수 있게 만들어논 형식이다.

• 다른 언어의 OOP 개념은 같지만 prototype에 메소드를 연결하는 구조
• 연결된 메소드로 인스턴스를 생성한다.

📌 15-2 클래스의 특징

• new 연산자 없이 호출하면 오류가 발생한다.
• extends, super와 같은 문법을 사용하여 상속을 간결하게 나타낼 수 있다.
• 이름의 첫 문자는 대문자를 사용하는 파스칼 케이스를 사용한다.
• 메소드를 프로토타입으로 연결하여 작성하지 않는다.
• 표현식과 선언문이 가능하다.

// 클래스 선언문
class Student {
    constructor(name) {
        this.name = name;
    }
}
// 인스턴스를 new 연산자를 사용하여 생성
const student = new Student("kim");
// 클래스 안의 프로퍼티를 사용할 수 있음
console.log(student.name);

/*
클래스 표현식
const Student = class {
    constructor(name) {
        this.name = name;
    }
}
*/

📌 15-3 클래스의 요소

클래스의 요소는 constructor (생성자), 프로토타입 메소드, 정적 메소드로 구성되어 있다.

• constructor: 인스턴스를 생성하고 초기화 하는 역할을 수행한다.
• 정적 메소드: 인스턴스를 생성하지 않고 직접 함수를 호출할 수 있다.
• 프로토타입 메소드: 인스턴스를 생성해서 호출할 수 있다.

🧩 클래스 내부 요소의 특징

• constructor의 내부 this는 인스턴스의 프로퍼티가 된다.
• 클래스 안에서 생성한 함수는 클래스의 프로토타입에 추가된다.
• 클래스 메서드 앞에 static 문법을 사용하면 프로토타입에 연결되지 않고 정적 메소드로 사용된다.
• 인스턴스의 프로퍼티는 constructor의 내부에서 정의한다.
• constructor 내부는 public 필드이다.

class Student {
    static name = "Lee";
    static log() {
        console.log(`정적 메소드 결과 = ${this.name}`);
    }
    constructor(name) {
        this.name = name;
    }
    log() {
        console.log(`프로토타입 메소드 결과 = ${this.name}`);
    }
}
const student = new Student("Kim");
// 결과 : 정적 메소드 결과 = Lee
Student.log();
// 결과 : 프로토타입 메소드 결과 = Kim
student.log();

• 정적 메소드 영역과 프로토타입 메소드 영역은 공유하지 않는다.
• 정적 메소드 방식은 객체에 메소드를 추가하는 방식과 같다.

📌 15-4 생성자 함수에서의 정적 메소드 프로토타입 메소드

function Student(age) {
    this.age = age;
}
Student.prototype.log = function() {
    console.log(`프로토타입 메소드 결과 = ${this.age}`);
}
Student.age = 21;
Student.log = function() {
    console.log(`정적 메소드 결과 = ${this.age}`);
}
const student = new Student(30);
// 결과 : 정적 메소드 결과 = 21
Student.log();
// 결과 : 프로토타입 메소드 결과 = 30
student.log();

🧩 생성자 함수와 클래스의 정적 메소드와 프로토타입 메소드 차이

• 생정자 함수에서는 직접 프로토타입에 연결하지만 클래스는 내부의 함수을 사용하면 프로토타입에 자동 연결된다.
• 생성자 함수에서는 직접 일급객체인 함수라는 특성을 사용해서 정적 메소드를 추가하지만 클래스는 static 문법을 지원한다.
• 프로토타입 영역과 정적 영역은 객체의 생성 방식이 다르기 때문에 각자의 영역을 침범하지 않는다.

📌 15-5 public 필드와 private 필드

🧩 public 필드

• constructor 안의 공간은 무조건 pubilc 영역이다.
• pubilc 메소드나 프로퍼티들은 어디서든 참조가 가능하다.

🧩 private 필드

• constructor 밖의 공간도 pubilc 영역이지만 프로퍼티나 메소드에 #을 붙혀주면 private 영역으로 들어가게 된다.
• private 메소드나 프로퍼티들은 클래스 내부에서만 참조가 가능하다.
• private 영역을 사용함으로 캡슐화와 은닉화를 지킬 수 있다.

class Sum {
    // constructor 밖에서 프로퍼티나 메소드에 #을 붙혀주면 private이다.
    #num1 = 10;
    constructor(num2) {
        this.num2 = num2;
    }
    add() {
        // 클래스 내부에서는 private 프로퍼티를 참조할 수 있다.
        return this.#num1 + this.num2;
    }
}

const sum = new Sum(5);
// 결과 : 15
console.log(sum.add());
// 결과 : 5
console.log(sum.num2);
// 결과 : Private field '#num1' must be declared in an enclosing class (참초 불가)
console.log(sum.#num1);