화살표 함수를 쓸 때 주의할 점

함수 선언식이나 표현식에 비해 간결한 문법으로 사용할 수 있기 때문에 특히 콜백 함수가 들어갈 argument 자리에 화살표 함수를 쓰는 경우가 많다. 그래서 map(), reduce() 등 배열 내장 메소드와 함께 자주 쓰게 된다.

const arr = [1, 4, 9, 16]
const newArr = arr.map(x => x * 2)
console.log(newArr) // [2, 8, 18, 32]

위의 예제에서 두 번째 줄 .map() 부분을 좀 더 살펴보면 다음과 같다. 중괄호를 제거하고 return 키워드를 빼고 간편하게 적을 수 있다.

const newArr = arr.map(x => x * 2)

// 아래는 위의 코드와 동일한 코드이다. 
const newArr = arr.map(x => {
	return x * 2
})

여기까지는 알고 있었는데, 오늘 fetch API 과제를 하다가 최종 리턴 값으로 객체를 반환해야 하는 과제가 있었고, 이를 화살표 함수를 써서 객체 리터럴을 반환하려고 했더니 Syntax Error가 떴다. 찾아보니 화살표 함수로 객체 리터럴을 반환할 때는 객체 리터럴이 아닌 화살표 함수의 블록 스코프로 인식을 하기 때문에 에러가 발생하는 것이었다.

💡 이에 대한 해결책으로는 :
1. 중괄호 코드 블럭과 return 키워드를 써서 객체를 반환한다.
2. 리턴하고자 하는 객체를 괄호로 묶어줘서 코드 블록이 아닌 객체라는 걸 알려준다. ( { ... } )


참고 자료:

화살표 함수(Arrow function)