💡 ES6 함수의 추가 기능

✔ 함수의 구분

• ES6 이전의 모든 함수는 일반 함수로서 호출할 수 있는 것은 물론 생성자 함수로서 호출할 수 있다
• 일반적으로 메서드라고 부르던 객체에 바인딩된 함수 역시 callable 이며, constructor 이다
• 객체에 바인딩된 함수가 constructor라는 것은 protytype 프로퍼티를 가지며, 프로토타입 객체도 생성한다는 것을 의미하기 때문에 성능 면에서도 문제가 있다
• 이를 해결하기 위해 npn-constructor인 ES6의 메서드와 화살표 함수가 등장했다

---

✔ 메서드

• ES6 사양에서 메서드는 메서드 축약 표현으로 정의된 함수만을 의미한다
• ES6 사양에서 메서드는 인스턴스를 생성할 수 없는 non-contructor다. 따라서 생성자 함수로 호출할 수 없다
• ES6 메서드는 자신을 바인딩한 객체를 가리키는 내부 슬롯 [[HomeObject]]를 갖는다
• ES6 메서드가 아닌 함수는 내부 슬롯 [[HomeObject]]를 갖지 않기 때문에 super키워드를 사용할 수 없다

---

✔ 화살표 함수

• 기존의 함수 정의 방식보다 간략하며 내부 동작도 기존 함수보다 간략하다
• 콜백 함수 내부에서 this가 전역 객체를 가리키는 문제를 해결하기 위한 대안으로 유용하다

1. 화살표 함수 정의

1. 함수 정의

• 함수 선언문으로 정의할 수 없고 함수 표현식으로 정의해야 한다

2. 매개변수 선언

• 소괄호 안에 매개변수를 선언한다
• 매개변수가 한 개인 경우 소괄호를 생략할 수 있고, 없다면 생락햘 수 없다

3. 함수 몸체 정의

• 함수 몸체가 하나의 문으로 구성된다면 중괄호를 생략할 수 있디
• 이때 함수 몸체 내부의 문이 값으로 평가될 수 있는 표현식인 문이라면 암묵적으로 반환된다
• 생략과 함께 객체 리터럴을 반환하는 경우 객체 리터럴을 소괄호로 감싸 주어야 한다

2. 화살표 함수와 일반 함수의 차이

• 화살표 함수는 인스턴스를 생성할 수 없는 non-cunstructor다
• 중복된 매개변수 이름을 선언할 수 없다
• 화살표 함수는 함수 자체의 this, arguments, super, new.target 바인딩을 갖지 않는다

3. this

• this 바인딩은 함수의 호출 방식, 즉 함수가 어떻게 호출되었는지에 따라 동적으로 결정된다. 주의할 것은 일반 함수로서 호출되는 콜백 함수의 경우다
• 고차 함수의 인수로 전달되어 고차 함수 내부에서 호출되는 콜백 함수도 중첩 함수라고 할 수 있다

  class Prefixer {
    constructor(prefix) {
      this.prefix = prefix;
    }
  
    add(arr) {
      // add 메서드는 인수로 전달된 배열 arr을 순화하며 배열의 모든 요소에 prefix를 추가한다
      return arr.map(function (item){
        return this.prefix + item; // TypeError
      });
    }
  }
  
  const prefixer = new Prefixer("-webkit-");
  console.log(prefixer.add(['transition', 'user-select']));

• 위 예시에서 Array.prototype.map 메서드가 콜백 함수를 일반 함수로서 호출하기 때문에 this가 전역 객체를 가리키게 된다
• 그런데 클래스 내부의 모든 코드에는 strict mode가 암묵적으로 적용되고, 이 경우 this 에는 undefined가 바인딩된다

4. super

• 화살표 함수는 함수 자체의 super 바인딩을 갖지 않는다
• 따라서 화살표 함수 내부에서 super를 참조하면 상위 스코프의 super를 참조한다

5. arguments

• 화살표 함수는 함수 자체의 arguments 바인딩을 갖지 않는다
• 따라서 화살표 함수 내부에서 arguments를 참조하면 상위 스코프의 arguments를 참조한다

✔ Rest 파라미터

1. 기본 문법

• Rest 파라미터는 함수에 전달된 인수들의 목록을 배열로 전달받는다

  function foo(param, ...rest) {
    console.log(param); // 1
    console.log(rest); // [2, 3, 4, 5]
  }
  
  foo(1, 2, 3, 4, 5);

• Rest 파라미터는 먼저 선언된 매개변수에 할당된 인수를 제외한 나머지 인수들로 구성된 배열이 할당된다

2. Rest 파라미터와 arguments 객체

• arguments 객체는 함수 호출 시 전달된 인수들의 정보를 담고 잇는 순회 가능한 유바 배열 객체이며, 함수 내부에서 지역 변수처럼 사용할 수 있다
• 하지만 arguments 객체는 유사 배열 객체이므로 배열 메서드를 사용하기 번거로웠다. ES6의 Rest 파라미터는 배열로 직접 전달받을 수 있기 때문에 유용하다
• 특히, 화살표 함수에서는 반드시 Rest 파라미터를 사용해야 한다

✔ 매개변수 기본값

• 자바스크립트 엔진은 매개변수의 개수와 인수의 개수를 체크하지 않는다
• 인수가 전달되지 않은 매개변수의 값은 undefined다

  function sum(a = 0, b = 0) {
    return a + b;
  }
  
  console.log(sum(1)); // 1

---