# 클래스(class)

자바스크립트는 프로토타입 기반(prototype-based) 객체지향 언어다. 프로토타입 기반 프로그래밍은 클래스가 필요없는(class-free) 객체지향 프로그래밍 스타일로 프로토타입 체인과 클로저 등으로 객체 지향 언어의 상속, 캡슐화(정보 은닉) 등의 개념을 구현할 수 있다.

하지만 클래스 기반 언어에 익숙한 프로그래머들은 프로토타입 기반 프로그래밍 방식이 혼란스러울 수 있으며 자바스크립트를 어렵게 느끼게하는 하나의 장벽처럼 인식되었다.

ES6에서 추가된 **클래스(class)**는 기존 프로토타입 기반 객체지향 프로그래밍보다 클래스 기반 언어에 익숙한 프로그래머가 보다 빠르게 학습할 수 있는 단순명료한 새로운 문법을 제시하고 있다.

# 클래스(class) vs 생성자 함수(constructor function)

// ES5 생성자 함수
const User = function(name, age){
  this.name = name;
  this.age = age;
  this.showName = function(){
    console.log(this.name);
  };
};

const mike = new User('Mike', 30);

위와 같이 ES5에서는 생성자 함수와 프로토타입, 클로저를 사용하여 객체 지향 프로그래밍을 구현하였다. ES6에서는 아래와 같이 클래스를 통해 객체 지향 프로그래밍을 구현한다.

// ES6 클래스
class User2 {
  constructor(name, age){
    this.name = name;
    this.age = age;
  };
  showName(){
    console.log(this.name);
  };
};

const tom = new User2('Tom', 19);

위 두개의 코드는 같은 코드이다. 하지만 몇 가지 차이점이 발생한다.

• 클래스 바디에 정의된 메소드(위에 showName)는 클래스의 프로토타입에 저장된다. 기존 생성자 함수를 통해 생성된 객체는(mike)는 객체 내부에 name,age,showName을 가지고 있고 클래스로 생성한 객체는 객체 내부에 name,age를 가지고 있고 showName은 프로토타입 객체에서 상속받는다.
• 클래스는 객체 생성 시 new 키워드를 붙이지 않으면 에러가 발생한다. 기존 생성자 함수 사용 시에는 객체 생성 시 new 키워드를 붙이지 않아도 에러가 발생하지 않는다. 단, 생성 된 객체는 undefined를 반환한다. 왜냐하면 new 키워드로 객체를 생성하지 않았기 때문이다.
• 클래스는 constructor 프로퍼티에 class라고 명시되어 있고 기존 생성자 함수는 함수명만을 가지고 있다.

위에 생성자 함수 코드를 아래와 같이 수정하면 클래스와 같이 showName메서드를 프로토타입 객체에서 상속받는다.

const User = function(name, age){
  this.name = name;
  this.age = age;
};

User.prototype.showName = function(){
  console.log(this.name);
};

const mike = new User('Mike', 30);

# 클래스 정의 (Class Definition)