[Javascript]자바스크립트 클로저 완벽 가이드: 이해부터 실전 예제까지

오늘은 자바스크립트에서 중요한 개념 중 하나인 클로저에 대해 알아보겠습니다. 클로저는 자바스크립트의 강력한 기능 중 하나입니다. 이 글에서는 클로저의 기본 개념부터 실전 예제까지 자세히 다룰 예정이니, 끝까지 함께 해주세요!

≣ 목차

• 클로저의 기본 개념 이해하기🧠
• 클로저의 주요 특징과 장점🌟
• 실전 예제로 배우는 클로저 활용법💻
• 클로저 사용 시 주의할 점⚠️

---

01. 클로저의 기본 개념 이해하기🧠

자바스크립트의 스코프와 클로저의 관계

클로저를 이해하려면 먼저 자바스크립트의 스코프(scope) 개념을 알아야 합니다. 스코프는 변수의 유효 범위를 의미하며, 자바스크립트는 함수 스코프와 블록 스코프를 지원합니다.

자바스크립트 스코프에 조금 더 자세히 알고 싶다면 아래 포스팅을 참고해 주세요😁

[Javascript]자바스크립트 스코프 완벽 가이드: 기초부터 고급까지

클로저의 동작 원리

클로저는 함수가 선언될 때의 스코프를 기억하는 기능을 말합니다. 즉, 함수가 실행된 이후에도 클로저는 그 함수가 선언된 환경을 참조할 수 있습니다.

function outerFunction() {
    let outerVariable = 'I am outside!';
    
    function innerFunction() {
        console.log(outerVariable);
    }
    
    return innerFunction;
}

const innerFunc = outerFunction();
innerFunc();  // 'I am outside!' 출력

위 코드에서 innerFunction은 outerVariable을 참조할 수 있습니다. 이것이 클로저의 기본 동작 방식입니다.

---

02. 클로저의 주요 특징과 장점🌟

데이터 은닉 (Data Encapsulation)

클로저를 사용하면 함수 내부의 변수를 외부에서 직접 접근할 수 없도록 할 수 있습니다. 이는 데이터 은닉을 통해 코드의 보안성과 유지보수성을 높여줍니다.

function createCounter() {
    let count = 0;
    
    return function() {
        count++;
        return count;
    }
}

const counter = createCounter();
console.log(counter()); // 1
console.log(counter()); // 2
console.log(counter()); // 3

모듈화와 코드 재사용성

클로저는 모듈화된 코드를 작성하고 재사용성을 높이는 데 유용합니다. 함수 팩토리나 즉시 실행 함수 표현식(IIFE) 등을 활용하여 모듈 패턴을 구현할 수 있습니다.

데이터 캐싱 (Data Caching)

클로저를 이용해 계산된 값을 저장해 두고, 같은 계산을 반복적으로 하지 않도록 할 수 있습니다. 이를 통해 성능을 최적화할 수 있습니다.

function createCachedFunction() {
    const cache = {};
    
    return function(key, computeFunc) {
        if (!cache[key]) {
            cache[key] = computeFunc();
        }
        return cache[key];
    }
}

const cachedCompute = createCachedFunction();
const result1 = cachedCompute('result', () => {
    console.log('Computing result...');
    return 42;
});
const result2 = cachedCompute('result', () => {
    console.log('Computing result...');
    return 42;
});

console.log(result1); // 42, 'Computing result...' 출력
console.log(result2); // 42, 'Computing result...' 출력되지 않음

반복적인 데이터 캐싱 활용

데이터 캐싱을 클로저로 구현하면 반복적인 연산에서 성능을 크게 향상할 수 있습니다. 특히, 동일한 연산이 반복적으로 수행되는 상황에서 유용합니다.

function createFibonacci() {
    const cache = {};
    
    function fibonacci(n) {
        if (n in cache) {
            return cache[n];
        }
        
        if (n <= 1) {
            return n;
        } else {
            const result = fibonacci(n - 1) + fibonacci(n - 2);
            cache[n] = result;
            return result;
        }
    }
    
    return fibonacci;
}

const fib = createFibonacci();
console.log(fib(10)); // 55
console.log(fib(20)); // 6765

