ES6 함수의 추가 기능

함수의 구분

ES6 이전의 모든 함수는 사용 목적에 따라 명확한 구분이 없으므로 호출 방식에 특별한 제약이 없고 생성자 함수로 호출되지 않아도 프로토타입 객체를 생성한다. 이는 혼란스러우며 실수를 유발할 가능성이 있고 성능에도 좋지 않다.

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

메서드

• ES6 메서드는 메서드 축약 표현을 정의된 함수만을 의미한다.
• ES6 메서드는 인스턴스를 생성할 수 없는 non-constructor이며 인스턴스를 생성할 수 없으므로 프로퍼티가 없고 프로토타입도 생성하지 않는다.

화살표 함수

화살표 함수는 function 키워드 대신 화살표(=>)를 사용하여 기존의 함수 정의 방식보다 간략하게 함수를 정의할 수 있다. 화살표 함수는 표현만 간략한 것이 아니라 내부 동작도 기존의 함수보다 간략하다.

특히 화살표 함수는 콜백 함수 내부에서 this가 전역 객체를 가리키는 문제를 해결하기 위한 대안으로 유용하다.

주의할 점으로는 객체 리터럴을 반환하는 경우 객체 리터럴을 소괄호 ()로 감싸 주어야 한다.

const create = (id, content) => ({ id, content });
create(1, 'Javascript'); // {id: 1, content: "Javascrip}

// 위 표현은 다음과 동일하다.
cosnt create = (id, content) => { return { id, content }; };

객체 리터럴을 소괄호 ()로 감싸지 않으면 객체 리터럴의 중괄호 {}를 함수 몸체를 감싸는 중괄호 {}로 잘못 해석한다.

// { id, content }를 함수 몸체 내의 쉼표 연산자문으로 해석한다.
cosnt create = (id, content) => { id, content };
create(1, 'JavaScript'); // undefined

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

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

this

화살표 함수가 일반 함수와 구별되는 가장 큰 특징은 바로 this다.

class Prefixer {
  constructor(prefix) {
    this.prefix = prefix;
  }
  
  add(arr) {
    return arr.map(item => item.prefix + item);
  }
}

const prefixer = new Prefixer('-webkit-');
console.log(prefixer.add(['transition', 'user-select']));
// ['-webkit-transition', '-webkit-user-select']

화살표 함수는 함수 자체의 this 바인딩을 가지지 않는다. 따라서 화살표 함수 내부에서 this를 참조하면 상위 스코프의 this를 그대로 참조한다. 이를 lexical this라 한다. 이는 마치 렉시컬 스코프와 같이 화살표 함수의 this가 정의된 위치에 의해 결정된다는 것을 의미한다.

Rest 파라미터

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

foo(1, 2, 3, 4, 5);

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

주의할 점

• Rest 파라미터는 단 하나만 선언할 수 있다.
• Rest 파라미터는 반드시 마지막 파라미터이어야 한다.
• Rest 파라미터에는 기본값을 지정할 수 없다.

참고

모던 자바스크립트 Deep Dive