JavaScript 메모리 관리 Heap(힙)과 Stack(스택)

JavaScript에서의 메모리 관리는 Heap(힙)과 Stack(스택) 두 가지 영역을 사용하여 이루어집니다.

1. Heap(힙):
   • 동적으로 할당되는 메모리를 저장하는 영역입니다.
   • 객체, 배열, 함수 등의 데이터 구조가 힙에 저장됩니다.
   • 힙은 크기가 동적으로 변경될 수 있으며, 메모리 할당 및 해제는 개발자가 직접 관리하지 않습니다.
   • 가비지 컬렉터(Garbage Collector)에 의해 사용되지 않는 객체들이 자동으로 해제됩니다.
2. Stack(스택):
   • 함수 호출과 관련된 데이터를 저장하는 영역입니다.
   • 함수가 호출될 때마다 스택에 호출된 함수의 호출 정보(인자, 지역 변수 등)가 저장됩니다.
   • 함수가 실행이 완료되면 해당 함수의 호출 정보가 스택에서 제거됩니다.
   • 스택은 크기가 정적으로 결정되며, 메모리 할당과 해제는 자동으로 이루어집니다.

간단한 예를 통해 Heap과 Stack의 관계를 이해해 보겠습니다.

function foo() {
  const name = 'John'; // name 변수는 스택에 저장됩니다.
  const age = 30; // age 변수는 스택에 저장됩니다.
  const hobbies = ['reading', 'coding']; // 배열은 힙에 저장되고, 힙의 주소가 스택에 저장됩니다.
  const person = { name, age, hobbies }; // 객체는 힙에 저장되고, 힙의 주소가 스택에 저장됩니다.
}

foo(); // 함수 호출

// 함수가 실행되면 스택에 해당 함수의 호출 정보가 저장되고, 함수 실행이 완료되면 스택에서 제거됩니다.

위의 예제에서 foo() 함수가 호출되면 name, age, hobbies, person 등의 변수가 스택에 저장됩니다. hobbies 변수는 배열 객체이므로 힙에 저장되고, person 변수는 객체이므로 힙에 저장되고 해당 힙의 주소가 스택에 저장됩니다. 함수가 실행을 완료하면 해당 함수의 호출 정보가 스택에서 제거됩니다.

JavaScript에서는 메모리 할당 및 해제를 개발자가 직접 관리하지 않기 때문에 가비지 컬렉터에 의해 더 이상 참조되지 않는 객체들이 자동으로 해제됩니다. 이를 통해 메모리 관리를 보다 편리하게 처리할 수 있습니다.

JavaScript에서는 메모리 할당과 해제를 개발자가 직접 관리하지 않습니다. 대신 가비지 컬렉터(Garbage Collector)라는 내장된 기능이 사용되어 더 이상 참조되지 않는 객체들을 자동으로 해제합니다. 이를 통해 메모리 누수(memory leak)를 방지하고 메모리 관리를 간편하게 처리할 수 있습니다.

하지만 개발자는 몇 가지 메모리 관리 관례를 따르는 것이 중요합니다. 아래는 JavaScript에서 메모리 관리에 유의해야 할 사항입니다:

1. 변수 범위 관리:
   • 변수의 스코프(scope)를 적절히 관리하여 불필요한 변수들이 메모리에 계속 유지되는 것을 방지합니다.
   • 필요한 경우 변수를 최소한의 범위로 제한하여 메모리 사용을 최적화합니다.
2. 참조 해제:
   • 더 이상 사용하지 않는 객체에 대한 참조를 명시적으로 해제하여 가비지 컬렉터가 해당 객체를 수거할 수 있도록 합니다.
   • 객체에 대한 참조를 유지하지 않으면 가비지 컬렉터가 해당 객체를 자동으로 해제합니다.
3. 큰 데이터 구조 관리:
   • 대용량의 데이터 구조를 사용할 경우, 필요하지 않은 부분은 제거하여 메모리 사용을 최적화합니다.
   • 예를 들어, 배열이나 객체의 필요한 부분만 유지하고 불필요한 요소들은 삭제하는 방법을 사용할 수 있습니다.
