[Javascript] 자바스크립트 클래스

ES6에서 도입된 클래스는 기존 프로토타입 기반 객체지향 프로그래밍보다 자바나 C#과 같은 클래스 기반 객체지향 프로그래밍에 익숙한 프로그래머가 더욱 빠르게 학습할 수 있도록 클래스 기반 객체지향 프로그래밍 언어와 매우 흡사한 새로운 객체 생성 메커니즘 이다.

 

클래스는 생성자함수와 매우 유사하게 동작하지만 다음과같은 차이점이 있다.

• 클래스를 new 연산자 없이 호출하면 에러가 발생한다. 하지만 생성자 함수를 new 연산자 없이 호출하면 일반 함수로서 호출된다.
• 클래스는 상속을 지원하는 extends와 super키워드를 제공한다. 하지만 생성자 함수는 extends와 super 키워드를 지원하지 않는다.
• 클래스는 호이스팅이 발생하지 않는 것처럼 동작한다. 하지만 함수 선언문으로 정의된 생성자 함수는 함수 호이스팅이, 함수 표현식으로 정의한 생성자 함수는 변수 호이스팅이 발생한다.
• 클래스 내의 모든 코드에는 암묵적으로 strict mode가 지정되어 실행되며 strict mode를 해제할 수 없다. 하지만 생성자 함수는 암묵적으로 strict mode 가 지정되지 않는다.
• 클래스의 constructor, 프로토타입 메서드, 정적 메서드는 모두 프로퍼티 어트리뷰트 [[Enumerable]]의 값이 false이다. 다시말해 열거되지 않는다.

따라서 클래스를 프로토타입 기반 객체 생성 패턴의 단순한 문법적 설탕으로 보기보다는 새로운 객체 생성 메커니즘으로 보는것이 좀 더 합당하다.

 

class는 object를 뽑아내는 기계와 같다.

만약 과일에 대한 정보를 구성하는데 다음과 같은 정보가 필요해서 모두 타이핑했다고 해보자

let apple = {
  name: "apple",
  price: 2000,
};

let peach = {
  name: "peach",
  price: 3000,
};

몇개는 괜찮겠지만 수백개라면 손이 매우 아플것같다.

 

그래서 기본적인 class로 기본적인 틀을 만들고 해당 틀을 상속받는 개념을 사용하면 조금 쉽다.

class Fruit {
  constructor(name, price) {
    this.name = name;
    this.price = price;
  }
}

let apple = new Fruit("apple", 2000);
let peach = new Fruit("peach", 3000);

하드코딩으로 직접 모두 만들어야 하던것을 간단하게 만들었다.

사실 지금도 이게 효율적인가? 싶겠지만 속성이 훨씬 많아질수록, 데이터 수가 많을 수록 효율적이란 것을 생각할 수 있다.