[JavaScript] 콜백 지옥 (1)

 

자바스크립트 콜백 함수

• 함수의 인자로 콜백 함수를 줘서 비동기 처리가 아닌, 
• 전 함수의 값을 받아 다음 함수를 실행하는 순차적 처리가 하고 싶은 경우에 사용

 

목적

• 비동기로 오는 Task들을 같이 넣어줘서 동기적으로 Serialized 된 방식으로 Task를 처리하기 위해서 사용
• 사용자 입장에서는 비동기 방식이지만, 작업자(컴퓨터) 입장에서는 동기적으로 처리하는 것과 같음
• Point
  • 함수를 하나의 데이터 타입으로 바라보자 !

 

예시 1 흐름

• (data) => {}
  • data를 인자로 가지는 callbackFn을 fastFunction의 인자로 보냄 -> fastFunction 함수 진입
• fastFunction() 
  • setTimeout이 실행이되고 data, callbackFn모두 Background로 가서 1초(1000ms)를 기다림
  • const  result = data * 2 (로직 처리)
  • callbackFn(result) 가 실행됨
    • 여기서 callbackFn은 (data) => slowFunction(data); 임
• 즉, callbackFn(result) == slowFunction(data*2)
  
  • 이기 때문에 slowFunction이 fastFunction이 실행된 결과 값으로 실행됨

 

다만,

• 예시3 처럼 콜백함수가 반복되어서 작성된다면 가독성이 매우 떨어짐 -> CallBack Hell
  • Promise의 등장

 

Code

function fastFunction(data, callbackFn) {
    return setTimeout(() => {
        const result = data * 2;
        console.log("fast", result);

        callbackFn(result);
    }, 1000)
}

function slowFunction(data, callbackFn) {
    return setTimeout(() => {
        const result = data + 10;
        console.log("slow", result);

        callbackFn(result)
    }, 3000)
}

// 예시 1
fastFunction(10, (data)=> { 
    console.log(data);         
    slowFunction(data);    
})

// 예시 2
fastFunction(10, (data) => {
    const fastFunctionResult = data;
    slowFunction(fastFunctionResult, data=> {
        const slowFunctionResult = data;
        console.log("fast->slow", slowFunctionResult)
    })
})

// 예시 3
// initData = 30, 순서: fast -> slow -> slow -> fast
fastFunction(30, (data) => {
    const fastResult1 = data;
    slowFunction(fastResult1, (data) => {
        const slowResult1 = data;
        slowFunction(slowResult1, (data) => {
            const slowResult2 = data;
            fastFunction(slowResult2, (data) => {
                const fastResult2 = data;
                console.log(fastResult2)
            })
        })
    }) 
})