[MJS] ES6 함수 추가 기능

Javascript 개념

모던 자바스크립트 딥 다이브 정리

ES6 함수 추가 기능

ES6 함수의 구분

ES6 이전의 모든 함수는 일반 함수와 생성자 함수로서 둘 다 호출할 수 있다. (callable 이면서 constructor 이다.)

constructor이기 때문에 prototype 프로퍼티를 가지고, 프로토타입 객체도 생성하여 실수를 유발하고 성능에도 좋지 않다.

• ES6 이후
  함수를 사용 목적에 따라 세 가지 종류로 구분

  ES6 함수의 구분	constructor	prototype	super	arguments
  일반 함수(Normal)	O	O	X	O
  메서드(Method)	X	X	O	O
  화살표 함수(Arrow)	X	X	X	X

  일반 함수: 함수 선언문/함수 표현식으로 정의한 일반 함수로 ES6 이전의 함수와 동일, constructor이다.
  
  메서드: ES6 이후 규정, 메서드 축약 표현으로 정의된 함수, constructor가 아니다.
  
  화살표 함수: this문제를 보완한 간결한 함수, constructor가 아니다.
  

메서드

ES6 이전에는 객체에 바인딩된 함수를 메서드라고 했지만, ES6 사양에서 규정된 정의는 객체에서 메서드 축약 표현으로 정의된 함수를 뜻한다.
메서드로서의 기능 super를 추가하고 constructor를 제거한 함수이다.

const obj = {
  x: 1,
  // foo는 메서드이다.
  foo() {
    return this.x;
  },
  // bar에 바인딩된 함수는 메서드가 아닌 일반 함수이다.
  bar: function () {
    return this.x;
  },
};

console.log(obj.foo()); // 1
console.log(obj.bar()); // 1

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

객체에 바인딩된 함수는 메서드가 아닌 일반 함수이다.

메서드는 non-constructor이기 때문에 인스턴스를 생성할 수 없다.

ES6 메서드는 자신을 바인딩한 객체를 가리키는 내부 슬롯 [[HomeObject]]를 갖는다. super 키워드를 이용한 참조가 이 내부 슬롯을 사용하여 super 클래스의 메서드를 참조한다.

따라서, 메서드 정의 시 프로퍼티 값에 함수를 할당하는 ES6 이전 방식을 사용하지 않는 것이 좋다.

화살표 함수

기존의 함수보다 간략한 함수이다. (정의 방식 및 내부 동작)
콜백 함수 내부에서 this가 전역 객체를 가리키는 문제를 보완한 함수이다.

• 일반 함수와 화살표 함수의 차이

  1. 화살표 함수는 non-constructor이다.

     → 인스턴스를 생성할 수 없으며 prototype 프로퍼티도 없고, 프로토타입도 생성하지 않는다.

  2. 중복된 매개변수 이름을 선언할 수 없다.

     → 일반 함수는 매개변수에 중복된 이름을 선언해도 오류가 나지 않지만, 화살표 함수에서는 에러가 발생한다.

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

     → 화살표 함수 자체의 this, arguments, super, [new.target] 바인딩을 갖지 않기 때문에 이 키워드들을 참조하면 스코프 체인을 통해 상위 스코프(가장 가까운 화살표 함수가 아닌 함수)의 this, arguments, super, new.target를 참조한다.

• 화살표 함수에서의 this

  콜백 함수(중첩 함수) 사용 시 this 바인딩에 관한 문제를 해결하기 위해 화살표 함수가 도입되었다.

  일반 함수에서의 this는 전역 객체를 가리키고, strict mode일 시 undefined가 바인딩된다.

  따라서, 일반 함수를 콜백 함수로 사용할 때 콜백 함수를 감싸는 함수의 this를 참조하지 못한다.

  그래서 ES6 이전에는 상위 함수에 that을 선언하여 this를 할당하고, that을 콜백 함수(일반 함수) 안에 사용하는 방식을 사용했다.

  화살표 함수에서는 자체 this 바인딩을 갖지 않기 때문에 자동으로 상위 함수(화살표 함수가 아닌)의 this를 스코프 체인을 통해 참조할 수 있다.(이를 lexical this라고 한다.)

  화살표 함수는 자체 this 바인딩이 존재하지 않기 때문에 call, apply, bind 메서드를 사용해도 this를 교체할 수 없고, 언제나 상위 함수의 this 바인딩을 참조한다.

• 화살표 함수에서의 super

  super도 마찬가지로 화살표 함수 내부에서 super를 참조하려면 상위 스코프의 super를 참조한다.

• 화살표 함수에서의 arguments arguments 또한 화살표 함수 자체의 arguments 바인딩은 없고, 상위 스코프의 arguments를 참조한다. 따라서 화살표 함수에 전달된 인수 목록을 확인할 때는 rest 파라미터를 사용한다.

Rest 파라미터

나머지 매개변수는 매개변수 이름 앞에 …을 붙여 정의한 매개변수이다.
함수에 전달된 인수들의 목록을 배열로 전달받는다.

Rest 파라미터는 반드시 마지막 파라미터여야 한다.

arguments는 유사 배열이기 때문에 배열 메서드 사용 시 Array.prototype.slice.call(arguments)를 사용해야 하지만,

Rest 파라미터를 사용하면 인수 목록을 배열로 전달받기 때문에 바로 배열 메서드를 사용할 수 있다.