[JavaScript] Arrow Function

요즘 나는 내가 공부한게 명확히 잘 되어있는지 확인하기 위해 다른 누군가에게 코딩을 가르쳐주러 다니고 있다. 물론 당연히 나도 공부를 하기 위한 목적이기 때문에, 보수는 받지 않는다. 근데 오늘 수업 중에 우리가 흔히 처음에 개발을 할 때 배우는 함수와 일반적으로 ES6문법을 사용하는 많은 개발자들이 사용하는 Arrow Function이 뭐가 다른거냐는 질문을 받았다. 함수 문법을 간결하게 축약할 수 있다. 괄호나 중괄호를 사용하지 않아도 함수의 역할을 할 수 있다. 함수라는것을 직관적으로 느끼게 할 수 있다. 이런 장점 정도는 생각했는데 특별히 다른게 없는데 왜 Arrow Function을 많이 사용하는지 설명할 수가 없어서, 상당히 난감했었다. 그래서 집에 오자마자 급하게 모던 자바스크립트 열고 Arrow Function 뒤져봤는데, 생각 안 했던 부분이 있어서 체크하고 넘어가고자 한다. 

 

Scope가 좀 다른데..?

일단 찾아본 설명으로는 this를 사용할 때 this가 가리키는 대상이 일반적인 function과는 달라진다. 라고 설명하고 있었다. 

대충 코드로 작성을 해보면,

const obj = {
    	fn : function () {
        	console.log(this)
     	}
}
obj.fn(); // result : obj

이런 식으로 구현이 되어있었는데, 이렇게 함수를 실행한다면 과연 어떤 결과가 나올까?

일반적인 상식으로는 저 함수가 가지는 scope에 따라서 obj가 나오는게 맞다고 본다. 

근데 Arrow Function은 그렇지가 않은거였음..

Arrow Function의 코드를 한번 살펴보자. 

 

const obj = {
	fn : () => {
    	console.log(this);
    }
}
obj.fn(); // result : window

결과 값이 window로 나온다. 즉, 지금 저 obj안에 들어가 있음에도 불구하고 저 함수의 scope 안에서 this 가 obj로 잡히지 않는거임.

결국 난 "기존의 함수 문법을 개선했다. 동일한 역할을 하는 새로운 문법을 적용했다." 이 정도로만 생각하고 있었는데, 그게 아니라 다른 용도로 만들어진 문법이라고 볼 수 있는거였음.

 

물론 그 외에는 기존의 함수를 더 간결하게 작성할 수 있으니 장점이 많지만, this에 관련한 부분에 있어서 만큼은 장점으로 사용할 수도 있고 혼란을 야기할 수도 있는 부분이긴하다. 일반적으로 코드를 작성할 때  큰 문제를 야기하지는 않겠지만, 분명 어느 정도의 혼란이 있을 것으로 느껴진다..