[JS] 동기 & 비동기 & 콜백함수

n-u·2022년 6월 15일

JavaScript TIL

TIL

목록 보기

7/24

동기 & 비동기

<자바스크립트의 싱글 스레드(Thread) 작업 수행방식>으로 진행된다.

동기 방식의 처리

블로킹 방식 : 스레드가 작업하고 있을때 다른 작업을 동시에 할 수 없는 방식

자바스크립트는 코드가 작성된 순서대로 작업을 처리함
이전 작업이 진행중일 때는 다음 작업을 수행하지 않고 기다림
먼저 작성된 코드를 먼저 다 실행하고 나서 뒤에서 작성된 코드를 실행한다.

동기처리 방식의 문제점

동기적 처리의 단점은 하나의 작업이 너무 오래 걸리게 될시,
모든 작업이 오래 걸리는 하나의 작업이 종료되기 전까지 올 스탑 되기 때문에, 전반적인 흐름이 느려진다.

자바스크립트는 싱글 스레드로 동작함

즉, 멀티스레드(여러개의 스레드를 이용해 작업을 수행시키는 것) 사용 방법이 불가하다.

비동기 처리 방식

논 블로킹 방식 : 하나의 작업이 스레드를 접유하지 않는, 스레드가 다른 작업을 하지 못하도록 블로킹하지 않는 방식

작업여러개를 동시에 여러개를 실행시키는 방법
싱글 스레드 방식을 이용하면, 동기적 작업의 단점을 극복하기 위해 여러개의 작업을 동시에 실행시킴
즉, 먼저 작성된 코드의 결과를 기다리지 않고 다음 코드를 바로 실행함

그렇다면 비동기처리 방식으로 실행된 코드가 끝난는지 어떻게 알수 있을까?

콜백함수를 이용해 코드처리가 끝났는지 확인 할 수 있다.

taskA((result) => {
  console.log(`A끝났습니다. 작업 결과 ${resultA}`);
});
//비동기처리의 결과 값과 실기 마침을 알 수 있는 역활을 할 수 있다.

비동기적으로 코드를 움직여 보자!

동기 방식 실행 코드 예제

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

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

지금까지 일반적으로 실행했던 코드로 taskA의 작업이 끝나기 전까지는 console에 "코드 끝"이 출력되지 않는다.

비동기 방식 실행 코드 예제

function taskA(a, b, cb) {
  setTimeout(() => {
    const res = a + b;
    cb(res);
    // console.log("A 작업 끝");
  }, 3000);
}

taskA(3, 4, (res) => {
  console.log(`A TASK RESULT : ${res}`);
});
console.log("코드끝");

setTimeout()함수를 이용해 비동기적처리를 수행하도록 한다.
taskA는 3초 뒤에 코드가 실행되게 되며, 인자로 받은 콜백함수를 실행하여 비동기적으로 코드를 실행 할 수 있다.

function taskA(a, b, cb) {
  setTimeout(() => {
    const res = a + b;
    cb(res);
    // console.log("A 작업 끝");
  }, 3000);
}

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(3, 4, (res) => {
  console.log(`A TASK RESULT : ${res}`);
});
taskB(7, (res) => {
  console.log(`B TASK RESULT : ${res}`);
});
taskC(14, (res) => {
  console.log(`C TASK RESULT : ${res}`);
});
console.log("코드끝");

결과값

코드끝                   //코드 순서로는 마지막 호출
B TASK RESULT : 14      //코드 순서로는 2번째 호출
C TASK RESULT : -14     //코드 순서로는 3번째 호출
A TASK RESULT : 7       //코드 순서로는 1번째 호출

JS엔진의 구성 및 실행 과정

자바스크립트 엔진은 Heap과 Call Stack엔진으로 나눌 수 있다.
Heap엔진은 변수를 할당하는 메모리를 관여하고,
Call Stack은 코드실행부분을 관여하며 우리가 실행하는 코드의 호출의 스택을 쌓는 영역이다.

콜백함수 중첩

//순서대로 실행하는 것과 그렇지 않은 것들
//동기 & 비동기

function taskA(a, b, cb) {
  setTimeout(() => {
    const res = a + b;
    cb(res);
    // console.log("A 작업 끝");
  }, 3000);
}

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 TASK 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("코드끝");