[JavaScript] - 전역 변수의 문제점과 해결 방법

1. 전역 변수의 문제점

자바스크립트는 몇가지 뛰어난 강점을 갖고 있지만, 사실 프로그래밍 언어의 관점에서 보면 잘 디자인된 언어는 아니다. 언어의 잘못된 디자인으로 인해 발생하는 문제 중 대표적인 예시가 전역 변수에 대한 것이다.

자바스크립트에서는 아래의 [코드 1]과 같이 전역 변수를 선언하고, 함수 내부에서 전역 변수를 이용하거나 그와 이름이 똑같은 지역 변수를 선언할 수 있다.

function Person(fullName, gender, age) {
    this.fullName = fullName;
    this.gender = gender;
    this.age = age;
}

[코드 1] 전역 변수로 인한 문제가 발생하는 코드

[코드 1]의 실행 결과는 2, 5도 아니고, 참조 에러가 나는 것도 아니다. [코드 1]의 실행 결과는 undefined, 5이다. 자바스크립트에서는 함수 내부의 선언이 모두 함수의 시작 부분에서 이루어지기 때문에 [코드 1]은 실제로 [코드 2]와 같이 변경된다.

var num = 2;
 
window.onload = function () {
    var num;
    alert(num);
    num = 5;
    alert(num);
}

[코드 2] 전역 변수로 인한 문제가 발생하는 코드의 실제 실행 코드

자바스크립트에서는 [코드 1]을 [코드 2]와 같이 변경하여 실행하기 때문에 첫 번째 alert() 메소드에서는 변수 num에 값이 할당되지 않았기 때문에 undefined가 출력되고, 두 번째 alert()에서는 5가 출력되는 것이다.

전역 변수와 함수 내부의 지역 변수 간의 문제 이외에도 여러개의 파일을 로드하여 코드를 실행하는 것이 일반적인 자바스크립트에서는 다수의 파일에 같은 이름으로 정의된 전역 변수 및 전역 함수간의 충돌 문제가 발생할 수 있다.

2. 외부 함수를 이용한 해결

매개변수를 이용하는 외부 메소드를 정의함으로써 앞에서 설명한 것과 같이 전역 변수로 인해 발생하는 문제들을 해결할 수 있다. 아래의 [코드 3]은 외부 메소드 wrapper()를 정의하여 전역 변수로 선언해야 했을 변수 x를 함수 내부 범위 (scope)에서만 전역적으로 참조할 수 있게 구현한 것이다.

function wrapper(x) {
    return function(y) {
        return x + y;
    }
}
 
window.onload = function () {
    var myFunc = wrapper(5);
 
    console.log(myFunc(1));
    console.log(myFunc(4));
    console.log(myFunc(-2));
}

[코드 3] 외부 메소드를 이용한 전역 변수 이용

[코드 3]의 실행 결과는 아래의 [그림 1]과 같다.

[그림 1] 외부 메소드를 이용하는 코드의 실행 결과

[코드 3]에서는 매개변수 5가 전달된 wrapper() 메소드를 myFunc에 할당하였다. 그 다음, myFunc에 매개변수로 1, 4, -2를 전달하여 콘솔창에 각각 6, 9, 3을 출력하고 있다. 매개변수로 전달된 1, 4, -2와 출력값인 6, 9, 3을 보면 wrapper() 메소드에 전달된 매개변수 5가 전역적으로 참조되고 있음을 알 수 있다. 이러한 실행이 가능한 것은 자바스크립트의 모든 것은 객체로 간주되기 때문이다.