[Javascript] Scope란? 그리고 가비지컬렉터

 

자바스크립트 개발자라면 스코프와 가비지컬렉터에 대해 이해하고 있어야 한다. 그래야 메모리 누수, 불필요한 메모리 낭비 등을 방지하며 개발을 할 수 있다. 이 내용은 드림코딩 아카데미의 자바스크립트 마스터리 강의를 보고 작성하였다. 더욱 깊이 있고 자세한 내용은 강의에서 다루고 있기 때문에 더 많은 내용을 공부하고 싶다면 강의를 듣는 것을 추천한다.

Scope

스코프란 범위, 영역이라는 뜻. 프로그래밍에서는 변수를 참조할 수 있는 유효한 범위를 말한다. 즉, 변수, 함수, 클래스에 접근할 수 있는 범위를 말한다. 

 

Scope는 그럼 언제 결정되나?

블럭 ({})으로 결정된다. 블럭 안의 변수는 블럭 안에서만 사용할 수 있다. 

function scope() {
  const a = 'Hello world';
}

console.log(a); // Uncaught ReferenceError: a is not defined

// 코드 블럭에는 어떤게 있을까❓
// {}
// if() {}
// for() {}
// function() {}

 

Scope가 존재하는 이유

• 변수, 함수, 클래스의 이름 충돌을 방지하기 위해서.
• 메모리를 절약하기 위해. 블럭 안의 변수는 블럭이 끝나는 순간 자동으로 메모리에서 제거가 된다. => 이 말은 즉슨 전역 스코프에 선언된 변수는 (최상위에 선언된 변수) 메모리를 오랫동안 차지하고 있다는 뜻이다.

 

Scope를 잘 활용하는 방법

변수를 최대한 필요한 곳에 정의하여 변수가 필요한 작업이 끝나면 바로 메모리에서 제거될 수 있도록 한다.

---

가비지 컬렉터 (GC) 

garbage = 쓰레기, collector = 모으는사람, 즉 가비지 컬렉터는 쓰레기를 청소해주는 애다. 자바스크립트는 가비지 컬렉터가 있어서 메모리를 직접 청소하지 않아도 가비지 컬렉터가 알아서 메모리를 비워준다.

 

가비지 컬렉터는 언제 메모리를 청소할까?

let apple = {
   name: 'apple',
};

let orange = apple;

orange = null;
apple = null;

// 1. apple이라는 변수가 탄생했다. 변수 apple은 {name : 'apple'} 이라는 오브젝트의 주소값을 가지고 있다.
// 2. {name :'apple'} 오브젝트가 저장된 주소가 00011xx라고 가정해보자. 
// 3. 00011xx를 참조하고 있는 값은 변수 apple, orange 이렇게 두개다. 즉 00011xx 참조카운트는 2다.
// 4. orange에 null을 할당했다. 00011xx의 참조카운트가 1로 감소했다.
// 5. apple변수에도 null을 할당했다. 00011xx가 0으로 감소했다.
// 6. 참조카운트가 0이 된 값은 가비지컬렉터가 메모리에서 없앤다.

//즉 그 어디서도 오브젝트를 참조하고 있지 않을 때 가비지컬렉터는 해당 값을 메모리에서 청소한다.

 

 

 

주의사항

가비지 컬렉터는 편한 기능이지만 너무 자주 동작하게 되면 CPU 즉 리소스를 많이 사용하게 된다. 이러한 리소스 절약을 위해 메모리를 아끼면서 사용하는 습관을 들이는게 좋다. 필요한 변수만 선언하여 불필요한 메모리를 너무 많이 할당하지 말자. 

전역변수는 어플리케이션이 실행됨과 동시에 메모리에 탑재되고, 어플리케이션이 종료될 때까지 계속 메모리에 유지된다. 그러니 가급적 글로벌 변수는 사용하지 않는 것이 좋다. 블럭 내부에 선언된 변수는 블럭이 끝나면 자동으로 소멸되므로 필요한 곳에 적절하게 변수를 배치하는 습관을 들이자.