14.1 변수의 생명 주기
14.1.1 지역 변수의 생명 주기
- 지역 변수의 생명 주기는 함수의 생명 주기와 일치한다.
14.1.2 전역 변수의 생명 주기
- 함수와 달리 전역 코드는 명시적 호출 없이 실행. 하지만 반환 문을 사용할 수 없으므로 마지막 문이 실행되어 더 이상 실행할 문이 없을 때 종료.
- var 키워드로 선언한 전역 변수는 전역 객체의 프로퍼티가 됨/ 전역 변수의 생명주기가 전역 객체의 생명 주기와 일치.
14.2 전역 변수의 문제점
암묵적 결합
- 전역 변수의 선언 의도는 코드 어디서든 참조하고 할당할 수 있는 변수를 사용하겠다는 것 (암묵적 결합 허용).
긴 생명 주기
- 전역 변수는 생명 주기가 길고 지역 변수는 그보다 훨씬 짧다. 이는 지역변수는 상태 변경에 의한 오류가 발생할 확률이 낮다. 또한 메모리 리소스도 짧은 기간만 소비.
스코프 체인 상에서 종점에 존재
- 전역 변수는 스코프 체인상에서 종점에 존재하므로 검색 속도가 가장 느림.
네임스페이스 오염
- 자바스크립트의 큰 문제점 중 하나는 파일이 분리되어 있어도 하나의 전역 스코프를 공유함. 따라서 다른 파일 내에 동일한 이름으로 명명된 전역 변수, 전역 함수가 같은 스코프 내에 존재할 경우 예상치 못한 결과 발생.
14.3 전역 변수의 사용을 억제하는 방법
14.3.1 즉시 실행 함수
- 모든 코드를 즉시 실행 함수로 감싸면 모든 변수는 즉시 실행 함수의 지역 변수가 됨.
14.3.2 네임스페이스 객체
- 전역에 네임스페이스 역할을 담당할 객체 생성하고 전역 변수처럼 사용하고 싶은 변수를 프로퍼티로 추가.
- 네임스페이스를 계층적으로 구성할 수도 있음. 하지만 전역 변수로 할당되므로 그렇게 유용하진 않음.
14.3.3 모듈 패턴
- 모듈패턴은 클로저를 기반으로 클래스를 모방하여 관련 변수, 함수를 모아 즉시 실행 함수로 감싸 하나의 모듈을 만듦.
- 클로저 기능을 통해 전역 변수를 억제 가능
- 반환되는 객체의 프로퍼티는 외부에 노출되는 퍼블릭 멤버
- 객체에 추가하지 않으면 외부에서 접근할 수 없는 프라이빗 멤버
14.3.4 ES6 모듈
- 파일 자체의 독자적 모듈 스코프를 제공하기 때문에 ES6 모듈을 사용하면 더는 전역 변수 사용 불가.
- 모던 브라우저에서는 ES6 모듈 사용 가능. script 태그에 type="module"어트리뷰트를 추가하면 로드된 파일은 모듈로 동작. 파일 확장자는 mjs를 권장한다.
- 구형 브라우저에서는 동작하지 않음. 아직까지는 Webpack 등 모듈 번들러를 사용하는 것이 일반적이다.
* 위 내용은 모던 자바스크립트 Deep Dive를 참고하여 개인적인 공부를 목적으로 정리하였습니다.
모던 자바스크립트 Deep Dive - 교보문고
자바스크립트의 기본 개념과 동작 원리 | 웹페이지의 단순한 보조 기능을 처리하기 위한 제한적인 용도로 태어난 자바스크립트는 과도하다고 느껴질 만큼 친절한 프로그래밍 언어입니다. 이러
www.kyobobook.co.kr
'Front-End > Javascript' 카테고리의 다른 글
| [JavaScript] 16장 프로퍼티 어트리뷰트 (0) | 2022.03.31 |
|---|---|
| [JavaScript] 15장 let, const 키워드와 블록 레벨 스코프 (0) | 2022.03.31 |
| [JavaScript] 13장 스코프 (0) | 2022.03.28 |
| [JavaScript] 12장 함수 (0) | 2022.03.28 |
| [JavaScript] 11장 원시 값과 객체의 비교 (0) | 2022.03.18 |