[JS] 화살표 함수

화살표 함수란

함수 표현식보다 단순하고 간결한 문법으로 함수를 만들 수 있는 방법을 말한다.

let func = function(arg1, arg2, ...argN) {
  return expression;
};

 

위와 같은 함수를

아래와 같이 간략하게 표현할 수 있다.

let func = (arg1, arg2, ...argN) => expression

 

화살표 함수를 아래와 같이 더 간략하게 사용할 수 있다.

 

 

1) 매개변수 () 괄호 생략하기

화살표 함수가 정확히 하나의 매개변수만 사용하는 경우, 묶는 괄호를 생략할 수 있다.

let func = (userName) => { ... }

 

userName이라는 하나의 매개변수만 사용되니 매개변수를 묶는 () 괄호 없앨 수 있다.

let func = userName => { ... }

 

 

참고:

• 함수에 매개변수가 없는 경우에는, 괄호를 생략해서는 안된다. () => { ... } 라고 써야한다.
• 함수가 둘 이상의 매개변수를 받는 경우에도 괄호를 생략해서는 안된다. (userName, userAge) => { ... }

 

 

2) 함수 본문 {} 중괄호 생략하기

화살표 함수에 반환문 외에 다른 로직이 없는 경우, return키워드와 {}중괄호를 생략할 수 있다.

number => { return number * 3;}

 

number * 3만 반환하고 있으니 아래와 같이 return과 중괄호를 없앤다.

number => number * 3;

 

 

아래와 같으면 오류가 생긴다.

number => return number * 3;

• retrun 키워드는 생략되어야 하므로, 오류가 생긴다.

number => if (number === 2) { return 5 };

• if 문은 반환될 수 없으므로 오류가 생긴다.

 

 

3) 객체만 반환하는 경우

2)에서 설명한 짧은 대안으로 객체를 반환하려고 하면, 다음과 같이 유효하지 않은 코드가 나올 수 있다.

number => { age: number };

자바스크립트는 {}중괄호를 객체를 생성하는 코드가 아닌 함수 본문으로 취급하기 때문에 이 코드는 유효하지 않다.

객체를 생성하고 반환하고 싶다면 다음과 같이 해야한다.

number => ({ age: number }); // 추가 괄호를 써서 객체를 감싸주기

객체와 중괄호를 ()추가 괄호로 감싸면, 자바스크립트는 중괄호가 함수 본문을 정의하는 것이 아니라 객체를 생성하기 위한 것으로 이해한다.