Javascript - 화살표 함수의 비밀

map 함수에 객체를 바로 return 하려고 하니

undefined 이 나타나게 되었습니다.

그리하여... 화살표 함수의 비밀을 파헤쳐보기 시작했습니다.

 

map 함수로 간단한 예시를 보여드리겠습니다.

 

let arr = [1,5,412,2,156,2]

arr.map(x => {x})
[undefined, undefined, undefined, undefined, undefined, undefined]

 

화살표 함수 뒤에 리턴값을 불러오게 되면 모든 것이 생략되고 리턴 값만 작성하면 되는데 객체를 불러오면 undefined가 뜹니다.

그 이유는 저 {x} 객체를 함수로 인지해서 return 값이 없기 때문에 그렇다고 합니다.

 

객체 안에 값을 넣으려면

arr.map(function(x){

return {x} }) 라는 함수를 사용하면 또 값이 나옵니다.

 

그럼 어떻게 해야 return 값을 생략하고 객체 값을 반환할 수 있는가?

화살표 함수에서 함수를 생략할 수 있을 때 return을 () 소괄호를 이용하여 표현할 수 있었습니다.

 

arr.map( x => ({x}) ) 로 표현하게 된다면 객체로 표현이 가능하게 됩니다.

 

상기 function이 들어있는 함수와 같은 표현이라고 할 수 있습니다.

 

만일 화살표 함수 return을 객체로 하고 싶다면... 소괄호를 사용하여 진행해봅시다.