자바스크립트가 내부적으로 어떻게 동작하는지? 자세하게 알기 위해 정리
자바스크립트는 기본적으로 작업을 싱글스레드로 처리. 즉, 단 하나의 호출 스택을 사용한다.
호출 스택에 쌓인 함수나 코드를 위에서부터 아래로 차례차례 실행한다.하나의 작업이 끝나면 pop하고 바로 아래의 함수나 코드를 실행한다. 하나의 작업이 끝날 때까지 또 다른 작업을 실행하지 않는다.
ex)
function first(){
second();
console.log("첫번째");
}
function second(){
third();
console.log("두번째");
}
function third(){
console.log("세번째");
}
first();
콜스택에 쌓이는 순서 - first() 호출 -> second() 호출 -> third() 호출 -> console.log("세번째")가 호출되어 콜스택에 쌓임
실행순서 : "세번째" -> "두번째" -> "첫번째" 순으로 콘솔이 찍힘
ex)
console.log("시작");
setTimeout(function(){
console.log("3초후 실행");
}, 3000);
console.log("끝");
// 시작
// 끝
// 3초후 실행
먼저 콜스택에 console.log("시작")이 호출되고 콘솔에 찍히고 콜스택에서 제거된다.
다음은 setTimeout함수가 호출되는 데, setTimeout함수는 Web API가 처리하므로 Callback함수를 전달하고, setTimeout작업을 요청한다. 그리고 콜스택에서 제거된다.
콜스택에 console.log("끝")이 호출되고 콘솔에 찍히고 콜스택에서 제거된다.
main()도 콜스택에서 제거된다.
Web API는 setTimeout 작업을 실행한다. 3초 후 Task Queue로 Callback 함수를 보낸다.
Event Loop는 Call Stack이 비어있는지 확인하고 Task Queue에서 함수를 꺼내 Call Stack에 넣고 실행한다.
그래서 자바스크립트는 동기적 vs 비동기적?
- 원래 동기적으로 처리됨
근데, 비동기적 처리도 가능. 그것이 Web API함수를 사용할 때이다.자바스크립트에서 비동기처리가 필요한 이유
- 화면에서 서버로 데이터를 요청했을 때 서버가 언제 그 요청에 대한 응답을 할지도 모르는 상태에서 다른 코드를 실행 안하고 기다릴 수는 없기 때문
자바스크립트 동작원리
- 단일 스레드 방식으로 작동하여 콜스택에 코드나 함수가 한 줄씩 실행되지만 Web API에 있는 기능을 사용하면서 이벤트 루프를 이용해 비동기 방식으로 동시성을 지원한다
참조: https://www.youtube.com/watch?v=v67LloZ1ieI