2022/09/22 - TIL

Event

자바스크립트 엔진은 Memory Heap과 Call Stack으로 구성되어있다. 자바스크립트는 단일 스레드 프로그래밍 언어인데 이 의미는 Call Stackd이 하나라는 의미이다.

MemoryHeap : 메모리를 할당하는 곳
CallStack : 코드를 실행하고 쌓는 곳

자바스크립트 엔진의 Call Stack에 있는 코드 중에서 비동기 함수 코드는 Web API를 호출하고, Web API는 콜백 함수를 Callback Queue에 밀어 넣는다.

Callback Queue

비동기적으로 실행된 콜백함수가 보관되는 영역이다. 이 곳에는 setTimeout, addEventListener 등이 저장된다.

Event Loop

이벤트 루프는 Call Stack과 Callback Queue의 상태를 체크하여 Call Stack이 빈 상태가 되면 Callback Queue의 첫 번째 콜백을 Call Stack으로 밀어넣는다. 이러한 행동을 tick이라고 부른다.

---

이벤트 제거하기

위에 이벤트 루프에 대해 정리를 일단 해놓은 이유는, 이번에 addeventlistener와 removeeventlistner를 사용하면서, 고차함수에 들어가는 콜백함수를 화살표 함수로 사용했었던 이유는 무기명 함수로써 사용한다. 라는 것을 알게되어 정리하기 위해서이다. 다음과 같은 예시가 있다.

body.addEventListener('click', ()=>{functionName()})

다음과같이 바디에 click 이벤트를 추가하였을 때 functionName의 함수를 제거하는 방법은?

body.removeEventListener('click', functionName())

body.removeEventListener('click', functionName)

물론 정답은 둘다 아니다. 1번은 제거하기 위해서 함수 이름을 넣어야하지 호출하는 것이 아니다. 2번 같은 경우에는 지금 함수는 click 이벤트에 functionName을 실행하는 함수를 넣는 것이기 떄문에, 취소 시킬 함수 이름이 없는 것이다. 따라서, 이벤트를 제거할 일이 있다고 하면, 다음과 같이 이벤트를 추가하는 것이 좋다.

body.addEventListener('click', functionName)

제거는 위에 있는 2번방법을 이용해서 삭제하면된다.

함수 내에서 event를 받는 방법?

function functionName(e){
	console.log(e)
}

다음과 같이 이름을 넣는 위치일지라도, 이미 event를 넘겨받는 상황이기 때문에, 파라미터 안에서 사용하고 싶은 이름을 넣는다면 event를 사용할 수 있다.

출처 : https://velog.io/@thms200/Event-Loop-이벤트-루프