[JS] 비동기 작업 처리하기1 - 콜백함수 사용하여 처리

 

callback함수를 통해 바깥에서도 내부에 선언한 변수 사용가능하다.

[예시1]

3초뒤 sum 값 출력

 

add함수가 실행되면서, 

내부에 있는 비동기함수가 실행된다.

3초뒤  sum이 계산되고 인자값으로 sum을 주게되고 callback 함수가 실행된다.(비동기 결과값을 외부에서 사용가능)

function add(a,b, callback) { //callback함수를 통해 비동기함수의 결과값을 외부에서 사용가능하다.
    setTimeout(() => { const sum = a+b; 
                      callback(sum);
                     }, 3000);
}

add(1, 2 , (value) => {console.log(value);});

//(3초 뒤) 3

---

 

[예시2]

음식을 주문하는 상황

 

3초뒤 음식이 도착한다는 가정,

음식을 받은 뒤 2초뒤에 식은 음식을 출력한다.

1.5초뒤에는 냉동 음식을 출력한다.

 

여기서 비동기 작업의 결과를 또 다른 비동기 작업의 인수로 전달이 가능하다.

//주문 함수
function orderFood(callback) {
    setTimeout(() => {
        const food = "떡볶이";
        callback(food);//💥호출,비동기 결과값을 또다른 비동기 인수로 전달
    },3000);
}

//식은 함수
function cooldownFood(food, callback) {
    setTimeout(()=> {
        const cooldownedFood = `식은 ${food}`;
        callback(cooldownedFood);//💥호출,비동기 결과값을 또다른 비동기 인수로 전달
    }, 2000);
}

//냉동 함수
function freezeFood(food, callback){
    setTimeout(()=> {
            const freezedFood =`냉동 ${food}`;
        callback(freezedFood);//💥호출,비동기 결과값을 또다른 비동기 인수로 전달
    }, 1500);
}


//호출
orderFood((food) => {
    console.log(food);//(출력)떡볶이
	
 
    //callback함수 선언
    cooldownFood(food, (cooldownedFood) => {//food ,비동기 작업의 결과를 또다른 비동기 작업의 인수로 전달
        console.log(cooldownedFood);//(출력)식은 떡볶이
        
           //callback함수 선언
        freezeFood(cooldownedFood, (freezedFood) => {//cooldownedFood ,비동기 작업의 결과를 또다른 비동기 작업의 인수로 전달
        	console.log(freezedFood);//(출력)냉동 떡볶이
        });
        
    });
});

 

💥하지만 이런 방식 보다는 

더 나은 방식이 있다( 들여쓰기가 많아지면서 가독성이 떨어진다.)

이런 문제를 콜백지옥이라 부르는데...

 

방법이 없을까? 

---

 

이 다음 시간에 

'프로미스' 포스팅을 작성하겠습니다.