자바스크립트 콜백 (JavaScript Callback)

A callback is a function passed as an argument to another function

This technique allows a function to call another function

A callback function can run after another function has finished

Callback 함수란 다른 함수의 매개변수로 넘겨준 함수를 의미함

자바스크립트에 콜백함수가 필요한 이유?

자바스크립트는 이벤트기반 (event-driven) 언어임

자바스크립트는 다음 명령어를 실행하기 전 이전 명령어의 응답을 기다리기보다 다른 이벤트를 기다리며 계속 명령을 수행함 (non-blocking)

A함수 이후에 B함수를 실행하고 싶은데 A함수의 작업이 즉시 끝나는 작업이 아니라면? (e.g. setTimeout())

function A() {
	setTimeout( function() {
		console.log(1);
	}, 1000);
}

function B() {
	console.log(2);
}

A();
B();

// output:
// 2
// 1

이런 코드가 있을 때 A를 B보다 먼저 호출하더라도 출력은 B가 먼저 나옴

이는 자바스크립트가 우리가 원하는 순서대로 함수를 실행하지 않은 것이 아니라 A() 함수의 실행 이후 끝을 기다리지 않고 바로 B() 함수를 실행하기 때문

즉 비동기 데이터를 처리하기 위해서 콜백함수가 필요함

콜백함수를 언제 어떻게 사용하는지?

위에서 살펴봤듯이 함수의 실행순서를 보장받고 싶을 때 콜백을 사용할 수 있음

한마디로 콜백함수는 함수의 실행이 종료될 때까지 다른 함수가 실행되지 않게 기다리는 것

function A(callback) {
	setTimeout(function() {
		console.log(1);
		callback();
	}, 1000);
}

function B() {
	console.log(2);
}

A(B);

// output:
// 1
// 2

B() 함수를 A() 함수의 매개변수로 넘겨서 A()의 콘솔 출력 이후 callback()을 호출할 수 있음