class와 생성자 함수의 차이

생성자 함수와 class는 객체를 찍어내는 공장같은 역할을 한다는 점에서 비슷하다.
똑같지는 않은데, 생성자 함수에 비해 class가 갖는 다른 점을 정리해보았다.

1. new 연산자 없이 호출이 불가능함

// class 생성
class exampleClass {
  constructor(){}
}

// 생성자 함수 생성
function exampleFunc(){}


// 호출
exampleClass(); // Error
exampleFunc();

2. 메서드 열거 불가능 (non-enumerable)

class가 가지는 모든 메서드는 프로퍼티 어트리뷰트 [[Enumerable]]이 false이다.
즉, for...in으로 객체를 순회할 때, 메서드가 대상에서 제외된다.

class example{
  
  constructor(first, second){
    this.first = first;
    this.second = second;
  }
  
  test(){}
}

const exampleClass = new example(1, 2)

for(let key in exampleClass){
  console.log(key) // first, second만 출력
}

3. 엄격모드 적용

클래스 생성자 안 코드 전체에는 자동으로 엄격모드가 적용된다.(use strict)

4. 상속을 위한 키워드 extends와 super

class parent{
  constructor(name){
    this.name = name;
  }
  
  hi(){
    console.log("Hi"); // Hi
  }
}

class child extends parent{
  constructor(name){
    super(name);
  }
  
  hello(){
    console.log("Hello"); // Hello
    super.hi(); // Hi
  }
}

5. 정적 메서드를 위한 키워드 static

정적 메서드는 클래스 이름으로 호출하기 때문에 클래스의 인스턴스를 생성하지 않아도 사용할 수 있다.
단, 정적 메서드는 this를 사용할 수 없으며, 인스턴스로 호출할 수 없다.

정적 메서드는 Math 객체의 메서드처럼 애플리케이션 전역에서 사용할 유틸리티(utility) 함수를 생성할 때 주로 사용한다.

class example{
  constructor(name){
    this.name = name;
  }
  
  static hi(){
    console.log("Hi");
  }
}

example.hi(); // Hi

const exampleClass = new example("sangjo")
exampleClass.hi(); // Error