JS | this(1) : Q&A

노마드 코더 | 바닐라 JS로 그림판 만들기

상황

HTMLCollection에 담긴 div.controls_color에 click 이벤트가 발생했을 때 클릭된 div의 스타일 속성값(인라인 스타일)을 가져오는 함수를 작성한다.

const colors = document.getElementsByClass('controls_color');
let _COLOR;

for (let color of colors) {
    color.addEventListener('click', () => {
        _COLOR = this.style.backgroundColor;
    });
};

문제

for (let color of colors) {
    color.addEventListener('click', () => {
      _COLOR = this.style.backgroundColor;	// Uncaught TypeError : Cannot read property 'backgroundColor' of undefined
    });
};

console.log로 찍어보면 콜백 함수의 this는 클릭된 요소를 받아오는 것이 아니라 전역객체 window를 호출한다.

클릭된 요소를 this로 받아오는 것은 예전에 사용했던 방법으로, 그땐 문제가 없었는데 이번엔 문제가 되어서 의아했다. 이유는 자바스크립트의 경우 함수 호출 방식에 따라 this가 가리키는 객체가 달라지기 때문이었다.

원인

1. function 키워드로 선언한 함수와 화살표 함수의 this는 다르게 바인딩된다.

addEventListener 함수의 콜백 함수 내에서 this를 사용하는 경우, function 키워드로 정의한 일반 함수의 this는 이벤트 리스너에 바인딩된 요소(currentTarget)을 가리키는 반면, 화살표 함수의 this는 상위 컨택스트인 window를 가리킨다.

해결책

1. addEventListener의 콜백 함수를 일반 함수로 정의한다.

for (let color of colors) {
    color.addEventListener('click', function() {
        _COLOR = this.style.backgroundColor;
    });
};

2. this 대신 event.target을 사용한다.

for (let color of colors) {
    color.addEventListener('click', (event) => {
        _COLOR = event.target.style.backgroundColor;
    });
};

콜백 함수를 화살표 함수로 정의하더라도 event를 매개변수로 받아 event.target을 사용하면 별다른 문제없이 클릭된 요소를 받아올 수 있다. 하지만 혼란을 불러올 수 있기 때문에 addEventListener 함수의 콜백함수로 화살표 함수를 쓰는 것은 피하는 것이 좋겠다.

---

참고
노마드 코더 | 바닐라 JS로 그림판 만들기
poiemaweb | 5.17 this
poiemaweb | 6.3 Arrow function