JavaScript에서 콜백 함수란 무엇입니까?

콜백은 나중에 함수 내에서 호출할 수 있는 인수로 다른 함수에 전달되는 함수입니다.

동기 콜백

동기식이란 코드 문이 순차적으로 서로 즉시 실행되는 것을 의미합니다.

function print(number, result) {
    console.log(`${number} is ${result}`);
}
function checkEvenOrOdd(number, callback) {
  const result =  (number % 2 === 0) ? 'Even' : 'Odd';
  callback(number, result);
}
checkEvenOrOdd(56, print);
// 56 is Even

여기에서 콜백은 즉시 실행되고 비동기 작업이 완료될 때까지 기다리지 않습니다. 이것이 동기식 콜백인 이유입니다.

비동기 콜백

비동기 작업이 완료된 후 콜백이 실행 중이면 비동기 콜백입니다.

주문을 받고 인쇄하는 한 가지 예를 살펴보겠습니다.

function takeOrder() {
    setTimeout(() => {
       return (Math.random() * 10) <= 5 ? 'Coffee' : 'Tea';
    }, 1000);
}
let order = takeOrder();
console.log('Order is for: ' + order);
// Order is for: undefined

여기 takeOrder 함수에서 setTimeout는 1초 후에 실행되고 그 때까지 console.log 문이 이미 실행되었으므로 order 값은 undefined 로 인쇄됩니다.

이제 takeOrder 에서 데이터가 반환된 후에만 콘솔에 메시지를 기록할 수 있다면 이 문제를 해결할 수 있습니다. 이것은 takeOrder 함수 내부에서 호출될 콜백 함수를 takeOrder에 전달하여 수행할 수 있습니다.

function takeOrder(callback) {
    setTimeout(() => {
        const order = (Math.random() * 10) <= 5 ? 'Coffee' : 'Tea';
        callback(order);
    }, 1000);
}
takeOrder((order) => {
    console.log('Order is for: ' + order);
});
// Order is for: Tea

여기서 1초 후에 콜백 함수가 호출되고 콘솔 문이 올바른 주문 값으로 실행됩니다.

Note: The output of takeOrder function may differ in your case as we are using Math.random() to decide order value.

콜백으로 오류 처리

성공 시나리오와 실패 시나리오 모두에 대해 서로 다른 콜백을 전달할 수 있습니다.

function takeOrder(success, failure) {
    setTimeout(() => {
        const random = (Math.random() * 10);
        if(random < 8) {
            const order = random < 4 ? 'Coffee' : 'Tea';
            success(order);
        } else {
            failure('Order Not Available');
        }

    }, 1000);
}

takeOrder(
    (order) => {
        console.log('Order is for: ' + order);
    },
    (error) => {
        console.log(error);
    }
);

중첩 콜백

주문 과정을 하나씩 살펴보겠습니다.

function takeOrder(callback) {
    setTimeout(() => {
        const order = (Math.random() * 10) <= 5 ? 'Coffee' : 'Tea';
        callback(order);
    }, 1000);
}

function makeOrder(order, callback) {
    setTimeout(() => {
        callback(order + ' is prepared');
    }, 1000);
}

function serveOrder(order, callback) {
    setTimeout(() => {
        callback(order + ' is served');
    }, 1000);
}

takeOrder((order) => {
    console.log('Order is for: ' + order);
    makeOrder(order, (orderStatus) => {
        console.log(orderStatus);
        serveOrder(order, (orderStatus) => {
            console.log(orderStatus);
        })
    })
});

산출

Order is for: Coffee
Coffee is prepared
Coffee is served

여기서 makeOrder는 takeOrder의 응답이 올 때 호출됩니다. 마찬가지로 serveOrder는 makeOrder의 응답이 올 때 호출됩니다. 여기서 우리는 시퀀스에서 함수를 실행하기 위해 콜백을 서로 중첩하고 있습니다.

콜백의 중첩이 증가하면 콜백 지옥이라고 하며, 여기서 콜백 관리가 어렵고 코드의 가독성이 떨어집니다. 샘플 콜백 지옥을 살펴보십시오.

takeOrder((order) => {
    makeOrder(order, () => {
        serveOrder(order, () => {
            provideBill(order, () => {
                takeBill(order, () => {
                    // some more callbacks
                })
            })
        })
    })
});

이 콜백 지옥은 promise 및 async/await 을 사용하여 수정할 수 있습니다.

콜백을 인수로 받아들이는 JavaScript에서 사용할 수 있는 몇 가지 기본 제공 메서드가 있습니다.

// Array.map()
array.map((element) => {
    // your code here
});
// setTimeout
setTimeout(() => {
    // your code here
}, timeout);

콜백을 허용하는 다른 메서드를 살펴보겠습니다.Array.filter() , Array.reduce() , Array.find() , Array.sort() , Array.forEach() , setInterval() , addEventListener() , Promise.then() , Promise.catch() 등

당신은 또한 좋아할 수 있습니다

A brief guide to Promises in JavaScript

Understanding async and await in JavaScript

20 JavaScript Shorthand Techniques that will save your time

시간 내주셔서 감사합니다
웹 개발 블로그jscurious.com에서 내 글을 더 찾아보세요.