모던 JS 딥다이브 공부용 글입니다.

14장 전역 변수의 문제점(p200)

전역 변수의 무분별한 사용은 위험하다.
전역 변수를 반드시 사용해야 할 이유가 없다면 지역변수를 사용해야 한다.

14.1_ 변수의 생명 주기

14.1.1_ 지역 변수의 생명 주기

• 변수는 생성되고 소멸하는 생명 주기(life cycle)이 있다.
• 변수에 생명 주기가 없다면 한 번 선언된 변수는 프로그램을 종료하지 않는 한 영원히 메모리 공간을 점유한다.

• 변수의 생명 주기 : 메모리 공간 확보 ~ 메모리 공간 해제 후 가용 메모리 풀에 반환되는 시점까지
  • 전역 변수의 생명 주기 === 어플리케이션의 생명 주기
  • 함수 내부의 지역 변수 === 함수호출~함수종료

• 즉 변수는 자신이 등록된 스코프가 소멸될 때까지 유효한데, 스코프는 누군가가 자신을 참조하고 있으면 메모리에 확보된 채로 남아 있는다.(24장 클로저에서 상세)

  호이스팅: 호이스팅은 변수 선언이 스코프의 선두로 끌어 올려진 것처럼 동작하는 JS고유의 특징

  14.1.2_ 전역 변수의 생명 주기

• 함수와 달리 전역코드는 전역코드를 실행하는 특별한 진입점이 없고 코드가 로드되자마자 곧바로 해석되고 실행된다.

• var 키워드 변수는 전역 객체의 프로퍼티가 된다. 이는 전역 객체와 생명주기가 일치함을 의미.
  (전역 객체는 코드 실행 전 JS 엔진에 의해 최우선으로 생성되는 특수 객체)

• 브라우저 환경에서 전역 객체는 window. var 키워드는 window 객체의 프로퍼티

  14.2 전역 변수의 문제점

• 암묵적 결합
  모든 코드가 전역 변수를 참조하고 변경 가능한 암묵적 결합을 허용
  변수의 유효 범위가 크면 클수록 코드의 가독성이 나빠지고 의도치 않게 상태가 변경될 위험도 증가

• 긴 생명 주기
  전역 변수는 생명 주기가 길다.

  • 메모리 리소스 오랜 기간 소비
  • 의도치 않은 변수 재할당

• 스코프 체인 상 종점에 존재
  전역 변수가 가장 마지막에 검색되므로 전역 변수의 검색 속도가 가장 느리다.

• 네임스페이스 오염
  파일이 분리되어도 하나의 전역 스코프를 공유.

  14.3_ 전역 변수의 사용 억제하기

• 전역 변수를 사용할 이유가 없다면 지역 변수를 사용해라( 변수의 스코프는 좁을수록 좋다.)

  14.3.1_ 즉시 실행 함수

• 모든 코드를 즉시 실행 함수로 감싸면 변수는 즉시 실행 함수의 지역 변수가 된다.

(function(){
  var foo = 10; // 즉시 실행 함수의 지역 변수
  // ...
}());

• 이 방법은 라이브러리 등에 주로 사용됨

14.3.2_ 네임스페이스 객체

• 전역에 네임스페이스 역할을 담당할 객체 생성
• 변수를 프로퍼티로 추가
• 그닥 사용 안함

14.3.3_ 모듈패턴

모듈패턴

• 모듈 패턴은 클로저를 기반으로 동작
• 모듈 패턴은 전역 변수의 억제와 캡슐화까지 구현 가능
• 모듈 패턴은 24장 클로저에서 상세

캡슐화

• 캡슐화는 객체의 상태를 나타내는 프로퍼티와 메서드를 하나로 묶는 것.

• 캡슐화는 객체의 특정 프로퍼티나 메서드를 감출 목적으로 사용하기도(정보 은닉)

• 다른 언어들은 클래스에서 public, private, protected 등의 접근 제한자를 사용해 공개 범위 한정 가능

• Public은 외부 접근 가능

• private는 외부 접근 불가. 내부에서만 사용됨.

• JS는 제공 X but 모듈패턴으로 제한적 구현 가능

var Counter = (function(){
  //private 변수
  var num = 0;

  // 외부로 공개할 데이터나 메서드를 프로퍼티로 추가한 객체를 반환
  return {
    increase(){
      return ++num;
    },
    decrease(){
      return --num;
    }
  }
}());

console.log(Counter.num) // undefined
console.log(Counter.increase()) // 1
console.log(Counter.increase()) // 2
console.log(Counter.decrease()) // 1
console.log(Counter.decrease()) // 0

14.3.4_ ES6 모듈

• ES6 모듈을 사용하면 더는 전역 변수 사용이 불가.
• ES6 모듈은 파일 자체의 독자적 모듈 스코프 제공
• 모듈 내에서 var 키워드는 더는 전역 변수도 window의 프로퍼티도 아님

• 사용법
  script 태그에 type="module" 추가. 확장자 mjs
• 구형 브라우저 지원 X 걍 Webpack 등의 모듈 번들러 사용이 일반적