JavaScript에서 전역 변수는 프로그램 전체에서 접근할 수 있는 변수로, 여러 함수와 코드 블록에서 사용할 수 있습니다. 하지만 전역 변수의 무분별한 사용은 위험하기 때문에 전역 변수를 반드시 사용해야 할 이유를 찾지 못한다면 지역 변수를 사용해야 합니다. 이번 장에서는 전역 변수의 문제점과 전역 변수의 사용을 억제할 수 있는 방법에 대해서 살펴보도록 하겠습니다.
1. 변수의 생명주기
- 변수는 선언에 의해 생성되고 할당을 통해 값을 갖으며, 언젠가 소멸합니다. 즉, 변수는 생물과 유사하게 생성되고 소멸되는 생명주기(Life Cycle)가 있습니다. 변수에 생명 주기가 없다면 한번 선언된 변수는 프로그램을 종료하지 않는 한 영원히 메모리 공간을 점유하게 됩니다.
1-1. 지역 변수의 생명주기
function foo(){
var x = "local"; //지역변수 선언 및 값 할당
console.log(x); //local
return x;
//지역 변수 소멸
}
foo(); //함수 호출
console.log(x); //RefferenceError: x is not defined
- 지역 변수 x는 foo 함수가 호출되기 전에는 생성되지 않습니다. foo 함수를 호출하지 않으면 함수 내부의 변수 선언문이 실행되지 않기 때문입니다.
- 함수 내부에서 선언된 지역 변수는 함수가 호출되어 실행되는 동안에만 유효하기 때문에 지역 변수의 생명 주기는 함수의 생명 주기와 일치합니다.
1-2. 전역 변수의 생명주기
- 함수와 달리 전역 코드는 명시적인 호출없이 실행됩니다. 다시 말해 전역 코드는 함수 호출(실행)과 같이 특별한 진입점이 없고 코드가 로드되자마자 곧바로 해석되고 실행됩니다.
- 함수는 함수 몸체의 마지막 문, 또는 반환문(return)이 실행되면 종료하지만 전역 코드는 반환문을 사용할 수 없으므로 마지막 문이 실행되어 더 이상 실행할 문이 없을 때 종료합니다.
var x = "global"; //전역변수 선언 및 값 할당
function foo(){
var x = "local"; //지역변수 선언 및 값 할당
console.log(x); //local
return x;
}
foo();
console.log(x); //global
- var 키워드로 선언한 전역 변수는 전역 객체의 프로퍼티(브라우저 - window, 서버 사이드 환경 - global)가 되며, 이는 전역 변수의 생명 주기가 전역 객체의 생명 주기와 일치한다는 것을 말합니다.
- 브라우저 환경에서 var 키워드로 선언한 전역 변수는 전역 객체 window의 프로퍼티로 웹페이지를 닫을 때까지 유효합니다.
2. 전역 변수의 문제점
- 암묵적 결합 : 전역 변수를 선언한 의도는 코드 어디서든 참조하고 할당할 수 있는 변수를 사용하겠다는 것입니다. 이는 모든 코드가 전역 변수를 참조하고 변경할 수 있는 암묵적 결합을 허용하는 것으로 변수의 유효 범위가 크면 클수록 의도치 않게 상태가 변경될 수 있는 위험성도 높아질 수 있습니다.
- 긴 생명 주기 : 전역 변수는 생명 주기가 길어 메모리 리소스도 오랜 기간 소비합니다. 또한, 전역 변수의 상태를 변경할 수 있는 시간도 길고 변경될 기회도 많아집니다. 더욱이 var키워드는 변수의 중복 선언을 허용하므로 의도치 않은 재할당이 이루어질 수 있습니다.