callback function - JS

콜백함수란 함수 안에서 특정한 시점에 호출되는 함수를 뜻한다.

그래서 함수의 매개변수로 함수가 들어가고, 매개변수로 들어간 함수가 콜백함수라고 불린다.

 

아주 중요한 개념이라고 생각하는데, 그 이유는

비동기 처리의 문제점을 해결하기 위해서이다. 비동기 처리란 어떤 함수가 끝날 때까지 기다렸다가 다음 함수를 실행하는 것이 아니라, 함수가 실행되는 도중에 또 다른 함수를 호출해서 여러 동작을 동시에 할 수 있도록 처리하는 자바스크립트의 특징이다.

하나의 함수가 복잡해서 처리 속도가 느리다면, 다른 함수들의 실행이 지연되기 때문에 사이트의 동작이 멈추게 된다. 그런 것을 방지하기 위해 비동기 처리를 하는 것은 중요하다.

 

그런데 대표적인 문제점으로, 서버와 통신을 할 때 비동기 처리를 하면 response를 받기 전에 함수가 실행되어 데이터가 제대로 적용되지 않을 수가 있다. 이런 비동기 처리의 문제점을 해결하기 위해 response를 받고, 받은 response를 적용해 함수를 처리한다.

 

 

간단한 콜백함수를 사용하지 않을 때와 사용할 때를 비교해서 콜백함수의 사용법을 알아보자.

// 콜백함수를 사용하지 않을 때

function sum(a, b){
    const result = a + b
    return result
}

function print(c){
    console.log(c)
}

print(sum(2,3))

// 5

콜백 함수를 사용하지 않을 때 sum() 함수의 처리가 완료되고 난 후에 print 함수가 처리 된다.

// 콜백함수를 사용하는 경우

function sum(a, b, CB){
    const result = a + b
    CB(result)
}

function print(c){
    console.log(c)
}

sum(2, 3, print)

// 5

콜백 함수로 처리하면 sum() 함수의 매개변수로 CB를 받는데 그 CB가 print() 함수인 것이다. 그래서 sum 함수 안에서 print 함수가 실행되고 sum() 함수가 완료되는 방식이다.

 

또 다른 형태로,

function sum(a, b, CB){
	const result = a + b
    CB(result)		// function(num){ console.log(num)} 의 처리를 한다.
}

sum(1, 2, function(num){
	console.log(num)
})

// 3

 

 

또한, 콜백함수는 클로저이다. 클로저란, 함수와 그 함수가 만들어진 환경으로 이루어진 특별한 객체이다.

클로저에 대해 더 자세하게 알아보자.

 

그리고, 개발하다보면 비동기 처리 때문에 콜백 안에 콜백을 넣고, 그 콜백 안에 또 다른 콜백을 넣는 콜백지옥을 겪게 될 수도 있다. 대략 이런 모양이다.

$.get('url', function (res1) {
    first(res1, function (res2) {
        second(res2, function (res3) {
            third(res3, function (res4) {
                fourth(res4, function (res5) {
                    fifth(res5, function (res6) {
                        // res6로 무언가를 처리.
                    });
                });
            });
        });
    });
});

데이터를 받아서 함수를 처리하고, 처리한 함수로 받은 데이터를 통해 다음 함수를 처리하고, 처리한 함수를 통해 받은 데이터로 또 다른 함수를 처리하고.....  이게 콜백 지옥이다.

 

콜백 지옥을 해결하는 방법도 있다.

1. 익명 함수를 포기하고 함수들을 분리하는 방법.

2. Promise 패턴을 적용하는 방법.

3. async, await를 적용하는 방법. 

 

콜백 지옥을 해결하는 세가지 방법을 공부해서 포스팅 해야겠다.