[JavaScript] callback

콜백함수란

다른 코드의 인자로 넘겨주는 함수, 즉 어떤 이벤트가 발생한 후 수행될 함수를 의미한다.

예를들어 식당에 자리를 예약하는 상황이라고 가정해보자.

우리는 식당 대기자 명단에 이름을 쓴 뒤, 자리가 날때까지 식당 근처를 구경하러간다.

만약 식당에서 자리가 생기면 전화로 자리가 났다고 연락을 줄 것이다.

바로, 그 전화를 받는 시점이 콜백 함수가 호출되는 시점과 같다.

• 손님 입장에서는 자리가 날 때까지 식당에서 기다리지 않고 근처에서 쇼핑을 하거나 구경을 할 수 있다.
• 자리가 났을 때 연락이 오기 때문에 미리 가서 기다릴 필요❌
• 자리가 비어있는지 확인할 필요❌
• 자리가 준비된 시점 즉 데이터가 준비된 시점에서만 원하는 동작(자리에 앉는다. 특정 값을 출력한다)를 수행할 수 있다.

// 동기식 콜백 예시
function greeting(name) {
  alert('hello ' + name)
}

function processUserInput(callback) {
  var name = prompt('Please enter your name')
  callback(name)
}

processUserInput(greeting)

함수 processUserInput를 호출하면서 이름(name)을 받아왔을 때 함수 greeting을 호출한다.
(특정 로직이 끝났을 때 원하는 동작을 실행)

// 비동기적인 작업이 필요한 코드(정상 작동❌)
function findUser(id) {
  let user;
  setTimeout(function () {
    console.log("waited 1 sec.");
    user = {
      id: id,
      name: "User" + id,
      email: id + "@test.com",
    };
  }, 1000);
  return user;
}

const user = findUser(1);
console.log("user:" +  user)


// user: undefined
// (1초 뒤)
// waited 1 sec.

위 코드의 경우 정상 작동하지 않는다.
원하는 user의 정보는 1초뒤 나오지만, findUser는 이를 기다리지 않아 undefined를 return시키게 된다.

// 비동기
function findUserAndCallBack(id, cb) {
  setTimeout(function () {
    console.log("waited 1 sec.");
    const user = {
      id: id,
      name: "User" + id,
      email: id + "@test.com",
    };
    cb(user);
  }, 100);
}

findUserAndCallBack(1, function (user) {
  console.log("user:", user);
});

//(1초 뒤)
// waited 1 sec.
// user : 
// [object Object] {
//  email: "1@test.com",
//  id: 1,
//  name: "User1"
// }

위 와같이 콜백함수를 통해 특정 함수가 처리된 이후에
처리시킬 함수를 콜백함수화 시켜 비동기의 문제를 해결할 수 있다.

 

하지만 최근에는 위와 같이 콜백함수를 인자로 넘겨 비동기 처리를 하지 않는다.
콜백함수를 중첩해서 사용하게 되면 계속해서 들여쓰기를 해야되고 코드 기독성이 떨어지기 때문이다(콜백지옥).

🤷

 

이런 콜백 지옥을 대체하기 위해 Promise, async/await을 사용한다.

 

다음 게시물에서는 비동기에 대해 더 자세히 다뤄보려고 한다.