arrow 함수 - {} / ()

오류 메세지

Array.prototype.map() expects a return value from arrow function.eslintarray-callback-return
function(item: number): void

// 1. 오류 발생
{num.map((item) => {
  <Number key={item}>{item}</Number>
})}

// 2. 오류가 발생하지 않음
{num.map((item) => (
  <Number key={item}>{item}</Number>
 ))}

원인

이 메시지는 ESLint라는 JavaScript 코드 품질 도구가 생성하는 오류 메시지이다. 이 메시지는 배열의 map() 메서드를 사용할 때 화살표 함수(arrow function)를 사용한 콜백 함수에서 반환값을 지정하지 않았을 때 발생한다.

해결 방법

콜백 함수에서 처리한 값을 return 키워드를 사용하여 반환하도록 코드를 수정하면 된다.

궁금한 점

2번은 return을 사용하지 않았는데 오류가 발생하지 않았다.

같은 화살표 함수인데 ()와 {}의 차이를 알 수 가 없어서 더 알아보았다.

---

화살표 함수 () => {}와 () => ()의 차이점

우선 () => {}라고 쓰면 오류 발생x
하지만 () => ()은 '식이 필요합니다' 라는 오류 발생

둘은 같은 화살표 함수지만 문법적으로 약간의 차이가 있다.

1. () => {}

• {}는 함수 몸체를 나타내며 중괄호 안에서 원하는 작업을 수행있다. 예를 들어 변수 선언, 조건문, 반복문 등을 포함할 수 있다.
• 반환값을 명시적으로 지정하지 않는다.

2. () => ()

• 소괄호 () 안에 다시 소괄호 ()를 사용한다.
• 내부 소괄호 안에는 표현식을 포함해야 한다.
  이 표현식은 함수의 반환값 으로 사용된다.
• 내부 소괄호 안의 표현식을 평가하고 그 결과를 반환한다.

정리

() => {};는 일반적인 화살표 함수를 나타내며, () => ();는 소괄호 안에 표현식을 포함하는 화살표 함수이다.