안녕하세요..리뷰는 아니고 너무 궁금해 질문드려요ㅠㅠ

export increase = () => ({ type: 어쩌고, payload })

위의 코드가 궁금합니다 ㅠㅠ 리덕스 액션생성 함수인데 —>>(<<— { type: 어쩌고, payload } —>>)<<—

제가 화살표로 표시한 ( ) 소괄호… 는 왜 들어가는건지 궁금합니다 ㅠㅠ 즉시실행 함수도 아닌고 같고…

increase = () => {
return {
type: INCREASE,
payload
}
}

원 함수는 이놈일텐데…음 화살표 함수 리턴값이 한줄이면 리턴은 생략할 수 있다는건 아는데 소괄호는

왜 들어가는지 궁금합니다…

좋아요 1

객체를 arrow funcrtion으로 리턴할 경우 소괄호를 붙이는 이유는 es6문법에서 그렇게 정해놨기때문이에요.

const fn1 = () => {{ }} 보다는
const fn1 = () => ({})가
좀 더 명확하게 객체를 바로 반환한다는 의미와 가독성 때문이 아닐까싶네요

두번째 스타일이 아직 안익숙하시다면
const fn1 = () => { return value; }
스타일로 계속가셔도 무방할거같습니다.

좋아요 1

아 알겠습니다! 감사해용!!!

좋아요 1

안녕하세요~ @ajrfyd @kdd3335k 두분의 질문과 답변 반갑습니다. :+1:

저도 es6 화살표 함수를 처음 접하고 return을 생략할 때 ()를 넣어줘야하는 경우 보면서 @ajrfyd님 질문 처럼 왜 저걸 넣을까 생각해봤었어요. :slight_smile:

자바스크립트에서 중괄호({} : 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 라고 하네요. :slight_smile: )

몇가지 예를 들어 설명해보면

// 아무것도 리턴 안하는 화살표 함수
() => {}  //  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 임을 나타내기 위해 괄호를 넣어야합니다. 동일하게 함수를 즉시 실행하기 위해 () 를 넣는 것도 평가를 해야한다는 의미입니다.

참고

@ajrfyd 님, 이 글의 카테고리 구분을 #codejom “코드좀 봐주세요 코드종” 으로 변경했습니다. 또 궁금한 점 있으면 언제든지 글 남겨주세요.

감사합니다! 영상으로 까지 올려서 설명해 주신것 잘 봤습니다 !

이제야 조금 속이 시원하네요 감사합니다!~

좋아요 1

저 또한 감사합니다 :pray: