[JavaScript] JavaScript는 동기적 처리? 비동기적 처리?

오늘은 JavaScript의 동작원리에 대해서 알아보겠다.

 

실행 동작은 크게 두가지로 나뉜다.

 

1️⃣ 동기적 처리

2️⃣ 비동기적 처리

 

언어마다 각각 지원하는 처리 방식이 다르며,

오늘은 JavaScript에 처리 방식이 무엇인지 알아보려고 한다.  

 

🔷 동작원리 종류

 

🔹 동기적 처리

 

❓ 동기적 처리란

 

싱글 스레드 기반의 언어로, 한 번에 하나의 작업만 처리할 수 있다.

 

동기적 처리는 자바스크립트의 처리 방식으로

자바스크립트는 실행 단계에서 코드를 위에서 순차적으로 한 줄씩 처리하는 방식을 사용한다.

 

한 줄의 코드 작업이 완료되기 전까지는 그 다음 작업이 실행되지 않게 된다.

 

 

🔍 실생활 예시

 

줄 서서 대기하고 있는 상황에선 앞 사람의 주문이 끝날 때까지 주문을 할 수 없고 대기한다.

 

 

✔️ 동기 장점

• 순차적으로 실행되는 것을 보장한다.
• 코드가 단순하고 이해하기 쉽다.

✔️ 동기 단점

• 시간이 오래 걸릴 수 있다.
• 중간에 막히면 그 뒤에 작업이 실행되지 않아 막히게 된다.

---

 

🔹 비동기적 처리

 

❓ 비동기적 처리란

 

병열적으로 한번에 여러 작업을 처리해주는 것을 의미한다.

 

특정 코드가 처리되고 있을 때 다음 코드가 기다리지 않고 먼저 처리하며

JS 자체에서는 비동기를 지원하지 않기 때문에 비동기 처리로 정해진 함수를 사용하여 비동기 작업을 할 수 있다.

 

ex ) 지연함수 setTimeOut 를 통하여 비동기적 처리 

 

 

❓ setTimeout 함수란

 

특정한 시간이  지난 다음에 실행 코드를 실행하는 함수이다.

setTimeout 함수에 대해선 따로 포스팅하겠다.

 

 

✔️ 비동기 장점

• 멀티태스킹이 가능하여 앞선 작업을 기다릴 필요 없이 바로 실행 가능
• 여러 일을 동시에 실행 하기 때문에 속도가 빠르다.

✔️ 비동기 단점

• 작업 완료 시점을 예측하기 어렵다.
• 코드가 복잡해지며, 에러를 찾기가 힘들다.

---

 

🤔 그럼 자바스크립트는 동기적 일까 비동기적 일까?

 

일반적으로 자바스크립트는 동기적 처리를 지원한다고는 들었는데

비동기적 처리도 가능해보인다.

 

한 가지 언어에서 두 가지 방식을 동시에 지원하는것이 가능한걸까?

 

👉 알아보자

 

✏️ 일단 엄연히 말하면 자바스크립트는 동기식 처리를 하는것이 맞다.

 

자바스크립트는 기본적으로 동기식으로 처리를하며, 순차적으로 한 줄씩 실행한다.

실행되는 작업들은 순서대로 스택 이라는 저장 구조에 쌓이게된다.

 

 

⁉️ 이때 비동기적 처리를 할 수 있게 해주는 setTimeout 함수를 사용할 경우

 

Web API 라는 웹 브라우저가 있다.

웹 브라우저와 서버 간의 데이터 교환을 가능하게 해주는 인터페이스를 의미한다.

 

자바스크립트에서 setTimeout 함수를 실행할 경우 실행문 통째로 Web API로 전달 된다.

 

Web API 는 전달 받은 함수를 JavaScript 대신 처리를 해주게 된다.

그리고 난 이후 JavaScript는 자기 자신의 작업을 그대로 이어서 실행한다. 

 

 

👉 JS 와 WebAPI 의 통신

😲JS : setTimeout 함수네?  
            웹 브라우저야 넘겨줄테니까 대신 좀 처리해줘~

🤓WebAPI : 알겠어 내가 대신 처리해줄게 넌 너꺼 일해~

😲JS : 고마워 나는 바로 다음 작업 처리 할게 ~

 

 

✔️ 결론

 

자바스크립트는 동기적 처리를 지원하는 언어가 맞으며 자바스크립트 자체로는비동기 처리를 할 수 없지만

필요 시에 외부 브라우저에 도움을 요청하여 처리를 하며 비동기 처럼 처리할 수 있게 하는 것 이다.