concised method (ECMAScript 2015)

기존코드

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

 

concised method 적용 코드

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

 

function() 이 ()로 대체되었다. 

 

그런데 이렇게 눈에 보이는 차이점말고 내부적으로 어떤 차이점이 있을까?

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이 생성된 것을 확인할 수 있다. 따라서 생성자 함수가 가능하다.

concised method는  prototype이 없는 것을 확인할 수 있다. 따라서 생성자 함수를 선언할 수 없다.

그 대신 그만큼 가벼워져서 성능이 올라간다.

 

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