콜백함수

• 콜백함수(callback function): 다른 함수(A)의 전달인자(argument)로 넘겨주는 함수(B)
• parameter를 넘겨받는 함수(A)는 callback 함수(B)를 필요에 따라 즉시 실행(synchoronously)할 수 있고, 아니면 나중에(asynchronously) 실행할 수도 있음

function B() {
	console.log('called at the back!');

function A() (callback) {
	callback(); // callback === B
}

A(B);

예시

callback in action

• 반복 실행하는 함수(iterator)

[1, 2, 3].map(function(element) {
	return element * element;
});

callback in action

• 이벤트에 따른 함수(event handler)

document.querySelector('#btn').addEventListner('click', function(e) {
	console.log('button clicked');
});

⚠️주의사항

함수 실행을 연결하는 것이 아니라, 함수 자체를 연결함

function handleClick() {
	console.log('button clicked');
};

//옳은 예1
document.querySelector('#btn').onclick = handleClick;
//옳은 예2
document.querySelector('#btn').onclick = function() {
	handleClick();
};
//옳은 예3
document.querySelector('#btn').onclick = handleClick.bind();

//틀린 예
document.querySelector('#btn').onclick = handleClick();

비동기 처리 다루기

비동기 처리 예시

//함수 printString은 string을 전달받아서 랜덤한 시간 이후에 print함
const printString = (string) => {
  setTimeout(function () {
    console.log(string);
  }, Math.floor(Math.random() * 100) + 1);
};

const printAll = () => {
  printString('A');
  printString('B');
  printString('C');
};

printAll(); //랜덤하게 string이 print됨 -> 비동기 처리

콜백 함수를 활용해서 비동기 처리 다루기

//printString의 파라미터에 callback이 생김
const printString = (string, callback) => {
  setTimeout(function () {
    console.log(string);
    callback();
  }, Math.floor(Math.random() * 100) + 1);
};

const printAll = () => {
  printString('A', () => {
    printString('B', () => {
      printString('C', () => {});
    });
  });
}; // 콜백함수 덕분에 A B C 순서대로 print할 수 있음

Callback 함수로 error 다루기

error handling model

const somethingGonnaHappen = callback => {
	waitingUntilSomethingHappens();

	if (isSomethingGood) {
		callback(null, something);
	};

	if (isSomethingBad) {
		callback(something, null);
	};
};

예시

somethingGonnaHappen((err, data) => {
	if (err) {
		console.log('ERR!!');
		return;
	}
	return data;
});

문제점

callback hell

(그림 출처:https://dev.to/jerrycode06/callback-hell-and-how-to-rescue-it-ggj)

콜백함수로 비동기 처리를 다루면, 가독성이 떨어지기 때문에 코드를 유지하거나 보수하기 어려움