JavaScript arrow function 비밀을 파헤쳐보자 (ES6)

arrow function에 대해서 머리속으로 정리해보고자 합니다.

이번 시간에도 마찬가지로 arrow function(ES6) 이 나오기 전 어떤 현상이 있었고 그 현상을 어떻게 해결 했는지에 대해 이야기 하겠습니다.

arrow function이 나오기 전에 우리는 느꼈을 수도 있지만 메소드 안에 함수를 만드는게 매우 어려웠을 것이다. 바로 this 때문이다. 일단 아래의 예제를 보자.

function Person() {

this.age = 0;

console.log(this); // Person { age: 0 }

setTimeout(function growUp() {

console.log(this); // window

this.age++; // NaN

}, 1000);

}

var p = new Person();

여기서 집중해서 봐야할 게 있다. this가 가리키고 있는 대상이다. 위의 예제를 보면 첫 번째 this 는 Person 생성자 함수 객체를 가르키고 있고 두 번째 this 는 window를 가르키고 있다. 여기서 서로가 바라보는 this가 다른 것인지에 대해 의문이 들어야한다. JavaScript는 함수 호출 시 this가 바인딩 할 객체가 동적으로 결정된다. 함수 선언 시 this에 바인딩 할 객체가 정적으로 결정되는 것이 아니라 함수를 호출할 때 함수가 어떻게 호출 되었는지에 따라 this가 바인딩할 객체를 동적으로 결정한다. 그렇기 때문에 두 번째 this는 최상위 객체인 window 를 가르키고 당연히 밑에 전역 변수에서 찾을 수 없으니 NaN 값을 반환한다. 그럼 이를 해결하기 위해서 어떤 방법을 사용 하였는가 ? 

아래의 예제를 한번 보자.

function Person() {

var that = this;

that.age = 0;

console.log(this); // Person { age: 0 }

setTimeout(function growUp() {

that.age++; // age = 1

console.log(that); // Person { age: 1 }

}, 1000);

}

var p = new Person();

위의 예제는 this라는 것을 that이라는 변수에 담았고 함수 내부에는 Person의 this를 that이 가르키고 있어 age가 1이 증가한 것을 볼 수 있고 그 안에 that을 찍어보면 Person 생성자 함수 객체를 가리킨다. 이번 방법 뿐만 아니라 다른 방법도 존재한다. 이 방법은 ES5 에서 나온 bind() 라는 함수인데 그 말대로 this를 바인딩 해주는 함수이다. 아래는 그 예시이다.

function Person() {

this.age = 0;

console.log(this); // Person { age: 0 }

setTimeout(function growUp() {

this.age++; // age = 1

console.log(this); // Person { age: 1 }

}.bind(this), 1000);

}

var p = new Person();

---

그럼 이제 한번 arrow function이 어떤 장점들이 있으며 어떤 비밀이 있는지 알아보자.

1. function 표현에 비해 구문이 간단하다.

() => { ... } // 인수가 없을 때

x => { ... } // 인수가 하나 일 때

(x, y) => { ... } // 인수가 여러 개일 때

x => { return x * x } // 블록을 사용한 방식

x => x * x // 표현식이며 위와 같음

간단한 예제를 보면 아래와 같다. 하나는 ES5로 방식으로 구현 하였고, 마지막은 ES6 방식으로 구현하였다.

// ES5 방식

var func = function (x) { return x * x; };

console.log(func(5)) // 25

// Arrow function ES6 방식

const func = x => x * x;

console.log(func(5)); // 25

위의 예제와 같이 기존 ES5 방식보다 많이 간결해지고 더 직관적인 것을 알 수 있다.

2. arrow function을 사용하면 함수안의 this는 상위 scope의 this를 가리킨다. (Lexical this)

기존 JavaScript는 함수 선언 시 위에서 이야기 한 것과 동일하게 this에 바인딩 할 객체가 동적으로 결정된다. 하지만 화살표 함수는 함수 선언 시 this가 바인딩 할 객체가 정적으로 결정된다. 이 말은 즉 일반 함수와 달리 화살표 함수의 this 는 항상 상위 scope의 this를 가리킨다. 이를 Lexical this 라고 한다.

처음에 사용했던 예제를 arrow function으로 다시 표현해보자. arrow function은 prototype이 없으므로 생성자 함수가 아닌 다른 방식으로 예제를 만들었다.

const Person = () => {

this.age = 0;

console.log(this.age); // 0

setTimeout(() => {

this.age++; // 1

console.log(this.age); // 1

}, 1000);

}

Person();

arrow function 은 편리하지만 용도에 맞춰 잘 사용하는 것이 중요한 것 같다. 중요함과 동시에 ES5에서 함수를 선언한 방식은 점점 사라질거라는 조심스러운 예상을 한다.

긴글 읽어주셔서 감사합니다.

오늘도 해피 코딩하세요 !