[JavaScript] 동기, 비동기

동기/ 비동기 차이

 

스레드는 코드를 한 줄 한 줄 실행시켜준다.

 

동기적 방식으로 처리한다는 것은 단일 스레드를 이용하여

taskA, taskB, teskC가 있다면 동기방식은 세 일을 하나씩 차례로 수행한다.

 

-> 동기적 방식의 문제점 : 하나의 작업이 오래걸린다면 모든 작업이 그때문에 올스탑되기 때문에 전반적인 흐름이 느려진다.

 

멀티스레드 : 스레드를 여러개 사용해서 일들을 동시에 해결함

 

하지만 자바스크립트는 이를 지원하지 않는다.

function one(){
  return 1;
  }
  
function two(){
  return ont() + 1;
  }
  
function three(){
  return two() + 1;
  }

 

위 함수들은 동기함수이므로 그림과 같이 callstack에 함수들이 스택형식으로 쌓이고 차례로 하나씩 실행된다. 

Main Context가 pop()되면 프로그램이 종료된다.

 

비동기방식은 하나의 스레드를 이용하면서 여러 작업을 동시에 실행시킨다. 즉 먼저 작성된 코드의 결과를 기다리지 않고 다음 코드를 바로 실행한다.

 

setTimeout

괄호 내 첫번째에 있는 함수의 내용을 두번째에 있는 시간만큼 delay한 후 실행

setTimeout는 비동기 함수이다.

 

function taskA(a,b,cb){
   setTimeout(() => {
     const res = a+b;
     cb(res);
     }, 3000);
     }
     
     
taskA(2,3,(res) => {
  console.log("답은 ",res);
  });
  console.log("끝");

 

위 코드를 실행하면

 

끝

답은 5

 

이렇게 나온다. 위 코드가 비동기적으로 실행되었기 때문이다. (taskA를 호출하고 실행되는 동안 코드의 마지막줄이 실행됨)

setTimeout는 비동기함수이므로 callstack이 아니라 web ApIs에서 실행된다. 그리고 settimeout안에 있는 cb함수는 callback Queue에 들어가서 event loop를 통해서 callstack으로 들어가 실행된다.