[Javascript] 화살표 함수

YanZ·2021년 3월 17일

화살표 함수

화살표 함수(Arrow Function)는 ES6에서 등장한 새로운 함수 정의 방식입니다.
기존의 function 키워드 대신 화살표 ( => ) 를 사용해서 간략하게 함수를 정의할 수 있습니다.

기존의 함수 정의 방식

var a = function() {
    // ...
};

화살표 함수를 사용한 정의 방식

var a = () =>{
    // ...
};

화살표 함수의 기본 문법

// 매개변수 지정 방법
    () => { ... } // 매개변수가 없을 경우
     x => { ... } // 매개변수가 한 개인 경우, 소괄호를 생략할 수 있다.
(x, y) => { ... } // 매개변수가 여러 개인 경우, 소괄호를 생략할 수 없다.

// 함수 몸체 지정 방법
x => { return x * x }  // single line block
x => x * x             // 함수 몸체가 한줄의 구문이라면 중괄호를 생략할 수 있으며 암묵적으로 return된다. 위 표현과 동일하다.

() => { return { a: 1 }; }
() => ({ a: 1 })  // 위 표현과 동일하다. 객체 반환시 소괄호를 사용한다.

() => {           // multi line block.
  const x = 10;
  return x * x;
};

this

일반 함수의 this

자바스크립트의 경우 함수 호출 방식에 의해 this에 바인딩할 어떤 객체가 동적으로 결정됩니다. 다시 말해, 함수를 선언할 때 this에 바인딩할 객체가 정적으로 결정되는 것이 아니고, 함수를 호출할 때 함수가 어떻게 호출되었는지에 따라 this에 바인딩할 객체가 동적으로 결정됩니다.

예를들어 콜백 함수 내부의 this는 전역 객체 window를 가리킵니다.