JavaScript-removeEventListener의 주의점

const fun = (값) => () => {
console.log("고차함수입니다.", 값);
};
태그.addEventListener("click", fun(1));

위의 이벤트 리스너를 removeEventListener 메서드로 제거해보자.

흔히 아래와 같이 작성하는 실수를 한다.

const fun = (값) => () => {
console.log("고차함수입니다.", 값);
};
태그.addEventListener("click", fun(1));
태그.removeEventListener("click", fun(1));

removeEventListener는 addEventListener에 넣은 함수와 === 연산을 할 때 결과가 true이어야만 이벤트리스너가 제거가 되는데 위와 같은 코드에서는 적용이 안되는데 객체 간의 비교에서 { } === { } 나 [ ] === [ ] 는 값이 항상 false이기 때문이다.

fun(1) === fun(1);	//false

고차함수인 fun은 항상 새로운 함수를 반환한다. 같은 함수가 아니므로 이벤트가 제거되지 않는 것이다. 따라서 이벤트를 제거하고 싶다면 아래와 같이 코드를 짜야한다.

const fun = (값) => () => {
	console.log('고차함수입니다.', 값);
}
const fun1 = fun(1);
태그.addEventListener("click", fun1);
태그.removeEventListener("click", fun1);

fun(1)을 fun1 변수에 저장해서 같은 함수라는 것을 보장해야 한다.