프로퍼티(Property)와 가비지 컬렉션(Garbage Collection)

프로퍼티(Property)

자바스크립트에서 변수는 기본적으로 객체 프로퍼티(property)와 같습니다.

다시 말해, 자바스크립트 변수는 객체의 프로퍼티라고 볼 수 있습니다.

전역 객체와 전역 변수

자바스크립트 인터프리터가 실행됐을 때 가장 먼저 하는 일은 전역 객체를 생성하는 것입니다. 

전역 객체의 프로퍼티는 전역 변수인데, 전역 자바스크립트 변수를 선언할 경우 실질적으로 전역 객체의 프로퍼티를 정의하는 셈입니다. 

자바스크립트에서 Window 객체는 브라우저 창에 담긴 모든 자바스크립트 코드를 위한 전역 객체의 역할을 합니다. 

이 전역 Window 객체에는 전역 객체를 참조할 때 this 대신 사용할 수 있는 참조(self-referential) window 프로퍼티가 포함되어 있습니다.

Window 객체에는 parseInt와 Math 같은 핵심적인 전역 프로퍼티를 비롯해 navigator와 screen과 같은 전역 클라이언트 측 프로퍼티가 이미 정의되어 있습니다.

전역 객체와 변수를 사용하는 예제는 다음과 같습니다.

javascript

var number1 = "111";
console.log(number1);       // 111, 전역 객체의 프로퍼티에 접근
console.log(this.number1);  // 111, 'this'를 사용해 전역 객체를 참조
console.log(window.number1);// 111, 'window'를 사용해 전역 객체를 참조

지역 변수: 호출 객체

함수 안에서 정의되는 지역 변수도 객체의 프로퍼티에 해당됩니다. 

이 객체를 호출 객체(call object)라 하는데, 함수의 본문이 실행되는 동안 함수 인자와 지역 변수가 이 호출 객체의 프로퍼티로 저장됩니다. 

지역 변수는 전역 변수와 이름이 같을 수 있지만 각기 별도의 객체에 저장되게 됩니다.

지역 변수를 사용하는 예제는 다음과 같습니다.

javascript

x = 5;          // 전역 변수
y = 5;          // 전역 변수
function f(y){      // 인자 'y'는 호출 객체의 프로퍼티로 저장됨
    var x = 15;     // 지역 변수
    console.log("local variable x = "+ x);
    console.log("local variable y = "+ y);
} 
f(15); // 호출
console.log("local global x = "+ x);
console.log("local global y = "+ y);

위 코드를 실행한 결과는 다음과 같습니다.

javascript

// 콘솔 결과
local variable x = 15
local variable y = 15
local global x = 5
local global y = 5

실행 컨텍스트란?

자바스크립트 인터프리터가 함수를 실행하기 시작할 때마다 해당 함수에 대한 새로운 실행 컨텍스트를 생성합니다. 

실행 컨텍스트란 자바스크립트 코드가 실행되는 컨텍스트를 일컫습니다. 

컨텍스트에서 중요한 부분 중 하나는 변수가 정의되는 객체입니다. 

함수에 속하지 않는 자바스크립트 코드는 전역 객체가 변수 정의를 위해 사용하는 실행 컨텍스트에서 실행됩니다. 

모든 자바스크립트 함수는 지역 변수가 정의되는 자체적인 호출 객체와 함께 자체적으로 고유한 실행 컨텍스트에서 실행되게 됩니다.

가비지 컬렉션이란 무엇인가?

자바스크립트에서 변수는 직접적으로 참조 값(문자열, 객체, 배열 등)을 담고 있지 않으며, 해당 값은 다른 어떤 메모리 상의 위치에 저장하게 됩니다.

자바스크립트 프로그램에서 문자열이나 배열, 또는 객체를 생성할 경우 인터프리터에서는 반드시 해당 객체를 저장하기 위한 메모리를 할당해야 하고 최종적으로 메모리는 재사용을 위해 반드시 비워져야 합니다. 

자바와 마찬가지로 자바스크립트도 가비지 컬렉션(garbage collection) 기법에 의존하는데, 자바스크립트 인터프리터는 객체가 언제 다시는 프로그램에서 사용되지 않을 것이고 그 객체에 도달할 수 없는지 알아낼 수 있습니다. 

그러면 그 객체는 더는 필요하지 않다는 사실을 알고 그것이 점유한 메모리도 회수할 수 있습니다.

또한 가비지 컬렉션은 자동적으로 이뤄지고 프로그래머가 확인할 수 없습니다.

자바스크립트 가비지 컬렉션

자바스크립트 가비지 컬렉션 예제는 다음과 같t습니다.

javascript

var user = {name: 'tom'};   // 객체에 대한 메모리를 할당
user = {name: 'jerry'};     // 또 다른 객체를 참조

이 코드를 실행하고 나면 첫 번째 객체({name: 'tom'})에는 더이상 도달할 수 없고 프로그램에서 해당 객체를 가리키는 참조가 없어졌기 때문에 자바스크립트에서는 재사용을 위해 해당 객체가 점유한 저장공간을 비우게 될 것입니다.

Jaehee's e-room

[출처] 코딩누리