[JS] (14) 전역 변수의 문제점

변수의 생명주기

변수는 생물과 유사하게 생성되고 소멸되는 생명주기가 있다.
선언된 메모리공간이 소멸되지 않고 영원히 점유(유지)하면 안되기 때문!

변수는 자신이 선언된 위치에서 생성되고 소멸한다!
변수에 따라 조금 다른데,

• 전역변수: 애플리케이션의 생명 주기와 같다.
• 함수 내부에서 선언된 지역 변수 : 함수가 호출되면 생성되고 함수가 종료하면 소멸한다.

fucntion foo() {
	var x = 'local';
    	console.log(x); //x
        return x;
        }
        
foo();
console.log(x); // ReferenceError : x is not defined

var 로 선언한 변수는 함수 호이스팅이 일어나 다른 문들이 실행되기 이전에 실행되어 선언되지만, 엄밀히 말하면 이는 전역변수에 국한된 설명이다. var가 function 스코프를 갖고 있는 것처럼 var에 호이스팅 또한 함수몸체 단위로 구분되어 실행된다.

위 코드의 함수 foo()가 실행되면 foo()함수 내부에 선언된 x는 함수몸체 내에 다른 코드보다 상위로 올라와 선언되며 undefined로 초기화 된다.

그 후 함수가 종료되면 x변수 또한 소멸되어 생명주기가 종료된다.

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

실행이 종료된 함수를 참조할 때

변수의 생명주기는 메모리 공간이 확보된 시점부터 메모리 공간이 해제되어 가용 메모리 풀에 반환되는 시점까지이다.

함수가 호출되고 나면 내부 변수는 소멸되느냐? 아니다. 변수의 생존 여부는 함수의 호출에 따라결정되는 것이 아닌, 등록된 스코프의 소멸 유무가 결정한다. 할당된 메모리 공간을 그 어느 것도 참조하지 않을 때 GC(가비지 콜렉터)에 의 해제되어 가용 메모리 풀에 반환된다.

스코프를 참조한다는 것이 무슨 의미인가?
(이를 완벽히 이해하려면 렉시컬환경, 클로저 등을 이해해야한다... 차차 다루도록하겠다.)

var x = 'global';

function foo() {
	console.log(x); 
    	var x = 'local'; 
        }
        
foo(); // 1번 ?
console.log(x); // 2번 ?

정답) 👇

1번의 정답은 undefined, 2번의 정답은 global이다.

1번 이유는 foo() 함수가 실행된 이후 코드블럭 내에서는 변수 x(이때 x는 지역변수)에 대한 호이스팅이 일어나 undefined값을 할당하여 빈 메모리 공간을 부여해주기 때문!
2번은 foo() 함수 종료 이후 x의 생명주기가 종료되어 해당 스코프에 정의된 전역변수 global을 반환한다.

전역변수의 생명주기

전역 변수는 지역변수처럼 함수의 시작이라던지, 끝이 존재하지 않는다.
하지만, 이렇게 자유로워 보이는 전역변수는 사실 자바스크립트 엔진에 의해 어떤 객체보다 먼저 생성되는 특수한 객체에 속한 프로퍼티이다. 이 객체를 전역 객체라 하는데 브라우저 환경에서는 window, 서버에 global 객체를 의미한다.

전역 변수는 마찬가지로 자신의 스코프 (전역객체)의 생명주기와 동일한 생명주기를 갖고있는데, 이 말은 즉슨 window 웹페이지를 닫거나 전체 javaScript코드의 실행을 중지하기 전까지는 유효하다라는 뜻이다.