[JavaScript] JS의 Implicit Return (암시적 반환)

ES6는 화살표 함수를 도입했다. 

 

🤷‍♀️ 화살표 함수를 쓰려면?

{foodILike.map(function (dish) {
	return (
		<Food name={dish.name} picture={dish.image} rating={dish.rating} />
	);
})} 
      

{foodILike.map((dish) => (
	<Food name={dish.name} picture={dish.image} rating={dish.rating} />
))}

화살표 함수로 바꾸려면 function 예약어를 지우고 => 로 바꿔준다.

인자가 하나일 경우에는 괄호 (dish를 감싸고 있는 괄호)를 쓰지 않아도 되지만... 이건 개인의 코딩 스타일이라고 한다.

근데 VSC는 자동으로 붙여주던데 모르겠다 좀더 써봐야 알듯^^;

 

그리고 화살표 함수는 암시적 반환을 할 수 있는데, 그래서 return 예약어가 필요하지 않음

 

🤷‍♀️ 화살표 함수에서 괄호는...?

  sub = () => {
    this.setState((current) => ({ count: current.count - 1 }));
    //this.setState( current => {return current.count += 1});
  };

주석처리되지 않은 부분은 return해주는 부분에 ( )가 있고,

밑에는 괄호 없이 바로 { }가 리턴되고 있다! 나만 헷갈린게 아니고 질문을 해둔 사람이 있어서 답변을 참고해서 정리한다.

 

화살표 함수를 통해 함수를 나타낸 경우 ( ) => { } 형식을 가지는데, { } 이 부분이 return할 대상으로 표현되는 경우가 많다.

근데 윗줄은 보면 { count : current.count - 1 } 이게 객체인지, 아니면 리턴을 해야하는건지 화살표가 헷갈리는거다!

그래서 이걸 구분하기 위해 객체를 반환하는 경우에는 ( { } ) 이렇게 감싸서 사용한다고 한다.

주석처리 된 부분에서는 { }안에 return이 있으니 잘 리턴이 된 것이다!

 

아그리고 찾다가 또 발견한건데,

암시적 반환을 사용할 때, 중괄호가 함수 본문을 여는 것으로 오인되지 않도록 객체 리터럴을 괄호로 묶어야 합니다 <-라는 글도 봄

영어여서 구글이 제대로 번역을 했는지 모르겠네🤔

 

 

🤷‍♀️ 인자 없이도 화살표 함수를 쓸 수 있다는데?

const example = names.map( () => `wow` );

인자 없이 화살표 함수를 사용하려면 그냥 빈 괄호로 둬도 된다.

빈 괄호가 맘에 안들면 아무거나 써도 된다. 이런걸 사용 후 버리는 변수(throwaway variable)이라고 부른다...🥺

 

 

 

리액트 하면서 만난 친군데 익숙해지려면 많이 써봐야겠다😂

 

 

😏 같이 보면 좋을지도 모르는 글

[JavaScript] 화살표함수 vs 일반함수

 

 

참고)

https://ui.toast.com/weekly-pick/ko_20160912

인강에 달린 댓글들