• Blog
  • Projects
  • Resume
profile_image

모던 자바스크립트 Deep Dive - 14장 전역 변수의 문제점

StudyJavaScript

2024.01.21

14.1 변수의 생명 주기

  • 함수 내부에서 선언된 지역 변수는 함수가 호출되면 생성되고 함수 종료 시 소멸
    • 즉, 지역 변수는 함수의 생명 주기와 일치
  • (var 키워드로 선언한) 전역 변수의 생명 주기는 전역 객체의 생명 주기와 일치
    • 전역 객체
      • 코드가 실행되기 이전 단계에 자바스크립트 엔진에 의해 어떤 객체보다도 먼저 생성되는 특수 객체
      • 표준 빌트인 객체 (Object, String, Number, Function, Array 등..)와
        환경에 따른 호스트 객체 (클라이언트 Web API, Node.js의 호스트 API),
        var 키워드로 선언한 전역 변수와 전역 함수를 프로퍼티로 가짐
    • 각 환경의 전역 객체

      ES11에서 globalThis로 통일

      • 브라우저 환경: window 객체
      • 서버 사이드 환경: global 객체
  • [참고 이미지] 01


14.2 전역 변수의 문제점

  • 암묵적 결합 (모든 코드가 전역 변수를 참조하고 변경 가능)
  • 긴 생명 주기
  • 스코프 체인상 종점에 존재
    • 전역 변수 검색 시 가장 마지막에 검색됨 (계속 거슬러 올라가야 하니까..)
    • 전역 변수의 검색 속도는 가장 느림
  • 네임스페이스 오염
    • 동일한 이름으로 명명된 전역 변수나 전역 함수가 같은 스코프에 존재한다면 예상치 못한 결과를 초래함


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

  • 전역 변수를 반드시 사용해야 할 이유를 찾지 못한다면 지역 변수를 사용해야 함
  • 변수의 스코프는 좁을수록 좋음
  • 즉시 실행 함수 활용
    • 모든 코드를 즉시 실행 함수로 감싸면 모든 변수는 즉시 실행 함수의 지역 변수가 됨
  • 네임스페이스 객체
    var MYAPP = {};
    
    • 전역에 네임스페이스 역할을 담당할 객체 생성 후, 전역 변수처럼 사용하고 싶은 프로퍼티를 추가하는 방법
    • 네임스페이스를 분리해서 식별자 충돌을 방지할 수 있으나
      네임스페이스 객체가 전역 변수에 할당되므로 유용해 보이지 않음
  • 모듈 패턴
    • 클래스를 모방해서 관련이 있는 변수, 함수를 모아 즉시 실행 함수로 감싸 하나로 만듬
    • 클로저 기반으로 동작하며, 전역 변수를 억제하고 캡슐화 구현 가능
    • 캡슐화
      • 객체의 상태를 나타내는 프로퍼티와 프로퍼티를 참조하고 조작할 수 있는 동작인 메서드를 하나로 묶는 것
      • 객체의 특정 프로퍼티나 메서드를 감출 목적으로 사용하기도 하는데 이를 "정보 은닉"이라 함
  • ES6 모듈
    • ES6 모듈은 파일 자체에 독자적인 모듈 스코프를 제공하므로 ES6 모듈에서는 전역 변수를 사용할 수 없음!