14. 전역 변수의 문제점

1. 변수의 생명 주기

  1.1 지역 변수의 생명 주기

  - 변수는 선언에 의해 생성되고 할당을 통해 값을 갖는다. 그리고 소멸된다.

  - 변수에 생명 주기가 없다면 변수는 영원히 메모리공간을 점유하게 된다.

  - 전역변수의 생명 주기는 애플리케이션의 생명 주기와 같다. 하지만 함수 내부에서 선언된 지역 변수는 함수가 종료하면 소멸된다.

  - 지역 변수는 함수가 호출된 직후에 런타임 전에 평가된다.

  - 지역변수의 생성 주기는 함수의 생명 주기와 일치한다.

  - 변수의 생명 주기는 메모리 공간이 확보된 시점부터 메모리 공간이 해제되어 가용 메모리 풀에 반환되는 시점까지이다.

  - 변수는 자신이 등록된 스코프가 소멸될때(메모리 해제) 까지 유효하다.

  - 할당된 메모리 공간은 참조하는 이가 없을떄 해제도어 가용메모리 풀에 반환된다.

  - 즉, 누군가 메모리 공간을 참조하고 있으면 스코프도 소멸하지 않는다.

  - 이를 클로저라고 한다.

 

  1.2  전역 변수의 생명 주기

  - var키워드로 선언한 전역 변수는 전역 객체의 프로퍼티가 된다.

  * 전역 객체

  => 코드가 실행되기 이전단계에 자바스크립트 엔진에 의해 어떤 객체보다도 먼저 생성되는 특수한 객체

  => 브라우저에서는 window, 노드에서는 global객체를 의미한다.

  => ES11에서는 globalThis로 통일되었다.

  => 표준 빌트인 객체와 환경에 따른 호스트 객체, 그리고 var로 선언한 전역변수와 전역 함수를 프로퍼티로 갖는다.

  - 전역객체 window는 브라우저를 닫기 전까지 유효하다, 즉 브라우저에서 var로 선어난 전역변수는 전역객체의 생명주기와 일치한다.

 

2. 전역 변수의 문제점

# 암묵적 결합

- 모든 코드에서 참조할 수 있기떄문에 암묵적 결합을 허용하는 것이다.

- 변수의 유효 범위가 클수록 가독성이 나빠지고 위험도도 높아진다.

 

# 긴 생명 주기

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

- 따라서 변수 이름이 중복될 위험성이 있다.

- 또한 메모리 리소스도 긴 기간동안 소비한다

 

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

- 스코프체인상 종점에 존재하기 떄문에 전역 변수의 검색 속도가 가장 느리다.

 

# 네임스페이스 오염

- 자바스크립트는 파일이 분리되어 있다 해도 하나의 전역 스코프를 공유하기떄문에 동일한 이름의 전역변수나 함수가 있을경우 오류를 일으킬 수 있다.

 

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

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

 

  3.1 즉시 실행 함수

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

 

  3.2 네임스페이스 객체

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

  - 식별자 충돌을 방지할 순 있으나 유용하진 않다

 

  3.3 모듈 패턴

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

  - 클로저를 기반으로 동작한다.

  - 캡슐화는 객체의 상태를 나타내는 프로퍼티와, 프로퍼티를 참조하고 조작할 수 있는 메서드를 하나로 묶는것을 의미한다.

  - 캡슐화는 객체의 프로퍼티나 메서드를 감출 목적으로 사용하기도 하는데 이를 정보 은닉이라 한다.

  - 모듈 패턴은 전역 네임스페이스의 오염을 막고, 한정적이기는 하지만 정보은닉을 구현하기 위해 사용한다.

var Counter = (function(){
	// private 변수
    var num=0;
    
    return{
    	increase(){
        	return ++num;
        },
        decrease(){
        	return --num;
        }
    }
}());

console.log(Counter.num); //undefined;
console.log(Counter.increase()); // 1

 

  3.4 ES6 모듈

  - ES6모듈은 파일 자체의 독자적인 모듈 스코프를 제공하기 떄문에 전역 변수를 사용 할 수 없다.

  - var키워드로 선언한 변수는 전역변수가 아니며 window객체의 프로퍼티도 아니다.

  - <script type="module" src="파일이름.js"> 를 명시하면 모듈로 동작하게 된다.