Method definitions - JavaScript | MDN
let user = {
name: "John",
age: 30
};
user.sayHi = function() {
alert("안녕하세요!");
};
user.sayHi(); // 안녕하세요!
// 아래 두 객체는 동일하게 동작합니다.
user1 = {
sayHi: function() {
alert("Hello");
}
};
// 단축 구문을 사용하니 더 깔끔해 보이네요.
user2 = {
sayHi() { // "sayHi: function()"과 동일합니다.
alert("Hello");
}
};
사실 엄밀히 말하면 미묘한 차이가 있다.
콘솔에서 user1과 user2를 입력하여 내부를 들여다보면, 기존 방식은 .prototype 프로퍼티를 가지는 반면, shorthand 방식은 그렇지 않다.
이것은 기존 방식으로 정의한 sayHi는 constructor로서 사용될 수 있지만, 메소드 shorthand 방식은 그렇지 않다는 것을 의미한다(모든 일반 함수는 .prototype 프로퍼티를 가지고, .prototype 프로퍼티를 가져야 constructor로 사용될 수 있다. 그리고 모든 함수는 .prototype 이라는 프로토타입 객체를 가리키는 프로퍼티를 가지는데, 이 프로퍼티는 함수를 constructor로서 사용시 자신의 역할을 하게 된다. ).
예를들어 new user1.sayHi() 는 문제 없이 작동하는 반면, new user2.sayHi()는 오류가 발생한다는 것이다.
자신의 컨텍스트를 갖지 않는 arrow function으로 정의된 메소드나(e.g. foo: () => console.log("This is foo")) class 메소드에서도 method shorthand 방식과 같이 .prototype 프로퍼티를 갖지 않는다고 한다. 즉 method shorthand 방식이 좀더 클래스에 가까운 메소드 정의 방식이라고 볼 수 있다.
Why does a method using the shorthand method syntax not contain a prototype object
그리고 super의 경우 shorthand(class포함) 방식에서만 사용이 가능하다(function 키워드 방식으로 정의한 메소드에서 super 사용 시 에러 발생)
super.prop and super[expr] expressions are valid in any method definition in both classes and object literals. 라고 설명되어 있고, 여기서 method definition이 shorthand 방식을 의미한다.What is the difference between object method and shortened object method syntax in javascript?
그러나 대부분의 경우에서 유의미한 차이가 생기는 경우는 없고 보통 shorthand 방식이 더 선호된다고 한다.
prototype 프로퍼티에 정의되며, 따라서 new 연산자를 통해 인스턴스가 생성되면 인스턴스는 프로토타입을 통해 해당 메소드에 접근할 수 있다(즉 [[Prototype]] 프로퍼티를 통해)처음에 “함수인 프로퍼티는 메소드” 라고 설명을 했는데, 그것도 맞는 말이긴 하지만, 이렇게 설명하면 용어에 좀 혼동이 오는 듯 하다. 왜냐하면 MDN Method definition은 shorthand 방식을 의미하고, 프로퍼티 방식과 구분하고 있기 때문이다. 그리고 스택오버플로우 답변 등에서도 프로퍼티와 메소드를 구분하여 사용하는 경우가 많았다.
prop1: function () / prop1: () => {} - 요런 식으로 콜론을 사용하는 방식은 function property 방식이라고 볼 수 있다. 즉 엄밀히 말하면 메소드가 아니라 프로퍼티 방식인것. 프로퍼티에 함수를 할당하는.