[ES6+] callback

콜백

"내가 전달한 함수를 나중에 다시 불러줘(호출해줘)" = Callback

콜백은 다른 함수에 인수로 전달되는 함수를 말함

함수가 다른 함수를 호출할 수 있고 또한 함수가 완료된 후 콜백 함수를 실행할 수도 있음

 

콜백이 자주 쓰이는 곳  = 하나의 함수가 다른 함수를 기다려야 하는 비동기 함수에서 쓰일 때

 

대표적인 비동기 함수

setTimeout() : 시간 이후 실행

function myMessage1(){
	document.getElementById('demo1').innerHTML = 'I love you!!';
}

setTimeout(myMessage1, 3000);

// 인자값을 전달받는(즉, 매개변수가 존재하는) 함수인 경우..?
function myMessage2(value){
	document.getElementById('demo2').innerHTML = 'I love you!!';
}
setTimeout(() => {
	myMessage2('I love you!!');
}, 1000);

setInterval() : 시간 간격 실행

setInterval(() => {
	const d = new Data();
    document.getElementById('demo3').innerHTML = `${d.getHours()}:${d.getMinutes()}:${d.getSeconds()}`;
    }, 1000);

---

콜백 지옥(Callback Hell)

함수의 매개 변수로 넘겨지는 콜백 함수가 반복되어 코드의 들여쓰기 수준이 감당하기 힘들 정도로 깊어지는 현상

콜백 함수 안에서 다른 콜백 함수를 부르고 부르고 부르고

이렇게 하는 이유는? 비동기 코드를 동기적으로 실행시키기 위해 콜백으로 여러 코드 블록을 연결해 작성(콜백 체인)

근데 이런 식으로 계속 작성하다보면 과도한 함수 중첩으로 결국 콜백 지옥이 발생함

 

콜백 체인을 사용하지 않으면 비동기 함수들이 동기적으로 처리가 안됨
근데 콜백 체인이 반복되면 콜백 지옥이 됨

문제점

1. 가독서이 떨어진다

2. 디버깅, 유지보수가 힘들다