Arrow Function (화살표 함수)

ES6에 도입된 함수 표기법으로 function 키워드 대신 화살표 모양 문자 =>를 사용해 간단하게 나타낼 수 있다. 기존 함수와는 조금 다르게 동작한다

문법

// 일반 함수
// 함수 선언식
function sayHello (name) {
  return `hello ${name}`
}

// 함수 표현식
const sayHello = function (name) { return `hello ${name}` }

// 화살표 함수
const arrowFunc = (x, y) => { ... }

매개변수

// 매개변수가 한 개인 경우 소괄호 생략 가능
const sayHello = name => `hello ${name}`;

// 매개변수가 없는 경우 소괄호 생략 불가능
const arrowFunc = () => { ... }

함수 몸체가 여러 개의 문으로 구성되면 중괄호를 생략할 수 없다.

const sum = (a, b) => {
  const result = a + b;
  return result;
}

// 하나의 문이라면 return 생략 가능
const sum = (a, b) => a + b;
=
const sum = (a, b) => {
  return a + b;
};

객체 리턴시 소괄호를 사용해야 한다.

const getUser = (name, age) => ({
  name, // name: name
  age // age: age
});
=
const getUser = (name, age) => {
  return {
    name,
    age 
  }
};

default parameter

const sayHello = (name='성이름') => console.log(`hello ${name}`);
sayHello(); // hello 성이름

화살표 함수와 일반 함수의 차이

1. this

this 바인딩은 함수의 호출 방식(어떻게 호출되었는지)에 따라 동적으로 결정된다. bind, call 등의 메서드를 사용해 명시적으로 바인딩할 수 있다.

var a = 1;
var obj = { a: 2 };
function foo() {
  console.log(this);
  return this.a;
}
foo(); // global/window - 1
foo.call(obj); // {a: 2} - 2

화살표 함수는 this 바인딩을 갖지 않고 내부의 this를 변경할 수 없다. 언제나 상위 스코프의 this를 참조한다.

const person = {
  name: '성이름',
  sayHi: function() {console.log(`hi ${this.name}`)},
  sayHello: () => console.log(`hello ${this.name}`)
}

person.sayHi(); // hi 성이름
// 상위 스코프 전역 객체를 가리키므로 빈 문자열 window.name과 같음
person.sayHello(); // hello

2. 화살표 함수는 인스턴스를 생성할 수 없다.

function Person1() {}
new Person1(); // Person {}
const Person2 = () => {}
new Person2(); // Uncaught TypeError: arrow is not a constructor