Callback 함수

Callback 함수

1. Callback 함수

 - 다른 함수 내에서 실행되는 함수를 뜻함

 - 주로 비동기 코드에서 사용되며, 비동기 작업이 완료되면 실행되어야 하는 작업을 정의함

 

2. Callback 함수의 특징

 - 함수 내에서 다른 함수의 인자전달될 수 있음

 - 함수 내에서 다른 함수의 결과 반환될 수 있음

 - 함수를 비동기 작업의 완료, 실행되도록 스케줄링할 수 있음

 

3. 예시

 - a 함수 3초 후, 비동기 작업이 완료되고 그 작업이 완료된 후, b 콜백 함수 실행

console.clear();

function a(callback) {
    setTimeout(function () {
        console.log("비동기 작업 완료");
        callback(10); // callback 함수를 호출
    }, 3000)
}

function b(input) {
    console.log("callback 함수 실행");
    console.log("실행 결과 : " + (input + 10));
}

a(b);

 

4. Promise와 async / await

 - ES6부터는 Promise async / await 사용하여, 비동기 작업더 간편하게 처리할 수 있음

 - 이러한 방식은 Callback 지옥을 피하고, 코드를 더 읽기 쉽게 만드는 데 도움을 줌

    ※ 콜백 지옥 : JavaScript 코드에서 비동기 작업연속적으로 수행하거나 중첩된 비동기 작업처리할 때 발생하는 문제

 

5. 예시

console.clear();

function a() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            console.log("비동기 작업 완료!");
            resolve(); // 작업 완료 시, resolve 호출
        }, 3000);
    });
}

async function main() {
    console.log("작업 시작");
    await a();
    console.log("작업 종료");
}

main();

'Front-End Study > JavaScript' 카테고리의 다른 글

동기와 비동기  (0) 2023.11.10
fetch 함수  (0) 2023.10.26
localStorage  (0) 2023.09.04
findIndex 함수  (0) 2023.08.25
fill 함수  (0) 2023.08.11