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

Lily·2022년 6월 30일
0

14장 전역 변수의 문제점

  • 전역 변수를 반드시 사용해야 할 이유를 찾지 못한다면 지역 변수를 사용해야 한다.

📌 변수의 생명 주기

  • 변수에 생명 주기가 없다면 한번 선언된 변수는 프로그램을 종료하지 않는 한 영원히 메모리 공간을 점유하게 된다.

지역 변수의 생명 주기

  • 함수가 호촐되면 생성되고 함수가 종료하면 소멸
  • 함수의 생명 주기와 일치
  • 호이스팅은 스코프를 단위로 동작한다.

전역 변수의 생명 주기

  • 애플리케이션의 생명주기와 동일

📌 전역 변수의 문제점

암묵적 결합

  • 암묵적 결합이란 모든 코드가 전역 변수를 참조하고 변경할 수 있다는 것을 의미
  • 변수의 유효 범위가 크면 클수록 코드의 가독성은 나빠지고 의도치 않게 상태가 변경될 수 있는 위험성도 높아진다.

긴 생명 주기

  • 긴 생명 주기에 따라 메모리 리소스도 오랜 기간 소비한다.

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

  • 전역 변수는 스코프 체인 상에서 종점에 존재하여 변수를 검색할 대 전역 변수가 가장 마지막에 검색된다.
  • 즉, 전역 변수의 검색 속도가 가장 느리다. 검색 속도의 차이가 그다지 크지는 않지만 분명히 있다.

네임스페이스 오염

  • 파일이 분리되어 있어도 하나의 전역 스코프를 공유하기에, 다른 파일 내 동일한 이름으로 명명된 변수나 함수는 예상치 못한 결과를 가져올 수 있음

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

  • 변수의 스코프는 좁을수록 좋다.
  • 전역 변수를 절대 사용하지 말라는 의미가 아닌, 무분별한 전역 변수의 남발을 억제해야함

즉시 실행 함수

  • 즉시 실행 함수는 단 한 번만 호출된다. 모든 코드를 즉시 실행 함수로 감싸면 모든 변수는 즉시 실행 함수의 지역 변수가 된다.
(function () {
  var foo = 10; // 즉시 실행 함수의 지역 변수
  // ...
}());

console.log(foo); // ReferenceError: foo is not defined

네임스페이스 객체

  • 네임스페이스 역할을 담당할 객체를 생성하고 전역 변수처럼 사용하고 싶은 변수를 프로퍼티로 추가하는 방법
  • 하지만 식별자 충돌을 방지하는 효과는 있으나 네임스페이스 객체 자체가 전역 변수에 할당되므로 그다지 유용해 보이지는 않는다.
let MYAPP = {};
MYAPP.name = 'Lee';
console.log(MYAPP.name); // Lee

모듈 패턴

  • 모듈 패턴은 클래스를 모방해서 관련이 있는 변수와 함수를 모아 즉시 실행 함수로 감싸 하나의 모듈을 만든다.
  • 모듈 패턴은 자바스크립트의 강력한 기능인 클로저를 기반으로 동작한다.

ES6 모듈

  • ES6 모듈을 사용하면 더는 전역 변수를 사용할 수 없다.
  • ES6 모듈은 파일 자체의 독자적인 모듈 스코프를 제공한다.

0개의 댓글