화살표 함수 에서

화살표 함수 소개

JavaScript에는 함수 선언과 함수 표현식 외에도, 함수를 정의하는 아주 간결한 문법이 하나 더 있어요. 이런 함수를 _화살표 함수_라고 해요.

이번 개념에서는 화살표 함수를 작성할 때 쓰는 문법에 집중해 봐요. this 바인딩처럼 화살표 함수가 동작하는 방식에는 다른 점도 있는데, 그런 내용은 다른 개념에서 다뤄요.

함수 선언과 화살표 함수를 비교해 보면 다음과 같아요.

function addUpTwoNumbers(num1, num2) {
  return num1 + num2;
}

// function keyword removed and => added
const addUpTwoNumbers = (num1, num2) => {
  return num1 + num2;
};

위 코드에서 볼 수 있듯이, 화살표 함수 문법은:

1. function 키워드를 없애고
2. 식별자 addUpTwoNumbers를 const로 선언하고
3. 화살표 =>를 추가해요

위 예시처럼 함수 본문에 반환문만 있다면, {}와 return 키워드는 생략할 수 있어요.

const addUpTwoNumbers = (num1, num2) => { return num1 + num2 };

// can be shortened to
const addUpTwoNumbers = (num1, num2) => num1 + num2;
// braces {} and return removed

화살표 함수에서 객체만 반환하는 특별한 경우에는, 반환문을 생략하려면 객체를 괄호로 감싸야 해요.

// explicit return of object
const addUpTwoNumbers = (num1, num2) => {
  return { num1, num2 };
};

// implicit return of object
const addUpTwoNumbers = (num1, num2) => ({ num1, num2 });

매개변수를 괄호로 감쌀지 여부는 매개변수의 개수에 따라 달라요.

// one parameter does not need parenthesis
const square = num => num * num;

// two or more parameters need to be wrapped in parenthesis
const addUpTwoNumbers = (num1, num2) => num1 + num2;

화살표 함수는 나머지 매개변수나 구조 분해 같은 다른 개념과도 함께 사용할 수 있어요.