[JS] ES6 함수의 추가 기능

📌 ES6 함수의 구분

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

 

📌 메서드

• ES6 사양에서 메서드는 메서드 축약 표현으로 정의된 함수만을 의미함
• ES6 메서드는 인스턴스를 생성할 수 없는 non-constructor이므로 prototype 프로퍼티가 없고 프로토타입도 생성하지 않음
• ES6 메서드는 자신을 바인딩한 객체를 가리키는 내부 슬롯 [[HomeObject]]를 가짐 (super 키워드 사용 가능)
• ES6 메서드는 본연의 기능(super)을 추가하고 의미적으로 맞지 않는 기능(constructor)은 제거함

const obj = {
  x: 1,
  
  // foo는 메서드
  foo() { return this.x; },
  
  // bar에 바인딩된 함수는 메서드가 아닌 일반 함수
  bar: function() { return this.x; }
};

console.log(obj.foo()); // 1
console.log(obj.bar()); // 1

 

📌 화살표 함수

• 화살표 함수: function 키워드 대신 화살표 (=>, fat arrow)를 사용하여 기존의 함수 정의 방식보다 간략하게 함수를 정의하는 함수
• 콜백 함수 내부에서 this가 전역 객체를 가리키는 문제를 해결하기 위한 대안으로 유용함

 

화살표 함수 정의

• 화살표 함수는 함수 선언문으로 정의할 수 없고 함수 표현식으로 정의해야 함
• 매개변수가 없는 경우 소괄호 ()를 생략할 수 없고, 매개변수가 한 개인 경우는 생략 가능하며, 매개변수가 여러 개인 경우는 소괄호 () 안에 매개변수를 선언함
• 함수 몸체가 하나의 문으로 구성되고 표현식인 경우 함수 몸체를 감싸는 중괄호 {}를 생략할 수 있음
• 화살표 함수를 즉시 실행 함수로 사용할 수 있음
• 화살표 함수도 일급 객체이므로 Array.prototype.map, Array.prototype.filter, Array.prototype.reduce 같은 고차함수에 인수로 전달할 수 있음 -> 콜백함수로 정의할 때 유용함

const multiply = (x, y) => x + y;
multiply(2, 3); // -> 6

// ES6
[1, 2, 3].map(v => v * 2); // -> [ 2, 4, 6 ]

 

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

1. 화살표 함수는 인스턴스를 생성할 수 없는 non-constructor임
   • 화살표 함수는 인스턴스를 생성할 수 없으므로 prototype 프로퍼티가 없고 프로토타입도 생성하지 않음
2. 중복된 매개변수 이름을 선언할 수 없음
   • 일반 함수는 중복된 매개변수 이름을 선언해도 에러가 발생X (strict mode에서는 에러 발생)
   • 화살표 함수에서 중복된 매개변수 이름을 선언하면 에러 발생
3. 화살표 함수는 함수 자체의 this. arguments, super, new.target 바인딩을 갖지 않음
   • 화살표 함수 내부에서 this. arguments, super, new.target을 참조하면 스코프 체인 상에서 가장 가까운 상위 함수 중에서 화살표 함수가 아닌 함수의 this. arguments, super, new.target을 참조함

 

this