위 예제에서는 피보나치 수열을 계산할 때 클로저를 이용해 이미 계산된 값을 캐싱함으로써 성능을 최적화하고 있습니다.

---

03. 실전 예제로 배우는 클로저 활용법 💻

함수 팩토리 (Function Factory)

함수 팩토리는 클로저를 활용하여 동적으로 함수를 생성하는 기법입니다.

function multiplier(factor) {
    return function(number) {
        return number * factor;
    }
}

const double = multiplier(2);
console.log(double(5)); // 10

콜백 함수 (Callback Function)

콜백 함수에서도 클로저를 자주 사용합니다. 이벤트 핸들러나 비동기 작업에서 유용하게 활용됩니다.

function fetchData(url) {
    fetch(url)
        .then(response => response.json())
        .then(data => {
            console.log(data);
        });
}

이벤트 핸들러 (Event Handler)

이벤트 핸들러에서도 클로저를 사용하여 상태를 유지할 수 있습니다.

function setupEventHandlers() {
    let count = 0;
    
    document.getElementById('myButton').addEventListener('click', function() {
        count++;
        console.log(`Button clicked ${count} times`);
    });
}

---

04. 클로저 사용 시 주의할 점⚠️

1. 메모리 누수

클로저는 함수가 외부 함수의 변수에 접근할 수 있게 해 주기 때문에, 필요 없는 클로저를 사용하면 메모리 누수가 발생할 수 있습니다. 이는 특히 오래 실행되는 애플리케이션에서 문제를 일으킬 수 있습니다.

주의사항:

• 필요 없는 클로저를 생성하지 않도록 주의합니다.
• 클로저가 더 이상 필요하지 않을 때 참조를 해제하여 가비지 컬렉션이 이루어지도록 합니다.

2. 성능 저하

클로저는 함수가 선언될 때마다 새로운 객체를 생성하기 때문에, 많은 클로저를 생성하면 성능이 저하될 수 있습니다.

주의사항:

• 클로저가 정말 필요한 경우에만 사용합니다.
• 반복문 안에서 클로저를 생성하는 경우 주의합니다.

3. 변수의 잘못된 참조

클로저는 외부 함수의 변수를 참조할 수 있지만, 예상치 못한 값이 참조될 수 있습니다. 특히 반복문에서 클로저를 사용할 때 주의해야 합니다.

예시:

for (var i = 0; i < 5; i++) {
    setTimeout(function() {
        console.log(i); // 모든 클로저가 마지막 값인 5를 출력함
    }, 1000);
}

해결책:

• let 키워드를 사용하여 블록 스코프 변수를 생성하거나, 즉시 실행 함수(IIFE)를 사용합니다.

for (let i = 0; i < 5; i++) {
    setTimeout(function() {
        console.log(i); // 각 클로저가 고유한 값을 출력함
    }, 1000);
}

4. 코드 가독성 저하

클로저를 과도하게 사용하면 코드가 복잡해지고 이해하기 어려워질 수 있습니다. 이는 유지보수에 어려움을 줄 수 있습니다.

주의사항:

• 클로저를 사용하는 이유를 명확히 하고, 주석을 통해 설명을 추가합니다.
• 클로저를 적절히 캡슐화하여 사용합니다.

5. 비동기 함수와의 사용

비동기 함수와 클로저를 함께 사용할 때 주의해야 합니다. 클로저가 비동기 함수 내부에서 사용될 때, 의도한 시점에 올바른 값을 참조하는지 확인해야 합니다.

예시:

function fetchData(url) {
    var data = "old data";
    setTimeout(function() {
        console.log(data); // "old data"가 출력됨
    }, 1000);

    // 비동기 작업이 완료된 후 데이터가 변경됨
    data = "new data";
}

fetchData('example.com');

해결책:

• 클로저 내부에서 필요한 데이터를 미리 저장하거나, 비동기 작업이 완료된 후에 클로저를 실행합니다.

function fetchData(url) {
    var data = "old data";
    setTimeout((function(dataCopy) {
        return function() {
            console.log(dataCopy); // "old data"가 출력됨
        };
    })(data), 1000);

    data = "new data";
}

fetchData('example.com');

이와 같은 주의사항을 명심하면 클로저를 더욱 안전하고 효과적으로 사용할 수 있습니다.