메서드란 무엇일까?

개요

JavaScript라는 언어가 가지는 독특한 특징이 있다. 바로 자바스크립트는 대체로 '객체'로 구성되어 있다는 점이다. 앞서 표현식 포스팅에서도 다뤘듯, 함수 또한 자바스크립트는 객체로 다루어 지며, 그중에서도 '일급 객체' 이므로 값으로 취급 받을 수 있다.
자바스크립트의 객체는 프로퍼티 키와 값으로 구성되어지는데, 이때 값에는 말그대로 JavaScript에서 평가 되어지는 모든 값을 담을 수 있다. 함수또한 그러하다.
이때, 프로퍼티의 값이 함수일때, 이 프로퍼티를 우리는 메서드(method)라 부른다.

Method
객체의 프로퍼티 값이 함수인 프로퍼티.
상태 데이터를 참조하고, 조작 할 수 있는 동작의 역할을 가진다.
-Javascript DeepDive 중

메서드 정의

const obj = {
  
  f1 : function() {
    console.log("hi!");
  }
}

obj.f1(); // "hi!"

다른 프로퍼티를 정의할때와 동일하게, 프로퍼티 값으로 function(){} 의 형태로 함수를 선언한다. 이전의 표현식에서 다루었듯이, 이때의 함수 선언문은 피연산자에 위치하므로 함수명 없이 선언 할수 있다.

ES6에서 추가된 새로운 메서드의 정의

const obj = {
  f1() {
    console.log("hi!");
  }
}

obj.f1(); // "hi!"

ES6에서는 다음과 같이 메서드를 정의할때, function키워드와 키와 값을 구분하는 : 를 생략한 축약 표현을 사용할수 있다.
그리고 중요한점은, 이렇게 정의된 메서드는 기존의 메서드와 다르게 동작한다는 것이다!

사실, ES6 이전 사양에서는 메서드는 객체에 바인딩된 함수를 일컫는 의미일뿐, 명확하게 메서드에 대한 정의가 없었다. 하지만 ES6 사양에서부터는 메서드에 대한 정의가 명확하게 규정되었고,
위의 두가지 버전의 메서드 중, 아래와 같이 축약표현으로 정의된 함수만을 메서드라 부른다.

그렇다면, 저 둘은 어떠한 차이가 있는걸까?
두가지 방식으로 함수를 객체에 담아보고, 호출해보자.

const obj = {
 f1 : function () {
   console.log("hi!")
 },
 f2(){
   console.log("hi!")   
 }
}
obj.f1(); // "hi!"
obj.f2(); // "hi!"

이렇게만 보았을땐, 둘의 차이는 존재하지 않는것으로 보인다.

non-constructor

하지만 이들의 가장 큰 차이점으로, 축약표현으로 정의된 함수 (이하 ES6 메서드)는 non-constructor이다. 즉, 인스턴스를 생성할 수 없는 함수 객체이다. 그러기 때문에 prototype 프로퍼티또한 가지지않고, 프로토타입을 생성하지 못한다.

const obj = {
 f1 : function () {
   console.log("hi!")
 },
 f2(){
   console.log("hi!")   
 }
}

const function1 = new obj.f1
const function2 = new obj.f2 // Uncaught TypeError: obj.f2 is not a constructor

super 키워드 사용가능

ES6 메서드는 자신을 바인딩한 객체를 가리키는 내부 슬롯, [[HomeObject]]를 갖는다. super 키워드는 해당 슬롯을 참조하여 수퍼클래스의 메서드를 참조한다. 그러므로 ES6는 super 키워드를 사용하여 자신의 수퍼클래스를 참조할수 있다.

다만, 아직 [[HomeObject]], 수퍼클래스, 와 같은 것에 대한 이해가 부족하여 설명은 여기까지 하도록 하겠다.

어떤 방식으로 메서드를 만들어야할까?

JavaScript DeepDive p473에서는 ES6 메서드에 들어서며, 본연의 기능을 갖추게되고, 의미적으로 맞지 않는 constructor와 같은 기능을 제거했기 때문에, 축약표현으로 정의된 ES6 메서드로서의 사용을 권장하고 있다. 아직 해당부분에 대한 이해가 부족하다고 생각해, 추가적인 공부나 논의가 필요해보인다.