[12.26] TIL_인프런 강의 노트(동기와 비동기)

📍 자바스크립트 처리하는 방식

[예시]

function taskA() {
  console.log("TASk A");
}

function taskA() {
  console.log("TASk B");
}

function taskA() {
  console.log("TASk C");
}

자바스크립트의 싱글 스레드 작업 수행방식(동기적)

: 자바스크립트는 스레드를 하나만 사용할 수 있음

• Thread : 각 함수의 연산과정을 실행해주는 역할을 함 (코드를 한줄 한줄 실행시켜주는 아이)
• 블로킹 방식 : 앞에 작업이 끝날때까지 다른 작업이 실행되지 못하게 해주는 방식
  
  

💢 동기 방식의 문제점!

: 앞의 작업 수행 시간이 너무 길어져 버리면 다른 작업도 계속 늦어지는 상황 발생

• 작업 수행시간이 너무 오래 걸림
  

비동기식 방식으로 동기방식의 단점 보완

: 비동기 작업을 이용하여 동시에 작업을 실행시키고 작업이 완료된 내용을 콜백함수로 전달된 함수를 호출해서 결과값이나 비동기 함수의 작업이 끝나는지를 확인할 수 있게 해줌

📍 Javascript 엔진 구동 방식

동기

: 스레드는 콜스텍 하나만을 담당함 (싱글스레드)

1. 자바스크립트 코드의 실행이 시작되면 최상위 문맥인 메인 컨텍스트가 제일 먼저 들어옴(실행 시작과 종료를 알려줌)
2. 콘솔로그에 찍혀야하는 three함수를 먼저 불러옴, 그 이후에 함수가 순차적으로 call stack에 쌓이게 됨
3. 그리고 스택에 쌓인 함수들은 마지막에 쌓인 함수가 먼저 나가는 방식으로 out(후입선출)이 종료(제거)가 됨
4. 콘솔로그에 3이 찍힘
5. 모든 함수가 종료되고 프로그램이 종료가 되기 위해 main context가 나가게 됨
   

비동기

: JS engine외의 3가지 구성요소들은 자바스크립트 엔진과 웹브라우저의 상호작용 등의 역할을 하기 위해 존재를 함 (대표적:비동기)

1. ayncAdd함수 실행되고 setimeout 비동기 함수가 있음
2. 비동기 함수는 Web APIs로 들어가서 3초를 기다리고 ayncAdd함수가 종료됨
3. Web APIs는 콜백 큐로 옮겨지게됨
4. 이벤트 루프는 콜스택에 메인 컨텍스트 외에 어떤 함수도 남아있지 않은지 계속 확인을 해주고 webAPIs에서 콜백큐로 옮겨진 콜백함수를 콜 스택에 남겨져있는 함수가 없다면 옮겨줌
5. 콜 스택으로 옮겨진 비동기 함수는 결과를 출력하고 모든 수행이 끝나고 Main context 종료됨