Arrow Function(화살표 함수)이란? :: 마이구미

이 글은 ES6 문법 중 하나인 Arrow Function(화살표 함수) 를 다뤄본다.

완벽히 숙지하지 않고 사용한다면, 예기치 못한 오류가 발생할 수 있다.

글을 이해하기 위해서는 this 에 대한 이해가 필요하다.

this 공식 문서 - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this

ES5 이하는 지원하지 않는다.

 

// 함수 표현식

function () {}

 

// 화살표 함수 표현식

() => {}

 

현재 ES6를 대부분 알고 있거나, 사용하고 있다고 볼 수 있다.

그 중 가장 많이 사용하는 것이 let, const, arrow function 이 아닐까 생각한다.

 

깊게 보지 않는다면, 단순히 짧게 표현하기 위해 화살표 함수를 사용한다고 생각할 수 있다.

단순히 함수에 대한 문법적인 표현이기 때문에, 그렇게 생각이 들 수도 있다.

하지만 그렇게 생각하면 많은 오류를 초래할 수 있다.

 

공식 문서에는 다음과 같이 설명되어 있다.

Arrow Function Expression

 

화살표 함수 표현(arrow function expression)은 function 표현에 비해 구문이 짧고  자신의 this, arguments, super 또는 new.target을 바인딩 하지 않습니다. 화살표 함수는 항상 익명입니다. 이  함수 표현은 메소드 함수가 아닌 곳에 가장 적당합니다. 그래서 생성자로서 사용할 수 없습니다. 

 

설명에서 나타내는 다음 2가지를 완벽히 이해한 후, 사용해야한다.

 

1. this 바인딩 하지 않는다.
2. 메소드 함수가 아닌 곳에 가장 적당하다.

 

this를 바인딩하지 않는다는 의미는 무엇인가?

 

this는 함수 호출하는 방식에 따라 달라진다. (이 글에서 방식에 대한 자세한 것들은 다루지 않기에, 위 공식 문서를 참고바란다.)

이러한 문제 때문에, 자바스크립트를 활용한 객체 지향 스타일을 구현하기에 성가셨다.

다음과 같은 코드를 보았거나, 사용했다면 그러한 이유일 것이다.

 

function Person() {
  this.age = 0;

  setInterval(function growUp() {
    this.age++;
  }, 1000);
}

var p = new Person();

 

일반적인 함수로써의 호출에서는 this는 전역 객체에 바인딩된다.

그 결과, 위 코드는 this의 값이 서로 다르기에 제대로 동작하지 않는다.

해결 방안으로는 아래와 같았다.

 

function Person() {
  var that = this;
  that.age = 0;
  setInterval(function growUp() {
    that.age++;
  }, 1000);
}

 

this의 값을 같은 스코프에 있는 변수에 할당하여 사용한다.

그 외에도 call, apply 등과 같은 다른 방안이 존재한다.

 

메소드 함수가 아닌 곳에 가장 적당하다는 무슨 의미인가?

 

여기서, 메소드는 객체와 관련된 함수로써, 데이터와 멤버 변수에 대한 접근 권한을 가진다.

다음과 같이, 객체의 속성인 b, c를 뜻한다.

 

var obj = { 
    i: 10, 
    b: () => { 
       // this => global
       console.log(this.i) 
    }, 
    c: function() { 
       // this => obj
       console.log(this.i) 
    } 
}

obj.b() // undefined

obj.c() // 10

 

객체의 메소드로 호출할 경우의 this는 메소드를 포함하는 객체. 즉, 그 자체에 바인딩된다.

하지만 화살표 함수는 this를 바인딩 하지 않기 때문에, 둘러싸인 스코프에서 this의 값을 찾을 수 없다.

위와 같은 결과로 인해, 화살표 함수는 메소드에 적합하지 않다.