콜백함수, Primise, async, await

콜백 함수(Callback function)는 다른 함수에 인수로 전달되어 실행되는 함수입니다. 콜백 함수는 특정 이벤트가 발생했을 때나, 특정 작업이 완료되었을 때 실행되도록 설계됩니다. 이를 통해 프로그램의 유연성과 모듈성을 높일 수 있습니다.

콜백 함수의 일반적인 사용 사례는 다음과 같습니다:

비동기 프로그래밍: 자바스크립트와 같은 비동기 환경에서 주로 사용됩니다. 예를 들어, 서버에서 데이터를 받아오는 동안 코드의 나머지 부분이 실행될 수 있도록 합니다.

function fetchData(callback) {
    setTimeout(function() {
        const data = "some data from server";
        callback(data);
    }, 1000);
}

function processData(data) {
    console.log("Data received: ", data);
}

fetchData(processData);

2. 이벤트 처리: 사용자 인터페이스에서 버튼 클릭, 마우스 이동 등 이벤트가 발생했을 때 실행될 함수를 지정합니다.

document.getElementById("myButton").addEventListener("click", function() {
    alert("Button clicked!");
});

3. 함수의 실행 후 작업 정의: 특정 함수가 실행된 후에 어떤 작업을 해야 할지를 정의할 때 사용됩니다.

def do_something(callback):
    print("Doing something...")
    callback()

def after_done():
    print("Task completed!")

do_something(after_done)

4. 고차 함수: 다른 함수를 인수로 받거나 함수를 반환하는 함수에서 사용됩니다.

def high_order_function(func, value):
    return func(value)

def double(x):
    return x * 2

result = high_order_function(double, 5)
print(result)  # Output: 10

콜백 함수는 비동기 프로그래밍이나 이벤트 처리에 필수적인 도구로, 프로그램의 흐름을 제어하고 유연성을 높이는 데 매우 유용합니다. 이를 통해 복잡한 작업을 더 간단하고 이해하기 쉽게 만들 수 있습니다.

Promise는 자바스크립트에서 비동기 작업을 처리하는 방법 중 하나로, 비동기 작업이 성공했는지 실패했는지를 표현하는 객체입니다. Promise는 세 가지 상태를 가집니다:

대기(Pending): 비동기 작업이 아직 완료되지 않은 상태
이행(Fulfilled): 비동기 작업이 성공적으로 완료된 상태
거부(Rejected): 비동기 작업이 실패한 상태

Promise는 주로 비동기 작업이 완료된 후의 동작을 지정하기 위해 then과 catch 메서드를 사용합니다.

fetch함수는 Promise 객체를 반환합니다.

예제: Promise를 사용한 비동기 작업

다음은 Promise를 사용하여 서버에서 데이터를 가져오는 예제입니다.

// 새로운 Promise 생성
let fetchData = new Promise(function(resolve, reject) {
    setTimeout(function() {
        let data = "서버에서 받은 데이터";
        // 작업이 성공했을 때 resolve 호출
        resolve(data);
        // 작업이 실패했을 때 reject 호출
        // reject("서버 에러");
    }, 1000);
});

// Promise 사용
fetchData
    .then(function(result) {
        // 작업이 성공적으로 완료되었을 때 실행되는 코드
        console.log("성공:", result);
    })
    .catch(function(error) {
        // 작업이 실패했을 때 실행되는 코드
        console.error("실패:", error);
    });

Promise의 장점

가독성 향상: 콜백 헬(callback hell)을 피할 수 있어 코드가 더 읽기 쉽고 관리하기 쉬워집니다.
체이닝: then 메서드를 사용하여 여러 비동기 작업을 순차적으로 처리할 수 있습니다.

콜백 헬 예제

콜백을 중첩해서 사용하면 코드가 지저분해지고 유지보수가 어려워지는 문제가 발생할 수 있습니다. 이를 콜백 헬(callback hell)이라고 합니다.

doSomething(function(result) {
    doSomethingElse(result, function(newResult) {
        doThirdThing(newResult, function(finalResult) {
            console.log('Final result: ' + finalResult);
        }, failureCallback);
    }, failureCallback);
}, failureCallback);

Promise를 사용한 콜백 헬 해결

Promise를 사용하면 콜백 헬을 피할 수 있습니다.

doSomething()
    .then(function(result) {
        return doSomethingElse(result);
    })
    .then(function(newResult) {
        return doThirdThing(newResult);
    })
    .then(function(finalResult) {
        console.log('Final result: ' + finalResult);
    })
    .catch(function(error) {
        console.error(error);
    });

결론

