자바스크립트는 기본적으로 동기 실행이다.
싱글스레드(단일스레드) 기반의 언어로 한 순간 하나의 작업만을 처리한다.
싱글스레드
스레드가 하나라는 의미로 자바스크립트에는 콜스택이 하나이기 때문에 이름이 붙혀졌다.
콜스택
코드를 실행해주는 곳. 실행된 코드의 환경을 저장하는 자료구조, 함수 호출 시 Call Stack에 push 됨
하지만 오래걸리는 기능(ex. 외부요청, 라이브러리 등)은 비동기로 실행한다.
but, 자바스크립트 자체가 비동기 동작을 지원하는 것은 아님!
-> 브라우저가 비동기로 동작하는 핵심요소.
동기 vs 비동기
동기
- 동시에 여러 작업을 수행할 수 없다.
- 흐름을 예측하기 쉽다. 먼저 수행되고 나중에 수행되는 것들이 명확하다.
비동기
- 동시에 여러 작업을 수행할 수 있다.
- 흐름을 예측하기 어렵다. 무엇이 먼저 완료될지 보장할 수 없다.
- 따로따로 독립적으로 돌아간다.
브라우저는 Web APIs, Event Table, Callback Queue, Event Loop 등으로 구성됨
동작원리
console.log('first')
setTimeout(function cb() {
console.log('second')
}, 1000);
console.log('third')위의 코드를 실행해보면,
이렇게 first, third, 그리고 잠시 후에 second가 나온다.
위에서 부터 동기로 실행되면 one, two, 그리고 three가 순서대로 나와야 되는데
그렇지 않은 이유는 아래와 같다.
-
console.log('first')가call stack에 쌓인다(push).
콜스택은 비우려고하는 특성이 있기 때문에console.log('first')를 실행하고 비운다(pop) -> 브라우저 콘솔에 찍힌다. -
다음
setTimeout(function cb() { console.log('second') }, 1000)을 만나는데, 이 함수는 콜스택에서 바로 처리할 수 없기 때문에 대기실(Web APIs)로 간다. Browser가 제공하는 timer Web API 를 호출.
-
console.log('third')가call stack에 쌓이고(push) 실행되어 사라진다(pop). -
setTimeout함수에 전달한 시간이 지난 뒤
setTimeout(function cb() { console.log('second') }, 1000)함수는 콜스택이 아닌Callback Queue로 이동한다. -
Event Loop는Callstack이 비워있는 것을 확인하고Callback Queue를 살핀 후, second가 있는 함수를callstack에 추가(push)한다. -
callstack에 있는 second 함수가 pop되고 실행되어 브라우저 콘솔에 'second'를 찍는다.
Event Loop
Call stack이 비어 있을 경우, Callback queue에서 대기중인 함수를 Call Stack에 추가하는 역할을 하는 것
자바스크립트는 한 줄씩 처리하는 동기적 언어이지만 setTimeout, 이벤트리스너등을 이용해서 비동기적으로도 처리할 수 있다.
