화살표 함수(arrow function)사용 시 주의사항

구문

(param1, param2, …, paramN) => { statements } 
(param1, param2, …, paramN) => expression
// 다음과 동일함: => { return expression; } 

// 매개변수가 하나뿐인 경우 괄호는 선택사항: 
(singleParam) => { statements } 
singleParam => { statements } 

// 매개변수가 없는 함수는 괄호가 필요: 
() => { statements }

이 때 함수 body에 중괄호 유무에 따른 차이점은

 

1. { }를 사용할 때

(param1, param2, …, paramN) => { statements }

이 함수를 특정 값으로 return하고자 한다면 반드시 return키워드를 써줘야 한다.

 

2.{ }를 생략할 때

//case 1
(param1, param2, …, paramN) => expression

//case 2
(param1, param2, …, paramN) => (expression)

// 다음과 동일함: => { return expression; }

생략하거나 소괄호로 묶는다면 return문을 작성하지 않아도 알아서 return이 되므로 키워드를 생략한다.

 

 

 

 

 

 

 

출처:MDN 화살표 함수 https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Functions/Arrow_functions