[JavaScript / ES6] 화살표 함수 (Arrow function)

Arrow function (화살표 함수)

화살표 함수는 function 키워드 대신 화살표 =>를 사용하여 보다 간략한 방법으로 함수를 선언하는 방법이다.

 

문법

기본 문법은 다음과 같다.

// function
let func = function(arg1, arg2, ...argN) {
  return expression;
};

// arrow function
let func = (arg1, arg2, ...argN) => expression

 

인수가 하나밖에 없다면 인수의 괄호는 생략할 수 있다.

// function
let double = function(n) { return n * 2 }

// arrow function
let double = n => n * 2;

 

인수가 없을 땐 빈 괄호를 사용한다. 다만 괄호는 생략할 수 없다.

let sayHello = () => alert("Hello");

 

다음과 같이 함수를 간결하게 응용할 수 있다.

let welcome = (age < 18) ?
  () => alert('안녕') :
  () => alert("안녕하세요");

welcome();

 

본문이 여러 줄인 화살표 함수는 코드를 중괄호 안에 넣어야 하고 리턴 값을 명시해야 한다.

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

 

익명 함수로 사용

화살표 함수는 익명 함수로만 사용할 수 있다. 따라서 이를 호출하기 위해서는 함수 표현식을 사용한다.

// 함수 선언식 (Function Declarations)
function foo() {
  ...
}

// 함수 표현식 (Function Expressions)
var foo = function () {
  ...
};

 

콜백 함수로 사용

화살표 함수를 콜백 함수로 사용하면 일반 함수보다 표현이 간결해진다.

 

콜백 함수는 다른 함수의 인수에 위치하는 함수로써, 특정 이벤트가 끝난 뒤 호출되는 함수를 의미한다.

// function
var arr = [1, 2, 3];
var pow = arr.map(function (x) {
  return x * x;
});

// arrow function
const arr = [1, 2, 3];
const pow = arr.map(x => x * x);

 

this

일반 function 함수와 화살표 함수의 가장 큰 차이점은 this이다.

(this는 중요한 문법이니 여기선 가볍게 다루고 따로 정리하겠다.)

 

자바스크립트의 경우 함수 호출 방식에 의해 this에 바인딩할 어떤 객체가 동적으로 결정된다.

 

1. 일반 함수

콜백 함수 내부의 this는 기본적으로 전역 객체 window를 가리킨다.

 

하지만 .bind()를 통해 this를 동적으로 지정할 수 있다.

function Prefixer(prefix) {
  this.prefix = prefix;
}

// Problem
Prefixer.prototype.prefixArray = function (arr) {
  return arr.map(function (x) {
    return this.prefix + ' ' + x; // this: window 객체
  });
};

// Solution 1
Prefixer.prototype.prefixArray = function (arr) {
  var that = this;  // this: Prefixer 생성자 함수의 인스턴스
  return arr.map(function (x) {
    return that.prefix + ' ' + x;
  });
};

// Solution 2
Prefixer.prototype.prefixArray = function (arr) {
  return arr.map(function (x) {
    return this.prefix + ' ' + x;
  }, this); // this: Prefixer 생성자 함수의 인스턴스
};

// Solution 3
Prefixer.prototype.prefixArray = function (arr) {
  return arr.map(function (x) {
    return this.prefix + ' ' + x;
  }.bind(this)); // this: Prefixer 생성자 함수의 인스턴스
};

 

2. 화살표 함수

화살표 함수의 this는 언제나 상위 스코프의 this를 가리킨다.

 

이를 Lexical this라고도 칭한다.

function Prefixer(prefix) {
  this.prefix = prefix;
}

Prefixer.prototype.prefixArray = function (arr) {
  // this는 상위 스코프인 prefixArray 메소드 내의 this를 가리킨다.
  return arr.map(x => `${this.prefix}  ${x}`);
};

 

참조

• developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Functions/Arrow_functions
• ko.javascript.info/arrow-functions-basics
• poiemaweb.com/es6-arrow-function