JavaScript 콜백 함수(Callback Function)의 이용

콜백 함수란? ( Callback Function ) 은 파라미터로 함수를 전달 받아 함수의 내부에서 실행해주는 함수이다.

 

function whatYourName(name, callback) {
    console.log(name);
    callback();
}

function finishedFunc() {
    console.log('Finished');
}

whatYourName('Ryeol', finishedFunc);

함수 호출에 첫번째 인자로는, 이름을 주고 두번째 인자로는 콜백용 함수를 주었다.

결과로는 , Ryeol 과 Finished가 나오며 기본적인 콜백 함수 이다.

 

다른 예제를 하나 보자

const getName = (callbackFunc) => {
	const name = "Mike";
    setTimeout(() => {
    	callbackFunc(name);
     }, 3000);   
     // 3초뒤 name을 callback 값으로 전달해준다.
  };

setTimeout 함수로 3초를 카운팅 한 후에, 콜백 함수를 이용하여 , 내부에 name을 인자로 전달해주었다.

function received(name) {
getName(received); // 지금 이 함수를 인자로 넘겨 준다. 그러면 3초뒤에 이 함수가 호출되며
console.log(name); // 이 부분이 실행된다.
}

콘솔에서 이용 해보면, 3초뒤에 "Mike"를 출력하는 걸 볼 수 있다.

 

첫번째 예제와 다르게 왔다 갔다 해야되서 좀 불편하지만, 콜백의 활용을 보여주는 좋은 예제이다.

 

사실 콜백을 이용하다보면 콜백지옥에 빠질 수 있는데, 그렇기에 ES6이상 부터는 Promise를 이용한

 

.then 문법을 더 사용하는 것을 추천한다.

 

Promise관련 포스팅은 시간이 날때 예제와 함께 다뤄볼 생각인데, 필자는

 

Promise부터 배워서 Callback을 잘몰랐는데, 이번에 Jest 예제를 다루다 찾게 되어 정리겸 포스팅 해본다.