자바스크립트 콜백 함수란 무엇인가?

https://www.daleseo.com/js-async-callback/

[자바스크립트] 비동기 처리 1부 - Callback

Callback함수란?? 뭔데??

자바스크립트 비동기 처리 로직을 이해하기 위해 전적으로 참고한 'DaleSeo'님의 블로그 포스팅 주소와 '제주에서 온 짱구' 님 포스팅 주소입니다. 이 포스팅에서 설명되는 내용은 모두 'DaleSeo'님의 내용과 '제주에서 온 짱구'님의 블로그 포스팅을 인용했음을 밝힙니다. 아무튼, 본인은 자바스크립트의 콜백 함수와 비동기 함수에 대해 정확한 이해를 하고 싶었기에 이번 포스팅을 통해 공부해보고 기록해보고자 했습니다.

---

1️⃣ 콜백 함수

그렇다면 콜백 함수란 무엇일까? 쉽게 얘기하면, 다른 함수가 실행이 끝난 뒤 실행되는 Callback 되는 함수를 말한다. 또한, 함수를 만들 때 Parameter를 함수로 받아서 쓸 수 있는데 그 함수는 Callback 함수이다. JavaScript에서는 함수를 Object로 인식한다. 그래서 함수는 다른 함수의 인자로 쓰일 수도, 어떤 함수에 의해 Return이 될 수도 있다. 추가적으로 함수를 등록하기만 하고 어떤 이벤트가 발생했거나 특정 시점에 도달했을 때 시스템에서 호출하는 함수 역시 콜백 함수라고 부른다.

 

콜백 함수가 필요한 이유는 변수의 유효 범위(scope)에 대한 이야기, 동기/비동기 처리(synchronous/Asynchronous)에 대한 부분도 살펴보면 좋다고 한다. 아니 사실 반드시 알아야 한다. 추후 살펴볼 테지만, 동기 처리(synchronous)는 하나의 요청이 오면 완료가 된 후 다음 요청을 실행하는 방식이다. 즉, 로직이 순차적으로 작동한다고 이해하면 될 듯하다.

 

비동기 처리(Asynchronous)는 어떤 요청이 오면 완료가 되기 전에 다음 요청을 실행하는 방식이다. 아무튼, 우리가 흔히 생각하는 일반적인 함수란 입력(parameter)이 있고, 출력(Return)이 있다. 하지만 자바스크립트에서는 출력 값이 없고 그 대신에 콜백 함수를 입력받는 함수들이 많이 있다. 콜백 함수는 다른 함수에 인자로 넘어가서 실행될 로직을 담게 된다.

 

콜백 함수를 사용하지 않고, 일반적인 로직으로 Return Data를 시켜버리면 함수 외부에서 결괏값을 이용하여 작업을 수행하여야 하는데, 콜백 함수를 활용하면 결괏값을 이용해해야 할 작업까지 선언된 함수 내부에서 수행해주기 때문에 굳이 리턴할 필요가 없다는 장점이 있다.

 

자바스크립트에서는 함수도 숫자나 문자처럼 변수에 할당할 수 있는 하나의 값이기 때문에 콜백 함수를 다른 함수의 인자로 넘기는 것은 매우 자연스러운 현상이다. 위에서도 잠깐 살펴봤지만, 동기 함수는 호출한 시점에서 실행 결과가 리턴될 때까지 기다려야 하는 함수이다. 쉽게 얘기하면 순차적으로 실행이 된다는 말이다. 그러나 비동기 함수는 그 실행결과를 기다리지 않아도 되는 함수이다.

 

function findUser(id) {
  let user;
  setTimeout(function () {
    console.log("waited 0.1 sec.");
    user = {
      id: id,
      name: "User" + id,
      email: id + "@test.com",
    };
  }, 100);
  return user;
}

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

// 결과
user: undefined
waited 0.1 sec.

위 코드를 살펴보면 setTimeout이라는 비동기 함수가 보인다. setTimeout 함수는 비동기 함수이기 때문에 전체적인 로직이 모두 실행되고 나서 실행되는 게 아니라 0.1초 후에 실행된다. 그 말은 즉슨 setTimeout 함수가 실행되기 전에 return user를 실행해 버린다는 뜻이다.  그래서 처음 user 변수에는 undefined가 할당된다.

 

이런 경우에는 콜백 함수를 이용해서 해결할 수 있다. 함수로부터 결괏값을 리턴 받기를 포기하고, 결과 값을 이용해서 처리할 로직을 콜백 함수에 담아 인자로 던지면 된다.

 

function findUserAndCallBack(id, callback) {
  setTimeout(function () {
    console.log("waited 0.1 sec.");
    const user = {
      id: id,
      name: "User" + id,
      email: id + "@test.com",
    };
    callback(user);
  }, 100);
}

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

// 결과
waited 0.1 sec.
user: {id: 1, name: "User1", email: "1@test.com"}

이번에는 findUserAndCallBack() 함수의 2번째 인자로 결괏값을 이용해서 실행될 로직을 넘겼고, setTimeout() 함수는 0.1초 후에 이 콜백 함수를 호출하였다. 이와 같이 비동기 함수를 호출할 때는 결괏값을 리턴 받으려고 하지 말고, 결괏값을 통해 처리할 로직을 콜백 함수로 넘기는 스타일로 코딩을 해줘야 예상된 결과를 얻을 수 있다.

 

다시 정리하면, findUserAndCalBack의 인자로 id와 callback 함수를 선언하여 호출하였다. 콜백 함수를 넣음에 따라 함수 내부에서 수행해주기 때문에 결괏값을 Return 할 필요가 없다.

 

하지만 자바스크립트 프로젝트가 점점 더 복잡해지면서 최근에는 콜백 함수를 인자로 넘겨서 비동기 처리를 하는 스타일을 피하는 추세입니다. 왜냐하면 콜백 함수를 중첩해서 사용하게 되면 계속해서 코드를 들여 쓰기 해야 하고 그러다 보면 코드 가독성이 현저하게 떨어지게 되기 때문이다.

 

결국, 많은 개발자들이 콜백지옥이라고 불리는 끔찍한 상황을 겪게 되었고 최근에는 Promise나 async/await를 이용하는 방법들로 대체되고 있다. Promise나 async/await는 다음 포스팅에서 살펴보도록 하겠다.