[자바스크립트] concised method 간결한 메서드

ES6에서 제공하는 간결한 메서드를 제공해준다.

1. function 키워드 제거

var obj = {
  name: 'foo',
  getName: function () { return this.name }
}

기존에 이렇게 쓰던 것이

const obj = {
  name: 'foo',
  getName () { return this.name }
}

위와 같이 간단하게 바뀌었다.

 

2. 축약형 메소드는 생성자 함수 제한

기존에 함수는 2가지 역할을 했다. 그냥 함수로서 생성자 함수로서 기능을 했지만 함수를 축약하면 생성자 함수 기능을 사용할 수 없다.

const obj = {
  name: 'foo',
  getName () { return this.name },
  getName2: function () { return this.name }
}

const a = new obj.getName2(); // 정상 작동

const b = new obj.getName(); // typeError : obj.getName is not a constructor

 

다음과 같이 에러가 나는 것을 확인할 수 있다. 그렇다면 왜 그럴까?

기존 방식인 getName2는 prototype이 생성된 것을 확인할 수 있다. 따라서 생성자 함수가 가능했는데 ES6에서 제공하는 것은 prototype이 없는 것을 확인할 수 있다. 따라서 생성자 함수를 선언할 수 없다. 그 대신 그만큼 가벼워져서 성능이 올라간다.

 

3. super 명렁어로 상위 클래스에 접근 가능

const Person = {
  greeting () { return 'hello' }
}
const friend = {
  greeting () {
    return 'hi, ' + super.greeting()
  }
}
Object.setPrototypeOf(friend, Person)
friend.greeting()	// 	"hi, hello"

다음과 같이 setPrototypeOf를 하게 되면 friend의 프로토타입이 Person이 된다. 기존에는 마땅히 상위 객체를 접근하는데 this.__proto__로 찾아가야 했는데 그것을 super로 대체되었다.

 

출처

• developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Functions/Method_definitions