3. 클로저(Closures) - 3

클로저를 이용한 비동기 처리 및 콜백 함수

자바스크립트에서 비동기 작업을 처리할 때 클로저를 이용한 콜백 함수는 매우 유용한 패턴 중 하나입니다. 클로저를 사용하면 비동기 작업의 결과를 안전하게 처리하고 외부 변수에 접근할 수 있습니다. 이번 섹션에서는 클로저를 이용한 비동기 처리와 콜백 함수에 대해 알아보겠습니다.

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

비동기 작업은 일반적으로 네트워크 요청, 파일 읽기, 타이머 등의 작업을 포함합니다. 이러한 작업은 시간이 걸리기 때문에 결과를 기다리지 않고 다음 코드를 실행하고, 작업이 완료되면 콜백 함수를 호출하여 결과를 처리합니다.

function fetchData(url, callback) {
    // 비동기 작업을 수행하는 예시 함수
    setTimeout(function() {
        var data = "Data fetched from " + url;
        callback(data); // 클로저를 이용한 콜백 함수 호출
    }, 1000);
}

function handleData(data) {
    console.log("Received data:", data);
}

fetchData("https://example.com/data", handleData);

 

위의 코드에서 fetchData 함수는 비동기적으로 데이터를 가져오는 작업을 수행합니다. 그리고 이 작업이 완료되면 클로저를 이용하여 전달된 콜백 함수인 handleData를 호출하여 데이터를 처리합니다.

2. 클로저를 통한 외부 변수 접근

콜백 함수 내에서 클로저를 사용하면 외부 변수에 안전하게 접근할 수 있습니다. 이는 비동기 작업이 완료된 후에도 외부 변수에 접근할 수 있도록 보장합니다.

function fetchData(url, callback) {
    var startTime = Date.now(); // 외부 변수

    setTimeout(function() {
        var data = "Data fetched from " + url;
        var endTime = Date.now(); // 외부 변수

        callback(data, endTime - startTime); // 클로저를 이용한 콜백 함수 호출
    }, 1000);
}

function handleData(data, elapsedTime) {
    console.log("Received data:", data);
    console.log("Elapsed time:", elapsedTime, "ms");
}

fetchData("https://example.com/data", handleData);

 

위의 예시에서는 fetchData 함수 내부에서 startTime과 endTime이라는 외부 변수에 접근하여 작업 수행 시간을 측정하고, 이를 콜백 함수 handleData에 전달합니다.

3. 에러 처리와 콜백 함수

클로저를 이용한 콜백 함수는 에러 처리에도 유용하게 사용될 수 있습니다. 비동기 작업에서 발생하는 에러는 콜백 함수를 통해 적절히 처리할 수 있습니다.

function fetchData(url, callback) {
    setTimeout(function() {
        var error = null;
        var data = null;

        try {
            // 데이터를 가져오는 작업
            if (/* 작업이 실패한 경우 */) {
                throw new Error("Failed to fetch data");
            }
            data = "Data fetched from " + url;
        } catch (e) {
            error = e;
        }

        callback(error, data); // 클로저를 이용한 콜백 함수 호출
    }, 1000);
}

function handleData(error, data) {
    if (error) {
        console.error("Error:", error.message);
    } else {
        console.log("Received data:", data);
    }
}

fetchData("https://example.com/data", handleData);

 

위의 예시에서는 fetchData 함수 내부에서 작업 중 발생한 에러를 적절히 처리하여 콜백 함수에 전달합니다. 이를 통해 비동기 작업에서 발생하는 에러를 안전하게 처리할 수 있습니다.

4. 결론

클로저를 이용한 비동기 처리와 콜백 함수는 자바스크립트에서 매우 일반적으로 사용되는 패턴 중 하나입니다. 클로저를 이용하면 외부 변수에 안전하게 접근하여 비동기 작업의 결과를 처리할 수 있으며, 에러 처리에도 유용하게 활용될 수 있습니다. 이러한 패턴을 적절히 활용하여 자바스크립트 애플리케이션을 보다 효율적으로 개발할 수 있습니다.