Promise는 비동기 작업을 더 쉽게 관리하고 가독성을 높여주는 자바스크립트의 중요한 기능입니다. 콜백 함수 대신 Promise를 사용하면 코드가 더 깔끔해지고 에러 처리도 간단해집니다. 이를 통해 복잡한 비동기 작업도 체계적으로 처리할 수 있습니다.

콜백함수와 Promise의 관계

콜백 함수와 Promise는 둘 다 자바스크립트에서 비동기 작업을 처리하는 방법입니다. 콜백 함수는 오래된 방식이고, Promise는 콜백 함수의 단점을 보완하고 더 구조화된 방식으로 비동기 작업을 처리할 수 있게 해줍니다. 둘 사이의 관계와 차이점을 이해하면 왜 Promise가 콜백 함수보다 선호되는지 알 수 있습니다.

콜백 함수와 비동기 작업

콜백 함수는 비동기 작업이 완료된 후 실행할 함수를 전달하는 방식입니다. 다음은 콜백 함수를 사용한 예입니다

function fetchData(callback) {
    setTimeout(function() {
        const data = "서버에서 받은 데이터";
        callback(null, data); // 성공 시 콜백 호출
        // callback("에러 발생", null); // 실패 시 콜백 호출
    }, 1000);
}

fetchData(function(error, data) {
    if (error) {
        console.error("실패:", error);
    } else {
        console.log("성공:", data);
    }
});

콜백 지옥 (Callback Hell)

콜백 함수를 중첩하여 여러 비동기 작업을 순차적으로 실행하면 코드가 복잡해지고 가독성이 떨어지는 문제가 발생합니다. 이를 콜백 지옥(callback hell)이라고 합니다.

doFirstTask(function(result1) {
    doSecondTask(result1, function(result2) {
        doThirdTask(result2, function(result3) {
            console.log('결과:', result3);
        });
    });
});

Promise로 비동기 작업 처리

Promise는 콜백 함수의 단점을 보완하고 비동기 작업을 더 구조화된 방식으로 처리할 수 있게 해줍니다. Promise는 then과 catch 메서드를 통해 비동기 작업의 성공과 실패를 처리합니다.

콜백 함수를 사용한 예제를 Promise로 바꾸면 다음과 같습니다:

function fetchData() {
    return new Promise(function(resolve, reject) {
        setTimeout(function() {
            const data = "서버에서 받은 데이터";
            resolve(data); // 성공 시 resolve 호출
            // reject("에러 발생"); // 실패 시 reject 호출
        }, 1000);
    });
}

fetchData()
    .then(function(data) {
        console.log("성공:", data);
    })
    .catch(function(error) {
        console.error("실패:", error);
    });

Promise 체이닝 (Chaining)

Promise는 then 메서드를 사용하여 여러 비동기 작업을 순차적으로 처리할 수 있습니다. 이렇게 하면 콜백 지옥을 피할 수 있습니다.

doFirstTask()
    .then(function(result1) {
        return doSecondTask(result1);
    })
    .then(function(result2) {
        return doThirdTask(result2);
    })
    .then(function(result3) {
        console.log('결과:', result3);
    })
    .catch(function(error) {
        console.error('실패:', error);
    });

콜백 함수와 Promise의 관계

콜백 함수는 기본적으로 비동기 작업을 처리하는 방법입니다. 하지만 중첩될 때 가독성이 떨어지는 단점이 있습니다.
Promise는 콜백 함수의 단점을 보완한 방법으로, 비동기 작업을 더 구조화하고 체계적으로 처리할 수 있게 해줍니다. Promise는 콜백 함수 대신 사용할 수 있는 더 나은 방법을 제공합니다.
콜백 함수는 여전히 Promise 내부에서 사용될 수 있습니다. Promise의 executor 함수(첫 번째 인자로 전달된 함수) 내부에서 비동기 작업이 완료되었을 때 콜백 함수를 호출하는 방식으로 동작합니다.

결론적으로, Promise는 콜백 함수의 단점을 해결하기 위해 등장했으며, 비동기 작업을 더 쉽게 관리하고 체계화할 수 있는 방법을 제공합니다. Promise를 사용하면 콜백 지옥을 피하고 코드의 가독성과 유지보수성을 높일 수 있습니다.

promise 객체를 다루는 또 다른 방법 async/await

async와 await 키워드는 Promise 객체를 더욱 간편하게 다룰 수 있도록 도와줍니다.

async 함수는 항상 Promise를 반환하며, await 키워드는 Promise가 이행될 때까지 기다리죠. 이 방법을 사용하면 비동기 코드를 더 동기 코드처럼 작성할수 있어 가독성이 향상됩니다.

개발해해원