JS : Callback 함수

Callback 함수, 란?

JavaScript의 Callback 함수는, 다른 함수의 인자로 이용되는 함수로, 어떠한 이벤트가 발생한 후 인자로 전달된 함수가 다시 호출되는 것을 말한다.

그런데 이 인자로 전달된 Callback 함수가 동작하는 시점은, 다른 코드가 끝난 다음에 연달아 일어나는 것이 아니라 Callback 함수가 호출된 바로 그 시점에 동작한다.

왜 Callback 함수를 사용하는 것일까?

Callback 함수를 사용하는 가장 큰 이유 중 하나는, 비동기 데이터를 처리하기 위해서이다.

📌 자바스크립트의 비동기처리
자바스크립트는 '비동기처리'라는 특성을 가지고 있는데, 이것은 특정코드의 연산이 끝날 때 까지 코드의 실행을 멈추지 않고, 순차적으로 다음 코드를 먼저 실행하는 특성이다.

구체적인 코드를 통해서 알아보자

const first = () => {
	console.log(1);
};

const second = () => {
	console.log(2);
};

first();
second();

// 1
// 2

위의 예시는 우리가 의도한대로 정상적으로 1,2 순서대로 콘솔을 찍어 내는 것을 확인할 수 있다.

😵 하지만, 바로 실행될 수 없는 조건이 들어간 함수가 있다면 어떻게 될까?

이러한 사례 중 하나로 setTimeout을 들 수 있다.
아래의 예시는 setTimeout을 500밀리초로 설정해서, 500밀리초 이후에 동작하는 함수를 구현한 경우이다.

const first = () => {
setTimeout (() => {
 console.log(1)
}, 500);
}

const second = () => {
console.log(2);
}

first();
second();

// 2
// 1

함수의 실행은 first, second 순으로 되었지만 결과 값은 second, first 순으로 받았음을 확인 할 수 있다. 여기서 중요한 점은 자바스크립트는 이러한 비동기 처리를 기다려주지 않는다는 점이다.

그리고 이러한 문제를 해결하는 방법중 하나가 콜백함수를 사용하는 것이다.
순서를 보장하기 위해 함수의 인자로 콜백함수를 넣고, 비동기 처리가 끝나는 시점에 콜백함수를 실행시켜 주는 것이다.

즉, 쉽게 말해 Callback 함수는 다른 함수의 실행이 끝날 때 까지 특정 코드가 실행되지 않게 기다려주는 방법이라고 볼 수 있다

Callback 함수의 사용법

그렇다면 구체적인 사례를 통해 콜백함수가 어떻게 사용되는지 살펴보자

const first = (callback) => {
  setTimeout(() => {
  	console.log(1);
    callback();
  }, 500);
}

const second = () => {
  console.log(2);
}

first(() => {
  second();
});
  
// 1
// 2

위의 예시에서는 first 함수가 실행되고 500밀리초가 지난 후에 1을 콘솔에 찍고, 인자로 넘겨받은 콜백함수를 실행하면서 second 함수가 실행되는 모습을 볼 수 있다.

Callback 지옥

다음의 예시는 AJAX에서 요청 후 응답이 올 때까지 기다렸다가 응답이 성공하면 Success 콜백함수로 응답 데이터를 받아오는 구문이다.

$a.jax({
	url: "http://httpbin.org/get",
	success: function(res) {
		console.log(res);
	}
});

프론트엔드 환경에서 한번의 요청으로 데이터를 받아오고 끝나면 좋을텐데, 현실은 그렇지 못하다🙅
예를 들어 서버에 요청 후 응답에 성공하면, success 함수가 실행되는데 여기서 받은 응답에 결과에서 데이터를 받아 추가적으로 호출하는 경우가 많다. (ex.)

// 콜백지옥, 가독성이 떨어짐
$.get('url', function (response) {
 parseValue(response, fuction(id) {
  auth(id, function (result) {
   display(result, function (text) {
    console.log(text)
   })
  })
 })
})

이렇게 콜백함수의 깊이가 점점 깊어질수록 코드는 난잡해지고 유지보수하기 힘든 코드가 탄생하게 되는데 이런 상황을 보통 콜백지옥이라고 부른다. 오마깟!!!@
이러한 콜백지옥을 해결하기 위해서 몇 가지 방법이 있는데, promise와 Async/Await를 활용하는 것이다.

정리하면서

👉 Callback 함수는 다른 함수의 인자로 이용되는 함수로, 어떠한 이벤트가 발생한 후 인자로 전달된 함수가 다시 호출되는 것을 말한다.

👉 Callback 함수는 비동기 데이터 처리를 위해서 사용하며, 즉 다른 함수의 실행이 끝날 때 까지 특정 코드가 실행되지 않게 기다려주는 방법이라고 볼 수 있다
(대표적인 비동기처리 방식으로는 AJAX, setTimeout 등이 있다.)

👉 Callback 함수의 중첩으로 인해 유지보수가 어려운 Callback 지옥이 생기기도 하는데, 이것을 해결하기 위한 방법으로는 promise와 Async/Await가 있다.