비동기 처리 (1) - Callback

Javascript는 코드를 동기적으로 처리한다.

따라서 서버로부터 데이터를 받는 등 시간이 걸리는 코드는 뒤에 실행된다.

 

하지만 뒤에 실행되는 코드가 그 데이터와 관련이 있다면 적절하지 못한 결과가 나올 수 있다.

function getData() {
  setTimeout(() => {
    console.log("Fetch API......");
    return "213123121";
  }, 2000);
}

let data = getData();
console.log(data);

↑ return이 늦게되고 data를 출력하는 코드가 먼저 실행되어 undefined가 출력된다.

---

이를 해결하기 위해 사용되는 것이 Callback Function이다.

function getData(id, par, callback) {
  console.log("Fetch API......");
  setTimeout(() => {
    callback({ id, par, num: "213123121" });
  }, 2000);
}

getData(1, "aaa", function (data) {
  console.log(data);
  console.log("getData ended.");
});

↑ getData 함수는 비동기작업(setTimeout)을 포함하고 있다. 세 번째 인자 callback에 대한 매개변수는 getData 안에 주어져있고 getData를 실행할 때 매개변수 callback 함수의 내용 정의해준다. 

 

getData를 실행할 때 callback 함수의 내용에 코드를 작성하면 해당 코드는 callback 함수가 실행된 뒤에 실행된다.

 

---

Callback 함수를 이용한 shopping mall logic 구현

function login(userName, callback) {
  setTimeout(() => {
    callback(userName);
  }, 3000);
}

function addToCart(product, callback) {
  setTimeout(() => {
    callback(product);
  }, 2000);
  return product;
}

function makePayment(cardNumber, product, callback) {
  setTimeout(() => {
    callback(cardNumber, product);
  }, 1000);
}

login("donghwanoh", (userName) => {
  console.log(userName);
});

let item = addToCart("ptatat", (p) => {
  console.log(p);
});

makePayment("KAKAO", item, (c, p) => {
  console.log(`${p} payed by ${c}`);
});

↑ 세 함수는 모두 비동기작업을 포함하고 있고 함수의 실행 부분에서 각 비동기 함수의 내용이 정해진다.

 

실행결과

makePayment 함수가 addToCart보다 먼저 실행됨에도 item을 가져올 수 있는 이유는 addToCart 함수 안에서 return문과 별개로 callback함수가 비동기적으로 실행되기 때문이다.

---

위의 logic을

 

1. login

2. addToCart

3. makePayment

 

순서로 실행하고 싶다면 callback 함수 내용을 정의할 때 다음 실행될 callback함수를 실행하면 된다.

login("donghwanoh", (userName) => {
  console.log(userName);
  addToCart("pdtato", (p) => {
    console.log(`${p} added to cart`);
    makePayment("KAKAO", "item", (c, p) => {
      console.log(`${p} payed by ${c}`);
    });
  });
});

↑ login 함수 안의 callback 함수 내용에서 addToCart 함수를 실행하고, addToCart 함수 안의 callback 함수 내용에서 makePayment를 실행한다.

 

실행 결과

Callbak hell 탄생, 복잡하다. 유지보수가 어렵다.
대신 ES6부터 Promise를 사용한다.