생성자 함수 vs 클래스

자바스크립트에서 객체를 생성하는 방법으로는
객체 리터럴, Object 생성자 함수, 생성자 함수, Object.create 메서드, 클래스가 있다.
그 중 인스턴스를 생성하는 방식이 비슷한 생성자 함수와 클래스를 비교하려고 한다.

클래스는 ES6에서 도입된 객체 생성 메커니즘이다.

1. 객체 생성 방법

둘 다 new 연산자를 사용하여 객체를 생성해야한다. 만약 new 연산자를 생략하게 되면, 생성자 함수는 일반 함수로 호출되고 클래스는 타입 에러가 발생한다.

2. 상속

둘 다 상속이란 개념이 존재한다. 생성자 함수는 프로토타입의 체인에서 인스턴스가 프로토타입의 프로퍼티를 상속받는거고 클래스는 extends 키워드를 통해 클래스 상속에 의해 확장되는 개념이다.

3. 호이스팅

둘 다 호이스팅이 된다. 하지만 클래스는 let, const 키워드처럼 호이스팅이 발생하지 않는 것처럼 동작한다. 생성자 함수는 함수 선언문으로 정의 했을 때는 함수 호이스팅이, 함수 표현식으로 정의 했을 때는 변수 호이스팅이 된다.

4. strict mode

생성자 함수는 암묵적 strict mode가 지정되지 않지만, 클래스는 클래스 내의 모든 코드에 암묵적 strict mode가 지정되어 실행되며 해제할 수 없다.

5. 정의

클래스의 경우는 class 키워드 뒤에 클래스명을 넣어 클래스를 정의한다. 생성자 함수는 보통 function 함수명 하여 정의한다.

6. 내부에 정의 할 수 있는

생성자 함수에는 인스턴스 프로퍼티, 프로토타입 메서드, 정적 메서드를 정의할 수 있고, 클래스는 클래스 안에 안에 오직 메서드만 올 수 있다. 메서드 종류로는 constructor, 프로토타입 메서드, 정적 메서드가 있으며 인스터스 프로퍼티값들은 constructor 안에 꼭 선언해줘야한다.

7. 선언 방식

둘 다 선언문, 표현식을 사용할 수 있다. 생성자함수는 선언 방식에 따라 호이스팅이 달라지는 것을 기억하자.

8. constructor

생성자 함수에서 constructor은 생성자 함수의 프로토타입이 가지고 있는 프로퍼티이고, 클래스에서는 인스턴스를 생성하고 초기화하기 위한 특수한 메서드이다. 특수한 메서드라서 이름을 임의로 바꿀 수 없다. 클래스안에서 constructor은 꼭 한 개만 존재 가능하며, 2개 이상이되면 문법에러가 발생한다.

9. 프로토타입 메서드

생성자 함수에서의 프로토타입 메서드를 만드려면 명시적으로 추가해줘야한다. 클래스에서는 클래스 몸체에 메서드로 정의하면 자바스크립트 엔진이 자동으로 프로토타입 메서드로 만들어준다.

10. 정적 메서드

생성자 함수에서 정적 메서드를 만드려면 생성자 함수 몸체에 명시적으로 추가해줘야한다. 클래스에서는 몸체에 static 키워드를 사용하여 메서드를 정의하면 정적 메서드로 생성된다.

11. 정적 메서드 호출

생성자 함수에서 정적 메서드를 호출하려면 생성자 함수 자체에서 호출하면된다. 클래스에서는 클래스로 호출해주면된다.
ex) 생성자함수명.정적메서드명 / 클래스명.정적메서드명