1. 용어 정리

1.1 동기와 비동기

동기란 순차적으로 실행하는 것을 의미하며, 현재 실행 중인 태스크가 종료될 때까지 대기하는 방식을 의미한다.

비동기란 실행순서와 상관없이 실행하는 것을 의미하며, 현재 실행 중인 태스크가 종료되기 전에 다음 태스크를 실행하는 것을 의미한다.

1.2 블로킹과 논블로킹

동기처리로 인해서 다음 태스크의 실행이 중지되는 현상을 블로킹이라고 한다.
비동기처리로 인해서 다음 태스크의 실행을 바로하는 것을 논블로킹이라고 한다.

1.3 콜 스택

실행 컨텍스트 스택을 의미하며, 현재 실행중인 함수들이 실행순서대로 들어가서 실제로 실행되게 해주는 자료구조이다.

1.4 태스크 큐

비동기 함수의 콜백함수들이 임시적으로 보관되는 영역이다.

1.5 이벤트 루프

브라우저에 내장되어 있는 기능이며, 콜스택과 태스크 큐를 반복적으로 확인하고 콜스택이 비어있고 태스크 큐에 대기중인 함수가 있다면 순차적(FIFO, 선입선출)으로 대기중인 함수를 콜스택으로 이동시키는 역할을 한다.

1.6 힙

동적 메모리 공간을 의미하며, 객체같이 크기가 정해지지 않고 메모리에 할당해야하는 값에 할당할 메모리 공간이다. ( 메모리공간이 런타임시에 결정되는 값이 메모리공간을 할당받는 곳 )

1.7 Web API

브라우저가 제공하는 API이며 타이머, AJAX, DOM이벤트 등의 처리를 책임진다.

2. 자바스크립트 동작 방식

1. 전역 실행 컨텍스트가 콜스택에 쌓임
2. setTimeout(foo, 0)이 콜스택에 쌓임
3. setTimeout(foo, 0)이 콜스택에서 제거되며 타이머API로 콜백함수(foo)와 시간(0)을 전달
   4-1. bar()가 콜스택에 쌓임
   4-2. 타이머API가 시간을 재고 시간초과시 콜백함수(foo)를 태스크 큐로 이동시킴
4. bar()의 console.log("bar")가 콜스택에 쌓임
5. console.log("bar")실행 후 콜스택에서 제거
6. bar()를 콜스택에서 제거
7. 전역 실행 컨텍스트가 콜스택에서 제거
8. 이벤트루프에 의해서 콜백함수(foo())가 콜스택에 쌓임
9. foo()의 console.log("foo")가 콜스택에 쌓임
10. console.log("foo")실행 후 콜스택에서 제거
11. foo()를 콜스택에서 제거
12. 실행종료

• 4-1과 4-2는 동시에 실행
  자바스크립트는 싱글 스레드로 동작함 ( 한번에 하나의 처리밖에 못함 )
  하지만 타이머와 콘솔출력같은 동작을 동시에 실행하는 이유는 자바스크립트 엔진이 싱글 스레드고, 브라우저가 멀티 스레드이기 때문임.
  브라우저가 자바스크립트 엔진을 가지고 있고, 자바스크립트에서 타이머, ajax요청 등의 비동기 처리가 들어오면 브라우저 자체적으로 가진 Web API를 이용해서 각각을 처리하므로 자바스크립트는 콜스택에 쌓여있는대로 하나의 스레드가 처리하는 것이고 나머지 처리들은 브라우저가 멀티 스레드이므로 브라우저가 적절하게 처리해줌

function foo() {
  console.log("foo");
}

function bar() {
  console.log("foo");
}

setTimeout(foo, 0);
bar();

마무리

추가로 자바스크립트에서 비동기와 논블로킹을 지원하고 그게 중요한 이유는 기본적으로 자바스크립트는 웹에서 사용하고, 웹에서 사용할 때 api요청을 주로 보내는 편임, 하지만 api요청은 사용자의 인터넷 환경이나 서버의 상태에 따라서 응답속도나 응답 여부의 속도가 결정되므로 api요청을 보내고 응답할 때까지 브라우저에서 아무것도 하지 않고 대기만 하게 되면 그 시간만큼의 낭비가 발생함과 동시에 유저 사용성이 매우 안 좋아짐 ( 사이트에 들어갔는데 화면이 나타나는데 시간이 오래 걸림 )

따라서 비동기라는 개념을 이용해서 특정 요청들은 요청을 보내고 대기하지 않고 다른 처리를 하다가 응답이 오게 되면 그때부터 다시 응답된 데이터를 이용해서 처리를 시작하는 것임

추가적으로 이런 비동기 요청을 하게 되면 코드의 가독성이 안 좋기 때문에 promise나 async, await에 대해 공부하는 것이 좋음