[모던자바스크립트 딥다이브] 14장 전역 변수의 문제점

변수의 생명 주기

• 변수는 생명 주기를 가진다.
• ife cycle
• 선언에 의해 생성되고 할당을 통해 값을 가지고 언젠가 소멸하는 일련의 과정
• 메모리 공간이 확보된 시점부터 메모리 공간이 해제되어 가용 메모리 풀에 반환되는 시점까지

1. 지역 변수의 생명 주기

• 함수의 생명 주기와 일치한다.
  • 지역 변수가 하수보다 오래 생존하는 경우 - 지역 변수가 속한 스코프를 누군가가 계속 참조하고 있을 때
    • 함수 내부에서 선언된 변수는 함수가 생성한 스코프(랙시컬환경)에 등록된다.
    • 해당 스코프가 소멸 될때까지 지역 변수는 유효하다.
    • 누군가 스코프를 참조하고 있다면 해당 스코프는 계속 생존하게 되고 지역 변수는 소멸되지 않는다.

2. 전역 변수의 생명 주기

• 어플리케이션의 생명주기와 동일
• var 키워드로 선언한 변수는 전역 객체의 프로퍼티가 된다.
  • 노드 환경 전역 객체 (global object), 브라우저 환경 전역 객체(window object)

전역 변수의 문제점

1. 암묵적 결합 : 모든 코드가 전역 변수를 참조하고 변경할 수 있는 암묵적 결합을 허용한다.
2. 긴 생명 주기 : 생명 주기가 길기 때문에 메모리 리소스도 오래 기간 동안 소비한다.
3. 스코프 체인 상에서 종점에 존재 : 변수를 검색할 때 전역 변수를 가장 마지막에 검색하므로 느리다.
4. 네임스페이스 오염 : 파일이 분리 되어 있다고 해도 하나의 전역 스코프를 공유 하므로, 다른 파일 내에서 동일이름으로 명명할 경우 예상치 못한 결과 초래

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

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

1. 즉시 실행 함수

• 즉시 실행 함수 : 함수의 정의와 동시에 실행 되는 함수. 단 한번만 호출된다.

(
    function () {
        var foo = 10;
        //로직들...
    }
)

이러한 형태로 즉시 실행 함수로 함수를 감싸거나 변수를 감싸게 되면, 즉시 실행 함수 내부의 지역 스코프로 변수가 선언된다.

2. 네임스페이스 객체

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

var nameSpace = {};
nameSpace.first = '첫번째 변수'
// 코드실행 줄줄줄
nameSpace.second = '두번째 변수'
console.log(nameSpace.first, nameSpace.second)

// first, second 변수를 따로 선언하지 않고 사용 가능하다.
// 다만, 네임스페이스 역할을 하는 객체 자체가 전역에 할당된다.

3. 모듈 패턴

모듈패턴

• 관련 있는 변수와 함수를 모아 즉시 실행 함수로 감싸 하나의 모듈화
• 클로저를 기반으로 동작
• 전역 변수의 억제 및 캡슐화(객체의 상태를 나타내는 프로퍼티와, 프로퍼티를 참조・조작하는 메서드를 하나로 묶는 것)
• 자바 스크립트는 접근 제한자 ( public, private, protected.. ) 를 제공하지 않음. 따라서, 정보 은닉을 위해 모듈 패턴을 사용하기도 한다.

var calculater = (function(){
    var num = 10 // 접근 제한 변수로 동작
    return {
        sum() {
            return num+1
        },
        sub() {
            return num-1
        },
        multi() {
            return num*1
        }
    }
}())

console.log(calculater.num) // 노출 안됨
console.log(calculater.sum()) // 노출

4. ES6 모듈

ES6 모듈 사용 시, 전역변수를 사용하지 못하고 모듈 내의 독자적인 스코프를 사용한다.