[JavaScript] arrow function 중괄호 생략, map, 구조분해할당

군 해커톤 프로젝트 중 제목의 3가지 문법(특히 map메소드)을 한번에 활용한 코드를 보고 혼란이 온 적이 있어서 이를 해보려고 한다.

 

중괄호 없이 작성한 코드

result.map(({ userKey }) => userKey)

result.map(({ userKey: userKey }) => { return userKey; });

첫번째 코드는 중괄호를 생략하므로서 암묵적으로 userKey가 반환이 된다. return userKey를 생략한 것
두번째줄의 코드는 첫번째 줄의 코드를  풀어서 적은건데 중괄호를 넣었으므로 return을 명시해줘야한다. map은 콜백함수를 적용한 요소를 배열로 반환하기 때문이다.

인수로 받은 객체에 userKey라는 프로퍼티가 있으면 해당 프로퍼티의 값을 userKey라는 동일한 이름의 변수에 할당한다.
여기서 map은 콜백함수를 적용한 요소를 배열로 반환한다.
userKey의 Value들만 뽑아서 배열 형태로 만든다는 것을 의미한다.

 

중괄호를 사용한 코드

result.map(({ userKey }) => { userKey });

이 코드는 userKey를 반환하지 않는다.

중고라호를 사용하면 반드시 return을 명시해야한다. 중괄호 {}를 사용했지만 return 키워드가 없기 때문에 암묵적으로 undefined를 반환한다. 

따라서 올바른 코드를 작성하려면 return 키워드를 붙여서

result.map(({ userKey }) => { return userKey; });

 

 

결론

• 중괄호 없이 한 줄로 작성하면 return 이 생략된 것으로 간주되어 값을 반환한다
• 중괄호를 사용하면 명시적으로 return을 작성해야 값이 반환된다
• 중괄호를 사용하고 return을 생략하면 undefined 가 반환된다