모던 자바스크립트 Deep Dive - 26. ES6 함수의 추가 기능

26.1. 함수의 구분

• ES6 이전 함수는 일반 함수(callable) + 생성자 함수(constructor)
  • 문법상 객체에 바인딩된 함수를 생성자 함수로 호출 가능
  • 불필요한 프로토타입 객체 생성 및 성능 저하
• ES6 사용 목적에 따라 종류 구분
  • 일반 함수(함수 선언문, 함수 표현식): constructor, prototype, arguments
  • 메서드: super, arguments
  • 화살표 함수: X

26.2. 메서드

• ES6 메서드는 축약 표현으로 정의된 함수만을 의미함
  • 인스턴스 및 프로토타입 생성 불가 (non-constructor)
  • 생성자 함수 호출 불가
• ES6 메서드가 아닌 함수는 내부 슬롯 [[HomeObject]] 갖지 않음
  • super 키워드 사용 불가
• ES6 이전 익명 함수 표현식은 현재 사용하지 않음

26.3. 화살표 함수

26.3.1. 화살표 함수 정의

함수 정의

• 함수 표현식 정의 (선언문 불가)
  • ex) const muliply = (x, y) => x * y;

매개변수 선언

• 소괄호 () 안에 매개변수 선언
• 매개변수 한 개인 경우 소괄호 () 생략 가능
• 없는 경우 빈 소괄호 표시, 생략 불가

함수 몸체 정의

• 함수 몸체가 하나의 문이라면 중괄호 {] 생략 가능
  • 값으로 평가될 수 있는 표현식이라면 해당 값 반환
  • 표현식이 아닌 문이라면 반환할 수 없으므로 에러 발생
• 여러 개의 문이라면 중괄호 {} 생략 불가
  • 반환값 명시
• 즉시 실행 함수(IIFE) 사용 가능
• 고차 함수의 인수로 전달 가능
• 콜백 함수로서 유용함

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

• 화살표 함수는 인스턴스 생성 불가 (non-constructor)
• 매개변수 이름 중복 선언 불가
  • 일반 함수는 가능 (strict mode에서는 불가)
  • ex) function normal(a, a) { ... }
• 함수 자체의 this, arguments, super, new.target 바인딩을 갖지 않음
  • 스코프 체인을 통해 상위 스코프를 참조함

26.3.3. this

• ES6 이전 this는 콜백 함수와 외부 함수가 서로 다른 값을 참조하는 문제 발생
• ES6 화살표 함수는 자체 this 바인딩 갖지 않고, 상위 스코프의 this 참조함 (lexical this)
  • 전역 함수라면 this는 전역 객체를 가리킴
    -> 프로퍼티 메서드나 프로토타입 객체의 프로퍼티에 화살표 함수를 할당하면 this가 전역 객체를 참조하게 되어 권장하지 않음
  • 동적 추가하는 경우 객체 리터럴 바인딩 constructor 프로퍼티와 생성자 함수 간의 연결을 재설정
  • 클래스 필드 정의 제안 사용
    • this가 생성할 인스턴스를 참조함
    • 하지만 프로토타입 메서드가 아닌 인스턴스 메서드가 됨
• 따라서 메서드 정의할 때는 ES6 메서드 축약 표현 권장
  • ex) sayHi() { console.log('Hi ${this.name}'); }

26.3.4. super

• 화살표 함수는 자체 super 바인딩을 갖지 않음
• 상위 스코프의 super 참조

26.3.5. arguments

• 화살표 함수는 자체 arguments 바인딩을 갖지 않음
• 상위 스코프의 arguments 참조
• 매개변수의 개수를 확정할 수 없는 가변 인자 함수 구현시 유용함
  • Rest 파라미터 사용 권장

26.4. Rest 파라미터

26.4.1. 기본 문법

• 매개변수 이름 앞에 세개의 점(...)을 붙여 정의함
• 함수에 전달된 인수들의 목록을 배열로 전달 받음
• 일반 매개변수와 함께 사용 가능, 순차적으로 할당됨
  • 명시적으로 선언된 인수를 제외한 나머지 인수들로 구성된 배열이 할당됨
  • 반드시 마지막 파라미터여야 함
• 매개변수의 개수를 나타내는 함수 객체의 length 프로퍼티에 영향 없음

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

26.4.2. Rest 파라미터와 arguments 객체

• arguments 객체는 함수 호출 시 전달된 인수들의 정보를 담고 있음
  • 순회 가능한 유사 배열 객체
  • 함수 내부에서 지역 변수처럼 사용
• ES6 Rest 파라미터는 가변 인자 함수의 인수 목록을 배열로 직접 전달 받음
  • 유사 배열이 아니기 때문에 배열 메서드 사용 가능
• ES6 메서드는 Rest 파라미터와 arguments 객체 모두 사용 가능
  • 화살표 함수는 자체 arguments 객체를 갖지 않으므로 Rest 파라미터만 가능

26.5. 매개변수 기본값

• 자바스크립트 엔진은 매개변수와 인수의 개수를 체크하지 않음
• 인수가 전달되지 않은 매개변수의 값은 undefined
  • 전달되지 않은 매개변수에 기본값 할당할 수 있음 (방어 코드)
  • 함수 몸체에서 인수 체크 및 초기화 수행함
• ES6 매개변수 기본값 할당으로 간소화
  • 인수를 전달하지 않거나 undefined 전달 시 유효함
  • Rest 파라미터는 지정 불가
  • 함수 객체의 length 프로퍼티와 arguemtns 객체에 영향 없음

function logName(name = 'Lee') {
  console.log(name);
}
logName(); // Lee
logName(undefined); // Lee
logName(null) // null

[출처] 모던 자바스크립트, Deep Dive