JS 30 - Drum Kit

Javascript 30 드럼킷을 만들다 중간에 마주친 에러가 있어서 기록해두려 합니다. 

const key = document.querySelector(`div[data-key="${e.keyCode}"]`);
 
setTimeout(key.classList.remove, 700, "playing") //illegal invocation 발생...

setTimeout에서 key.classList.remove로 콜백을 넘겨주면 illegal invocation이 발생한다. 왜 그런지 살펴보니 다음과 같은 이유인것 같다. 

setTimeout에서 this값을 명시하지 않고 메소드를 그냥 dot notation으로 호출할 경우 호출하는 메소드의 this 값이 window로 설정되어 버린다 따라서 메소드가 어느 객체를 참조해야하는지 정확히 알지 못해 에러가 발생하는 것 같다. 

해결책은 아래처럼 wrapper function으로 감싸거나 bind로 this를 명시하면 된다. 

setTimeout(function() {key.classList.remove}("playing"), 700) //arrow function도 가능
 
setTimeout(key.classList.remove.bind(key.classList), 2700, "playing") //bind로 현재 this를 명시해줘도 됨

참조

https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout

WindowOrWorkerGlobalScope.setTimeout() - Web APIs | MDN