ES6 : 편한 arrow function 안에서도 쓰지 못하는 게 있다?

화살표 함수를 쓰면서 너무너무 재밌고, 간편하게 쓰고 있었는데 

이런 함수에서도 사용할수 없는 문법이 있다.

 

신기하기도 하면서 잊어버리지 않기 위해서 정리해둔다.

 

const test = (arg) =>{
	const plusSum = arg + "님, 반가워요";
    
    return plusSum;
}

[ 화살표함수의 예시 ]

 

 

바로 this 함수이다.

쓸수 없는 이유는 바로, 해당함수가 지정하는 범위가 달라지기 때문이다 .

 

예시를 보자. 

 

버튼을 누르면 버튼글씨가 변경되는 간단한 예제다.

const btn = document.querySelector("button");

btn.onclick = function () {
  this.innerText = "바뀌어요"; //여기서 this는 바로 상위의 버튼을 가리킴.
};

 

this 함수는 호출에 따라서 어떤 객체를 참조하는 지 (binding:바인딩) 달라지게 된다. 

현재 예제에 따르면 나는 button 객체를 참조하게 호출하였고, this = button 을  가르키는 것을 알 수 있다

여기까지가, 기본적으로 알고 있는 함수이며 가장 널리 쓰이는  this의 방식이다.

 

만약, 해당 함수를 화살표함수로 변경하면 어떤값이 나오게 될까?

먼저 기본 함수를 했을 때 this가 어떤 객체를 참조했는지 확인을 해보자. 

const btn = document.querySelector("button");

btn.onclick = function() {
  console.log(this);
};

결과)

딱!! 버튼을 참조한다고 보여진다. 

 

그렇담 화살표함수로 바뀐다면??

const btn = document.querySelector("button");

btn.onclick = () => {
  console.log(this);
};

결과)

엥...왜 undefined??

 버튼을 참조한다는데 화살표 함수로 바꿨는데 왜 갑자기 버튼을 참조하지 못하지??

 그건 참조대상이 button -->> window로 바뀌었기 때문이다 ( 버튼하나만 참조하다가 갑자기 전체를 참조한다고??)

 

그 이유는 화살표 함수에서 this를 선언하게 되면 

기본 this 가 참조되는 방식을 써서 참조되는게 아니라 무조건 언제나 상위 범위(scope)를 참조하기 때문이다.

 

button(버튼) << window 이기 때문에 화살표함수에 쓰인 this 는 윈도우를 참조하게 된다. 

 

그러면 버튼이 다른 태그로 감싸고 있다면 window를 참조할까?

방금 위쪽에 설명하기로 무조건 언제나 상위 범위를 참조한다고 했으니까!

 

&nbsp;div 내에 btn을 쓴 결과

답은 하단에 정말 깔끔하게 나와서 인용한다.

 ' this는 상위 환경의 this를 계승하므로 전역 객체를 가리키게 되는 것이다'

출처: https://kim-solshar.tistory.com/57 [김솔샤르의 인사이트] 

 

 

편리하긴 하지만, 내가 원하는 범위로 쓸수 없으니 신기하기도 하면서 답답하기도 함. 

 

---

참조

https://programmer-seva.tistory.com/28

[스터디_자바스크립트] 15. 함수 호출과 this

https://nykim.work/71

[JS] 자바스크립트에서의 this

https://velog.io/@juno7803/JS-this%EC%99%80-arrow-function

[JS] this와 arrow function

https://kim-solshar.tistory.com/57

[자바스크립트] arrow function과 this

 

 

+ 사담

날이갈수록 이해하고 이걸 풀어써서 정리하는 것에 큰 괴리감이 든다.

블로그에 열심히 정리하시는 모든 분들께 대단하다고 말씀드리고 싶다.

더불어 꾸준히 관리하는 것도 대단하다고 생각함 : )