[JavaScript] 메모리 누수 (Memory Leak)

메모리 누수 (Memory Leak)

 

더 이상 필요하지 않은 데이터는 삭제되어야 하는데, 그러지 못하고 메모리를 계속 차지하고 있는 현상을 말한다. 메모리 누수가 지속되면 프로그램의 성능이 떨어지거나 죽어버리는... 경우가 발생할 수 있으니 주의해야한다. 자바스크립트는 쓰레기 수집가(Garbage Collector)가 안쓰는 데이터를 메모리에서 해제 해 주기도 하지만, 그러지 못하는 경우가 있으니 알아두자. garbage collector가 없는 C는 정말 지옥일거야.

 

메모리 누수는 불필요한 전역 변수의 사용, 분리된 노드 참조, 타이머 해제X, 잘못된 클로저 사용 등에 의해 발생한다. 

 

1. 불필요한 전역 변수의 사용

 

// Case 1 - 불필요한 전역 변수 사용
window.hello = 'Hello World!';
window.genius = {name: 'Genius', age: 24};

 

2. 분리된 노드 참조

// Case 2 - 분리된 노드 참조
const btn = document.querySelector('button');
const parents = document.querySelector('.parents');

btn.addEventListener('click', () => {
  console.log(parents);
  parents.remove();
}); // parents를 제거했지만, querySelector를 통해 값을 할당했기 때문에 계속 값이 들어있다. console 찍어보면 계속 출력됨

// 해결방법: 버튼을 클릭했을 때만 찾으면 되므로, querySelector를 함수 안에 넣어준다.

 

3. 해제하지 않은 타이머

// Case 3 - 해제하지 않은 타이머

let a = 0
// setInterval(()=>{
//   a+=1;
// },100);
// 계속해서 반복되는 중 -> 해제를 해줘야 함

const intervalId = setInterval(()=>{
  a += 1;
},100);

setInterval(()=>{
  console.log(a);
  clearInterval(intervalId);
},1000);

 

 

4. 잘못된 클로저 사용

 

// Case 4 - 잘못된 클로저 사용

const getFn = () => {
  let a = 0;
  return name => {
    a += 1;
    console.log(a);
    return `Hello ${name}`
  }
}

const fn = getFn();
console.log(fn('응애')); // 1 Hello 응애
console.log(fn('나 아가')); // 2 Hello 나 아가
console.log(fn('버니스')); // 3 Hello 버니스