[자바스크립트/ECMAScript6/ES6] Arrows Function, 화살표 함수

화살표 함수 표현은 function 표현보다 축약하여 사용할 수 있는 기능이다.

자신의 this, arguments, super, new.target은 바인딩하지 않는다.

화살표 함수는 항상 익명이다.

메서드 함수가 아닌 곳에 가장 적합하므로 생성자로서 사용할 수 없다.

---

    기본 구문    

(param1, param2, …, paramN) => { statements }
(param1, param2, …, paramN) => expression
// 다음과 동일함:  => { return expression; }

// 매개변수가 하나뿐인 경우 괄호는 선택사항:
(singleParam) => { statements }
singleParam => { statements }

// 매개변수가 없는 함수는 괄호가 필요:
() => { statements }​

 

여러개의 매개변수(parameter)를 괄호로 묶어 사용하는 것을 볼 수 있다.

매개변수가 하나일 경우에는 괄호를 생략할 수 있다. 

하지만 매개변수가 없을 때는 괄호가 필요하다.

 

매개변수	괄호
2개 이상	O
1개	생략 가능
없음, 0개	O

 

---

    고급 구문   

// 객체 리터럴 표현을 반환하기 위해서는 함수 본문(body)을 괄호 속에 넣음:
params => ({foo: bar})

// 나머지 매개변수 및 기본 매개변수를 지원함
(param1, param2, ...rest) => { statements }
(param1 = defaultValue1, param2, …, paramN = defaultValueN) => { statements }

// 매개변수 목록 내 비구조화도 지원됨
var f = ([a, b] = [1, 2], {x: c} = {x: a + b}) => a + b + c;
f();  // 6

 

객체 리터럴을 반환하기 위해서는 중괄호{}를 괄호()로 감싸야한다는 것을 알 수 있다.

---

    예시    

const materials = [
  'Hydrogen',
  'Helium',
  'Lithium',
  'Beryllium'
];

console.log(materials.map(material => material.length));
// expected output: Array [8, 6, 7, 9]

 

---

기타

생성자의 사용이 불가하다.

var Human = () => {};
var i = new Human(); // TypeError: Human is not a constructor

화살표 함수로 new 연산자를 사용하면 오류가 발생한다.

이는 화살표 함수가 생성자로서 사용될 수 없기 때문이다.

---

prototype 속성 사용이 불가하다.

var Human = () => {};
console.log(Human.prototype); // undefined

화살표 함수는 prototype 속성이 없기 때문에 undefined를 출력한다.

---

this를 사용할 수 없다.

자기 자신의 this를 사용하면 오류가 발생한다.

---

이외의 화살표 함수의 정보는 MDN web docs에서 찾을 수 있다.]

 

※출처: https://developer.mozilla.org/ko/