스코프와 전역변수의 문제점

스코프(scope)는 식별자의 유효범위다.

스코프가 계층되어 연결되어있는걸 scope chain 이라고 하는데,
JS엔진은 변수를 참조할때 상위스코프로 이동하며 가장 가까운 변수를 검색한다.

 

렉시컬스코프 lexical scope

lexical은 어휘의, 사전의 라는 뜻을 가지는데, 사전(辭典)은 어휘를 정의해놓은 책이다.
함수를 어디에 정의했는지에 따라 스코프를 결정한다. 정적(static) 스코프라고도 한다.
JS는 렉시컬 스코프를 따른다.

함수의 상위스코프는 자신이 정의된 스코프다.
(함수 선언문으로 정의하면 런타임 이전에 함수객체가 먼저 생성된다.)

변수의 생명주기

지역변수는 함수가 생성한 스코프에 등록된다. 지역변수는 이 스코프가 소멸될때까지 유효하다.
따라서 지역변수의 생명주기는 함수의 생명 주기와 같다. (클로저 상황 제외)

let x = 'global';

function test(){
  console.log(x); // Cannot access 'x' before initialization
  let x = 'local';
}
test();

 

전역변수로 선언한 x가 있지만, test함수내의 지역변수 x가 호이스팅되면서 에러가 뜬다.
호이스팅은 스코프 단위로 동작하며, 스코프는 위쪽으로 가장 가까운 변수를 검색한다. 

브라우저 환경에서 전역객체는 window이므로, 전역으로 선언한 x는 window의 프로퍼티다.
전역변수 x는 윈도우를 닫기전까지 유효하다. 즉, 전역 변수의 생명주기는 전역객체의 생명주기와 일치한다.

 

전역 변수의 문제점

1. 생명주기가 길다.
2. 어디서든 변수를 변경할수있다.
3. 스코프 체인상에서 가장 느린 위치에 있다.
4. JS는 파일이 분리되어있어도 하나의 전역스코프를 공유하므로, 중복 명칭, 변수 수정 등으로 인한 예상치 못한 결과를 가져올수있다.

 

해결방법

1. 스코프는 좁을수록 좋다. 지역변수를 쓰자.
2. 즉시실행함수로 전역 변수 사용을 제한한다. 
3. 네임스페이스 객체를 생성하고 전역으로 쓸 변수를 프로퍼티로 만든다. (비추)
4. 모듈 패턴을 쓴다. 정보은닉 구현을 위해 사용한다.
5. ES6 모듈을 쓴다. 이것은 파일 자체의 독자적 모듈 스코프를 제공한다.
6. Webpack 모듈 번들러를 사용한다. (일반적)