#16. Class Syntax(1)

이번 시간에는 객체 지향 프로그래밍의 꽃인 클래스 문법에 대해 알아보도록 하자.

1. Class
클래스 문법을 프로토타입 문법과 비교해보자.
일단 아래는 프로토타입 문법으로 짠 코드이다.

---prototype

function Book(title, author, year) {
    this.title = title;
    this.author = author;
    this.year = year;
}

Book.prototype.getSummary = function () {
    return `${this.title} was book`;
};

const book1 = new Book('up', 'john', 2021);

위와 동일한 코드를 class를 이용해서 만들어보겠다.

class Book { // 클래스는 일반적으로 대문자로 시작하게 이름 짓는다.
    constructor(title, author, year) {
        this.title = title;
        this.author = author;
        this.year = year
    }
    
    getSummary() {
    	return `${this.title} was book`;
    }
    
    /*  
     *  메소드는 위처럼 간결하게 쓸 수 있다.
     *
     *  getSummary = function() {
     * 	  return `${this.title} was book`;
     *  }
     */
}

const book1 = new Book('up', 'john', 2021)

prototype을 이용한 방법은 생성자 함수와 프로토타입이 분리되어 있었는데, class를 이용해 이것들을 묶을 수 있다.
그리고 클래스 안에서는 prototype을 명시하지 않아도 자바스크립트가 알아서 처리해주기 때문에 코드가 간결해진다.

프로토타입 문법을 잘 이해했다면, 클래스 문법도 어렵지 않을거다.
클래스 문법이 더 간결하기 때문에 개인적으로는 클래스 문법을 사용하는 것을 추천한다.

마무리하기 전에 한 가지 더 소개하고 싶은 것이 있다.

---

2. Static method
자바스크립트에서 메소드는 크게 두 가지가 있다.
첫 번째는 우리가 계속 써온 prototype을 이용한 인스턴스 메소드이다.
위의 getSummary가 이에 해당한다. 생성된 자식 객체가 접근 가능하다는 점이 static 메소드와 구별되는 특징이다.

두 번째는 static 메소드이다. static 메소드는 instance 메소드와 달리 생성된 객체가 호출할 수 없다.
생성자 함수만이 static 메소드를 호출할 수 있다.
사실 static 메소드를 쓸 일이 많이 없다고 생각한다. 그냥 이런게 있다 정도만 보고 넘어가도 좋다.

class Book { 
    constructor(title, author, year) {
        this.title = title;
        this.author = author;
        this.year = year
    }
    
    getSummary() {
    	return `${this.title} was book`;
    }
    
    static getTopBookStore() {
    	return '교보문고'
    }
}

const book1 = new Book('up', 'john', 2021)

선언은 static 키워드를 앞에 붙여서 선언하면 된다.

사용은 Book을 이용해 호출하면 된다.

Book.getTopBookStore() // '교보문고'
book1.getTopBookStore() // error. 자식 객체에서는 접근할 수 없다.

마지막으로 prototype문법에서 static 메소드를 정의하는 방법을 소개하고 포스트를 마무리 해야겠다.

function Book(title, author, year) {
    this.title = title;
    this.author = author;
    this.year = year;
}

Book.getTopBookStore = function () {
    return `교보문고`;
};

Book.getTopBookStore() // '교보문고'

---

오늘은 class 문법과 static 메소드를 소개했다. class 문법을 사용하더라도
자바스크립트에서 클래스는 프로토타입을 기반으로 동작한다는 사실을 기억했으면 한다.

다음에는 클래스 문법으로 상속하는 방법에 대해 소개해보겠다.