Java스크립트(콜백함수)

이번 포스팅에서는 콜백함수에 대하여 알아보겠습니다.
콜백 함수는 다른 함수의 인자로 전달되어 특정 이벤트나 비동기 작업이 완료된 후 호출되는 함수입니다. 자바스크립트에서는 비동기 작업을 처리하기 위해 콜백 함수를 많이 사용합니다. 콜백 함수는 비동기 프로그래밍에서 매우 중요한 역할을 하며, 특히 이벤트 리스너나 타이머와 같은 상황에서 널리 사용됩니다.

 

1.콜백 함수의 특징

비동기 작업: 콜백 함수는 비동기 작업(예: API 호출, 파일 읽기)이 완료된 후 실행됩니다.
인자로 전달: 다른 함수의 매개변수로 전달되며, 해당 함수에서 필요할 때 호출됩니다.
함수형 프로그래밍: 콜백 함수를 사용하여 함수형 프로그래밍 패러다임을 따를 수 있습니다.

[콜백 함수 예제]
1.1 기본적인 콜백 함수 사용

function greet(name, callback) {
    console.log(`안녕하세요, ${name}님!`);
    callback(); // 인자로 전달된 콜백 함수 호출
}

function sayGoodbye() {
    console.log("안녕히 가세요!");
}

greet("철수", sayGoodbye);

이 예제에서 greet 함수는 이름과 콜백 함수를 인자로 받습니다. 인사 후에 sayGoodbye 콜백 함수를 호출합니다.

1.2 비동기 작업에서의 콜백 함수

function fetchData(callback) {
    setTimeout(() => {
        const data = { name: "영희", age: 22 };
        callback(data); // 데이터가 준비되면 콜백 호출
    }, 2000); // 2초 후에 실행
}

fetchData((data) => {
    console.log("받은 데이터:", data);
});

이 예제에서 fetchData 함수는 2초 후에 데이터를 생성하고, 주어진 콜백 함수를 호출하여 데이터를 전달합니다. 이 방식은 비동기 요청의 결과를 처리하는 데 유용합니다.

1.3 여러 비동기 작업에서의 콜백 함수

function fetchUserData(callback) {
    setTimeout(() => {
        const userData = { id: 1, username: "user1" };
        callback(userData);
    }, 1000);
}

function fetchOrderData(callback) {
    setTimeout(() => {
        const orderData = { orderId: 101, product: "책" };
        callback(orderData);
    }, 1500);
}

fetchUserData((user) => {
    console.log("사용자 데이터:", user);
    fetchOrderData((order) => {
        console.log("주문 데이터:", order);
    });
});

이 예제에서는 두 개의 비동기 작업이 있습니다. fetchUserData와 fetchOrderData가 각각 사용자 데이터와 주문 데이터를 가져오고, 각 작업이 완료된 후 콜백을 통해 결과를 처리합니다. 그러나 이 방식은 여러 비동기 작업이 중첩되면서 코드가 복잡해지는 "콜백 헬" 문제를 발생시킬 수 있습니다.

1.4. 콜백 헬 해결
콜백 헬 문제를 해결하기 위해 코드의 가독성을 높일 수 있는 방법 중 하나는 함수 분리입니다.

function fetchData(callback) {
    setTimeout(() => {
        const data = { name: "민수", age: 28 };
        callback(data);
    }, 1000);
}

function processData(data, callback) {
    console.log("처리 중:", data);
    callback(data);
}

fetchData((data) => {
    processData(data, (processedData) => {
        console.log("최종 데이터:", processedData);
    });
});

이렇게 함수를 분리하면 각 단계에서 수행하는 작업을 명확히 할 수 있어 가독성이 높아집니다.

 

2.결론

콜백 함수는 자바스크립트의 비동기 프로그래밍에서 매우 중요한 역할을 합니다. 그러나 중첩된 콜백으로 인해 코드가 복잡해질 수 있으므로, 이를 해결하기 위해 Promise나 async/await와 같은 다른 패턴을 사용할 수 있습니다. 콜백 함수를 잘 이해하고 활용하는 것이 비동기 프로그래밍의 기초가 됩니다.