[JS] 자바스크립트의 동기 비동기

자바스크립트는 동기방식으로 작동한다.

동기 방식이란 한 번 하나의 Task만 수행하는 것.

이러한 동기방식에는 치명적인 단점이 존재한다.

하나의 작업이 오래 걸린다면, C를 수행할 수 없기 때문에 전체 프로그램 성능이 저하가 된다.

C#이나 자바와 같은 프로그램에서는 이를 방지하고자 여러 개의 쓰레드를 사용하는 멀티 쓰레드 방식 사용

하지만 자바스크립트에는 쓰레드가 하나밖에 없음

그래서 자바스크립트는 이러한 문제를 "비동기"라는 방식으로 해결한다.

"비동기"란 동기적이지 않다는 뜻으로 작업을 순서대로 처리하지 않는다는 것임

각각의 작업들이 종료되었을 때 해당 작업의 결과 값을 이용해서 또 다른 동작을 수행시켜줘야할 때 "콜백 함수" 사용

비동기 함수 예시

console.log(1);

// 비동기 함수 setTimeout
setTimeout(() => {
  console.log(2);
}, 3000);

console.log(3);

근데 자바스크립트는 쓰레드가 한 개인데 어떻게 비동기 작업을 할 수 있는지?
-> 비동기 작업들은 자바스크립트 엔진이 아닌 Web APIs에서 실행되기 때문

WebAPIs는 웹 브라우저가 직접 관리하는 별도의 영역

console.log(1);

// 비동기 함수 setTimeout
// Web APIs 영역에 이 함수를 대신 실행해달라고 요청
setTimeout(() => {
  console.log(2);
}, 3000);

console.log(3);

//WebAPIs에서 비동기 작업 (3초세기)가 끝났다면 콜백함수를 반환 하고 호출(자바스크립트에서)

근데 이런 비동기 작업에서 새로운 동작을 수행하기 위한 콜백 함수를 사용하다보면 콜백 지옥을 경험하게 됨.

콜백 지옥은 콜백함수가 계속 콜백 함수안에 새로운 인자로 생겨, 인덴트(들여쓰기)가 깊어지고, 코드의 가독성과 성능을 저하시키는 상황

// 음식을 주문하는 상황
function orderFood(callback) {
 setTimeout(() => {
   const food = "치킨";
   callback(food);
 }, 3000);
}

//음식을 시키는 함수
function cooldownFood(food, callback) {
 setTimeout(() => {
   const cooldownedFood = `식은 ${food}`;
   callback(cooldownedFood);
 }, 2000);
}

// 식은 음식을 냉동해버리는 함수
function freezeFood(food, callback) {
 setTimeout(() => {
   const freezedFood = `냉동된 ${food}`;
   callback(freezedFood);
 }, 1500);
}

// 콜백 지옥 상황
orderFood((food) => {
 console.log(food);
 cooldownFood(food, (cooldownedFood) => {
   console.log(cooldownedFood);

   freezeFood(cooldownedFood, (freezedFood) => {
     console.log(freezedFood);
   });
 });
});

이러한 콜백 지옥을 해결하기 위한 방법이 Promise를 사용하는 것임.

Promise란 비동기 작업을 효율적으로 처리할 수 있도록 도와주는 자바스크립트의 내장 객체이다.

"성공하면 resolve 실패하면 reject 아닙니까?"