콜백 함수(callback)

콜백 함수는 이름만 언뜻 들어보면 어렵게 느껴진다. 어떤 함수 내에서 호출하기 위해 그 함수를 호출할 때 인자로 넘겨지는 함수를 바로 콜백 함수라고 하는데, 이 콜백함수는 비단 자바스크립트 뿐 아니라 거의 모든 종류의 프로그래밍 언어에서 구현이 가능하다.

 

예를 하나 들어 보자.

 

const merryChristmas = (name) => {
 	console.log(name + ", Merry Christmas!");
}

merryChristmas("Petit");

 

위 함수는 매우 단순하다. 이름을 인자로 넘겨주면, 그 이름을 화면에 크리스마스 인사와 함께 뿌려준다.

 

그럼 새해 인사를 뿌려주는 함수를 하나 더 만들어보자.

 

const happyNewYear = (name) => {
 	console.log(name + ", Happy New Year!");
}

happyNewYear("Petit");

 

이 함수에서도 마찬가지로, 호출할 때 인자로 넘긴 이름과 함께 화면에 새해 인사를 뿌려준다.

 

하지만, 나는 함수를 하나만 사용해서 이 두가지 인사를 모두 출력하고 싶다.

이 때 사용되는 것이 콜백 함수이다.

두말하면 입아프니 바로 예제를 보도록 하자.

 

내가 궁극적으로 호출하고 싶은 함수는 바로 이것이다.

greeting("Petit", merryChristmas, happyNewYear);

greeting()함수에서는, 내가 받은 이름과 원하는 인사들을 화면에 뿌려줄 것이다.

greeting()함수 내에서의 콜백 함수 호출은 다음과 같이 구현된다.

 

const merryChristmas = (name) => {
	console.log(name, ", Merry Christmas!");
}

const happyNewYear = (name) => {
	console.log(name, ", Happy New Year!");
}

const greeting = (name, christMasGreeting, happyNewYearGreeting) => {
	christMasGreeting(name);
   	happyNewYearGreeting(name);
}

 

이렇게, greeting 함수에서 인자로 받았던 두 개의 함수를 호출할 수 있다.

그런데! 나는 두개가 아니라 내가 원하는거 여러개 받고싶다면?

콜백 함수를 배열로 받으면 된다!

 

const merryChristmas = (name) => {
	console.log(name, ", Merry Christmas!");
}

const happyNewYear = (name) => {
	console.log(name, ", Happy New Year!");
}

const goodNight = (name) => {
	console.log(name, ", Good Night!");
}

const greeting = (name, callbacks) => {
	callbacks.forEach(callback => {
    	callback(name);
    }
}

greeting("Petit", [goodNight, happyNewYear]);

 

위와 같이,

마지막 줄에서 호출할 때, 배열 안에 내가 하고싶은 인사를 넣어주면 된다.

만약 크리스마스 인사만 하고 싶다면

greeting("Petit", [merryChristmas]) 이렇게 호출하면 된다!

 

 

 

그런데, 왜 새해 인사는 Merry New Year라고 하지 않을까???