Intro

콜백함수를 통한 비동기 처리에 대해 알아보겠습니다.

콜백함수?
비동기처리?
비동기처리의 이상한 코드 진행 순서를 콜백함수로 바로잡기!

🔵 콜백함수

어떤 이벤트가 발생했거나 특정 시점에 도달했을 때 시스템에서 호출되는 함수이다. 또는, 특정 함수의 인자로 넘겨져서 코드 내부에서 호출되는 함수이다.

• 콜백함수 예시

function findCallBack(id,callback){
  const user = {
    id:id,
    name:"User"+id,
  }
  callback(user)
};

findCallBack(1,function (user) {
  console.log("user":user);
})
// 결과 user:{user:1,name:User1}

자바스크립트에서는 함수도 숫자나 문자처럼 변수에 할당할 수 있는 하나의 값이기 때문에 콜백함수를 다른 함수의 인자로 넘기는 것은 자연스럽습니다.

➡ 그런데 자바스크립트 특유의 비동기 처리가 들어가면 이상해집니다.🤔

🔵 콜백함수를 통한 비동기처리

비동기(Asynchronous) 함수란 실행결과를 기다리지 않는 함수입니다.

비동기함수는 실행결과를 기다리지 않는 Non-blocking이점 때문에, 싱글스레드 환경의 자바스크립트에서 광범위하게 사용됩니다. 따라서 브라우져에서 결과를 기다리지 않아서 사용자 경험에 좋을 수 있다.

• 비동기처리 예시

function findUser(id) {
    let user
    setTimeout(function () {
      console.log("0.1초 기다림")
      user = {
        id: id,
        name: "User" + id,
      }
    }, 100)
    return user
}
  
const user = findUser(1)
console.log("user:", user)
// 결과
// user: undefined
// 0.1초 기다림

setTimeout은 비동기함수이기 때문에,0.1초를 기다리지 않고 다음 라인을 진행시킵니다. 이로 인해, 리턴 user -> console user 이 진행되고 나서 내부에서 user가 정의되면서 0.1초기다림이 찍히게 됩니다.

➡ 그비동기 처리가 들어가면 이상해진 코드실행과정을 콜백함수를 통해 해결할 수 있습니다.👍

• 콜백함수를 통한 비동기처리

function findUserCallBack (id,callback) {
  setTimeout(function () {
    console.log("0.1초 기다림")
    const user = {
      id: id,
      name: "User" + id,
    }
    callback(user)
  }, 100)
}

findUserCallBack(1, function (user) {
  console.log('USer:'+user)
})
// 결과
// 0.1초 기다림
// user: undefined

비동기 처리 함수를 통해 만들어진 user를 리턴받지 말고 콜백함수를 통해 이어서 로직을 실행하도록 만들어야 원하는 코드진행과정이 만들어 집니다.

➡ 그러나 이러한 방식으로 콜백함수를 중첩해서 사용하게 되면 코드의 가독성이 떨어지고 복잡해짐으로써 콜백 지옥의 상황에 빠질 수 있습니다...🤔

이를 해결할 방법으로 Promise 나 async/awati를 이용할 수 있는데 이 부분을 다음 글에서 알아볼게요!!