[JavaScript] 자바스크립트 화살표 함수(Arrow Function) 가볍게 이해하기

화살표 함수(Arrow Function)란?

ECMA2015 이후에 등장한 화살표 함수는 기존의 방식보다 상대적으로 함수를 좀 더 간결하게 표현하는 새로운 방식이다.

이름에서도 유추할 수 있듯이 화살표 함수는 화살표 모양의 => 기호를 사용한다.

화살표 함수도 생각보다 다뤄야 할 것들이 많은데, 이번 포스트에서는 화살표 함수에 대해서 가볍게만 정리해보자.

 

기본 문법

화살표 함수는 함수 표현식에 사용되는데 function 키워드 대신에 화살표 모양의 기호를 소괄호 뒤에 작성한다.

// 일반 함수 표현식
let myFunction = function (파라미터1, 파라미터2, ...파라미터들) {
    return '이것은 함수 표현식 입니다.';
}

// 화살표 함수 표현식
let myArrow = (파라미터1, 파라미터2, ...파라미터들) => {
    return '이것은 화살표 함수 입니다.';
}

console.log(myFunction()); // 이것은 함수 표현식 입니다.
console.log(myArrow()); // 이것은 화살표 함수 입니다.

함수 호출은 일반적인 함수의 호출과 동일하게, 함수 이름에 소괄호를 열고 닫으면서 함수를 호출할 수 있다.

 

 

축약형

화살표 함수는 독특하게 상황에 따라 모양을 축약해서 사용이 가능한 특징이 있다.

 

1. 중괄호와 return키워드 생략

let myArrow = (파라미터1, 파라미터2, ...파라미터들) => '이것이 return 됩니다.';

console.log(myArrow()); // 이것이 return 됩니다.

첫 번째로 중괄호와 return 키워드를 생략할 수 있는 경우가 있다. 이 경우, return 키워드를 작성하지 않아도 화살표 오른편에 작성된 표현식(expression)을 return 한다. 다시 말해 화살표 직후의 표현식이 자동으로 return문이 되는 것이다.

 

그런데 한 가지 주의해야될 점은 화살표 기호 바로 뒤에 중괄호가 나타나면 여러 줄 구문으로 해석하기 때문에 만약 객체를 return할 경우에는 반드시 소괄호를 감싸주어야 한다.

let myArrow1 = (파라미터1, 파라미터2) => {name: 'bigtop'};
let myArrow2 = (파라미터1, 파라미터2) => ({name: 'bigtop'});

console.log(myArrow1()); // undefined
console.log(myArrow2()); // {name: "bigtop"}

아무튼, 이런식으로 중괄호와 return키워드를 생략해서 함수를 간결하게 작성할 수 있다는 장점이 있지만 함수 내부에서 여러 줄의 표현식을 작성해야 할 때는 어쩔 수 없이 중괄호와 return문을 작성해주어야만 한다. 그런 경우는 return이 필요할 경우 반드시 return문을 작성해주어야 한다는 점을 잊지 말자.

 

2. 소괄호 생략

두 번째 축약형은 소괄호의 생략이다. 만약 함수의 파라미터가 하나라면 소괄호를 생략할 수 있다.

let myArrow1 = name => `제 이름은 ${name}입니다.`;
let myArrow2 = (lastName, firstName) => `제 이름은 ${lastName} ${firstName}입니다.`
let myArrow3 = () => `이 함수는 파라미터가 없습니다.`

console.log(myArrow1('Bigtop')); // 제 이름은 Bigtop입니다.
console.log(myArrow2('Kim', 'Bigtop')); // 제 이름은 Kim Bigtop입니다.
console.log(myArrow3()); // 이 함수는 파라미터가 없습니다.

하지만 myArrow2와 myArrow3에서 확인할 수 있듯, 파라미터가 두 개 이상이거나 혹은 파라미터가 없을 경우에는 반드시 소괄호를 작성해주어야 한다.

 

 

마무리

이번 포스트에서는 화살표 함수를 선언하고 호출하는 전반에 대한 내용들만 정리해 보았다.

지금까지 작성한 포스트들과의 연속성을 위해서 

일반적인 함수와는 다르게 화살표 함수만이 가진 좀 더 깊은 특징에 대해서는

필요한 포스트들이 채워진 이후에 다시 정리하도록 하자.