지역 변수의 생명 주기

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

아래 코드의 실행 순서를 보자.

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

foo();
console.log(x); // ReferenceError: x is not defined

1. foo함수를 호출하면 x 변수의 선언문이 자바스크립트 엔진에 의해 가장 먼저 실행되어 x 변수가 선언되고 undefined 로 초기화 된다.
2. 함수 내부의 코드들이 순차적으로 실행되고 변수 할당문이 실행되면 x 변수에 값이 할당된다.
3. 함수가 종료하면 x 변수도 소멸되어 생명 주기가 종료된다. 따라서 함수 내부에서 선언된 지역 변수 x는 foo 함수가 호출되어 실행되는 동안에만 유효하다.

즉, 지역 변수의 생명 주기는 함수의 생명 주기와 일치한다.

클로저

지역 변수의 생명 주기가 함수의 생명 주기보다 오래 생존하는 경우도 있다.

변수는 자신이 등록된 스코프가 소멸(메모리 해제)될 때까지 유효하다. 할당된 메모리 공간은 더 이상 그 누구도 참조하지 않을 때 가비지 콜렉터에 의해 해제되고, 누군가가 참조하고 있으면 해체되지 않고 남아 있게 된다. 이는 스코프도 마찬가지이다. 누군가가 스코프를 참조하고 있다면 스코프는 해제되지 않고 생존하게 된다. 이러한 현상을 클로저라고 한다.

전역 변수의 생명 주기

전역 코드는 함수 호출과 같이 전역 코드를 실행하는 특별한 진입점이 없고 코드가 로드되지마자 곧바로 해석되고 실행된다. 또한 함수가 종료되면 소멸되던 지역 변수와 달리 코드 전체가 실행될 때 소멸된다.

var 키워드로 선언한 전역 변수는 전역 객체의 프로퍼티가 된다. (let, const의 경우 블록 스코프이므로 전역 객체의 프로퍼티가 될수도 있고 아닐 수도 있다.) 이는 전역 변수의 생명 주기가 전역 객체의 생명 주기와 일치한다는 것을 말한다.

브라우저 환경에서 전역 객체는 window이, window는 웹페이지를 닫을 때까지 유효하다. 즉 var 키워드로 선언한 전역 변수의 생명 주기는 전역 객체의 생명 주기와 일치한다.

전역 변수의 문제점

암묵적 결합(implicit coupling)

전역 변수를 선언한 의도는 전역, 즉 코드 어디서든 참조하고 할당할 수 있는 변수를 사용하겠다는 것이다. 이는 모든 코드가 전역 변수를 참조하고 변경할 수 있는 암묵절 결합을 허용하는 것이다. 변수의 유효 범위가 크면 클수록 코드의 가독성은 나빠지고 의도치 않고 상태가 변경될 수 있는 위험성도 높아진다.