JS 문법 - 이벤트 루프

Class: 제로베이스
Created: December 28, 2022 9:41 AM
Type: Javascript
강의 명: 초심자도 빈틈없이 학습하는 자바스크립트

이벤트 루프란?

자바스크립트는 싱글 스레드 기반의 언어라서, 한번에 한 개의 작업을 진행.

하지만 자바스크립트가 사용되는 환경을 생각해보면 여러가지가 동시에 진행된다는 것을 알 수 있다.

싱글스레드 기반 언어이지만, 동시적으로 처리되는 작업은 이벤트 루프를 통해 구현되는 것.

동작 방식

1. Javascript Engine
   1. heap과 call stack 으로 구성
2. Heap
   1. 메모리 할당이 일어나는 공간
   2. 변수, 함수 선언 시 메모리 할당이 일어난다.
3. Call Stack
   1. 코드 실행 시 쌓인다.
   2. LIFO (Last In First Out)
4. WevAPI
   1. 자바스크립트가 아닌 브라우저에서 제공하는 API
   2. DOM, Ajax, 타이머 함수 등
   3. Callback 함수를 Callback Queue에 넣음
5. Callback Queue
   1. 비동기적으로 실행된 콜백함수가 있다.
   2. ex) Ajax나 타이머 함수 실행 완료 후 실행할 콜백 함수가 보관된 곳이 콜백 큐
   3. FIFO (First In First Out)
6. Event Loof
   1. 이벤트 루프
   2. 틱 동작을 한다.

실행 컨텍스트

• 코드 실행 환경

실행 컨텍스트 생성 방법

1. 전역 공간
2. eval ( )
3. 함수
4. 블록문(block)

let str = '전역 컨텍스트'
function Outer() {
  function Inner() {
    let str = '내부 변수'
    console.log(str)
  }
  inner(); // 내부 변수
  console.log(str);
}
Outer(); // 전역 컨텍스트
console.log(str) // 전역 컨텍스트

실행 컨텍스트 구성

1. Variable Enviroment
   1. 변수 환경
   2. Lexical Enviroment와 동일한 값
   3. 현재 컨텍스트 내의 식별자 정보 + 외부 정보
   4. 변경 사항이 반영되지 않는다.
2. Lexical Enviroment
   1. 어휘적 환경
   2. 현재 컨텍스트 내의 식별자 정보 + 외부정보
   3. 컨텍스트 내부를 전체적, 순서대로 수집한다.
   4. 변경사항이 반영된다.
3. 식별자 정보
   1. 현재 컨텍스트와 관련된 정보를 저장
   2. 매개변수, 함수, 변수
   3. 호이스팅
4. 외부 정보
   1. 함수 선언 당시의 언어적 환경을 참조
5. This Binding
   1. this는 실행 컨텍스트 생성 시 결정된다.
   2. 함수 호출시 객체를 참조한다.