18. 콜백함수

📌 18-1 콜백함수란?

• 함수에 인자로 함수를 전해준 뒤 호출되어 사용된다.
• 이벤트에 의해 호출 되는 함수

📌 18-2 동기적 콜백함수와 비동기적 콜백함수

🧩 동기적 콜백함수

• 데이터의 요청과 결과가 동시에 일어난다.
• 함수의 순서가 명확하게 작동한다.

// name, age, callback을 인자로 하는 함수 생성
function name(name, age, callback) {
    console.log(`이름은 ${name}입니다.`);
    // 콜백함수 실행
    callback(age);
}
// age를 출력하는 함수 생성
function age(age) {
    console.log(`나이는 ${age}살 입니다.`);
}
/*
결과 : 
이름은 Kim입니다.
나이는 20살 입니다.
*/
name("Kim", 20, age);

🔥 동기적인 코드로 호출을 하였지만 함수가 실행되고 난 뒤에 callback 함수가 실행되어 순서를 보장한다.

🧩 비동기적 콜백함수

• 데이터의 요청과 결과가 동시에 일어나지 않는다.
• 함수가 언제 결과값을 반환할지 알 수 없다.

function name(name, age, callback) {
    // 비동기로 작동하기 위해서 setTimeout 함수를 생성해서 호출 타이머는 랜덤
    setTimeout(() => console.log(`이름은 ${name}입니다.`), Math.random() * 1000);
    // 비동기적으로 작동하는 함수가 있는 콜백함수
    callback(age);
}

function age(age) {
    // 비동기로 작동하기 위해서 setTimeout 함수를 생성해서 호출 타이머는 랜덤
    setTimeout(() => console.log(`나이는 ${age}살 입니다.`), Math.random() * 1000);
}
// 결과 : 순서보장 X
name("Kim", 20, age);

function name(name, age, callback) {
    // 비동기로 작동하는 함수 안에 콜백함수로 실행될 때 함수를 인자로 받은 콜백함수를 실행해서 순서보장
    setTimeout(() => {
        console.log(`이름은 ${name}입니다.`);
        callback(age);
    }, Math.random() * 1000);
}

function age(age) {
    setTimeout(() => console.log(`나이는 ${age}살 입니다.`), Math.random() * 1000);
}
/*
결과 : 
이름은 Kim입니다.
나이는 20살 입니다.
*/
name("Kim", 20, age);

🔥 비동기적인 함수가 포함되어 있는 콜백함수를 동기적으로 사용하기 위해서 즉 순서의 실행을 보장을 받기 위해 콜백함수를 사용한다.

📌 18-3 콜백지옥

콜백지옥이란 콜백함수를 무수히 많이 사용하여 코드를 알아보기 힘든 상태를 말한다.

// 동기적으로 실행하기 위해서 1 -> 2 -> 3 -> 4의 결과를 도출하기 위한 콜백함수 호출
function f1(callback) {
    setTimeout(() => {
        // 결과 : 1
        console.log(1);
        // 첫 번째 콜백 호출
        callback();
    }, Math.random() * 1000);
}
function f2(callback) {
    setTimeout(() => {
        // 결과 : 2
        console.log(2);
        // 두 번째 콜백 호출
        callback();
    }, Math.random() * 1000);
}
function f3(callback) {
    setTimeout(() => {
        // 결과 : 3
        console.log(3);
        // 세 번째 콜백 호출
        callback();
    }, Math.random() * 1000);
}
function f4() {
    setTimeout(() => {
        console.log(4);
    }, Math.random() * 1000);
}
// 첫 번째 콜백함수 핸들러
function callback1() {
    // 함수 f2를 호출하고 인자로 콜백함수를 넘겨줌
    f2(callback2);
}
// 두 번째 콜백함수 핸들러
function callback2() {
    // 함수 f3을 호출하고 인자로 콜백함수를 넘겨줌
    f3(callback3);
}

function callback3() {
    // 함수 f4 호출
    f4();
}
/*
결과 :
1
2
3
4
*/ 
f1(callback1);

// 위 코드와 동일하지만 함수를 따로 만들지 않고 함수 자체에서 사용한 코드
function f1(callback) {
    setTimeout(() => {
        console.log(1);
        callback();
    }, Math.random() * 1000);
}
function f2(callback) {
    setTimeout(() => {
        console.log(2);
        callback();
    }, Math.random() * 1000);
}
function f3(callback) {
    setTimeout(() => {
        console.log(3);
        callback();
    }, Math.random() * 1000);
}
function f4() {
    setTimeout(() => {
        console.log(4);
    }, Math.random() * 1000);
}
/*
파라미터에 함수를 만들어서 입력
결과 :
1
2
3
4
*/
f1(() => {
    f2(() => {
        f3(() => {
            f4();
        });
    });
});

🧩 콜백지옥 해결방법

• Promise 사용
• async / await 사용