[JavaScript] 동기와 비동기 - 비동기① 콜백함수

동기

여러개의 작업을 순서대로, 하나씩 처리하는 방식

function taskA(){
    console.log("2");
}
console.log("1");
taskA();
console.log("2");

// 실행결과 1, 2, 3

단점 ) 
처리시간이 오래걸리는 작업이 완료되기까지 다음 작업 진행 X

비동기

작업을 순서대로 처리하지 않음
비동기의 단점을 보완할 수 있음

[ 실행 원리 ]

1) 자바스크립트 엔진이 코드를 순차적으로 실행함
2) 비동기 함수를 만나면 Web APIs에 비동기 함수 및 비동기 함수가 끝나면 실행될 콜백함수를 전달함
3) 비동기 코드는 건너뛰고 다음 코드를 다시 순차적으로 실행함
4) 그동안 Web APIs 는 내부에서 비동기 함수를 실행함
5) Web APIs에서 비동기 함수 실행이 끝나면 콜백함수를 자바스크립트 엔진에게 돌려줌
6) 자바스크립트 엔진은 돌려받은 콜백함수를 실행함

비동기① 콜백함수

다른 함수의 인자로써 이용되는 함수 또는 어떤 이벤트에 의해 호출되는 함수

예시 1)

function func1(callback) {
	callback();
}
function callback() {
	console.log("callback 함수 실행");
}

func1(callback);

// 출력 : callback 함수 실행

예시 2)

// 음식을 주문하는 상황

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);
    cooldownFood(food, (cooldownedFood)=>{
        console.log(cooldownedFood);
        freezeFood(cooldownedFood, (freezedFood) => {
            console.log(freezedFood);
        });
    });
});

단점 ) 중첩해서 사용하다보면 콜백지옥(callback hell)이 생길 수 있음