[자바스크립트] 이벤트 동작원리

이벤트 루프

• 자바스크립트는 싱글 스레드 기반 언어
• 한번에 한 개만 작업 진행

이벤트 루프는 JavaScript가 단일 스레드 언어임에도 불구하고, 비동기 작업을 수행할 수 있게 해주는 핵심 컴포넌트다.

이벤트 루프의 작동

1. Call Stack: 현재 실행 중인 함수들이 쌓이는 곳. 함수가 호출되면 스택에 쌓이고, 작업이 완료되면 스택에서 제거된다.
2. Callback Queue: 비동기 작업에 대한 콜백 함수들이 대기하는 큐. Call Stack이 비어 있으면 이벤트 루프가 큐에서 함수를 꺼내어 Call Stack으로 전달한다.
3. Loop: 이벤트 루프는 Call Stack과 Callback Queue 사이를 계속 확인하며, Call Stack이 비었을 때 Callback Queue에서 함수를 전달하는 역할을 한다.

이벤트 루프 예제

console.log('첫 번째');
setTimeout(() => console.log('두 번째'), 0);
console.log('세 번째');

1. console.log('첫 번째')는 Call Stack에 쌓이고 바로 실행되어 "첫 번째"를 출력한다.
2. setTimeout은 비동기 함수로, 콜백을 Callback Queue에 넣고 다음 줄로 진행한다.
3. console.log('세 번째')는 Call Stack에 쌓이고 바로 실행되어 "세 번째"를 출력한다.
4. Call Stack이 비워지면 이벤트 루프는 Callback Queue에서 console.log('두 번째')를 꺼내어 Call Stack에 넣고 실행한다. 그 결과 "두 번째"가 출력된다.

결과적으로 출력은 "첫 번째", "세 번째", "두 번째" 순서로 나타나게 된다.

실행 컨텍스트

실행 컨텍스트는 코드의 실행에 필요한 정보를 담고 있는 추상적인 개념이며, 이는 실행 시점에 컴파일러에 의해 생성된다.

실행 컨텍스트의 구성

1. 변수 객체: 현재 컨텍스트 내의 변수와 함수 선언에 대한 정보를 담고 있다.
2. 스코프 체인: 현재 컨텍스트가 어떤 변수에 접근할 수 있는지를 결정하는 스코프 정보를 포함한다.
3. this 바인딩: 현재 컨텍스트에서 this 키워드가 어떤 객체를 참조하는지에 대한 정보다.

실행 컨텍스트의 생성과 관리

• 생성: 함수가 호출되면, 해당 함수의 실행 컨텍스트가 생성된다.
• 활성화: 실행 컨텍스트가 Call Stack에 푸시되고 활성화된다.
• 제거: 함수의 실행이 완료되면 해당 실행 컨텍스트는 Call Stack에서 제거된다.

결론

이벤트 루프와 실행 컨텍스트는 JavaScript의 동작을 이해하는 데 중요한 개념이다. 이벤트 루프는 비동기 작업을 가능하게 하며, 실행 컨텍스트는 현재 실행 중인 코드의 상태와 정보를 관리한다. 이 두 개념을 함께 이해하면, JavaScript가 어떻게 단일 스레드 언어임에도 불구하고 비동기 작업을 처리하는지를 더 잘 이해할 수 있다.