📌 [모던 자바스크립트 13주 뿌시기] 14. 전역 변수의 문제점

14. 전역 변수의 문제점

변수의 생명 주기

변수는 메모리 공간 내에 생성되고 소멸되는 생명 주기를 가진다.
전역변수의 생명 주기는 애플리케이션의 생명 주기와 같다.
지역 번수(함수 내부에서 선언된)의 생명 주기는 함수가 호출될 때 생성되고 종료될 때 소멸된다.

지역 변수의 생명 주기

함수 내부에서 선언된 지역 변수는 함수가 호출되어 실행되는 동안에만 유효하다.
그러므로 지역변수의 생명주기는 함수의 생명 주기와 일치한다.

function foo() {
    var x = 'local';
    console.log(x);     // local
    return x;
}

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

위에서 x는 함수 내부에서는 출력이 되지만 함수 종료 후 출력은 에러가 발생한다.
변수 x는 foo()함수의 호출과 종료에서만 유효하기 때문이다.

호이스팅

호이스팅은 변수 선언이 스코프의 선두로 끌어 올려진 것처럼 동작하는 자바스크립트 고유의 특징이다.
호이스팅은 스코프 단위로 동작한다.

var x = 'global';

function foo(){
    console.log(x); // undefined
    var x = 'local';
}

foo();
console.log(x); // local

위의 예시에서 foo() 내의 x는 출력할 때 이미 undefined로 초기화 되어 있다. 전역 변수 x가 마치 foo()함수 내의 최상단에서 초기화된 것처럼 동작하는 것이 호이스팅이다.

전역 변수의 생명 주기

전역 코드는 호출 없이 바로 실행되는 코드기 때문에 전역 변수의 생명 주기는 마지막 문이 실행되어 더 이상 실행할 문이 없을 때 종료된다.
var 키워드로 선언한 전역 번수는 전역 변수는 전역 객체의 프로퍼티가 되며, 전역 변수의 생명 주기가 전역 객체의 생명 주기와 일치한다.

전역 객체란?? 전역 객체: 코드가 실행되기 이전 단계에 자바스크립트 엔진에 의해 어떤 객체보다도 먼저 생성되는 특수한 객체이다.
브라우저 환경 -> window 객체
Node.js 환경 -> global 객체
전역 객체의 프로퍼티는 표준 빌트인 객체와 환경에 따른 호스트 객체, var로 선언한 전역 변수와 전역 함수를 가진다.

전역 변수의 문제점

1. 암묵적 결합
   전역 변수를 선언 == 코드를 어디서든 참조/할당할 수 있는 변수를 사용 == 암묵적 결합을 허용하는 것
   변수의 유효범위가 클수록 코드의 가독성 ↓, 상태가 변경될 위험성 ↑

2. 긴 생명 주기
   전역 변수는 생명 주기가 길기 때문에 메모리 리소스를 오랜 기간 소비한다.
   그리고 상태를 변경할 수 있는 시간과 기회가 많다.

3. 스코프 체인 상에서 종점에 존재
   전역 변수는 스코프 체인 상에서 종점에 존재하기 때문에 가장 마지막에 검색된다. 마지막에 검색된다는 뜻은 전역 변수의 검색 속도가 가장 느리다는 것을 의미하고 그 차이가 크진 않지만, 속도의 차이가 분명히 존재한다.

4. 네임스페이스 오염
   자바스크립트는 파일이 분리되어 있다 해도 하나의 전역 스코프를 공유하기 때문에 동일명의 전역 변수나 전역 함수가 존재할 경우 예상치 못한 일이 발생할 수 있다.

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

전역 번수는 최대한 지양하는 것이 바람직하다.

1. 즉시 실행 함수
즉시 실행 함수는 함수 정의와 동시에 한 번만 호출된다.
모든 코드를 즉시 실행 함수로 감싸면 모든 변수는 즉시 실행 함수의 지역 변수가 된다.
때문에 라이브러리를 구현할 때 해당 방법을 많이 사용한다.

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

3. 모듈 패턴
모듈 패턴: 클래스를 모방하여 관련있는 변수와 함수를 모아 즉시 실행 함수로 감싸 하나의 모듈을 만드는 것. 클로저를 기반으로 동작하며 전역 변수의 억제, 캡슐화 등이 구현 가능하다.
캡슐화: 객체 상태를 나타내는 프로퍼티와 프로퍼티를 참조하고 조작할 수 있는 동작인 메서드를 하나로 묶는 것. 특정 프로퍼티나 메서드를 감출 목적으로 사용하기도 함.

4. ES6 모듈
ES6 모듈은 파일 자체의 독자적인 모듈 스코프를 제공한다.
ES6 모듈 내에서 var키워드 변수 > 전역 변수가 아님, window 객체의 프로퍼티도 아님.

출처

위키북스, 『모던 자바스크립트 Deep Dive』, 이웅모