[JavaScript] Arrow Functions

Arrow Functions

Arrow Function은 짧은 함수와 바인딩하지 않은 this라는 두 요구에 따라 ES6(ES2015)에 처음 등장한 함수 표현 방식입니다.

짧은 함수

기존의 함수 표현 방식은 다음과 같았습니다.

var names = [
  'minsu',
  'suji',
  'younghe',
  'jiho'
];

materials.map(function(names) { 
  return material.length; 
}); // [5, 4, 7, 4]

같은 함수를 Arrow Function으로 표현하면 다음과 같습니다.

var names = [
  'minsu',
  'suji',
  'younghe',
  'jiho'
];

materials.map(({length}) => length); // [5, 4, 7, 4]

어때요? 매우 간단해졌죠? 설명을 하자면 우선 function이라는 keyword 대신 =>를 이용하여 Arrow Function임을 알려주었습니다.
그리고 Destructuring을 이용하여 length만을 parameter로 이용하였습니다. Arrow Function은 Destructuring 이외에도 Rest parameter, Default parameter를 지원합니다.

Destructuring

객체의 내부 구조를 파악하여 필요한 값만 받아오는 방법입니다.

// Destructuring을 사용하지 않는 경우
const greeting = (person) => `hello, ${person.name}!`;

// Destructuring을 사용하는 경우
const greeting = ({name}) => `hello, ${name}!`;

const minsu = { name: "minsu" };
greeting(minsu); // hello, minsu!

Rest Parameter

매개변수의 갯수가 일정하지 않을 때 많이 사용하는 방법으로 정해진 매개변수 이외의 값을 배열로 받습니다.

const greetingAll = (...people) => `hello, ${people.join(", ")}!`;

greeting("minsu"); // hello, minsu!
greeting("minsu", "suji"); // hello, minsu, suji!
greeting("minsu", "suji", "mike"); // hello, minsu, suji, mike!

Default Parameter

매개변수를 전달하지 않았을 때 사용할 기본값을 정의합니다.

const greeting = (name = "ananymous") => `hello, ${name}`;

greeting(); // hello, ananymous!

마지막으로 Arrow Function은 단순히 return만 하는 함수의 body를 단순화하는 방법으로 중괄호를 없엘시 암묵적 반환을 명시할 수 있습니다.

바인딩되지 않은 this

Arrow Functions가 나오기 전까지 모든 새로운 함수는 자신만의 this값을 정의해서 이런 식으로 표현해야 했습니다.

function Person() {
  var that = this;  
  that.age = 0;
  setInterval(function growUp() {
    // 콜백은  `that` 변수를 참조하고 이것은 값이 기대한 객체이다.
    that.age++;
  }, 1000);
}

그러나 이 방법은 객체 지향 스타일로 프로그래밍할 때 별로 좋지 않았습니다.
따라서 Arrow Functions는 전역 컨텍스트에서 실행될 때 this를 새로 정의하지 않습니다. 대신 코드에서 바로 바깥의 Function 혹은 Class의 this값이 사용됩니다. 이것은 this를 클로저 값으로 처리하는 것과 같습니다.

function Person(){
  this.age = 0;
  setInterval(() => {
    this.age++; // |this|는 person 객체를 '뙇' 하고 참조
  }, 1000);
}

var p = new Person();

참고

• ES6 In Depth: Arrow functions
• 화살표 함수 - JavaScript | MDN