[모던 JS Deep Dive] 14장 - 전역 변수의 문제점

14.1 변수의 생명 주기

  - 지역 변수의 생명 주기

    - 변수는 자신이 선언된 위치에서 생성되고 소멸됨

    - 함수 내부에서 선언된 지역 변수는 함수가 호출되면 생성되고 함수가 종료되면 소멸함

    - 변수 선언은 JS 엔진에 의해 런타임 이전 단계인 평가 과정에서 먼저 실행됨 (전역 변수 한정)

    - 함수 내부에서 선언한 변수는 함수 호출된 직후에 JS 엔진에 의해

      함수 몸체 실행 과정 이전인 평가 과정에서 먼저 실행됨

    - 지역 변수의 생명 주기는 함수의 생명주기와 일치

      - 지역 변수가 함수보다 오래 생존하는 경우도 있음

      - 변수의 생명 주기는 메모리 공간이 allocate 된 시점부터 메모리 공간이 release 되어

        가용 메모리 풀에 반환되는 시점까지임

      - 변수는 자신이 등록된 스코프가 소멸(메모리 해제)될 때까지 유효함

      - 누군가 스코프를 참조하고 있으면 스코프는 소멸하지 않고 생존하게 됨 (변수도 마찬가지)

    - 호이스팅은 스코프 단위로 동작함 (호이스팅: 스코프 선두로 끌어 올려진 것처럼 동작)

  - 전역 변수의 생명 주기

    - 애플리케이션의 생명 주기와 같음

    - 전역 코드는 함수 호출과 같이 전역 코드를 실행하는 특별한 진입점이 없고

      코드가 로드되자마자 곧바로 해석되고 실행됨

    - 전역 코드에는 반환문을 사용할 수 없으므로 더 이상 실행할 문 없을때 종료

    - var 키워드로 선언한 전역 변수는 전역 객체의 프로퍼티가 됨 

    - 전역 변수의 생명 주기가 전역 객체의 생명 주기와 일치

    - 전역 객체 식별자: 브라우저(window), Node.js(global) => ES11 globalThis 통일

    - 전역 객체는 표준 빌트인 객체, 환경에 따른 호스트 객체(Client Web API/Node Host API),

      var 키워드로 선언한 전역 변수와 전역 함수를 프로퍼티로 가짐

    - 전역 객체 window는 웹페이지 닫기 전까지 유효

    - var 키워드로 선언한 전역 변수의 생명 주기는 전역 객체의 생명 주기와 일치

14.2 전역 변수의 문제점

  - 암묵적 결합

    - 모든 코드가 전역 변수를 참조하고 변경할 수 있는 implicit coupling (암묵적 결합) 허용

    - 변수의 유효 범위가 크면 클수록 코드의 가독성은 나빠지고 의도치 않은 상태 변경 위험 높음

  - 긴 생명 주기

    - 전역 변수는 생명 주기가 길다 (메모리 리소스도 오랜 기간 소비함)

    - 지역 변수는 전역 변수보다 상태 변경에 의한 오류 발생 확률 작음 (메모리 리소스 짧은 기간만 소비)

  - 스코프 체인 상에서 종점에 존재

    - 변수 검색 시 전역 변수가 가장 마지막에 검색됨

    - 전역 변수의 검색 속도가 가장 느림 (스코프 체인 상에서 종점에 존재)

  - 네임스페이스 오염

    - 파일이 분리되어 있다 해도 하나의 전역 스코프 공유

14.3 전역 변수의 사용을 억제하는 방법

  - 즉시 실행 함수

    - 함수 정의와 동시에 호출됨 (단 한 번만 호출)

    - 모든 코드를 즉시 실행 함수로 감싸면 모든 변수는 즉시 실행 함수의 지역 변수가 됨

  - 네임스페이스 객체

    - 전역에 네임스페이스 역할 담당할 객체 생성하고 전역 변수처럼 사용하고 싶은 변수를 프로퍼티로 추가

    - 네임스페이스 객체에 또 다른 네임스페이스 객체를 프로퍼티로 추가해서 계층적으로 구성도 가능

  - 모듈 패턴

    - 클래스를 모방해 관련 있는 변수와 함수 모아 즉시 실행 함수로 감싸 하나의 모듈로 구성

    - 클로저 기반으로 동작 -> 전역 변수 억제

    - 전역 변수 억제, 캡슐화 효과

    - 전역 네임스페이스의 오염 막기, 정보 은닉 구현 위해 사용

    - 캡슐화: 객체의 state를 나타내는 프로퍼티와 프로퍼티를 참조하고 조작하는 behavior인 메서드를 하나로 묶음

      - 캡슐화는 객체의 특정 프로퍼티나 메서드를 감출 목적으로 사용하기도 함 (information hiding)

    - JS는 access modifier (접근 제한자) 기능 제공 X (TS는 제공)

  - ES6 모듈

    - 파일 자체의 독자적인 모듈 스코프 제공

    - script 태그에 type="module" 속성 (attribute)를 추가하면 로드된 js 파일은 모듈로서 동작함

    - 모듈의 파일 확장자는 mjs를 권장

    - Webpack의 모듈 번들러 사용하는 것이 일반적임