저도 es6 화살표 함수를 처음 접하고 return을 생략할 때 ()를 넣어줘야하는 경우 보면서 @ajrfyd님 질문 처럼 왜 저걸 넣을까 생각해봤었어요.
자바스크립트에서 중괄호({} : curly braces)는 code block과 object literal 에 사용하고 있잖아요. 화살표 함수에서 함수 body에 expression이 하나 있고 그 expression의 평가된 값을 return하는 경우(()=> 2+3) 중괄호와 return 문을 생략할 수 있는데 이 때 expression 자리(2+3 자리)이 object literal일 경우 이 중괄호가 object literal인지 code block인지 의미인지 구분이 안되기 때문입니다.
(중괄호 없이 return하는 화살표 함수의 body에 대한 정확한 명칭이 궁금해서 찾아보니 ExpressionBody 라고 하네요. )
몇가지 예를 들어 설명해보면
// 아무것도 리턴 안하는 화살표 함수
() => {} // case 1: return nothing (undefined)
// 무언가를 리턴하는 화살표 함수
() => { return something } // case 2
() => something // case 3 : 하나의 expression이 곧 return 값이니 코드블럭 중괄호와 return statement를 생략 가능
이 때 something이 만약 비어있는 object를 생성하게 되는 object literal({})이라 생각해봅시다. something 자리에 {}를 넣어보면
() => {} // case 4: 응??? 이건 case 1과 똑같이 생겼네??
이런 결론을 얻게 되었죠.
({})
code block이 들어갈 수 있는 자리에서 code block이 object literal로 사용된 중괄호의 경우에는 ()로 감싸줘서 expression으로 사용된 중괄호인 object literal이라고 명확히 해야합니다.
코드에서 expression과 code block이 들어갈 수 있는 자리를 몇가지 살펴봅시다.
console.log( 위치1 )
위치2
() => 위치3
function () 위치4
위치 4는 code block만 들어갈 수 있고 위치 1은 expression(평가 되어 값으로 변함)이 들어가야하는 자리입니다.
위치 2와 위치 3은 code block이 들어갈 수도 있고 expression이 들어갈 수도 있습니다.
둘다 들어갈 수 있는 곳에서는 code block이 아닌 object literal의 의미로 중괄호를 사용하게 된다면 expression 임을 나타내기 위해 괄호를 넣어야합니다. 동일하게 함수를 즉시 실행하기 위해 () 를 넣는 것도 평가를 해야한다는 의미입니다.