자바스크립트 arrow function의 return 규칙

Arrow Functions Return Rules in JavaScript를 번역한 글입니다.

오역 및 의역이 있을 수 있습니다.🥲

---

에로우 펑션에는 두가지의 리턴 방법이 있다.

1. 명시적 반환
2. 암시적 반환

명시적 반환

명시적 반환이란 return 키워드를 사용하여 명시적으로 값을 반환하는 것을 말한다.

예시

블록 안에 리턴을 명시적으로 사용한다.

// Single-line
const explicit = (value) => { return value; }

// Multi-line
const explicit = (value) => {
  return value;
}

암시적 반환

암시적 반환이란 return 키워드를 사용하지 않고 값을 리턴하는 것이다.

예시

블록 안이 간결한 경우 return 키워드를 사용하지 않고 암시적으로 리턴한다.

// Single-line
const implicit = (value) => value;

// Multi-line
const implicit = (value) => (
  value
);

오브젝트가 리턴되는 경우

암시적 반환을 하는 경우, 자바스크립트는 중괄호가 함수의 시작을 뜻하는 것으로 오해하여 undefind를 리턴한다.

그러므로 암시적 반환을 사용할 땐 리턴 값을 괄호로 묶어주어야한다.

const implicit = () => { value: 1 };
implicit(); // undefined

const implicit = () => ({ value: 1 });
implicit(); // { value: 1 }

괄호 규칙

에로우 펑션에서는 인자가 하나만 존재하는 경우, 괄호를 생략 할 수 있다.

// Arrow Functions, with parentheses
const myFunction = (p) => {}

// Arrow Functions, without parentheses
const myFunction = p => {}

여러개의 인자를 전달 할 때는 인자를 모두 괄호로 감싸줘야한다.

// Arrow Function, with parentheses
const myFunction = (p1, p2) => {}