javascript 에서 전역 변수 오염 방지 방법 | ChatGPT

ChatGPT 질문한 이유
즉시 실행 함수 표현을 사용하는 이유 중 하나가 전역 변수 오염 방지 때문이라고 한다. 전역 변수 오염 방지가 무엇인지, 그리고 다른 방법은 무엇인지 알아보자.

---

전역 변수 오염

전역 변수 오염은 자바스크립트에서 주의해야 할 중요한 문제입니다.

자바스크립트에서 변수를 선언할 때, 특별한 조치를 취하지 않으면 해당 변수는 전역 범위(Global Scope)에 위치하게 됩니다. 즉, 어느 곳에서든 접근 가능하고, 동일한 이름의 다른 변수가 있을 때 덮어쓰기가 발생할 수 있습니다. 이렇게 되면 코드 유지보수가 어려워지고, 특히 대규모 애플리케이션에서는 버그 발생 가능성이 높아집니다.

---

전역 변수 오염 방지 방법

여러 가지 방법으로 전역 변수 오염을 방지할 수 있으며, 그 중 몇 가지를 소개하겠습니다.

---

1. 즉시 실행 함수 표현(IIFE) 사용

IIFE는 즉시 실행되는 함수를 정의하여 지역 변수를 만들고, 전역 변수의 오염을 방지하는 효과적인 방법입니다.

함수 내에서 선언된 변수들은 전역 범위에 노출되지 않고, 오직 함수 내부에서만 유효합니다.

함수가 실행되자마자 지역 변수가 정의되고, 함수 종료와 함께 메모리에서 사라집니다.

예시

(function() {
    var localVar = "I am local"; // 지역 변수
    console.log(localVar);        // "I am local" 출력
})();

// localVar는 전역에 존재하지 않음
console.log(localVar); // 오류 발생

 

---

2. ES6 모듈 사용

ES6 모듈은 각 모듈이 자체 스코프를 가지므로 전역 변수를 오염시키지 않습니다.

모듈 내에서 변수를 정의하면 그 변수는 모듈 외부에 노출되지 않습니다.

예시

// myModule.js
const myVar = "I am private"; // 모듈 내 지역 변수
export function showVar() {
    console.log(myVar);
}

// main.js
import { showVar } from './myModule.js';
showVar(); // "I am private" 출력
console.log(myVar); // 오류 발생: myVar는 정의되지 않음

---

3. 객체를 사용하여 변수 그룹화

변수들을 객체에 묶어서 관리하면 전역 변수의 수를 줄일 수 있습니다.

이렇게 하면 전역 스코프에 변수가 직접 노출되지 않도록 할 수 있습니다.

예시

const MyApp = {
    myVar: "I am scoped within MyApp",
    showVar: function() {
        console.log(this.myVar);
    }
};

MyApp.showVar(); // "I am scoped within MyApp" 출력
console.log(myVar); // 오류 발생: myVar는 전역에 존재하지 않음

---

4. 클로저 사용

클로저를 사용하여 함수를 만들고, 외부에서 접근할 수 없는 변수를 정의하면 전역 변수 오염을 방지할 수 있습니다.

예시

function createCounter() {
    let count = 0; // 지역 변수

    return {
        increment: function() {
            count++;
            console.log(count);
        },
        decrement: function() {
            count--;
            console.log(count);
        }
    };
}

const counter = createCounter();
counter.increment(); // 1
counter.increment(); // 2
counter.decrement(); // 1
// console.log(count); // 오류 발생: count는 외부에서 접근 불가

---

5. 네임스페이스 패턴 사용

네임스페이스 패턴은 관련 변수를 객체로 그룹화하여 전역 네임스페이스의 오염을 줄이는 방법입니다.

예시

var MyNamespace = MyNamespace || {};

MyNamespace.moduleA = (function() {
    var privateVar = "I am private"; // 모듈 A의 지역 변수

    return {
        showVar: function() {
            console.log(privateVar);
        }
    };
})();

MyNamespace.moduleA.showVar(); // "I am private" 출력

---

결론

전역 변수 오염을 방지하는 방법은 다양합니다.

위에서 설명한 방법들을 적절히 활용하면 자바스크립트 코드의 유지보수성과 안정성을 높일 수 있습니다.

특히, IIFE와 ES6 모듈을 활용하는 것이 요즘의 표준적인 접근법으로 자리 잡고 있습니다.

출처 | ChatGPT