화살표 함수 구문

화살표 함수는 자바스크립트 환경에서 함수 생성을 좀 더 간결하게 하는 방법이다.

단계적으로 줄여 본다면..

function callName(name) {
  console.log(name);
}

const callName = function(name) {
  console.log(name);
}

const callName = (name) => {
  console.log(name);
}

function(name) 의 구분을 (name) => 로 줄일 수 있다.

좀 더 간결하게 할 수 있는 방법이 있다.

 

매개변수 괄호 생략하기

오직 하나의 매개변수만 사용하는 경우, 묶는 괄호를 생략할 수 있다.

const callName = (name) => {
  console.log(name);
}


const callName = name => {
  console.log(name);
}

함수에 매개변수가 없는 경우에는 괄호를 생략하면 안된다.

const callName = () => {
  console.log("Tom");
}

매개변수가 두 개 이상인 경우에도 괄호를 생략하면 안된다.

const callPerson = (userName, userAge) => {
  console.log(userName, userAge);
}

함수 본문 중괄호 생략하기

화살표 함수에 반환문 외에 다른 로직이 없는 경우, return 키워드와 중괄호를 생략할 수 있다.

// before
const callName = (name) => {
  return name;
}


// after
const callName = name => name

name => { return name } 라고 쓰지 않고, name => name 으로 사용한다.

객체만 반환하는 경우

자바스크립트 객체를 반환하려고 하면, 다음과 같이 유효하지 않은 코드가 나올 수 있다.

number => ({ age: number }); // 객체를 반환하려고 합니다.

 

자바스크립트는 중괄호를 js객체를 생성하는 코드가 아닌, 함수 본문 래퍼로 취급하기 때문에 이 코드는 유효하지 않다.

객체를 생성하고 반환해야 한다고 자바스크립트에 "말하려면" 코드를 다음과 같이 수정해야 한다.

number => (({ age: number })); // 추가 괄호를 써서 객체를 감싸줍니다.

객체와 중괄호를 추가 괄호로 감싸면, 자바스크립트는 중괄호가 함수 본문을 정의하는 것이 아니라 객체를 생성하기 위한 것으로 이해한다. 따라서 객체가 반환된다.

화살표 함수에서 반환 값이 {}로 시작할 경우, 자바스크립트는 이를 코드 블럭으로 오해할 수 있다. 이를 해결하기 위해 객체 리터럴을 반드시 소괄호 ()로 감싸야 한다.

Ref. https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Functions/Arrow_functions