Javascript ES6 메서드 축약 표현

Javascript의 메소드 선언방식은 ES5와 ES6가 다르다. 현재 ECMAScript 사양에서는 ES5의 방식은 메소드로 인정하지 않으며, 오로지 ES6 방식만을 메소드로 인정한다.

해당 포스팅에서는 예제를 통해 두 방식의 차이를 비교하고자 한다.

메소드 축약 표현

1. ES5 메소드 표현

ES5에서 메소드를 선언하려면 프로퍼티 값으로 함수 선언식을 할당한다.

// ES5
var obj = {
  name: 'Lee',
  // 프로퍼티 sayHi의 값으로 할당된 것은 일반 함수(constructor)로 정의된 함수이다.
  // 현재 ECMAScript 사양에서 메서드로 인정되지 않는다.
  sayHi: function() {
    console.log('Hi! ' + this.name);
  }
};

obj.sayHi(); // Hi! Lee

// ES5의 메서드 선언 방식은 현재 ECMAScript 사양에서는 일반 함수로 정의된다.
// 일반 함수는 constructor이므로 new로 인스턴스를 생성할 수 있다.
new obj.sayHi(); // sayHi {}

2. ES6 메소드 축약 표현

• ES6에서는 메소드를 선언할 때, function 키워드를 생략한 축약 표현을 사용할 수 있다.
• 현재 ECMAScript에서는 ES6 메서드 축약표현만 메서드로 인정한다.

// ES6 메서드 축약표현만 메서드로 인정된다.
const obj = {
  name: 'Lee',
  // 메소드 축약 표현
  sayHi() {
    console.log('Hi! ' + this.name);
  }
};

obj.sayHi(); // 일반함수 호출: Hi! Lee
// 메소드는 non-constructor이므로 생성자 함수로 호출할 수 없다.
new obj.sayHi(); // Uncaught TypeError: obj.sayHi is not a constructor