결론부터 말씀 드리자면 굳이 써야합니다
자바스크립트를 써 본 사람이라면 메서드를 한번쯤 사용해 보았을텐데요
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]] 슬롯이 생성된다
