화살표 함수(Arrow Function)

 <목차>

1. 화살표 함수란?
2. 화살표 함수 사용법
3. 화살표 함수의 특징

 

1. 화살표 함수란?

ES6에서 나온 화살표 함수는 function 대신 화살표(=>)를 사용하여 보다 간단하고 편한 방법으로 함수를 선언할 수 있다.

하지만 화살표함수는 익명함수로만 사용이 가능하여 화살표 함수를 사용하기 위해선 함수 표현식을 사용해야한다.

 

 

2. 화살표 함수 사용방법

화살표 함수의 기본 문법은 아래와 같다.

// 기존 코드 작성 방식
function sum(x, y) {
  return x + y;
}

// 화살표 함수
const sum = (x, y) => {
  return x + y;
};

// 만일 화살표 함수가 리턴문 한 줄만 가지고 있다면 중괄호({})를 생략할 수 있다.
const sum = (x, y) => x + y;

 

 

 

3. 화살표 함수의 특징

 1) 화살표 함수의 내부에서 this는 상위 스코프를 가르킨다.

    일반적으로 javascript에서는 함수를 호출할 때 함수가 어떻게 호출되었는지에 따라 this 키워드에 바인딩할 객체가 동        적으로 결정된다. 하지만 화살표 함수 내부의 this는 언제나 상위 스코프의 this를 가리킨다.

    addEventListener의 콜백 함수로 지정해도 this는 전역을 가르키고 있어 apply/call/bind 함수를 통한 this의 바인딩이            불가능하다.

 

 2) 화살표 함수는 생성자 함수를 사용할 수 없다.

    화살표 함수는 생성자로써의 사용이 불가능하며, new 키워드와 함께 화살표 함수를 사용하면 오류가 발생한다.

 

 3) 화살표 함수는 prototype 속성을 지원하지 않는다.

    화살표 함수는 객체를 생성할 수 없으므로 prototype 속성을 지원하지 않는다.