[Javascript] Arrow function 정리

형식

다음은 모두 함수의 선언 혹은 표현식입니다. 마지막 형태가 arrow function입니다.

function dasomoli(arg1, arg2) {}
const dasomoli = function(arg1, arg2) {};
const dasomoli = (arg1, arg2) => {};

function 키워드를 제거하고 “=>” 를 중간에 넣는 형식입니다. 매개 변수 역시 사용 가능합니다.

바로 실행하고 싶은 경우(IIFE: Immediately Invoked Function Expression), 다음과 같이 괄호로 감싸서 실행합니다.

((arg1, arg2) => {
  console.log(arg1);
  console.log(arg2);
})(window, document);

생략 가능 형태

매개 변수가 하나인 경우, ( ) 생략 가능

매개 변수가 하나인 경우 괄호를 생략 가능합니다. 다음은 예제입니다.

const dasomoli = (arg1) => {};
const dasomoli = arg1 => {};

바로 return하는 경우, { }와 return 생략 가능

arrow function이 바로 return 하는 경우, 중괄호 { } 와 return은 생략 가능합니다. 다음은 예제입니다.

const dasomoli = (arg1, arg2) => {
  return arg1 + arg2;
}
const dasomoli = (arg1, arg2) => arg1 + arg2;

바로 { }로 감싼 object를 return 하는 경우, { }와 return은 생략 가능하지만 object를 ( )로 감쌈

예외로 { } 로 감싸는 object를 리턴하는 경우, object 전체를 괄호()로 감싸주어야 합니다. 다음은 예제입니다.

const dasomoli = () => { return { prop1: 1 }; }
// const dasomoli = () => { prop1: 1 } <- 이건 안됩니다.
const dasomoli = () => ({ prop1: 1 });

array는 상관 없습니다.

const dasomoli = () => { return [ v1, v2, v3 ]; }
const dasomoli = () => [ v1, v2, v3 ];