• 화살표 함수의 this는 일반 함수와 다르게 "콜백 함수 내부의 this 문제" (콜백 함수 내부의 this가 외부 함수의 this와 달라 발생하는 문제)를 해결하기 위해 의도적으로 설계됨
• 일반 함수의 경우 함수를 호출할 때 어떻게 호출되었는지에 따라 this에 바인딩할 객체가 동적으로 결정됨
• 화살표 함수의 경우 함수 자체의 this 바인딩을 갖지 않아 화살표 함수 내부에서 this를 참조하면 스코프 체인을 통해 상위 스코프의 this를 그대로 참조함 (lexical this: 렉시컬 스코프와 같이 함수가 정의된 위치에 의해 this가 결정됨)
• 화살표 함수와 화살표 함수가 중첩되어 있으면 상위 화살표 함수에도 this 바인딩이 없으므로 스코프 체인 상에서 가장 가까운 상위 함수 중에서 화살표 함수가 아닌 함수의 this를 참조함
• 메서드를 정의할 때, 프로토타입 객체의 프로퍼티를 동적 할당할 때, 콜백 함수 내부의 this 문제가 발생할 수 있기 때문에 화살표 함수를 쓰는 것을 지양해야 함 (메서드 정의 -> ES6 메서드, 프로토타입 객체 프로퍼티 동적 할당 -> 일반 함수 또는 ES6 메서드)
• 클래스 필드에 할당한 화살표 함수는 프로토타입 메서드가 아닌 인스턴스 메서드가 되기 때문에 메서드를 정의할 때 ES6 메서드 축약 표현으로 정의한 ES6 메서드를 사용하는 것이 좋음

 

super

• 화살표 함수는 함수 자체의 super 바인딩을 갖지 않기 때문에 화살표 함수 내부에서 super를 참조하면 this와 마찬가지로 상위 스코프의 super를 참조함
• 화살표 함수는 ES6 메서드는 아니지만 함수 자체의 super 바인딩을 갖지 않으므로 super를 참조해도 에러가 발생하지 않고 constructor의 super 바인딩을 참조함

 

arguments

• 화살표 함수는 함수 자체의 arguments 바인딩을 갖지 않기 때문에 화살표 함수 내부에서 super를 참조하면 this와 마찬가지로 상위 스코프의 arguments를 참조함
• 화살표 함수에서 상위 스코프의 arguments 객체를 참조할 수는 있지만 arguments 객체를 사용할 수 없기 때문에 화살표 함수로 가변 인자 함수를 구현해야 할 때는 반드시 Rest 파라미터를 사용해야 함

 

📌 Rest 파라미터

• Rest 파라미터: 매개변수 이름 앞에 세 개의 점(...)을 붙여 정의한 매개변수
• Rest 파라미터는 함수에 전달된 인수들의 목록을 배열로 전달받음
• Rest 파라미터는 매개변수에 할당된 인수를 제외한 나머지 인수들로 구성된 배열이 할당되므로 반드시 마지막 파라미터여야 함
• Rest 파라미터는 단 하나만 선언할 수 있음
• Rest 파라미터는 함수 정의 시 선언한 매개변수 개수를 나타내는 함수 객체의 length 프로퍼티에 영향을 주지 않음

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

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

 

Rest 파라미터와 arguments 객체

• ES6에서는 rest 파라미터를 사용하여 가변 인자 함수의 인수 목록을 배열로 직접 전달받을 수 있어 유사 배열 객체인 arguments 객체를 배열로 변환하는 번거로움을 피할 수 있음
• 화살표 함수로 가변 인자 함수를 구현해야 할 때는 반드시 Rest 파라미터를 사용해야 함

function sum(...args) {
  // Rest 파라미터 args에는 배열 [1, 2, 3, 4, 5]가 할당됨
  return args.reduce((pre, cur) => pre * cur, 0);
}

console.log(sum(1, 2, 3, 4, 5)); // 15

 

📌 매개변수 기본값

• ES6에서 도입된 매개변수 기본값을 사용하면 함수 내에서 수행하던 인수 체크 및 초기화를 간소화할 수 있음
• 매개변수 기본값은 매개변수에 인수를 전달하지 않은 경우와 undefined를 전달한 경우에만 유효함
• Rest 파라미터에는 기본값을 지정할 수 없음
• 매개변수 기본값은 함수 정의 시 선언한 매개변수 개수를 나타내는 함수 객체의 length 프로퍼티에 영향을 주지 않음

function sum(x = 0, y = 0) {
  return x + y;
}

console.log(sum(1, 2));	// 3
console.log(sum(1));	// 1

 

 

 

참고문헌 및 출처 : 모던 자바스크립트 Deep Dive (이웅모)