> For the complete documentation index, see [llms.txt](https://yong2401.gitbook.io/til-by-ellie/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://yong2401.gitbook.io/til-by-ellie/javascript-10/javascript_memory.md).

# 자바스크립트 메모리 관리

* C 같은 저수준 언어에서는 `malloc()` 과 `free()`를 사용해 수동으로, 자바스크립트에서는 **자동으로** 메모리를 할당·해제합니다.
* 자바스크립트는 객체가 생성될 때 메모리를 할당하고 사용하지 않는 변수는 자바스크립트 엔진 내 가비지 컬렉터(garbage collector)가 삭제합니다.

## 메모리 누수

* 자바스크립트 엔진의 가비지 컬렉터가 메모리를 올바른 방식으로 해제하지 않은 경우 발생할 수 있습니다.
  * 메모리 누수로 인해 성능이 떨어지고, 프로그램이 중단됩니다.

### 1. 객체에 대한 참조

* 객체가 참조 중이면 해당 객체는 메모리에 존재합니다.

  ```javascript
  let memory = {
    key1: func(), // 5KB
    key2: func(),  // 5KB
  };

  // key1 속성에 접근하기 위해서 memory 객체 전체를 함수 범위에 포함
  const clickEvent = () => {
    alert(obj.key1); // 10KB
  }
  ```

### 2. DOM 메모리 누수

* DOM 함수를 가리키는 변수가 이벤트 콜백 외부에 선언된 경우 *해당 DOM 항목을 제거해도 해당 항목은 메모리에 남습니다.*

  ```markup
  <div id="first">First</div>
  <div id="second">Second</div>
  ```

  ```javascript
  let first = document.getElementById("first");
  let second = document.getElementById("second");

  first.addEventListener("click", () => {
    second.remove();
    console.log(second); // 제거해도 출력(메모리 누수)
  });
  ```
* 메모리 누수 막는 방법
* 이벤트 핸들러 콜백 범위 내에 제거할 DOM 항목 선언하고 항목 제거

  ```javascript
   let first = document.getElementById("first");

   first.addEventListener("click", () => {
     let second = document.getElementById("second");
     second.remove();
   });
  ```
* 이벤트 사용 후 **등록 해지**

  ```javascript
   let first = document.getElementById("first");

   first.addEventListener("click", () => {
     let second = document.getElementById("second");
     second.remove();
   });
   first.removeEventListener("click");
  ```

  **3. `window` 전역 객체**
* `window` 전역 객체에 포함되는 객체는 메모리에 존재합니다.

  ```javascript
  var global = "🌎";
  window.global // "🌎"
  ```

  * 전역 속성으로 추가된 객체(전역변수)는 제거할 수 없습니다.
  * 따라서 가능하면 `var`로 선언한 전역변수를 사용하지 않는 것이 메모리 절약에 유리합니다.
  * 필수적이지 않은 전역변수는 함수 내부로 위치를 이동할 수 있습니다.&#x20;

### 4. 객체 참조 제한

* 함수에 객체의 전체 범위가 아닌 *필요한 부분만 참조*하여 과도한 메모리 사용을 최소화해야 합니다.
* 객체 전체보다는 **객체의 속성**만 전달합니다.

  ```javascript
  let obj = {
    key1: "value1",
    key2: "value2"s
  }

  /* 💣 
  const printValue = (obj) => {
    console.log(obj.key1);
  }

  printValue(obj); // "value1" */

  // 👍
  const printValue = (key) => {
    console.log(key);
  }

  printValue(obj.key1); // "value1"
  ```

### 5. `delete` 연산자

* 불필요한 객체 속성 제거하기 위해 `delete` 연산자 사용합니다.

  ```javascript
  let obj = {
    key1: "value1",
    key2: "value2"s
  }

  delete obj.key2;
  console.log(obj.key2); // undefined
  ```

## Reference

[자바스크립트의 메모리관리 - JavaScript | MDN](https://developer.mozilla.org/ko/docs/Web/JavaScript/Memory_Management)

<자바스크립트로 하는 자료구조와 알고리즘> by.배세민


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://yong2401.gitbook.io/til-by-ellie/javascript-10/javascript_memory.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.