자바스크립트(JavaScript) 콜백 함수 정의, 사용법, 실전 예제

자바스크립트(JavaScript) 콜백 함수 정의, 사용법, 실전 예제

자바스크립트(JavaScript)에서 콜백 함수는 비동기 작업을 처리하거나, 특정 이벤트 후에 실행되는 함수로, 강력한 기능을 제공합니다. 이 글에서는 콜백 함수의 정의와 사용법, 그리고 실전 예제를 통해 콜백 함수를 효과적으로 사용하는 방법을 알아보겠습니다.

 

 

목차

1. 콜백 함수란?
2. 기본 사용법
3. 비동기 작업과 콜백 함수
4. 실전 예제
5. 콜백 함수의 문제점과 대안
6. 결론

 

1. 콜백 함수란?

콜백 함수는 다른 함수의 인수로 전달되어, 특정 작업이 완료된 후 호출되는 함수입니다. 자바스크립트는 함수도 객체로 취급되기 때문에, 함수를 다른 함수에 인수로 전달할 수 있습니다. 이를 통해 비동기 작업, 이벤트 핸들링, 반복 작업 등을 효과적으로 처리할 수 있습니다.

 

 

2. 기본 사용법

콜백 함수를 사용하는 기본적인 방법은 간단합니다. 예제를 통해 살펴보겠습니다:

// 콜백 함수를 인수로 받는 함수 정의
function greet(name, callback) {
    console.log("Hello " + name);
    callback();
}

// 콜백 함수 정의
function sayGoodbye() {
    console.log("Goodbye!");
}

// 함수 호출 시 콜백 함수 전달
greet("Alice", sayGoodbye);
            

위 예제에서는 greet 함수가 콜백 함수 sayGoodbye를 인수로 받아서, 인사 후 작별 인사를 합니다.

 

 

3. 비동기 작업과 콜백 함수

자바스크립트는 주로 비동기 작업을 처리할 때 콜백 함수를 사용합니다. 예를 들어, 서버로부터 데이터를 가져오는 작업을 비동기로 처리할 수 있습니다:

function fetchData(callback) {
    setTimeout(function() {
        console.log("Data fetched");
        callback();
    }, 2000);
}

function processData() {
    console.log("Processing data");
}

fetchData(processData);
            

위 예제에서는 fetchData 함수가 2초 후 데이터를 가져온 뒤, 콜백 함수 processData를 호출합니다.

 

 

4. 실전 예제

콜백 함수를 사용하여 다양한 실전 예제를 살펴보겠습니다. 이벤트 핸들링, 배열의 반복 작업 등에서 유용하게 사용됩니다:

이벤트 핸들링

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

배열의 반복 작업

let numbers = [1, 2, 3, 4, 5];
numbers.forEach(function(number) {
    console.log(number);
});
            

 

 

 

 

5. 콜백 함수의 문제점과 대안

콜백 함수는 강력하지만, 콜백 지옥(callback hell)이라 불리는 가독성 문제를 야기할 수 있습니다. 이를 해결하기 위한 대안으로 프로미스(Promise)와 async/await가 있습니다:

프로미스(Promise)

function fetchData() {
    return new Promise(function(resolve, reject) {
        setTimeout(function() {
            console.log("Data fetched");
            resolve();
        }, 2000);
    });
}

fetchData().then(function() {
    console.log("Processing data");
});
            

async/await

async function fetchDataAndProcess() {
    await fetchData();
    console.log("Processing data");
}

fetchDataAndProcess();
            

 

 

6. 결론

자바스크립트(JavaScript)의 콜백 함수는 비동기 작업 처리와 이벤트 핸들링에 유용한 도구입니다. 콜백 함수의 기본 개념과 사용법을 이해하고, 실전 예제를 통해 적용해보면 더욱 효과적으로 활용할 수 있습니다. 또한, 콜백 지옥을 피하기 위해 프로미스와 async/await와 같은 대안을 고려하는 것도 중요합니다.