동기 & 비동기

 

동기적 코드

 function taskA(){
  console.log("A작업 끝");
}

 taskA();
 console.log("코드 끝");  

//출력 결과
A작업 끝 
코드 끝

 

비동기적 코드 

 function taskA(){
  setTimeout(() => { 
    console.log("A TASK END");
  }, 2000);
}

 taskA();
 console.log("코드 끝");  
 
 //출력 결과 
 코드 끝
 A TASK END

 

연산이 들어간 비동기적 코드 

 function taskA(a, b, cb){
  setTimeout(() => { 
    const res = a + b;
    cb(res);
  }, 3000);
}

//지역변수인 res를 밖에서도 사용하려면 콜백함수를 이용하면 된다. 

 taskA(3, 4, (res) => {
    console.log("A TASK RESULT : ", res);  
 });
 console.log("코드 끝");
 
 
 //출력 결과 
 코드 끝
 A TASK RESULT : 7

 

 

자바스크립트는 웹 브라우저에 탑재되어있는 자바스크립트 엔진(JS Engine)에 의해 실행된다. 

JS Engine은 Heap(메모리 할당), Call Stack(코드 실행) 으로 나누어져 있다. 

 

Call Stack은 작성한 코드의 실행에 따라 호출 스택을 쌓는 영역이다. 

main context가 Call Stack에 들어오는 순간이 프로그램 실행 순간 

main context가 Call Stack에 나가는 순간이 프로그램이 종료되는 순간

 

동기방식 실행 흐름 

 

 

쓰레드는 Call Stack 하나만을 담당한다.

자바스크립트는 Call Stack이 하나 밖에 없으므로 싱글 쓰레드로 동작한다고 말할 수 있다. 

 

 

비동기 방식 실행흐름 

자바스크립트는 비동기 함수들은 web apis로 넘긴다. 

 

 

비동기 함수인 setTimeout이 CallStack에 머무르지 않기 때문에 다음 코드 실행이 가능해 진다. 

asyncAdd 작업이 끝나면 Call Stack에서 사라지게 되고 setTimeout의 3초가 지나면 

setTimeout이 Callback Queue로 이동할 후 Event Loop에 의해 Call Stack으로 들어간다. 

(Event Loop는 Call Stack에 Main Context를 제외한 다른 함수가 남아있지 않는지 계속 확인하고 남아있지 않으면 콜백 함수를 실행할 수 있게 되니까 호출)

 

 

비동기 처리의 결과를 또 다른 비동기 처리의 결과로 이용하는 코드 

 function taskA(a, b, cb){
  //  console.log("A작업 끝");
  setTimeout(() => { 
    const res = a + b;
    cb(res); 
  }, 3000);
}
//지역변수인 res를 밖에서도 사용하려면 콜백함수를 이용하면 된다.

function taskB(a, cb){
  setTimeout(() => {
    const res = a * 2;
    cb(res); 
  }, 1000);
}

function taskC(a, cb){
  setTimeout(() => {
    const res = a * -1;
    cb(res);
  }, 2000); 
}

taskA(4, 5, (a_res)=> {
  console.log("A RESULT : ", a_res);
  taskB(a_res, (b_res)=> {
    console.log("B RESULT : ", b_res);
    taskC(b_res, (c_res)=> {
      console.log("C RESULT: ", c_res); 
    });
  });
});

 console.log("코드 끝");          
 
 //출력 결과 
 코드 끝
 A RESULT : 9
 B RESULT : 18
 C RESULT : -18

위의 코드는 가독성도 떨어지고 콜백함수가 계속 안쪽으로 파고드는 것을 콜백 지옥이라고 한다.

👉 자바스크립트의 Promise를 사용해서 해결할 수 있다.