Javascript : 동기와 비동기

// 동기와 비동기

// 동기란?
// 여러개의 작업을 한번에 하나씩만, 순서대로 처리할 때 동기적으로 처리한다고 함.
// 실행 흐름을 파악하기 쉽고 용이하다는 장점이 있다.
// 그러나 작업이 처리되는 시간이 각각 다르기 때문에 하나의 쓰레드가 실행되는 데 오래 걸린다면 전체 프로그램의 성능이 악화된다.

// 그래서 멀티 쓰레드를 사용해서 전체 프로그램 성능을 악화시키는 것을 방지한다.
// 하지만 자바스크립트에는 쓰레드가 1개 밖에 없어서 비동기 방식을 통해 해결한다.

// 비동기란?
// 작업을 순서대로 처리하지 않는다.
// 앞선 작업이 종료되지 않아도 동시에 작업을 실행시키는 것이 가능하다.
// 그래서 위와 같은 단점을 어느정도 보완할 수 있다.


console.log(1);

setTimeout(() => {
  console.log(2);
}, 3000) // 특정 시간이 지난 이후에 비동기적으로 동작함

console.log(3);

// 이러면 1, 3 그리고 3초 뒤 2가 출력 됨
// 비동기 작업들은 자바스크립트 엔진이 아닌 Web APIs에서 실행 됨 -> 웹 브라우저가 관리하는 별도의 영역
// 그래서 작동될 수 있는거다.

// 비동기 작업 처리하기 1. 콜백함수

function add(a, b, callback) {
  setTimeout(() => {
    const sum = a + b
    callback(sum);
  }, 3000);
}

add(1, 2, (value) => {
  console.log(value);
});

// 음식을 주문하는 상황 가정

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);
    })
  })
});