5. 콜백 지옥

Q. 지연시간이 짧은 b, a, c가 아닌 a, b, c 순서대로 시작하고 완료되게 하려면?

b, a, c는 외부 API를 통한 네트워크 응답 시간이라고 가정,
즉, a 작업이 끝나야 b 작업을 수행할 수 있고, b가 끝나야 c 작업을 수행할 수 있는 경우

정답 보기

콜백을 중첩하여 작성

solution.js


function a( callback ) {
 
    const aCallback = () => {
        console.log( 'a() called' );
        callback();
    }
 
	setTimeout(aCallback, 1000 );
}
 
function b( callback ) {
 
    const bCallback = () => {
        console.log( 'b() called' );
        callback();
    }
 
	setTimeout(bCallback, 500 );
}
 
function c( callback ) {
    const cCallback = () => {
        console.log( 'c() called' );
        callback();
    };
 
	setTimeout(cCallback, 1200 );
}
 
a( () => {
    console.log('a() done!');
 
    b( () => {
        console.log('b() done!');
        
        c( () => {
            console.log('c() done!');
        });
    });
});

단점
→ 콜백이 중첩된 구조로 작성되어 가독성, 코드 이해도 저하

콜백 지옥

결국 a, b, c 순서대로 동작은 하게 되었지만 코드의 가독성이 떨어짐

solution.js


// ...
a( () => {
    console.log('a() done!');
 
    b( () => {
        console.log('b() done!');
        
        c( () => {
            console.log('c() done!');
        });
    });
});

이처럼 콜백 패턴을 활용할 경우,
비즈니스 요구사항에 따라 처리 조건이 복잡해질수록 코드 역시 복잡해지기 쉬움