[JavaScript] 화살표 함수(Arrow function)에 대하여 - 1 (표현식)

화살표 함수(Arrow function)는 ES6(ECMAScript6)에서 등장한 개념으로 기존에 함수를 선언할 때 사용하던

function 키워드 대신에 화살표(=>)를 사용하여 보다 간략한 방법으로 함수 선언을 도와주는 역할을 한다.

 

코드를 통해 사용방법에 대해 하나씩 알아가보자.

---

1. 화살표 함수(Arrow function) 기본 문법

// es5
var plus = function(a, b) { 
  return a + b; 
}

// es6
let minus = (a, b) => { 
  return a - b; 
};

 

기본 문법은 본문 첫 문단에서 설명한것처럼 function 키워드 대신 화살표를 사용하여 간략하게 사용하였다.

이 방식에는 여러가지 특징들이 존재하는데, 매개변수의 개수와 블럭안의 line 개수에 따라 표현방식이 달라진다.

 

2. 매개변수 개수에 따른 화살표 함수(Arrow function) 표현 방식

// 매개변수가 존재하지 않을 경우
let arrow1 = () => { return 'arrow1';};

// 매개변수가 하나인 경우 (소괄호 생략 O)
let arrow2 = x => { return x; };

// 매개변수가 두개 이상인 경우 (소괄호 생략 X)
let arrow3 = (x, y) => { return x + y; };

 

2번 예제처럼 매개변수 개수에 따라 표현방식이 달라지는것을 확인할 수 있다.

개인마다 차이가 있겠지만 나는 아무래도 소괄호를 생략하면 뭔가 잘 안보인다.

 

3. 반환 구문(함수의 몸체)의 생략

// 몸체인 중괄호{} 의 생략 - 암묵적인 return
let arrow3 = (x, y) => x + y;

// 객체 반환시 소괄호 사용
let arrow4 = () => ({ x : 1});

 

위 예제처럼 중괄호 생략이 가능한데, 이는 한줄의 구문이라면 중괄호를 생략할 수 있지만 암묵적으로 return 되기 때문에 return 구문으로 이루어진 함수의 경우에만 생략해주면된다.

(물론 두줄로 이루어졌다면 생략은 불가능하니, 생략없이 사용해주면 된다.)

 

그리고 return 값이 객체일 경우 소괄호를 사용해주면 된다.

 

4. callback 함수의 간략한 표현식

const arr = [1, 2, 3, 4];

// [2, 4, 6, 8]
const plus = arr.map(x => x + x);

// [2, 4]
const two = arr.filter(x => x % 2 == 0);

 

기존의 ES5에서 사용하던 callback 함수를 많이 써본 사람은 알겠지만,

표현식이 매우 간결해진것을 확실하게 느낄 수 있을것이다.

---

다음은 화살표 함수(Arrow function)에서 사용되는 this의 변화에 대해 알아보자.

 

[ES6] 화살표 함수(Arrow function)에 대하여 - 2 (this)

[ES6] 화살표 함수(Arrow function)에 대하여 - 2 (this)