변수는 생물과 유사하게 생명 주기가 있다.
아래 예시처럼 지역 변수의 생명 주기는 함수의 생명 주기와 일치한다.
function foo() {
// 변수 x 생성
// 변수 x에 값 할당 var x = 'local';
console.log(x); // local
return x;
// 변수 소멸
}
foo();
console.log(x); // ReferenceError: x is not defined
다음 예시처럼 호이스팅은 스코프를 단위로 동작한다.
호이스팅은 변수 선언이 스코프의 선두로 끌어 올려진 것처럼 동작하는 자바스크립트 고유의 특징이다.
var x = 'global';
function foo() {
console.log(x); // ①
var x = 'local';
}
foo();
console.log(x); // global
전역 변수는 어디서든 참조하고 할당할 수 있기 때문에 암묵적 결합을 허용하는 것이며 변수의 유효 범위가 커지면 커질수록 코드의 가독성은 나빠지고 의도치않게 상태가 변경될 수 있는 위험도가 커진다.
메모리 소비도 높으며 var 키워드는 중복 선언을 허용하므로 의도치 않은 재할당이 일어날 수 있다.
전역 변수의 검색속도가 가장 느리다.
다른 파일 내에서 동일한 이름으로 명명되거나 하면 예상치 못한 결과를 가져올 수 있다.
전역변수를 반드시 사용해야할 이유를 찾지 못한다면 지역변수를 써야한다. 변수의 스코프는 좁을수록 좋다.
모든 코드를 즉시 실행함수로 감싸면 모든 변수는 즉시 실행함수의 지역 변수가 된다. 라이브러리에 자주사용
(function () {
var foo = 10; // 즉시 실행 함수의 지역 변수
// ...
}());
console.log(foo); // ReferenceError: foo is not defined
전역에 네임스페이스 역할을 담당할 객체를 생성 후 사용하고 싶은 변수를 프로퍼티로 추가하는 방법.
var MYAPP = {}; // 전역 네임스페이스 객체
MYAPP.name = 'Lee';
console.log(MYAPP.name); // Lee
-------
var MYAPP = {}; // 전역 네임스페이스 객체
MYAPP.person = {
name: 'Lee',
address: 'Seoul'
};
console.log(MYAPP.person.name); // Lee
모듈 패턴은 자바스크립트의 클로저를 기반으로 동작한다. 전역 변수의 억제 및 캡슐화까지 진행가능.
var Counter = (function () {
// private 변수
var num = 0;
// 외부로 공개할 데이터나 메서드를 프로퍼티로 추가한 객체를 반환한다.
return {
increase() {
return ++num;
},
decrease() {
return --num;
}
};
}());
// private 변수는 외부로 노출되지 않는다.
console.log(Counter.num); // undefined
console.log(Counter.increase()); // 1
console.log(Counter.increase()); // 2
console.log(Counter.decrease()); // 1
console.log(Counter.decrease()); // 0
이 모듈은 파일 자체의 독자적인 모듈 스코프를 제공