전역 변수
전역 변수의 사용은 위험하다
꼭 필요할 때만 사용
변수의 생명 주기
변수는 선언에 의해 생성되고 할당을 통해 값을 갖는다
선언 - 초기화 - 할당
그리고 언젠가 소멸한다
생성 - 소멸의 생명 주기를 갖는다
변수의 생명 주기는 자신이 선언된 곳의 생명 주기를 따른다
전역 변수로 선언되면 어플리케이션의 생명 주기와 같고
지역 변수는 함수의 생명 주기와 같다
지역변수는 함수가 실행되기 전까지는 생성되지 않는다
변수 선언은 호이스팅이 일어나기 때문에 가장 먼저 실행된다
변수 선언은 런타임 이전 단계에서 자바스크립트 엔진에 의해 실행된다
엄밀히 말하면 위 설명은 전역 변수에 해당한다
함수 내부에서 선언한 변수는 함수 호출 직후에 자바스크립트 엔진에 의해 실행된다
지역 변수는 런타임 이후 함수 호출 단계에서 실행되는 것
대부분 지역 변수의 생명 주기는 자신이 속해있는 함수의 생명 주기와 일치하지만
변수는 자신에 대한 참조가 끝날 때 까지가 생명 주기다
메모리 공간이 확보된 시점부터 해제되어 메모리 풀에 반환될 때 까지가 생명 주기라고 할 수 있다
스코프 또한 누군가가 참조하고 있으면 소멸하지 않고 생존하게 된다 - 클로저
자바스크립트의 가비지 컬렉터는 참조하지 않는 할당된 메모리 공간을 회수하여 반환한다
호이스팅은 스코프 단위로 동작한다
호이스팅은 변수 선언이 스코프의 선두로 끌어올려진 것 처럼 동작하는 자바스크립트의 특징이다
전역 변수의 생명 주기
함수와 달리 전역 코드는 명시적 호출 없이 실행된다
전역 코드는 실행하는 특별한 진입 점이 없고 코드가 로드 되자마자 바로 해석되고 실행된다
함수는 반환문이 실행되면 종료한다
하지만 전역 코드에는 반환문을 사용할 수 없으므로 더이상 실행할 문이 없을 때 종료된다
var 키워드로 선언된 전역 변수는 전역 객체의 프로퍼티가 된다
전역 변수의 생명주기는 전역 객체의 생명주기와 일치한다
전역 객체
전역 객체에는 코드가 실행되기 이전 단계에 자바스크립트 엔진에 의해
가장 먼저 생성되는 특수한 객체다
브라우저에서는 window, node 환경에서는 global 객체를 의미한다
환경에 따라 전역 객체를 가리키는 다양한 식별자가 존재했으나
ES11 부터 globalThis 로 통일되었다
전역 객체는 표준 필트인 객체와 환경에 따른 호스트 객체,
var 키워드로 선언한 전역 변수와 전역 함수를 프로퍼티로 갖는다
전역 변수의 문제점
압묵적 결합
전역 변수는 어디서든 사용하기 위해서 선언하는 것이다
이는 어디서든 참조하고, 변경할 수 있는 암묵적 결합을 허용하는 것이다
변수의 유효 범위가 크면 클수록 가독성은 나빠지고 의도치 않게 상태가 변경될 가능성이 있다
긴 생명주기
전역 변수는 생명주기가 길다
따라서 메모리도 오랜 기간 소비한다
스코프 체인 상에서 종점에 존재
전역 변수는 스코프 상에서 가장 상위인 전역 객체에 할당되는 것이기 때문에
가장 마지막에 검색된다
검색 속도가 가장 느리다
네임스페이스 오염
자바스크립트의 가장 큰 문제점은 파일이 분리되더라도 전역 스코프를 공유한다는 것이다
때문에 다른 파일 내에서 동일한 이름의 전역 변수를 사용하게 된다면 문제를 일으킬 수 있다
전역 변수 사용 억제하기
변수의 스코프는 좁을수록 좋다
꼭 사용해야는 것이 아니라면 전역변수는 사용하지 않는다
즉시 실행 함수
코드를 즉시 실행 함수로 감싸면 지역 변수가 된다
즉시 실행 함수는 전역 변수를 생성하지 않으므로 라이브러리 등에서 자주 사용된다
네임스페이스 객체 - 노쓸모
전역에 네임스페이스 역할을 담당할 객체를 생성 후
전역 변수처럼 사용하고 싶은 변수를 프로퍼티로 추가한다
내임 스페이스 객체 내에 또 다른 네임스페이스 객체를 프로퍼티로 추가하여
계층적으로 구성할 수도 있다
네임스페이스 충돌은 방지할 수 있지만 굳이 쓸모 없다
모듈 패턴
모듈 패턴은 클래스를 모방하여 관련 있는 변수나 함수를 모아 즉시 실행 함수로 감싸는 것이다
모듈 패턴은 클로저를 기반으로 동작한다
모듈 패턴의 장점은 전역 변수를 억제하면서 캡슐화까지 구현할 수 있다는 점이다
캡슐화는 객체의 상태를 나타내는 프로퍼티와 프로퍼티를 참조하고 조작할 수 있는
동작 메소드를 하나로 묶는 것을 말한다
캡슐화는 객체의 특정 프로퍼티나 메소드를 감출 목적으로 사용하기도 하는데
이를 정보 은닉이라고 한다
대부분 객체지향 언어는 클래스를 구성하는 멤버에 대해 접근 제한자를 사용하여
멤버의 공개 범위를 한정할 수 있다
하지만 자바스크립트는 접근 제한자를 제공하지 않는다
let Counter = (function () {
let num = 0; // 클로저를 이용하여 private 한 변수 생성
// 외부로 공개할 데이터나 메소드를 프로퍼티로 추가한 객체를 반환
return {
increase() {
return ++num;
},
decrease() {
return --num;
}
}
}());
console.log(Counter.num); // undefined
console.log(Counter.increase()) // 1
console.log(Counter.decrease()) // 0ES6 모듈
ES6 모듈을 사용하면 전역 변수를 사용할 수 없다
모듈 파일 자체의 독자적인 스코프를 제공하기 때문이다
var 키워드를 사요하더라도 더이상 전역 변수가 아니며 window 객ㅊ페의 프로퍼티도 아니다
모던 브라우저에서는 ES6 모듈을 사용할 수 있다
script 태그에 type="module" 어트리뷰트를 추가하면 추가된 파일들은 모듈로서 동작한다
해당 태그 내 파일의 확장자는 .mjs 로 작성한다
구형 브라우저에서는 동작하지 않을 수 있고 번들링이 필요하기 때문에
대체로 Webpack, Vite 등의 모듈 번들러를 사용한다
