1. 변수의 생명주기
1-1. 지역 변수의 생명주기❓
생명 주기(life cycle)란 생성되고 소멸되는 주기를 말하며,
변수에 생명주기가 없다면 프로그램 종료 전까지 메모리 공간을 점유하게 됨.
하지만, 함수 내에서 선언된 지역 변수의 경우에는 함수가 호출될 때 생성되고, 함수가 종료될 때 소멸된다.
따라서,
'지역 변수'의 생명주기 === '해당 함수'의 생명주기
를 대부분의 지역변수가 따르게 된다.
✨ 추가설명
하지만, 지역변수가 함수보다 더 오래 생존하는 경우가 있다. 변수는 자신이 등록된 스코프가 소멸될 때 까지 유효하지만, 누군가가 해당 스코프를 참조하고 있으면 스코프는 소멸하지 않고 생존하게 된다.
1-2. 전역 변수의 생명주기❓
전역 변수의 생명 주기는 전역 객체의 생명 주기와 일치함.
전역 코드는 함수와 달리 명시적인 호출이 필요하지 않기에, 코드가 로드되자마자 바로 실행된다.
하지만, 전역 코드에는 반환문을 사용할 수 없기에, 마지막 문이 실행되면 코드가 종료된다.
따라서,
'var 키워드 전역변수' === '전역 객체'의 프로퍼티
가 되게 된다.
이는 전역 변수의 생명 주기와 전역 객체의 생명주기가 일치하다는 것을 의미함.
\
2. 전역 변수 문제점❓
- 전역 변수는 모든 코드가 전역 변수를 참조하고 변경할 수 있도록
'암묵적 결합'을 허용함.
이러한 전역변수의 유효 범위가 클수록 원치않은 변수값 또는 상태를 전달하게 되어 에러를 발생시키거나, 코드의 가독성을 저해하는 원인이 되기도 한다.
- '긴 생명주기'로 인해서 변수명의 중복 가능성과 더불어, 메모리 자원을 많이 소모하게 됨.
var 키워드는 변수의 중복선언을 허용하며, 이로 인해 변수의 이름이 중복되어 원치 않은 재할당이 이루어지게 될 수 있다.
- 변수 검색 시 '전역 변수의 검색 속도'가 가장 느리다.
전역 변수는 스코프 체인 상에서 가장 마지막에 검색되는 특징이 있어 코드의 속도 면에서 좋지 않다.
- 네임스페이스의 오염을 야기할 수 있다.
JS는 파일이 분리되어 있어도 하나의 전역 스코프를 공유한다는 문제점이 있어, 각각 다른 파일에서 동일한 이름의 변수가 스코프 내에 존재하게 되면 예상치 못한 문제를 발생시킬 수 있다.
3. 전역변수 사용 억제하기
변수의 스코프는 좁을수록 좋다.
3-1. 즉시 실행 함수
해당 범위의 변수는 즉시 실행 함수의 지역 변수가 됨.
(function () {
var foo = 1; // 즉시 실행 함수's 지역변수
// ...
}())
console.log(foo); // ReferenceError: foo is not defined 발생.
특징
- 함수 정의와 동시에 딱 1번만 호출됨.
- 즉시 실행 함수의 지역 변수가 되며, 1번만 호출됨.
- 라이브러리 등에 자주 사용되는 방법임.
3-2. 네임스페이스 객체
전역에 네임스페이스 역할을 담당할 객체를 생성, 프로퍼티로 추가하는 방법.
var NAMESPACE = {}; // 전역 네임스페이스 객체
NAMESPACE.name = 'Jungyu Park';
console.log(NAMESPACE); // {name: 'Jungyu Park'}3-3. 모듈 패턴
클래스를 모방, 관련있는 변수 및 함수를 모아 즉시 실행 함수로 감싸 하나의 모듈로 만든다.
JS의 가장 강력한 기능인 클로저를 기반으로 동작하며, 전역변수의 억제와 더불어 캡슐화까지 구현이 가능하다는 특징이 있음.
3-4. ES6 모듈
파일 자체의 독자적인 모듈 스코프를 제공함.
모듈 내 var 키워드로 선언한 변수는 더이상 전역변수가 아니게 되며, window 객체의 프로퍼티도 아니게 된다.
<script type="module" src="lib.mjs"></script>IE 등 구형 브라우저에서는 동작하지 않고, 모던 브라우저에서 script 태그에 type="module"을 추가해서 사용 가능함.
하지만, 별도의 트랜스파일링이나 번들링이 필요하기 때문에 Webpack 등의 모듈 번들러를 별도로 사용하는것이 일반적임.
