전역 변수의 무분별한 사용은 여러 문제점이 있기때문에 위험하다.
변수의 생명주기
지역 변수의 생명주기
- 변수의 생명주기 : 변수가 생성되고 소멸되는 주기
// 14-1
// 지역 변수의 생명주기
// 없다면 ..?
// 한 번 선언된 변수는 프로그램이 종료되지 않는 한 영원히 메모리 공간을 점유하게 된다.
// 전역 변수의 생명주기 === 애플리케이션의 생명주기
function foo() {
var x = "local";
console.log(x);
return x;
}
foo();
// local
console.log(x);
// Uncaught ReferenceError: x is not defined- 일반적 : 함수가 종료되면 함수가 생성한 스코프도 소멸
// 14-2
// 지역 변수의 생명주기
// 누군가 스코프를 참조하고 있으면 스코프는 소멸하지 않고 생존
var x = "global";
// 전역 변수의 생명주기 === 애플리케이션의 생명주기
function foo() {
console.log(x); // undefined
var x = "local";
}
foo();
console.log(x);
// global전역 변수의 생명 주기
- 전역 코드는 명시적 호출 없이 실행
- 특별한 진입접이 없음
- 따라서 코드가 로드되자마자 곧바로 해석되고 실행
- var키워드로 선언한 전역 변수 → 전역 객체의 프로퍼티가 됨
전역 객체가 뭐죠 .. ?
- 코드가 실행되기 이전 단계에 자바스크립트 엔진에 의해 먼저 생성되는 특수한 객체
- 전역 객체를 가리키는 식별자 : ES11 - globalThis
- var키워드로 선언한 전역 변수 생명주기 === 전역 객체의 생명주기
전역 변수의 문제점
암묵적 결합
- 모든 코드가 전역 변수를 참조하고 변경할 수 있는것.
주의
- 유효 범위가 클수록 가독성이 떨어짐
- 의도치 않게 상태가 변경될 수 있는 위험이 높다.
긴 생명 주기
- 메모리 리소스 오랜시간 소비
- 상태변경 시간 길고, 기회도 많음
// 14-3
// 전역 변수의 문제점
// 2. 긴 생명 주기
var x = 1;
// ...
// 변수의 중복 선언. 기존 변수에 값을 재 할당함
var x = 100;
console.log(x);
// 100스코프 체인상에서 종점에 존재
- 변수를 검색할 때 전역 변수가 가장 마지막에 검색됨
- 즉, 전역 변수의 검색 속도가 가장 느림
네임스페이스 오염
- 파일이 분리 되어 있어도 하나의 전역 스코프를 공유
- 예상치 못하는 결과를 가져 올 수 있음
전역 변수의 사용을 억제하는 방법
즉시 실행 함수
- 단 한 번만 호출 → 전역 변수 사용 제한 가능
// 14-4
// 즉시 실행 함수
(function () {
var foo = 10; // 즉시실행 함수의 지역 변수
// ...
})();
console.log(foo);
// Uncaught ReferenceError: foo is not defined네임스페이스 객체
- 네임스페이스 역할을 담당할 객체를 생성하고 전역 변수처럼 사용하고 싶은 변수를 프로퍼티로 추가하는 방법
// 14-5
// 네임스페이스 객체
var MYAPP = {}; // 전역 네임스페이스 객체
MYAPP.name = "Sim";
console.log(MYAPP.name); // Sim모듈 패턴
- 클래스를 모방해 관련이 있는 변수와 함수를 모아 즉시 실행함수로 감싸 하나의 모듈을 만드는 것
- 클로저 기반 동작
특징
- 전역 변수 억제
- 캡슐화 구현
// 14-7
// 모듈 패턴
// 접근제한자를 제공하지 않음 !!
var Cnt = (function () {
// private 변수
var num = 0;
// 외부로 공개할 데이터나 메서드를 프로퍼티로 추가한 객체를 반환한다
return {
increase() {
return ++num;
},
decrease() {
return --num;
}
};
})();
// private 변수는 외부로 노출되지 않음
console.log(Cnt.num); // undefined
console.log(Cnt.increase());
console.log(Cnt.increase());
console.log(Cnt.decrease());
console.log(Cnt.decrease());
ES6모듈
- 사용시 더는 전역 변수 사용 불가
- 파일 자체의 독자적인 모듈 스코프를 제공
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Static Template</title>
</head>
<body>
<h1>
This is a static template, there is no bundler or bundling involved!
</h1>
<!--
// 14-8
// ES6 모듈 -->
<script type="module" src="lib.mjs"></script>
<script type="module" src="app.mjs"></script>
</body>
</html>- 하지만 아직 까지는 Webpack과 같은 모듈 번들러를 사용하는 것이 일반적이다.
'JavaScript' 카테고리의 다른 글
| [모던 자바스크립트]프로퍼티 어트리뷰트 (0) | 2022.08.17 |
|---|---|
| [모던 자바스크립트] let, const 키워드와 블록 레벨 스코프 (0) | 2022.08.16 |
| [모던 자바스크립트] 스코프 (0) | 2022.07.05 |
| [모던 자바스크립트] 함수 (0) | 2022.07.05 |
| [모던자바스크립트] 원시값과 객체의 비교 (0) | 2022.07.04 |
