▶ JavaScript Async

JavaScript Callbacks

JavaScript Callbacks: 개념과 사용법

*JavaScript에서 콜백 함수(Callback Function)**는 다른 함수에 인자로 전달되는 함수입니다. 콜백 함수는 특정 작업이 완료된 후에 나중에 실행되도록 설계된 함수로, 비동기 처리와 이벤트 기반 프로그래밍에서 매우 중요한 역할을 합니다. 콜백을 사용하면 코드가 순차적으로 실행되면서도 비동기 작업을 수행할 수 있습니다.

이 가이드는 JavaScript에서 콜백 함수의 개념과 실용적인 사용법을 설명합니다.

1. 콜백 함수의 기본 개념

*콜백 함수(Callback)**는 함수의 인자로 전달되어, 지정된 작업이 완료된 후에 실행되는 함수입니다. 이는 JavaScript의 비동기 처리를 가능하게 하며, 코드 실행 순서를 제어할 수 있습니다.

1.1. 콜백 함수 기본 예시

function sayHello(name) {
    console.log(`Hello, ${name}`);
}

function greetUser(callback) {
    const name = 'Alice';
    callback(name);  // 콜백 함수 호출
}

greetUser(sayHello);  // Hello, Alice

sayHello 함수는 greetUser 함수의 콜백으로 전달됩니다.
*greetUser*는 **sayHello*를 호출하여 이름을 출력합니다.

1.2. 주요 특징

콜백 함수는 다른 함수에 인자로 전달되어 나중에 호출됩니다.
콜백은 비동기 작업이나 이벤트 처리에서 주로 사용됩니다.

2. 동기적 콜백

콜백 함수는 동기적으로 실행될 수도 있습니다. 이 경우, 콜백 함수는 즉시 실행되며, 함수 호출이 완료된 후에 다음 코드가 실행됩니다.

2.1. 동기적 콜백 예시

function calculate(a, b, callback) {
    const result = a + b;
    callback(result);
}

function displayResult(result) {
    console.log(`The result is: ${result}`);
}

calculate(5, 3, displayResult);  // The result is: 8

calculate() 함수는 두 숫자의 합을 구하고, 콜백 함수인 **displayResult()*를 호출하여 결과를 출력합니다.
이 경우 콜백 함수는 동기적으로 호출되며, 즉시 실행됩니다.

3. 비동기적 콜백

비동기적 콜백은 비동기 작업이 완료된 후에 나중에 실행됩니다. 주로 타이머, 이벤트 리스너, HTTP 요청과 같은 비동기 작업에서 사용됩니다.

3.1. 비동기적 콜백 예시

function fetchData(callback) {
    setTimeout(() => {
        const data = 'Sample Data';
        callback(data);  // 비동기 작업 완료 후 콜백 함수 호출
    }, 2000);  // 2초 후에 실행
}

function displayData(data) {
    console.log(`Fetched data: ${data}`);
}

fetchData(displayData);  // Fetched data: Sample Data (2초 후 출력)

fetchData() 함수는 비동기 작업인 **setTimeout()*을 사용하여 2초 후에 콜백 함수를 호출합니다.
콜백 함수는 비동기 작업이 완료된 후에 나중에 실행됩니다.

4. 콜백 함수와 이벤트 처리

이벤트 기반 프로그래밍에서 콜백 함수는 특정 이벤트가 발생했을 때 호출됩니다. 예를 들어, 클릭 이벤트나 입력 이벤트가 발생하면 등록된 콜백 함수가 실행됩니다.

4.1. 이벤트 리스너에서의 콜백 예시

const button = document.getElementById('myButton');

// 클릭 이벤트가 발생할 때 호출되는 콜백 함수
button.addEventListener('click', function() {
    console.log('Button was clicked!');
});

*addEventListener()*는 클릭 이벤트가 발생했을 때 실행할 콜백 함수를 등록합니다.
이벤트 발생 시 콜백 함수가 호출됩니다.

5. 콜백 함수의 중첩 문제 (Callback Hell)

비동기 작업을 처리할 때 콜백 함수가 중첩되면 코드가 복잡해지고 읽기 어려워지는 문제가 발생합니다. 이를 **콜백 헬(Callback Hell)**이라고 합니다. 콜백 헬은 여러 비동기 작업을 순차적으로 처리할 때 발생할 수 있습니다.

5.1. 콜백 헬 예시

setTimeout(() => {
    console.log('Task 1 complete');

    setTimeout(() => {
        console.log('Task 2 complete');

        setTimeout(() => {
            console.log('Task 3 complete');
        }, 1000);
    }, 1000);
}, 1000);

위 코드는 3개의 비동기 작업이 중첩된 형태로, 코드가 복잡해지고 유지보수하기 어려운 형태로 변합니다.
이를 해결하기 위해 **프라미스(Promise)**나 async/await 패턴을 사용할 수 있습니다.

6. 콜백 함수 대신 `Promise`와 `async/await`

콜백 헬 문제를 해결하기 위해 **프라미스(Promise)**와 async/await 패턴을 사용할 수 있습니다. 프라미스는 비동기 작업을 처리하는 더 가독성 좋은 방법이며, **async/await**는 비동기 코드를 동기식 코드처럼 작성할 수 있게 해줍니다.

6.1. 프라미스를 사용한 비동기 처리

function fetchData() {
    return new Promise((resolve) => {
        setTimeout(() => {
            resolve('Sample Data');
        }, 2000);
    });
}

fetchData().then((data) => {
    console.log(`Fetched data: ${data}`);
});

*Promise*는 비동기 작업이 완료되면 **resolve()*가 호출되고, **then()*을 통해 콜백 함수가 실행됩니다.

6.2. `async/await`를 사용한 비동기 처리

async function fetchData() {
    return new Promise((resolve) => {
        setTimeout(() => {
            resolve('Sample Data');
        }, 2000);
    });
}

async function displayData() {
    const data = await fetchData();
    console.log(`Fetched data: ${data}`);
}

displayData();

*async/await*는 비동기 코드를 동기식 코드처럼 작성할 수 있게 해줍니다.
*await*는 프라미스가 해결될 때까지 기다리며, 가독성이 높은 코드를 작성할 수 있습니다.

7. 콜백 함수의 장점과 단점

7.1. 장점

비동기 작업을 처리하는 간단한 방법.
이벤트 기반 프로그래밍에서 이벤트 처리에 유용.
비동기 작업을 순차적으로 제어할 수 있음.

7.2. 단점

콜백 헬로 인해 코드가 복잡해질 수 있음.
여러 비동기 작업을 처리할 때 코드 가독성이 떨어질 수 있음.
에러 처리가 복잡해질 수 있음. 이를 해결하기 위해 프라미스나 **async/await*를 사용하는 것이 권장됨.

요약

JavaScript에서 **콜백 함수(Callback Function)**는 비동기 작업이나 이벤트 처리에서 매우 유용하게 사용됩니다. 콜백 함수는 다른 함수에 인자로 전달되어, 특정 작업이 완료된 후에 나중에 실행되는 함수입니다.

콜백 함수는 비동기 작업이나 이벤트 리스너에서 자주 사용되며, 비동기 작업이 완료된 후에 작업을 제어하는 데 유용합니다.
콜백 헬은 비동기 작업이 중첩될 때 발생할 수 있으며, 이를 해결하기 위해 **프라미스(Promise)**나 async/await 패턴을 사용하는 것이 권장됩니다.
콜백 함수는 비동기 작업을 처리하는 중요한 개념으로, 코드 실행 흐름을 효율적으로 관리하는 데 필수적인 기능입니다.

코딩 스쿨 JavaScript