[모던 자바스크립트 Deep Dive] 14장 전역 변수의 문제점

수정·2022년 10월 12일

목록 보기

11/33

#1 변수의 생명주기

변수는 자신이 선언된 위치에서 생성되고 소멸한다. 전역 변수의 생명 주기는 애플리케이션의 생명 주기와 같다. 하지만 함수 내부에서 선언된 지역 변수는 함수가 호출되면 생성되고 함수가 종료하면 소멸한다.

즉, 지역변수의 생명주기는 함수의 생명주기와 일치한다.

var x = 'global';

function foo() {
  console.log(x); // undefined
  var x = 'local';
}

foo();
console.log(x); // global

foo 함수 내부에서 선언된 지역 변수 x는 함수 전체에서만 유효하고 변수 할당문이 실행되기 이전이기에 underfined 값을 같는다. 이처럼 호이스팅은 스코프를 단위로 동작한다.

전역 코드에는 반환문을 사용할 수 없으므로 마지막이 실행되어 더 이상 실행할 문이 없을 때 종료한다.

var 키워드로 선언한 전역 변수는 전역 객체의 프로퍼티가 된다. 즉 var 키워드로 선언한 전역 변수의 생명 주기는 전역 객체의 생명 주기와 일치한다.

암묵적 결합

긴 생명 주기

스코프 체인 상에서 종점에 존재

네임스페이스 오염

전역 변수의 무분별한 사용은 위험하다. 전역 변수를 반드시 사용해야 할 이유를 찾지 못한다면 지역 변수를 사용해야 한다. 변수의 스코프는 좁을수록 좋다.

모든 코드를 즉시 실행 함수로 감싸면 모든 변수는 즉시 실행 함수의 지역 변수가 된다.

전역에 네임스페이스 역할을 담당할 객체를 생성하고 전역 변수처럼 사용하고 싶은 변수를 프로퍼티로 추가하는 방법이다.

var MYAPP = {}; // 전역 네임스페이스 객체

MYAPP.name = 'Lee';

console.log(MYAPP.name); // Lee

모듈 패턴은 클래스를 모방해서 관련이 있는 변수와 함수를 모아 즉시 실행 함수로 감싸 하나의 모듈을 만든다. 모듈 패턴은 자바스크립트의 강력한 기능인 클로저를 기반으로 동작한다. 모듈 패턴의 특징은 전역 변수의 억제는 물론 캡슐화까지 구현할 수 있다는 것이다.

모듈 패턴은 전역 네임스페이스의 오염을 막는 기능은 물론 한정적이기는 하지만 정보 은닉을 구현하기 위해 사용한다.

ES6 모듈은 파일 자체의 독자적인 모듈 스코프를 제공한다. 따라서 모듈 내에서 var 키워드를 선언한 변수는 더는 전역 변수가 아니며 window 객체의 프로퍼티도 아니다.

공부 기록