좋은 코드를 위한 전역 변수의 최소화

전역 변수 맛보기

자바스크립트는 함수를 사용하여 있어, 안티 패턴을 최대한 피하며 개발을 하는 것이 좋다.

 

ex) 지역변수 사용 예

function foo() {

    var x;  // x는 function 안에서 쓸 수 있는 지역 변수
}

반대로 전역 변수는 어떤 함수에도 속하지 않은 상태에서 선언되거나, 함수에 속하더라도 var를 통해 선언되지 않은 채로 사용되는 변수를 가리킨다.

 

ex) 전역 변수 사용 예

var a = 0;
b = 0;

function foo() {

    c = 0;
}

모든 자바스크립트 실행 환경에는 전역 객체(global object)가 존재하는데, 전역 변수를 선언하면 이는 전역객체의 프로퍼티가 된다. 브라우저에서는 전역 객체에 window라는 프로퍼티가 존재하는데 이는전역 객체 자신을 가리킨다.

 

ex) 모두 전역 변수

abc = 0;    // 전역 변수 선언

console.log(abc);   // 0
console.log(window.abc);    // 0
console.log(window["abc"]); // 0

 

전역 객체는 this를 통해서도 접근이 가능하다.

abc = 0;

console.log(this.abc);  // 0

전역 변수의 문제점

전역변수의 문제점은 어플리케이션이나 웹페이지 내 모든 코드 사이에서 공유된다는 점이다.

 

ex) 덮어 쓰기

yyy = 0;

function test() {
    
    yyy = 10;
}

test();

console.log(yyy);   // 10

만약 개발자가 자신이 작성하지 않은 외부 코드를 가져와 삽입했을 때, yyy = 0;은 개발자가 정의한 코드이며 test함수는 외부코드라고 가정한다면 개발자가 test함수를 실행했을 때 전역 변수 yyy가 10이 되는 원치 않는 결과를 초래할 것이다.

 

이러한 문제를 피하기 위해서 전역 변수에 대한 안티패턴과 개선하는 코드를 알아보자.

 

1. var를 통한 변수 선언

 

ex) 암묵적 전역 코드 사용 == 안티패턴

function test() {

    x = 10; // 암묵적 전역
}

test();

console.log(x); // 10
console.log(window.x);  // 10

자바스크립트에는 암묵적 전역(implied globals)이라는 개념이 있기 때문에 선언하지 않고 사용한 변수는 자동으로 전역 객체의 프로퍼티가 되어 명시적으로 선언된 전역 변수처럼 사용될 수 있다.

 

안티 패턴을 피하기 위해서는 언제나 var를 사용하여 변수를 선언하는 것이 좋다.

 

 

 

출처:

kkodu.tistory.com/2

자바스크립트 : 좋은 코드를 위한 전역 변수의 최소화