JavaScript 응용(동기와 비동기 - Callback)

자바스크립트는 동기적인 언어

• hoisting 이후에 작성된 순서대로 코드가 처리됨
• 이전 작업이 진행중일 때는 다음 작업을 수행하지 않고 기다림

thread : 작동에 필요한 연산을 하는 실행 흐름의 단위. 코드를 한 줄 한 줄 실행시켜주는 일꾼.

자바스크립트는 하나의 스레드를 가지고 있음 =>
멀티 스레드처럼 여러 스레드에 task를 할당할 수는 없음.

하지만 싱글 스레드로도 여러개의 작업을 동시에 실행시킬 수 있음. (비동기적 작업)

✍ 동시에 실행 시켰을 때 작업이 문제없이 끝났다는 확인을 할 수 있는 방법?
작업할 함수에 Callback 함수를 전달해서 작업의 결과를 확인하기.

Callback 함수 : 어떤 함수 안에서 특정 시점에 호출되는 함수.

function taskA(a, b, cb) {
  setTimeout(() => {
    const result = a + b;
    cb(result);
  }, 3000);
}
//setTimeout은 JS 내장 비동기 함수
function taskB(a, cb) {
  setTimeout(() => {
    const result = a * 2;
    cb(result);
  }, 2000);
}
taskA(3, 4, (res) => {
  console.log(`A task result : ${res}`);
});
taskB(7, (res) => {
  console.log(`B task result : ${res}`);
});
console.log("코드 끝");
// 코드 끝
// B task result : 14
// A task reslut : 7

• taskA()와 taskB()를 기다리지 않고 '코드 끝'이 먼저 출력됨
• cb는 task 함수들의 callback 함수
• 비동기 처리의 결과값을 이용해야 될 때 callback 함수 이용

---

자바스크립트로 작성한 코드는 브라우저에 내장되어 있는 자바스크립트 엔진에 의해 해석되고 실행됨
자바스크립트 엔진 구성 요소 : Heap, Call Stack

• Heap: 변수, 상수에 사용되는 메모리를 저장하는 영역
• Call Stack: 코드의 실행에 따라 호출 스택을 쌓는 영역

📌 동기적인 코드 실행 원리
1. Call Stack에는 Global Execution Context부터 호출되는 순서대로 함수가 쌓이고 가장 나중에 쌓인 코드부터 실행되면서 빠져나감
2. Global Execution Context는 제일 마지막에 Call Stack을 빠져나가며 이 때 프로그램이 종료됨

📌 비동기적 코드 실행 원리 : 비동기적으로 처리해야 하는 함수가 있고 그 안에서 콜백 함수를 호출하고 있을 때

function taskA(a, b, cb) {
  setTimeout(() => {
    const result = a + b;
    cb(result);
  }, 3000);
}
taskA(3, 4, (res) => {
  console.log(`A task result : ${res}`);
});

자바스크립트 엔진과 웹브라우저 간의 상호작용을 위한 구성요소들 : Web APIs, Callback Queue, Event Loop

1. Call Stack에 Global Execution Context와 taskA()가 쌓임
2. 비동기적으로 처리해야 하는 코드를 만나면 Web APIs로 전달함
   -> setTimeout 함수는 cb()와 함께 Web APIs로 넘겨짐
3. Web APIs에서 setTimeout은 기다려야 하는 시간만큼 기다리고 그 후에 cb()는 Callback Queue로 전달됨
4. Event Loop는 Call Stack에서 Global Execution Context를 제외한 모든 함수가 실행 완료되었는지 확인하고 cb()를 Call Stack으로 넘겨줌
5. cb()가 실행 완료되면 Global Execution Context가 빠져나가고 프로그램이 종료됨

---

Callback Hell

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

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

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

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}`);
    });
  }); // taskA의 실행 결과값을 taskB에 전달하고 taskB의 결과값을 taskC에 전달하고...
});

• 비동기적으로 처리한 함수의 결과값을 다른 비동기적인 함수에 전달해야하는 경우
• 콜백 지옥이라고도 함

---

벌써 5번은 들은 것 같은 sync와 async 관련 내용,,ㅠㅠㅠ