[JS] 화살표 함수(arrow function)

ES6부터는 () => 표기법(notation)을 이용하여 함수를 간결하게 표현할 수 있습니다. 화살표 함수는 함수를 표현하는데 function 키워드가 필요 없습니다. 대신 함수의 파라미터가 들어갈 괄호((): parentheses)와 함수의 바디를 가리킬  화살표(=>)를 사용합니다.

 

// ES5 익명 함수
function() {
  // {}: 함수 바디
};

// ES6 익명 함수
() => {
  // {}: 함수 바디
}

 

화살표 함수를 만드는 몇 가지 방법과 화살표 함수를 사용을 피해야 하는 경우를 알아보겠습니다.

 

 

화살표 함수를 만드는 방법

1. 파라미터가 없는 경우

 

// 매개변수가 없는 경우
const funcName = () => {};

 

 

2. 파라미터가 하나인 경우

매개변수가 하나인 경우라면 괄호의 생략이 가능합니다. 파라미터가 없거나 두 개 이상인 경우라면 괄호가 반드시 필요합니다.

 

// 매개변수가 하나인 경우
const funcName = param1 => {};

 

 

3. 파라미터가 두개 이상인 경우

 

// 매개변수가 둘 이상인 경우
const funcName = (param1, param2) => {};

 

 

4. 함수 바디가 한줄인 경우 (single-line block)

함수의 바디가 한줄이라면 중괄호와 return 키워드 생략이 가능합니다. 이 경우 함수는 바디 실행 결과를 자동으로 반환합니다. 

 

// 함수 바디가 한줄인 경우 (single-line block)
const squareNum = num => num * num;

// 동일한 표현입니다.
const squareNum = num => {return num * num};

 

 

5. 함수 바디가 여러줄인 경우 (multi-line block)

 

// 함수 바디가 여러줄인 경우 (multi-line block)
const squareNum = num => {
  const square = num * num;
  return square;
}

 

 

#정리

 

 

this 키워드를 사용한다면 주의하자

1. 메서드 작성

function 키워드를 이용해서 메서드를 작성한 경우와 화살표 함수를 사용한 경우를 비교해 보겠습니다.

 

메서드를 function 키워드로 작성한 경우에는 메서드 내부의 this는 메서드를 호출한 객체를 가리킵니다.

 

// function keyword
const Car = {
  brand: "tesla",
  printMe: function() {console.log(this);}
}

Car.printMe();

 

 

 

하지만 화살표 함수의 경우에는 전역 객체인 window 객체를 가리킵니다.

 

const Car = {
  brand: "tesla",
  printMe: () => {console.log(this);}
}

Car.printMe();

 

 

 

2. addEventListener 함수의 콜백 함수

addEventListener 함수의 콜백 함수로 일반 함수를 사용하는 경우와 화살표 함수를 사용하는 경우 각각 this 키워드가 가리키는 대상이 서로 다릅니다.

 

function keyword

일반함수 내부의 this는 이벤트 리스너가 등록된 요소를 가리킵니다.

 

const body = document.querySelector('body');

body.addEventListener('click', function() {
    console.log(this);
});

 

 

 

arrow function

화살표 함수 내부의 this 키워드는 윈도우 객체를 가리킵니다. this 키워드를 사용하고 싶은 경우라면 화살표 함수를 사용하면 안 됩니다.

 

const body = document.querySelector('body');

body.addEventListener('click', () => {
    console.log(this);
});