화살표 함수를 사용할 때 유의할 점

화살표 함수를 사용할 때 문법을 간소화하는 것이 필요하다

가장 중요한 것은 대안책을 알아야 하는 것인데,

 

1) 매개 변수 괄호 생략

만약 화살표 함수가 한 개의 파라미터만 가지고 있다면 괄호를 생략할 수 있다

Instead of

1. (userName) => { ... }

you could write

1. userName => { ... }

Please note)

만약 함수에 파라미터가 없을 경우 괄호는 생략되면 안된다. () => { ... } 사용

만약 함수가 한 개 이상의 파라미터를 가질 경우 괄호는 생략되면 안된다. userName, userAge => { ...} 대신에 (userName, userAge) => { ... }를 사용해야 된다.

 

2) 함수 본문에 중괄호 생략

만약 화살표 함수가 아무 문법이 없고 return 상태만 가지고 있을 경우, 중괄호를 생략할 수 있다.

Instead of

1. number => {
2. return number * 3;
3. }

you could write

1. number => number * 3;
2.  

The following code would be invalid:

1. number => return number * 3; // invalid because return keyword must also be omitted!

1. number => if (number === 2) { return 5 }; // invalid because if statements can't be returned
2.  

3) Special case: Just returning an object

If you go for the shorter alternative explained in 2) and you're trying to return a JavaScript object, you may end up with the following, invalid code:

1. number => { age: number }; // trying to return an object

This code would be invalid because JavaScript treats the curly braces as function body wrappers (not as code that creates a JS object).

To "tell" JavaScript that an object should be created (and returned) instead, the code would need to be adjusted like this:

1. number => ({ age: number }); // wrapping the object in extra parentheses

By wrapping the object and its curly braces with an extra pair of parentheses, JavaScript understands that the curly braces are not there to define a function body but instead to create an object. Hence that object then gets returned.