JavaScript에서 콜백을 사용한 비동기 코드

우리에게 어떤 비동기 함수가 있다고 가정해 봅시다:

function make() {
	setTimeout(function() {
		console.log('1');
	}, 3000);
}

이 함수를 다음과 같이 사용한다고 가정해 봅시다:

make();
console.log('2'); // 먼저 실행될 것입니다

함수 내부의 비동기 작업이 수행된 후에 두 번째 콘솔 출력이 실행되도록 만들고 싶다고 가정해 봅시다. 이를 위해 사용되는 접근 방식 중 하나는 콜백을 사용하는 것입니다: 기다리는 코드를 익명 함수로 감싸서 make 함수에 매개변수로 전달합니다:

make(function() {
	console.log('2');
});

물론, 이것 자체로는 우리의 문제를 해결하지 못합니다. 지금 우리는 단순히 다음 규칙을 정한 것입니다: make가 실행된 후 코드를 실행하려면 해당 코드를 콜백으로 make 호출에 전달하십시오.

make 함수의 코드를 우리의 규칙에 따라 작동하도록 수정해 봅시다:

function make(callback) {
	setTimeout(function() {
		console.log('1'); // 어떤 비동기 작업, 여러 개일 수도 있음
		callback();       // 그리고 우리의 콜백
	}, 3000);
}

콘솔에 숫자가 어떤 순서로 출력될지 설명해 보세요:

function make(callback) {
	setTimeout(function() {
		console.log('1');
		callback();
	}, 3000);
}

make(function() {
	console.log('2');
	console.log('3');
});