전역변수 쓰지 말라 쓰지 말라 계속 들어왔는데,
이번 포스팅에서는 대체 왜 쓰지말아야하는지에 대해 자세히 말해보겠다.
자바스크립트에서 변수 선언은 코드가 한 줄씩 순차적으로 실행되는 시점인 런타임에 실행되는 것이 아닌
런타임 이전 단계에서 실행된다라고 배웠다.
하지만 이건 전역 변수에만 해당하는 얘기이다.
특정 함수 내부에 선언된 변수라면 함수가 호출된 이후에야 함수 몸체 코드가 한 줄 씩 읽히기 전에
변수가 선언된다.
지역 변수의 생명주기
즉, 전역변수와는 달리 지역 변수는 생명주기가 함수의 생명 주기와 일치한다.
함수 몸체 내부에서 선언된 지역 변수의 생명 주기는 함수의 생명 주기와 대부분 일치하나
지역 변수가 함수보다 더 오래 생존하는 경우도 존재한다.
함수 내부엣 선언된 지역 변수는 함수가 생성한 스코프에 등록된다.
함수가 생성한 스코프는 렉시컬 환경이라고 부르는 물리적인 실체가 있다고 저번 시간 포스팅에서 다뤘다.
따라서 변수는 자신이 등록된 스코프가 소멸될 때까지 유효하다.
일반적으로 함수가 종료하면 함수가 생성한 스코프도 소멸하지만,
하지만 어딘가에서 스코프를 참조하고 있다면 스코프는 해제되지 않고 유지된다.
이거 관련해서 후에 클로저 개념을 다루는 포스팅도 작성할 예정이다.
전역 변수의 문제점
전역 변수는 어디서든 참조하고 할당할 수 있다.
따라서 모든 코드가 전역 변수를 참조하고 변경할 수 있는 암묵적 결합을 허용한다는 말과 같다.
게다가 전역변수는 생명주기가 길다.
메모리 리소스도 오랫동안 차지하고 있다는 말이다.
또 var 키워드는 변수의 중복 선언을 허용하기 때문에 이름이 만약 중복된다면 의도치않게 전역변수가 변경될 가능성이 있다.
또 스코프 체인 상에서 종점에 존재한다.
이것은 결국 변수를 검색할 때 전역변수가 가장 마지막에 검색됨을 의미한다.
전역 변수의 검색 속도가 가장 느릴 수 밖에 없다.
더 심각한 것은, 파일이 분리되어 있다고 해도 하나의 전역 스코프를 공유한다는 것이다.
따라서 만약 내가 다른 파일에 동일한 이름으로 전역변수를 만들어 사용한다면?
생각만해도 끔찍하다.... 으악...
전역 변수 사용 억제하기
위에서 계속해서 말했듯 변수의 스코프는 좁을 수록 좋다.
이제 전역 변수 사용을 어떻게하면 억제할 수 있는지에 대한 방법을 소개해보겠다.
즉시 실행 함수
(function () {
var foo = 10;
})
함수 정의와 동시에 호출되는 즉시 실행 함수는 단 한번만 호출된다.
모든 코드를 즉시 실행 함수로 감싸면 모든 변수는 즉시 실행 함수의 지역 변수가 된다.
이러한 방법을 사용하면 전역 변수를 생성하지 않아 라이브러리에 많이 사용된다.
모듈 패턴
모듈은 클래스를 모방하여 관련이 있는 변수와 함수를 모아 즉시 실행 함수로 감싸 하나의 모듈을 만든다.
이 패턴은 클로저를 기반으로 동작하는데, 캡슐화까지 구현가능하다는 특징을 가지고 있다.
ES6 모듈
ES6 모듈을 쓰면 전역변수를 사용할 수 없다.
ES6 모듈은 파일 자체의 독자적인 모듈 스코프를 제공한다.
script 태그에 type="module" 어트리뷰트를 추가하면 로드된 자바스크립트 파일은 모듈로서 동작한다.
책에서는 모듈의 파일 확장자로 mjs를 권장하고 있다.
'Archive > Develop' 카테고리의 다른 글
구조적 서브타이핑 / 잉여 속성 체크 (0) | 2022.09.21 |
---|---|
[ 모던 자바스크립트 스터디 ] let, const 키워드와 블록 레벨 스코프 (0) | 2022.09.20 |
[ Flask Migrate ] Multiple head revisions are present for given argument 'head' (0) | 2022.09.20 |
[ JavaScript ] Map & Reduce 요약 정리 (0) | 2022.09.19 |
[ TypeORM ]Active Record vs Data Mapper (0) | 2022.09.19 |