26장. ES6 함수의 추가 기능

📁 함수의 구분

• ES6 이전의 모든 함수는 일반함수, 생성자 함수 호출이 가능. ( callable, constructor )
• ES6 이전 모든 함수는 사용목적에 따라 명확한 구분이 없으므로 호출 방식에 특별한 제약이 없고 생성자 함수로 호출되지 않아도 프로토타입 객체를 생성함. ( 혼란스러우며 실수 유발 가능성, 불필요한 프로토타입 객체 생성으로 성능에도 좋지 않음 )
• ES6에서는 이러한 문제를 해결하기 위해 사용 목적에 따라 세 가지 종류로 명확히 함수를 구분.

메서드

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

• ES6 사양에서 정의한 메서드는 인스턴스를 생성할 수 없는 non-constructor 임.

• 메서드는 인스턴스를 생성할 수 없으므로 prototype 프로퍼티가 없고 프로토타입도 생성하지 않음.

• ES6 메서드는 자신을 바인딩한 객체를 가리키는 [[HomeObject]] 내부 슬롯을 갖음. ( super 참조는 [[HomeObject]] 내부 슬롯을 사용하여 수퍼클래스 메서드를 참조하므로, ES6 메서드는 super 키워드 사용이 가능 )

  const obj = {
    x: 1,
    foo() { return this.x; }
  }
  
  new obj.foo();  // TypeError: obj.foo is not a constructor

📁 화살표 함수

• 화살표 함수는 콜백 함수 내부에서 this가 전역 객체를 가리키는 문제의 해결 대안으로 유용함.

1. 화살표 함수의 정의

const arrow = (x, y) => x * y;

const arrow = (x, y) => { ... };

const arrow = x => { ... };

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

const arrow = x => { return x ** 2 };

const arrow = () => const x = 1;  // SyntaxError: Unexpected token 'const'
const arrow = () => { return const x = 1; };  // 이렇게 해석 됨.

// 함수 몸체의 문이 표현식이 아닌 문 이라면 중괄호를 생략할 수 없음.
const arrow = () => { const x = 1; };

// 객체 리터럴 반환의 경우 소괄호로 감싸주어야 함
const arrow = (id, content) => ({ id, content });

// 즉시 실행함수 사용 가능
const person = (name => ({
  sayHi() { return `Hi! {name}` }
}))('Kim');

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

• 인스턴스를 생성할 수 없는 non-constructor 임.
• 중복된 매개변수 이름을 선언할 수 없음.

  const arrow = (a, a) => a + a;
  // SyntaxError: Duplicate parameter name not allowed in this context

• 함수 자체의 this, arguments, super, new.target. 바인딩을 갖지 않음.
  (화살표 함수 내부에서 참조하면 스코프 체인을 통해 상위 스코프의 것을 참조함)

3. this

• 화살표 함수와 일반 함수의 this는 다르게 동작함.
• 화살표 함수는 함수 자체의 this 바인딩을 갖지 않음. 따라서 화살표 함수 내부에서 this를 참조하면 상위 스코프의 this를 그대로 참조함 ( lexical this ).
• 마치 화살표 함수의 this가 함수가 정의된 위치에 의해 결정되는 것 처럼 동작.

4. super

• this와 마찬가지로 상위 스코프의 super를 참조.

5. arguments

• this와 바찬가지로 상위 스코프의 arguments를 참조.

📁 Rest 파라미터

기본 문법

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

• Rest 파라미터는 반드시 마지막 파라미터여야 함.

• Rest 파라미터는 함수 객체의 length 프로퍼티(함수 정의 시 선언한 매개변수 개수)에 영향을 주지 않음.

  function foo(...rest) {
    // 매개변수 rest는 인수들의 목록을 배열로 전달받는 Rest 파라미터임.
    console.log(rest);
  }
  foo(1, 2, 3, 4, 5);  // [1, 2, 3, 4, 5]
  
  function foo(param, ...rest) {
    console.log(param);
    console.log(rest);
  }
  foo(1, 2, 3, 4, 5);
  // 1
  // [2, 3, 4, 5]

Rest 파라미터와 arguments 객체

• arguments 객체는 배열이 아닌 유사 배열 객체이므로 배열 메서드 사용시 prototype.call 또는 Function.prototype.apply 메서드를 사용해 배열로변환해야 하는 변거로움이 있었음.
• ES6에서는 rest 파라미터를 사용하여 가변 인자 함수의 인수 목록을 배열로 직접 전달 받을 수 있음.

매개변수 기본값

• 함수 내부에서 수행하던 인수 체크 및 초기화의 간소화를 할 수 있음.

• 인수를 전달하지 않은 경우와 undefined를 전달한 경우에만 유효.

  function sum(x = 0, y = 0) {
    return x + y;
  }
  
  console.log(sum(1, 2));  // 3
  console.log(sum(1));  // 1