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);

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 callback地獄

// 동기적으로 실행하기 위해서 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();
        });
    });
});