화살표 함수
함수 표현식보다 단순하고 간결한 문법으로 함수를 만들 수 있는 방법이 있다.
바로 es6에서 등장한 화살표 함수(arrow function)를 사용하는 것이다. 화살표 함수라는 이름은 문법의 생김새를 차용해 지어졌다.
let func = (arg1, arg2, ...argN) => expression이렇게 코드를 작성하면 인자 arg1..argN를 받는 함수 func이 만들어진다.
함수 func는 화살표(=>) 우측의 표현식(expression)을 평가하고, 평가 결과를 반환한다.
아래 함수의 축약 버전인 셈이다.
let func = function(arg1, arg2, ...argN) {
return expression;
};좀 더 구체적인 예시를 살펴보자.
let sum = (a, b) => a + b;
/* 위 화살표 함수는 아래 함수의 축약 버전
let sum = function(a, b) {
return a + b;
};
*/
alert( sum(1, 2) ); // 3(a, b) => a + b는 인수 a와 b를 받는 함수이다.
(a, b) => a + b는 실행되는 순간 표현식 a + b를 평가하고 그 결과를 반환한다.
인수가 하나밖에 없다면 인수를 감싸는 괄호를 생략할 수 있다.
let double = n => n * 2;
// let double = function(n) { return n * 2 }과 거의 동일
alert( double(3) ); // 6화살표 함수는 함수 표현식과 같은 방법으로 사용할 수 있다.
아래 예시와 같이 함수를 동적으로 만들 수 있다.
let age = prompt("나이를 알려주세요.", 18);
let welcome = (age < 18) ?
() => alert('안녕') :
() => alert("안녕하세요!");
welcome();본문이 여러 줄인 화살표 함수
위의 화살표 함수들은 => 왼쪽에 있는 인수를 이용해 => 오른쪽에 있는 표현식을 평가하는 함수들이었다.
그런데 평가해야 할 표현식이나 구문이 여러 개인 함수가 있을 수도 있다. 이 경우 역시 화살표 함수 문법을 사용해 함수를 만들 수 있다.
다만, 이때는 중괄호 안에 평가해야 할 코드를 넣어주어야 한다. 그리고 return 지시자를 사용해 명시적으로 결괏값을 반환해 주어야 한다.
let sum = (a, b) => { // 중괄호는 본문 여러 줄로 구성되어 있음을 알려준다
let result = a + b;
return result; // 중괄호를 사용했다면, return 지시자로 결괏값을 반환해주어야 한다.
};
alert( sum(1, 2) ); // 3지금까진 간결함이라는 특징을 중심으로 화살표 함수에 대해 알아보았다.
화살표 함수는 여기서 소개한 기능 이외에도 다른 흥미로운 기능을 지원하는데, 이 전에 알아둬야할 개념들이 더더욱 많이 때문에 추후에 다시 포스팅을 해야할 것 같다.
Reference
