화살표 함수 (Arrow Function)

---

TIL List

• 화살표 함수 정의
• 화살표 함수 예제
• 화살표 함수에서의 this 범위

---

1) 화살표 함수?

화살표 함수는 ES6 에 도입된 문법으로써 함수를 구현할 때 좀 더 간결하게 코드를 작성할 수 있게 도와준다.

---

2) 화살표 함수 사용법

1. 생략 가능한 3가지

화살표 함수를 사용함으로써 function, return, parameter 를 생략할 수 있다.

아래의 예제를 보면 이해가 쉬울 것이다.

ES5 문법

let plus = function (x, y) {
  return x + y;
}

화살표 함수로 표현한 ES6 문법 (function 키워드를 생략할 수 있다)

let plus = (x,y) => {
  return x + y;
}


ES5 문법

let plus = function (x, y) {
  return x + y;
}

화살표 함수로 표현한 ES6 문법 ( return 을 한다면 컬리브라켓과 return 키워드를 생략할 수 있다)

let plus = (x,y) => x + y;


ES5 문법

let doubler = function (num) {
  return num * 2;
}

화살표 함수로 표현한 ES6 문법 ( 파라미터가 1개일 경우, 괄호를 생략할 수 있다.)

let doubler = num => num * 2;

2. 화살표 함수를 사용한 재귀 예제

위의 예제를 미루어보아 재귀를 사용한 함수에서도 화살표 함수를 적용할 수 있다는 것을 확인할 수 있다.

ES5 문법

let doubleValues = function (values) {
  return values.map(function(value){
    return value * 2;
  });
};

화살표 함수로 표현한 ES6 문법 ( function 키워드와 parameter 에 사용된 괄호, return 을 생략 가능하다)

let doubleValues = values => values.map(value => value * 2);

3. 화살표 함수 사용시 this 의 범위

일반적으로 외부함수의 프로퍼티에 접근하기 위해 다음과 같이 했었다.

let Delay = function (a, b) {
  this.a = a;
  this.b = b;
};

Delay.prototype.haveReaction = function() {
let context = this; // 외부함수에 접근하기 위해 this 를 변수로 선언해야만 했다.
  setTimeout (function () {
    console.log(context.reaction);
}, this.delay);
}

하지만 화살표 함수에서 this 를 사용하면 this 는 스코프에 관계없이 무조건 바깥의 함수에 접근해서 this를 사용한다.

let Delay = function (a, b) {
  this.a = a;
  this.b = b;
};

Delay.prototype.haveReaction = function() {
  setTimeout (() => {
    console.log(this.reaction);
}, this.delay);
}

위에서 화살표 함수를 사용했는데도 컬리 브라켓 {} 을 사용한 이유는 return 이 없기 때문이다.

return 이 없는 함수 식은 무조건 컬리 브라켓을 포함해 줘야 한다!

---