14장 전역 변수의 문제점.md

14. 전역 변수의 문제점

14.1

변수의 생명 주기 (life cycle)

변수

• 선언에 의해 생성
• 할당을 통해 값을 갖고
• 생명 주기가 끝나면 소멸 → 메모리에서 해제

변수 호이스팅

✏️  코드가 실행되기 전 자바스크립트 엔진에 의해 변수 선언문이 먼저 실행 → 전역 변수에만 적용

• 지역 변수 - 함수가 호출된 직후

  → 함수의 코드가 실행되기 전 자바스크립트 엔진이 함수 내부에서 선언한 변수를 선언

  → undefined로 초기화

  → 할당문이 실행될 때 값이 할당

  var x = 'global';
  
  function foo() {
  	console.log(x);
  	var x = 'local';
  }
  
  foo();  // undefined
  console.log(x); // global

📌  호이스팅: 스코프를 단위로 동작!

• 지역 변수의 호이스팅: 지역 변수의 선언이 지역 스코프의 선두로 끌어올려진 것처럼 동작

전역 변수의 생명 주기

전역 객체 (global object)

• 클라이언트 사이드 환경(브라우저) - Window
• 서버 사이드 환경(node.js) - global 객체

var 키워드로 선언한 전역 변수

• → 전역 객체의 프로퍼티가 됨
• 생명주기 = 전역 객체의 생명 주기

14.2

전역 변수의 문제점

1. 암묵적 결합(implicit coupling)
   • 모든 코드가 전역 변수를 참조하고 변경 가능
   • → 코드의 가독성이 나빠지고 의도치 않게 상태가 변경될 수 있음
2. 긴 생명 주기
   • 메모리 리소스를 오래 소비
   • 의도치 않은 재할당이 될 확률
3. 스코프 체인 상에서 종점에 존재
   • 전역 변수의 검색 속도가 가장 느리다
4. 네임스페이스 오염
   • js에서는 파일이 분리되어도 하나의 전역 스코프를 공유

14.3

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

1. 즉시 실행 함수

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

console.log(foo); //ReferenceError

2. 네임스페이스 객체

var MYAPP = {};

MYAPP.name = 'Lee';
console.log(MYAPP.name); // Lee

• 하지만 네임스페이스 객체 자체가 전역 변수에 할당됨

3. 모듈 패턴

• 전역 변수의 억제, 캡슐화 구현 가능
• 정보 은닉 가능

객체지향 프로그래밍 언어: prviate, public, protected 같은 키워드를 사용하지만 js에는 존재하지 않음

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

console.log(Counter.num); // 외부에서 접근 불가
console.log(Counter.increase()); // 1

4. ES6 모듈

• 파일 자체의 독자적인 모듈 스코프 제공

  → 모듈 내에서 var 키워드로 선언한 변수: 전역 변수가 아니고 window 객체의 프로퍼티도 아님

  (하지만 아직까지는 ES6 모듈 기능보다는 Webpack 등의 모듈 번들러를 사용하는 것이 일반적)