자바스크립트 콜백 함수

자바스크립트에서 비동기로 호출 된 특정 로직이 끝나고 나서 실행되도록 하는 함수를 콜백함수라고 합니다.

일반적으로 자바스크립트에서 비동기로 함수를 호출하게 되면 그 함수 로직이 끝날때까지 기다리는것이 아니라 바로 다음으로 넘어가게 되는데요, 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

function first() {     setTimeout(function() {         console.log(1);     }, 1000); }   function second() {     console.log(2); }   first(); second();   // 2 // 1 // 출력

cs

first()를 실행하고 second()를 실행하였음에도 second가 먼저 실행이 되는 것을 볼 수 있습니다.

function doHomework(subject, callback) {
    console.log('Strating my ' + subject + ' homework.');
    callback();
}
 
function endHomework() {
    console.log('Finished my homework!!');
}
 
doHomework('math', endHomework);
 
// Strating my math homework.
// Finished my homework!!

콜백의 가장 기본적인 구성으로, doHomework 함수에서 파라미터로 callback 함수를 넘겨주면, 내부 로직 마지막에 callback 함수를 호출하는 모습을 볼 수 있습니다.

파라미터로 넘겨주는 콜백 함수는 외부에서 선언해 넘길 수도 있고, 익명함수로 바로 선언하여 사용할 수도 있습니다.