Arrow Function(화살표 함수, 람다식 함수)
조금 생소한 Arrow function의 특징은 아래와 같습니다.
- Arrow function은 ES6에서 정의한 문법입니다. 선언 방식으로 간결하게 코드를 작성할 수 있고, () => {}의 모양입니다.
- This와 arguments를 바인딩 하지 않는 특징을 가집니다.
- 기존의 function에서는 this의 탐색범위가 함수의 {}안이지만, arrow function에서 this는 일반적인 인자/변수와 동일하게 취급됩니다.
즉, 화살표 함수안에서 this는 callfunc안의 this를 따릅니다. 그래서 현재 환경의 this를 따르게 하고 싶을 때, this의 Scope를 바꾸고 싶지 않을 때 유용합니다.
Function과 Arrow Function의 차이점
1. 자체 호이스팅
function은 이름을 지정해서 정의할 수 있지만, 화살표 함수는 이름을 정의하기 위해서는 변수에 담아서 사용해야 합니다. 즉, 화살표 함수는 함수 자체 호이스팅이 불가능합니다.
// Function
function funcName(){}// arrow function
const funcName = () => {}
2. arguments / rest parameter
function은 arguments를 사용해서 받아오는 인자들을 배열로 사용할 수 있습니다. 하지만 화살표 함수에서는 오류가 생기기 때문에 rest parameter라는 구문을 사용합니다.
// function
function funcName() { console.log(arg) } //[1, 2, 3]
funcName(1, 2, 3);// arrow function
const funcName2 = (...arg) => { console.log(arg) } //[1, 2, 3]
funcName2(1, 2, 3);
MDN에 따르면 rest parametier 구문은 정해지지 않은 수(부정수) 인수를 배열로 나타낼 수 있게 합니다. 함수의 마지막 파라미터 앞에 …를 붙여서 (사용자가 제공한) 모든 나머지 인수를 ‘표준’ 자바스크립트 배열로 대체합니다. 마지막 파라미터만 ‘rest parameter’가 될 수 있습니다.
Arguments객체와 rest parameter사이에 주요 차이점은 아래와 같습니다.
1. Arguments객체는 함수로 전달된 모든 인수를 포함하지만, rest parameter는 구분된 이름(함수 표현에 정식으로 정의된 것)이 주어지지 않은 유일한 대상입니다.
2. Arguments객체는 실제 배열이 아니고, rest parameter는 array 인스턴스로, sort, map, forEach, pop 같은 메서드가 바로 인스턴스에 적용될 수 있습니다.
3. Arguments 객체는 자체에 특성 추가 기능이 있습니다.
3. This
화살표 함수로 정의한 함수는 상위 컨텍스트가 전역 컨텍스트이므로 window를 나타내지만, function으로 정의한 함수는 자신을 정의한 객체를 나타냅니다. 화살표 함수는 This가 없을 때 new를 통해 객체생성이 불가능합니다.
const obj = {
a : () => { console.log(this)},
// window b : function() { console.log(this)}
// {a:f, b:f}
}new obj.a(); //error : obj.a is not a constructor
new obj.b(); //b{}
ES6에서 함수는 callable한 것과 constructable한 것의 차이를 두고 있습니다.
만약 어떤 함수가 constructable하다면 new로 만들어야 합니다. 반면 함수가 callable하다면 일반적인 함수처럼 함수() 식으로 호출하는 것이 가능합니다.
function newFunc(){} 와 const newFunc() = function(){}와 같은 방식으로 만든 함수는 callable하며 동시에 constructable합니다. 하지만 const newFunc = () =>{} , 즉 화살표 함수는 callable하지만 constructable하지 않기 때문에 호출만 가능합니다.
+ ES6의 class는 constructable 하지만 callable하지 않습니다.
