1. 동기 처리와 비동기 처리

실행 컨텍스트 스택

• 함수를 호출하면 함수 코드가 평가되어 함수 실행 컨텍스트가 생성
• 함수 실행 컨텍스트는 실행 컨텍스트 스택 (콜 스택)에 푸쉬되고 함수 코드가 실행
• 함수 코드의 실행이 종료하면 함수 실행 컨텍스트는 실행 컨텍스트 스택에서 팝되어 제거 된다.
• 자바스크립트 엔진은 단 하나의 실행 컨텍스트 스택을 갖는다.

예제코드와 실행 컨텍스트

let a = "Notion posting";

function first(){
	console.log("Inside first function");
	second();
	console.log("Again inside first function");
}

function second(){
	console.log('Inside second function');
}

first();
console.log('Inside Global Execution Context');

싱글 스레드 방식

• 자바스크립트 엔진은 한 번에 하나의 태스크만 실행할 수 잇는 싱글 스레드 방식
• 시간이 걸리는 태스크가 있을 경우 블로킹(작업 중단)이 발생

동기와 비동기

동기 처리

실행 순서대로 처리

• 장점 : 실행 순서대로 처리하므로 실행 순서가 보장된다
• 단점 : 블로킹 발생

비동기 처리

실행 중인 태스크가 종료되지 않더라도 다음 태스크를 곧바로 실행하는 방식

• 장점 : 블로킹이 발생하지 않음
• 단점 : 태스크 실행 순서가 보장되지 않음
• setTimeout, setInterval, HTTP요청, 이벤트 핸들러는 비동기 처리 방식으로 동작

2. 이벤트 루프와 태스크 큐

• 자바스크립트 엔진은 싱글 스레드 방식이어서 한번에 하나만 처리할 수 있다.
• 하지만, 브라우저를 보면 다양한 일들을 처리한다 → 이벤트 루프와 태스크 큐 덕분

이벤트 루프

• 자바스크립트의 동시성을 지원하는 것
• 브라우저에 내장되어 있는 기능