ES6 함수의 추가 기능

메서드

ES6 사양에서의 메서드는 메서드 축약 표현으로 정의된 함수만을 의미한다.

const obj = {
	x: 1,
  	foo() {return this.x;},
  	bar: function {return this.x;}
};
console.log(obj.foo()); // 1
console.log(obj.bar()); // 1

위 에서는 foo()는 메서드이고 bar는 일반 함수다.

ES6사양에서 정의한 메서드는 인스턴스를 생성할 수 없다.

new obj.foo() // TypeError: obj.foo is not constructor
new obj.bar() // =>bar {}

즉 ES6사양에서 정의한 메서드는 non-constructor이다.
그래서 ES6사양의 메서드는 프로토타입 프로퍼티도 없고 프로토타입도 생성하지 않는다.

obj.foo.hasOwnProperty('prototype'); // false
obj.bar.hasOwnProperty('prototype'); // true

참고로 표준 빌드인 객체가 제공하는 프로토타입 메서드와 정적 메서드는 모두 non-constructor이다.

화살표 함수

화살표 함수는 non-constructor 함수이다. 그래서 생성자 함수로 사용하지 못하고 오로지 함수로만 사용할 수 있는 익명 함수이다.

const arrow = () => {...};

이런 식으로 사용 할 수 있는데 함수 몸체가 하나의 문으로 구성된다면 함수 몸체를 감싸는 중괄호 {}를 생략 할 수 있다. 이때 함수 몸체 내부의 문이 값으로 평가될 수 있는 표현식인 문이라면 암묵적으로 반환된다.

const arrow = x => x **2;

만약 함수 몸체가 여러개의 문으로 되어 있다면 중괄호{}를 생략 할 수 없다.

화살표 함수는 함수 자체의 this, arguments,super,new.target의 바인딩을 갖지 않는다.

따라서 화살표 함수 내부에서 this, arguments, super,new.target을 참조하면 스코프 체인을 통해 상위 스코프에서 참조한다.

this

this에서 살펴보았듯이 this 바인딩은 함수의 호출 방식에 따라서 동적으로 결정된다. 하지만 이때 주의할 것은 일반 함수로서 호출되는 콜백함수의 경우이다.
고차함수의 인수로 전달되어 고차 함수 내부에서 호출되는 콜백함수도 중첩 함수라고 할 수 있다.

class Prefixer {
	constructor(prefix) {
    	this.prefix = prefix;
    }
  
  add(arr) {
    return arr.map(function(item) {
      return this.prefix + item;
    });
  }
}
const prefixer = new Prefixer('-webkit-');
console.log(prefixer.add(['transition', 'user-select']));

위에 처럼 this.prefix를 참조해서 고차함수에서 출력 하기를 원하는데 이때 this는 인스턴스를 가리키고 있지만 고차함수에 의해 콜백함수가 내부로 들어가 일반 함수로 호출을 한다. 그때의 this는 일반함수로 호출하기 때문에 this가 바뀐다. 그래서 TypeError가 발생한다.

그래서 위에처럼 그냥 map을 돌리지 말고 map에 2번째 인수로 this를 넣어서 하거나 bind 간접 호출 메서드를 사용하거나 아니면 화살표 함수로 사용하면 된다.

화살표 함수는 상위 스코프에서 this를 빌려오기 때문에 인스턴스에 바인딩한 this를 빌려온다.