반응형
14.1 변수의 생명 주기
14.1.1 지역 변수의 생명 주기
- 변수에도 생명 주기가 있다.
- 없으면 메모리 공간을 계속 점유한다.
- 함수 내부에서 선언된 지역 변수는 함수가 호출되면 생성되고 함수가 종료하면 소멸한다.
- 지역 변수의 생명 주기는 함수의 생명 주기와 일치한다. (스코프 내부에서만 사용 가능)
- 지역 변수가 함수보다 오래 생존하는 경우도 있다.
- 누군가가 해당 메모리 공간을 참조하고 있으면 메모리 공간이 해제되지 않는다.
- 스코프 또한 다른 곳에서 참조 중이면 소멸하지 않는다.
var x = 'global';
function foo() { // 함수가 실행되며 x가 undifined로 초기화됨
console.log(x); // undifined
var x = 'local';
}
foo();
console.log(x); // grobal
- 호이스팅은 스코프 단위로 동작한다.
14.1.2 전역 변수의 생명 주기
- 진입점 없이 코드가 실행되자마자 해석된다.
- 반환문이 따로 없으므로 마지막 문이 실행되어 더 이상 실행될 문이 없다면 종료한다.
- var 로 선언한 전역 변수는 전역 객체의 프로퍼티가 된다.
- 전역 변수의 생명 주기가 전역 객체의 생명 주기와 일치한다.
전역객체
- 코드 실행 이전 단계, 자바스크립트 엔진에 의해 가장 먼저 생성되는 객체
- 브라우저에서는 window, 노드에서는 global
- ES11에서는 globalThis로 통일
- 프로퍼티 = 표준 빌트인 객체 + 호스트 객체 + var 키워드로 선언한 전역 변수와 전역 함수
14.2 전역 변수의 문제점
암묵적 결합
- 전역에서 참조하고 변경이 가능하다.
- 암묵적 결합을 허용하는 것
긴 생명 주기
- 생명 주기가 전역 객체와 동일하기 때문에 메모리 리소스를 오랫동안 소비한다.
스코프 체인 상에서 종점에 존재
- 변수 검색시 가장 마지막에 검색된다.
- 검색 속도가 느리다.
네임스페이스 오염
- 파일이 분리되어 있어도 하나의 전역 스코프를 공유한다.
14.3 전역 변수의 사용을 억제하는 방법
- 변수의 스코프는 좁으면 좁을수록 좋다.
- 무분별한 전역 변수의 사용을 막기 위해서라면?
14.3.1 즉시 실행 함수
- 함수 정의와 동시에 단 한번만 호출되는 점을 이용한다.
- 모든 코드를 즉시 실행 함수로 감싸면 모든 변수는 즉시 실행 함수의 지역 변수가 된다.
- 라이브러리에 많이 사용된다!
14.3.2 네임스페이스 객체
- 전역에 네임스페이스 역할을 담당할 객체를 생성 후 전역 변수처럼 사용하고 싶은 변수를 프로퍼티로 추가한다.
- 네임스페이스 자체가 전역 변수에 할당되어서 유용하게 쓰이진 않는다.
14.3.3 모듈 패턴
- 클래스를 모방해서 관련 있는 변수와 함수를 모아 즉시 실행 함수로 감싸 하나의 모듈로 만드는 것
- 클로저 기반으로 동작
- 전역 변수의 억제와 캡슐화까지 구현 가능하다.
- 캡슐화
- 객체의 상태를 나타내는 프로퍼티와 메서드를 하나로 묶는 것
- 캡슐화
객체지향 프로그래밍 언어는 클래스를 구성하는 멤버에 대해 접근 제한자를 제공한다.
public : 외부에서 접근 가능 private : 외부에서 접근 불가, 내부에서만 사용됨
- 자바스크립트는 접근 제한자를 제공하지 않는다.
- 즉시 실행 함수에 선언한 변수는 private 멤버가 된다.
- 즉시 실행 함수에서 return 되는 객체의 프로퍼티는 public 멤버가 된다.
14.3.4 ES6 모듈
- ES6 모듈은 파일 자체의 독자적인 모듈 스코프를 제공한다.
- script 태그에 type="module" 을 추가하면 파일은 모듈로써 동작한다.
- 권장 확장자는 mjs
<script type="module" src="lib.mjs" />
728x90
반응형
'개발서적 > 모던 자바스크립트 Deep Dive' 카테고리의 다른 글
프로퍼티 어트리뷰트 (모던 자바스크립트 Deep Dive) (0) | 2024.04.16 |
---|---|
let, const 키워드와 블록 레벨 스코프 (모던 자바스크립트 Deep Dive) (0) | 2024.04.16 |
스코프 (모던 자바스크립트 Deep Dive) (0) | 2024.04.16 |
함수 (모던 자바스크립트 Deep Dive) (0) | 2024.04.16 |
원시 값과 객체의 비교 (모던 자바스크립트 Deep Dive) (0) | 2024.04.16 |