날것 - 전역 변수의 문제점

전역 변수의 문제점

개요

전역변수는 위험하다
왜 그런지 알아보자

변수의 생명 주기

지역 변수의 생명 주기

함수 호출 시 생성되고 함수가 종료되면 소멸함
함수의 생명주기와 동일하다

function foo() {
	var x = 'local';
	console.log(x);
	return x;
}

foo();
console.log(x) // 레퍼런스 에러

골때리는게 호이스팅인데 얘는 함수가 실행되는 시점에 지역 스코프에 소속된 변수들을 호이스팅 한다고 함

추가로 지역변수가 함수보다 오래 생존하는 경우도 있다고 한다
함수 외부에서 함수 내부에 선언된 지역변수를 참조하고 있다면 아직 GC가 정리할 수 없어서 값이 남아있게 된다.
이는 스코프도 마찬가지고
이를 클로저라고 하는데 24장에서 자세하게 풀어준단다

전역 변수의 생명 주기

var 전역 변수는 전역 객체의 프로퍼티가 되며, 애플리케이션이 종료될 때까지 살아있는다

전역 변수의 문제점

암묵적 결합

모든 코드가 전역 변수를 참조하고 변경할 수 있다는 것 자체가 그냥 레전드 상황임

긴 생명 주기

메모리 리소스를 오래 점유 + 상태 변경 가능성이 길어짐 → 의도치 않은 재할당 위험

var x = 1;

// ...

var x = 100;
console.log(x); // 100

예제만 봐도 레전드 사건이다 ㅋㅋ

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

변수 검색 시 전역까지 가야 함 → 검색 속도 측면에서 가장 느림
모든 스코프를 뒤적거려야하다 보니 이 또한 당연히 문제임

네임스페이스 오염

파일이 분리되어 있어도 결국 하나의 전역 스코프를 공유 → 다른 파일의 변수와 충돌 위험
이는 그나마 ES6 모듈에서 해결되긴 했음

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

변수의 스코프는 좁을수록 좋다.

즉시 실행 함수

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

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

console.log(foo) // 레퍼런스 에러

즉시 실행 함수 어따가쓰지 싶었는데 다음과 같은 이유때문에 라이브러리등에 자주 사용된다고 함

네임스페이스 객체

전역에 객체 하나만 두고 모든 식별자를 그 안에 프로퍼티로 묶는 방법도 있다고 함

var MYAPP = {};

MYAPP.name = 'Jeon';

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

근데 어차피 이것도 전역변수임 ㅋㅋ

모듈 패턴

즉시 실행 함수 + 클로저로 캡슐화 — public/private 구분 가능

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

	}
}());

console.log(Counter.num) // undefined <- Counter가 초기화되며 호이스팅 완료
console.log(Counter.increase) // 1
console.log(Counter.increase) // 2
console.log(Counter.increase) // 3
console.log(Counter.increase) // 4

이거 뭔가 React의 모듈 export 하는것과 비슷해보임 나중에 더 알아보자

ES6 모듈

import/export로 파일 단위 스코프를 가짐 → 전역 오염 자체가 사라짐. 모던 JS의 정답

참고 자료

• 모던 자바스크립트 Deep Dive 14장
• 스코프 — 13장, 전역/지역 스코프 개념이 이어짐
• var let const — var 전역 변수가 전역 객체 프로퍼티가 되는 문제
• 클로저 — 모듈 패턴의 기반