Callback

콜백을 이해하기 위해선 우선 비동기 처리라는 단어의 뜻을 알 필요가 있다.

자바스크립트에서의 비동기 처리는 코드 진행을 순차적으로 하는 것이 아니라 특정 코드는 코드 진행 순서를 지나가도 종료되지 않고 대기하고 있다가 다른 코드들의 실행이 끝난 뒤 처리가 이루어진다.

비동기 처리가 필요한 이유는 만약 내 블로그에서 글을 작성하면 만 명의 구독자들에게 이메일을 보내고 글 작성을 완료한다는 순서를 가정했을 때 1명당 1초의 시간을 들여 이메일을 보낸다고 하면 약 3시간이 걸린다. 그러면 글을 작성하고 3시간을 기다렸다가 글 작성이 완료되는 셈이다. 이것은 너무 비효율적이다.

자바스크립트에서 함수는 Object이다. 이 때문에 함수는 다른 함수의 인자로도 쓰일 수도 있고 어떤 함수에 리턴이 될 수도 있다.

인자로 넘겨 지는 함수를 콜백 함수라고 한다.

함수를 콜백으로 다른 함수의 인자처럼 사용할 경우에는 오직 함수의 정의만을 넘겨주면 된다. 굳이 함수라고 해서 끝에 ()을 붙여줄 필요는 없다.

setInterval(callback,1000)의 코드와 같이 함수의 인자로 전달된 함수의 경우에는 언제든 원하는 시점에서 실행을 시킬 수 있다.

즉 콜백함수는 전달받은 즉시 바로 실행이 될 필요가 없다는 것이다. 함수의 이름처럼 함수의 내부의 어느 특정 시점에서 실행을 하면 된다.

 

콜백 함수 사용

a.addEventListener("click",function(){
 console.log('hi');
});

click 함수의 인자로 함수를 전달하고 있다. 그리고 그 함수는 click 함수가 실행이 되면 동작을 한다. 가장 전형적인 자바스크립트의 콜백 함수이다.

var color = ["red", "black", "blue", "green"]; 

color.forEach(function (el){ 

console.log(el); // red,black,blue,green 

});

forEach라는 함수 안에 익명의 함수를 넣어서 forEach 구문 내에서 동작을 한다. 이것도 콜백 함수이다.

콜백 함수 만들어 보기

function todayWork(work,callback){

 alert(`starting my ${work} !!`);
 
 callback();
 
}

function finishWork(){

 alert(`finished my work !!`);
 
}

todayWork('job',finishWork);

todayWork함수를 호출할 때 finishWork함수의 정의를 인자로 넣어 준다.