[JavaScript] 모던 JS Deep Dive 14장

14.0

전역 변수의 무분별한 사용은 위험하기 때문에 전역 변수를 반드시 사용해야 할 이유가 없다면 지역 변수를 사용하는 걸 추천

14.1 변수의 생명 주기

지역 변수의 생명 주기

• 변수는 선언에 의해 생성되고, 할당을 통해 값을 가지고 언제가 소멸하는 생명주기를 가지고 있음
• 변수에 생명 주기가 없다면, 한번 선언된 변수는 영원히 메모리 공간을 점유하게 됨
• 변수는 자신이 선언된 곳에서 생성되고 소멸함
• 전역 변수의 생명 주기는 애플리케이션의 생명 주기와 같음 (런타임 이전에 JS 엔진에 의해 실행됨)
• 지역 변수의 생명 주기는 함수의 생명 주기와 같음
• 간혹가다 지역 변수가 전역 변수보다 오래 생존할 때도 있음 → 지역 변수는 함수가 생성한 스코프에 등록되는데 스코프를 누군가 참조하고 있으면 소멸하지 않고 생존하게 됨
  

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

전역 변수의 생명 주기

• 전역 코드는 함수와 달리 명시적인 호출 없이 실행되고 더 이상 실행할 문이 없을 때 종료함
• 함수는 함수 몸체의 마지막 문 또는 반환문이 실행되면 종료함

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

14.2 전역 변수의 문제점

• 암묵적 결합 : 모든 코드가 전역 변수를 참조하고 변경할 수 있는 것
  • 변수의 유효 범위가 커짐 → 코드의 가독성 나빠짐 → 의도치 않은 상태 변화 위험성 큼
• 긴 생명 주기 : 전역 변수의 생명 주기는 김
  • 메모리 리소스도 오랜 기간 사용 → 변수 이름이 중복될 가능성 존재 → 중복시 의도치 않은 재할당 발생
• 스코프 체인 상에서 종점에 존재 : 전역 변수는 스코프 체인 종점에 존재하므로 변수 검색시 가장 마지막에 검색됨
  • 전역 변수의 검색 속도가 가장 느림
• 네임스페이스 오염 : 파일이 분리되어 있어도 전역 스코프는 공유
  • 다른 파일 내에 동일한 명을 가진 전역 변수 존재시 문제 발생

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

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

• 변수의 스코프는 좁을수록 좋음!

즉시 실행 함수

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

• 이 방법 사용시 전역 변수를 생성하지 않음
• 라이브러리에 자주 사용됨

네임스페이스 객체

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

var MYAPP = {}; //전역 네임스페이스 객체 
MYAPP.name = 'SEO';
console.log(MYAPP.name);

• 네임스페이스 객체에 또 다른 네임스페이스 객체를 프로퍼티로 추가해서 계층적 구성 가능!
• 식별자 충돌 방지 효과는 있지만, 그다지 유용하진 않음

모듈 패턴

클래스를 모방해서 관련이 있는 변수와 함수를 모아 즉시 실행 함수로 감싸 하나의 모듈을 만든다.

• 모듈 패턴은 JS 강력한 기능인 클로저를 기반으로 동작
• 특징은 전역 변수의 억제는 물론 캡슐화까지 구현 가능
• 모듈 패턴은 전역 네임스페이스의 오염을 막는 기능 및 정보 은닉 구현을 위해 사용

ES6 모듈

파일 자체의 독자적인 모듈 스코프를 제공한다.

• 더는 전역 변수를 사용할 수 없음
• 모듈 내에서 var 키워드로 선언한 변수는 더는 전역 변수가 아니라 window 객체의 프로퍼티도 아님