[Java Script] 자바스크립트 동작원리( 동기, 비동기)

자바스크립트의 런타임 이미지

이미지 설명

Heap:

힙은 동적으로 할당된 메모리 공간으로, 객체와 변수들이 저장되는 곳입니다.

JavaScript에서 객체와 배열은 힙에 저장되며, 할당된 메모리 공간은 더 이상 사용하지 않을 때 가비지 컬렉터에 의해 해제됩니다.

스택(Stack):

스택은 함수 호출과 관련된 메모리 공간으로, 함수 호출 시 지역 변수와 매개변수 등이 저장됩니다.

함수가 호출되면 해당 함수의 스택 프레임이 생성되고, 함수의 실행이 끝나면 스택 프레임이 제거됩니다. 이를 통해 함수의 호출과 복귀를 관리합니다.

Web API:

Web API는 브라우저가 제공하는 인터페이스로, 브라우저 환경에서 비동기 작업을 처리하고 외부 리소스에 접근할 수 있도록 도와줍니다.

setTimeout, XMLHttpRequest, fetch 등의 비동기 함수들은 Web API를 사용하여 작동합니다.

콜백 큐(Callback Queue):

콜백 큐는 비동기 작업의 콜백 함수들이 대기하는 공간입니다.

비동기 작업의 결과나 완료 시 콜백 함수가 호출되어야 할 때, 해당 함수들은 콜백 큐에 저장되어 기다리게 됩니다.

자바스크립트의 동작 특징

자바스크립트의 동작 특징중에 하나인 싱글 스레드는 한 번에 하나의 작업만을 처리할 수 있습니다.

스레드: 프로세스 내에서 실행되는 작은 실행 단위로, 프로그램의 코드 실행 흐름을 나타냅니다.

JavaScript 코드가 메인 스레드에서 실행되며, 다른 작업은 메인 스레드가 이벤트 루프를 통해 비동기적으로 처리하는 방식을 가지고 있습니다.

싱글 스레드 환경에서 비동기 작업을 처리하려면 이벤트 루프와 콜백 함수, Promise, async/await과 같은 메커니즘을 사용하여 비동기 작업을 대기하고 처리합니다.

예시 코드

console.log(1)
setTimeout(()=>{
  console.log(2)
}
console.log(3) // 출력결과 1 3 2

실행 설명

1. console.log(1) 실행: 이 부분은 동기적으로 실행됩니다. 콘솔에 "1"이 출력됩니다.

2. setTimeout 함수 호출: 내부의 콜백 함수가 Web API로 이동하여 지정된 시간 후에 실행되도록 예약됩니다

3. console.log(3) 실행: 이 부분은 동기적으로 실행됩니다. 콘솔에 "3"이 출력됩니다.

4. 이벤트 루프와 콜백 큐: setTimeout 함수가 예약한 콜백 함수가 실행될 차례입니다.

   메인 스레드의 실행이 모두 끝나고 콜백 큐에 있는 작업이 실행 대기 상태가 됩니다.

5. 콜백 함수 실행: 콜백 큐에 있는 콜백 함수가 메인 스레드의 실행이 완료된 후에 실행됩니다. 따라서 "2"가 콘솔에 출력됩니다.