모던 자바스크립트 Deep Dive - 전역 변수의 문제점

 keyword = [ 호이스팅 , 전역 변수 , 메모리 리소스 , 네임스페이스 , 모듈 패턴 ]

전역 변수의 무분별한 사용은 위험하다.
=> 전역 변수의 생명주기는 애플리케이션의 생명주기와 동일하다.
=> 전역 변수는 메모리 공간을 점유하게 되기 때문에 위험하다.

---

함수 내부에서 선언한 변수는 함수가 호출된 직후에 함수 몸체의 코드가 한 줄씩 순차적으로 실행되기 이전에 자바스크립트 엔진에 의해 먼저 실행된다.

 

결국 호이스팅은 스코프 단위로 동작한다.

---

전역 변수의 문제점

---

[ 암묵적 결합 ]

모든 코드가 전역 변수를 참조하고 변경할 수 있는 암묵적 결합을 허용한다.

• 코드의 가독성이 나빠진다.
• 의도치 않게 상태가 변경될 수 있는 위험이 존재 한다.

 

[ 긴 생명 주기 ]

생명 주기가 길면 메모리 리소스를 오랜 기간 소비한다.

 

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

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

 

[ 네임스페이스 오염 ]

파일이 분리되어 있다 해도 하나의 전역 스코프를 공유한다.
=> 동일한 이름으로 명명된 전역 변수나 전역 함수가 같은 스코프 내에 존재할 수도 있다.

 

---

전역 변수 사용 억제 방법

---

[ 즉시 실행 함수 ]

(function() {
    let foo = 10;
    console.log(foo);
}());

 

[ 네임스페이스 객체 ]

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

let MYAPP = {};

MYAPP.name = 'Kim':

console.log(MYAPP.name);  // 'Kim'

 

네임스페이스를 계층적으로 구성할 수도 있다.

let MYAPP = {};

MYAPP.person = {
    name : 'Kim',
    age : 25
}

console.log(MYAPP.name);  // 'Kim'

 

[ 모듈 패턴 ]

클래스를 모방해서 관련이 있는 변수와 함수를 모아 즉시 실행 함수로 감싼 것
클로저를 기반으로 동작한다.
전역 변수의 억제 뿐만 아니라, 캡슐화 까지 구현한다.

 

캡슐화는 프로퍼티와 메서드를 하나로 묶는 것을 말한다.
캡슐화는 객체의 특정 프로퍼티나 메서드를 감출 목적으로 사용한다. ( = 정보 은닉 )

let Counter = (function(){
    let 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

 

[ ES6 모듈 ]

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

script 태그에 type = "module" 어트리뷰트를 추가하면 로드된 자바스크립트 파일은 모듈로서 동작한다.

<script type = "module" src = "lib.mjs"></script>

 

ES6 모듈은 구형 브라우저에서 동작하지 않는다.