메서드 축약형? 굳이?

결론

결론부터 말씀 드리자면 굳이 써야합니다

자바스크립트를 써 본 사람이라면 메서드를 한번쯤 사용해 보았을텐데요

const filtered = [1,2,3].filter(e => e < 2); // [1]

대다수의 분들이 필요에 따라 메서드를 정의하여 사용하기도 합니다

const animal = {
	eat: function () {
		console.log('식사를 합니다')
    }
}
 
animal.eat() // 식사를 합니다

다들 아시다시피 프로퍼티의 값이 함수인 경우 그것을 ‘메서드’라고 지칭합니다

ES6의 도입 이후 위 예는 더 간결한 방식으로 정의할 수 있습니다

const animal = {
	eat() {
		console.log('식사를 합니다')
    }
}
 
animal.eat() // 식사를 합니다

훨씬 더 간결해졌죠? 중요한건 바뀐 것이 사용성뿐만이 아니라는건데요 바로 super 키워드 때문입니다. 아래 예시로 살펴보겠습니다

let animal = {
  eat() {
    console.log(`${this.name}가 식사를 합니다`);
  }
};
 
let dog = {
  __proto__: animal,
  name: '강아지',
  eat() {
	super.eat.call(this)
  }
};
 
dog.eat() // 강아지가 식사를 합니다

super 키워드를 사용하여 부모 객체의 메서드를 호출하였습니다 정상적으로 동작하는 것을 확인할 수 있습니다

그럼 이건 어떨까요?

let animal = {
  eat() {
    console.log(`${this.name}가 식사를 합니다`);
  }
};
 
let dog = {
  __proto__: animal,
  name: '강아지',
  eat: function() {
	super.eat.call(this)
  }
};
 
dog.eat() // Uncaught SyntaxError: 'super' keyword unexpected here

메서드를 선언하는 방법만 다를 뿐인데 에러가 발생하는 것을 확인할 수 있습니다 왜 그럴까요?

이유

이유는 바로 내부 슬롯 HomeObect 때문입니다 super 키워드가 부모 객체를 찾아가기 위해선 현재 객체를 알고 있어야 할 필요성이 있습니다 이는 단순히 this를 바인딩하는 것으로 해결되지 않습니다 (참고) 따라서 특수 내부 슬롯을 통해 각 메서드는 현재의 객체를 저장하고 이를 통해 정확히 현재 객체의 부모 객체를 찾아갈 수 있는것이지요

원리는 알겠지만 이것이 선언 방법과 무슨 상관이 있냐구요? 바로 메서드 축약형이 아니면 HomeObject 슬롯이 생성되지 않기 때문입니다 따라서 부모 객체를 찾을 수 있는 방도가 없고 super 키워드를 사용할 수 없다는 에러를 내뱉지요

이는 클래스에서도 마찬가지 입니다

class NoSuper {
    wrongMethod = function () {
        super.method()
    }
}
 
new NoSuper().wrongMethod() // Uncaught SyntaxError: 'super' keyword 

정리

글을 정리하자면 다음과 같습니다.

• super 키워드는 HomeObject 슬롯이 존재해야 사용할 수 있는 문법이다
• ES6 메서드 축약형에서만 HomeObject 슬롯이 생성된다

참고

• 모던 자바스크립트 - 클래스 상속