자바스크립트 동기? 비동기?

자바스크립트는 동기식 언어이다.
한 작업이 실행되는 동안 다른 작업은 멈춘 상태를 유지하고 자신의 차례를 기다리는 것을 말한다.
키오스크를 이용하여 한 사람씩 결제하는 것과 유사하다.

이러한 동작을 단일 스레드(싱글 스레드), 동기(Synchronous)라고 부른다.

*싱글스레드:하나의 프로그램은 동시에 하나의 코드만 실행할 수 있다는 것을 말한다

이유는?
 Memory Heap과 Call Stack은 자바스크립트의 엔진의 주요 구성 요소

 

Memory Heap이란?
변수와 객체의 메모리 할당을 담당하는 곳을 말한다.

Call Stack이란?
함수가 호출이 되면 쌓이는 곳이다. 대신 함수가 쌓이는 순서와는 반대로 실행된다.
자바스크립트에서 함수를 호출하면 Call Stack이라는 곳에 호출 순서대로 차곡차곡 쌓인다.
그러고 나서, Stack은 맨 마지막에 호출된 함수가 맨 먼저 반환한다.
List in Frist Out, 먼저 들어온 것이 먼저 나간다라는 의미로, LIFO 구조라고 부른다.

비동기(asynchronous)란?
이전에 말했지만, 자바스크립트는 단일 스레드, 동기식으로 동작한다.
하지만 비동기는 어떠한 요청을 보내면 그 요청이 끝날 때까지 기다리는 것이 아니라, 응답에 관계없이 바로 다음 동작이 실행되는 방식을 말한다.

왜 필요한가?
예를, 웹 페이지가 로딩되거나, 어떠한 동작(Event) 하나가 30초 이상이 걸린다고 상상해보자.
그렇게 되면, 웹 페이지는 이 동작이 끝날 때까지 화면에 나타나지 않거나 다음 동작을 수행하는데 지장을 주게 된다.
또, 요즘 사용자들은 느리고 응답이 없는 웹 사이트를 원하지 않는다.

그렇기 때문에 자바스크립트가 웹 사이트에서 동작할 때, 비동기적으로 동작할 수 있어야 한다.
그런데 브라우저에서 Javascript가 어떻게 화면 전환하면서 HTTP 요청이나 여러 이벤트를 동시에 동작을 할 수 있는 것인가?
그것은 바로 자바스크립트의 실행 환경(Runtime)과 관련이 있다.

브라우저에서는 자바스크립트 엔진 만으로 동작하지 않는다.
 브라우저에서의 자바스크립트 실행 환경(Runtime)에서는 자바스크립트 엔진 자체가 제공하지 않는 일부 기능인 DOM 조작이나 AJAX 같은 비동기 처리를 위한 web API를 제공한다.

또, 이를 제어하기 위해 이벤트 루프(Event Loop), 이벤트 큐(Callback Queue 혹은 task Queue)가 존재한다.

 

자바스크립트 - 동작 원리

https://ljtaek2.tistory.com/129?category=897337