자바스크립트 화살표 함수 이해하기

자바스크립트 화살표 함수 형태

다음과 같은 함수 표현식이 있다고 할 때

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

화살표 함수를 쓰면 간결하게 바꿀 수 있다.

function을 없애고 매개변수와 중괄호 사이에 화살표(=>)를 추가한다.

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

중괄호와 return을 생략할 수도 있다.

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

만약 인수가 하나밖에 없다면 소괄호도 생략할 수 있다.

let func = arg1 => expression

또는 인수가 없는 함수라면 소괄호 안을 비워놓는다.

let func = () => expression

정리하면
1. function을 지우고 인수와 중괄호 시작 사이에 화살표(=>) 를 추가한다.
2. 중괄호와 return을 지운다.
3. 인수가 1개라면 인수를 감싸는 소괄호도 지운다.
4. 인수가 없다면 소괄호를 비운 채로 둔다.

Before

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

After

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

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

let func = arg1 => expression // 인수가 하나일 때

또는

let func = () => expression // 인수가 없을 때

길이가 매우 짧아짐!

주의사항

• 본문이 여러 줄일 때는 중괄호와 return을 생략할 수 없다.
• 화살표 함수에서는 this를 사용할 수 없다.