ES6 함수의 추가 기능

ES6 함수의 추가 기능

함수의 구분

• ES6 이전의 모든 함수는 callable이자 constructor
• 이는 실수 유발 가능, 성능 면에서 손해 → 모든 함수가 constructor이므로 프로토타입을 생성함
• 이러한 문제를 해결하기 위해 ES6에서는 함수를 사용 목적에 따라 3종류로 구분

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

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

const obj = {
    x: 1,
    foo() { return this.x; }, // 메서드
    bar: function() { return this.x; } // 일반 함수
};

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

ES6 메서드 (메서드 축약 표현으로 정의된 메서드)

• ES6 사양에서 정의한 메서드는 인스턴스를 생성할 수 없는 non-constructor이므로 생성자 함수로 호출할 수 없음
• cf. 표준 빌트인 객체가 제공하는 메서드들은 모두 non-constructor임
• ES6 메서드는 자신을 바인딩한 객체를 가리키는 내부슬롯 [[HomeObject]]를 가짐
  • 이를 통해 super참조를 하므로 ES6 메서드가 아닌 함수는 super키워드 사용 불가
• 이렇듯 목적에 맞게 설계되었기 때문에 메서드를 정의할 때 ES6이전의 방식은 지양

화살표 함수

• 함수 선언문으로 정의 불가, 함수 표현식으로 정의
• 객체 리터럴을 반환하는 경우 반드시 소괄호로 감싸주어야 함 → 함수 몸체와 구분하기 위함
• 함수 몸체가 하나의 평가 가능한 문이라면 중괄호 생략 가능
• 함수 몸체가 여러 개의 문으로 이루어져 있다면 중괄호 생략 불가, 반환값이 있다면 명시적으로 반환해야 함
• 화살표 함수도 즉시 실행 함수(IIFE)로 사용 가능
• 화살표 함수도 일급 객체이므로 고차함수에 인수로 전달 가능

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

• non-constructor임
• 중복된 매개 변수를 선언할 수 없음
• 함수 자체의 this, arguments, super, new.target 바인딩을 갖지 않음
• this를 가지지 않음
  • 클래스 필드 정의로 화살표함수를 정의한다면?
  • class Person { name = 'dlwlrma'; sayHi = ()=>console.log(this.name); } const p1 = new Person(); p1.sayHi(); // dlwlrma
  • 화살표 함수의 this는 없기 때문에 상위 스코프에서 찾아야 할 것 같지만 사실 클래스 필드 정의는 constructor 몸체에 this로 정의한 것과 동일하므로 다음과 같음
  • class Person { constructor() { this.name = 'dlwlrma'; this.sayHi = () => console.log(this.name); } } const p1 = new Person(); p1.sayHi();
  • 따라서 this는 생성될 인스턴스를 가리킴
  • 이는 프로토타입 메서드가 아닌 인스턴스 메서드가 되므로 메서드를 정의할 때는 ES6 메서드를 사용하는 것을 권장
• 함수 자체의 super 바인딩을 갖지 않음
• 함수 자체의 arguments 바인딩을 갖지 않음 → 가변 인자 함수 구현 시 Rest 파라미터 사용

Rest 파라미터

• 함수에 전달된 인수들의 목록을 배열로 전달 받음
• 반드시 마지막 인자로 전달되어야 하고 하나만 선언 가능
• arguments로 전달 받은 인수는 유사 배열 객체이므로 자체적으로 배열 메서드를 사용할 수 없지만 Rest파라미터로 받은 인수는 배열이므로 바로 배열 메서드 사용 가능
• Rest 파라미터는 함수 정의 시 선언한 매개변수 개수를 반환하는 함수 객체의 length 프로퍼티에 영향을 주지 않음

  function sum(...args) {
  return args.reduce((acc,cur) => acc + cur);
  }
  console.log(sum(1,2,3,4,5)); // 15

매개변수 기본값

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

• 매개변수 기본값은 함수 정의 시 선언한 매개변수 개수를 반환하는 함수 객체의 length 프로퍼티와 arguments 객체에 영향을 주지 않음

function sum(x, y = 0) {
    console.log(arguments);
}
console.log(sum.length); // 1
sum(1); // Arguments { '0': 1 }
sum(1, 2); // Arguments { '0': 1, '1': 2 }