4. 이벤트 리스너 관리:
   • 이벤트 리스너를 등록한 경우, 해당 이벤트가 더 이상 필요하지 않을 때 리스너를 제거하여 메모리 누수를 방지합니다.
   • 필요하지 않은 이벤트 리스너를 계속 유지하면 해당 객체가 가비지 컬렉터에 의해 해제되지 않습니다.

위의 사항들은 메모리 관리에 대한 일반적인 원칙이며, JavaScript 개발 시에 메모리 관리를 고려해야 할 때 유용합니다. 그러나 자바스크립트에서는 명시적인 메모리 할당 및 해제를 직접적으로 제어할 수 없으므로 가비지 컬렉터가 자동으로 관리하는 메모리 할당 및 해제를 활용해야 합니다.

---

@ 변수 범위 관리

1. 블록 스코프(Block Scope):
   • let과 const 키워드를 사용하여 블록 스코프 변수를 선언할 수 있습니다.
   • 블록 스코프 변수는 해당 블록 내에서만 유효하며, 블록을 벗어나면 사용할 수 없습니다.
   • 이를 통해 변수의 유효 범위를 명확하게 제한할 수 있습니다.
2. 함수 스코프(Function Scope):
   • var 키워드를 사용하여 함수 스코프 변수를 선언할 수 있습니다.
   • 함수 스코프 변수는 해당 함수 내에서만 유효하며, 함수 내에서 선언된 변수는 함수 외부에서 접근할 수 없습니다.
   • 함수 스코프 변수는 호이스팅(Hoisting)이라는 동작에 의해 변수 선언이 함수의 최상위로 끌어올려지는 특징을 가지고 있습니다.
3. 전역 스코프(Global Scope):
   • 함수 외부에서 선언된 변수는 전역 스코프에 속합니다.
   • 전역 스코프 변수는 어느 곳에서나 접근할 수 있으므로 변수의 유효 범위를 전역으로 확장할 수 있습니다.
   • 그러나 전역 스코프 변수의 남발은 전역 네임스페이스 오염 등의 문제를 야기할 수 있으므로 주의해야 합니다.

@ 참조 해제 관리

• 객체 참조 해제:
  • 객체를 더 이상 사용하지 않을 때, 해당 객체에 대한 모든 참조를 제거하여 가비지 컬렉터가 수거할 수 있도록 합니다.
  • 객체에 대한 변수, 프로퍼티, 배열 요소 등의 참조를 null 또는 undefined로 할당하여 해제합니다.

let obj = { name: 'John' };

// obj 참조 해제
obj = null;

• 이벤트 리스너 제거:
  • 이벤트 리스너를 등록한 경우, 해당 이벤트가 더 이상 필요하지 않을 때 리스너를 명시적으로 제거합니다.
  • 이벤트 리스너에 대한 참조를 제거하여 메모리 누수를 방지합니다.

const button = document.querySelector('button');

function handleClick() {
  // 이벤트 처리
}

// 이벤트 리스너 등록
button.addEventListener('click', handleClick);

// 이벤트 리스너 제거
button.removeEventListener('click', handleClick);

• 타이머 해제:
  • setTimeout 또는 setInterval 함수를 사용하여 설정한 타이머가 더 이상 필요하지 않을 때, 타이머를 해제합니다.
  • clearTimeout 또는 clearInterval 함수를 사용하여 타이머를 해제합니다.

const timerId = setTimeout(() => {
  // 타이머 동작
}, 1000);

// 타이머 해제
clearTimeout(timerId);

• 자료구조 초기화:
  • 큰 데이터 구조를 사용한 후 더 이상 사용하지 않을 때, 해당 자료구조를 초기화하여 메모리 사용을 최적화합니다.
  • 배열을 빈 배열로 초기화하거나, 객체를 빈 객체로 초기화하는 등의 방법을 사용합니다.

let data = [/* ... */];

// data 초기화
data = [];

참조 해제는 더 이상 사용하지 않는 리소스를 메모리에서 해제하여 가비지 컬렉터에 의해 정리되도록 하는 중요한 작업입니다. 필요하지 않은 참조를 계속 유지하면 해당 객체는 메모리에서 해제되지 않을 수 있으므로, 메모리 누수를 방지하기 위해 적절하게 참조 해제를 수행해야 합니다.