[카카오테크캠퍼스 선택과정] JavaScript 마스터: 메모리 누수

메모리 누수(Memory Leak)

더 이상 필요하지 않은 데이터가 해제되지 못하고, 메모리를 계속 차지하는 현상

 

불필요한 전역 변수 사용

// ❌

window.hello = "hello";
window.user = { name: "iam454", age: 90 };

window라는 전역 객체는 항상 브라우저에 존재하기 때문에

사용하지 않더라도 가비지 컬렉션으로 데이터가 해제되지 않는다.

분리된 노드 참조

// ❌

const btn = document.querySelector("button");
const parent = document.querySelector(".parent");

btn.addEventListener("click", () => {
  console.log(parent);
  parent.remove();
});

parent.remove()를 통해 btn을 클릭하면 parent의 내용이 삭제되는 것처럼 보이지만,

parent의 실제 메모리 주소는 제거되지 않았다.

다음과 같이 작성하는 것이 더 올바르다.

// ✅

const btn = document.querySelector("button");

btn.addEventListener("click", () => {
  const parent = document.querySelector(".parent");
  console.log(parent);
  parent && parent.remove();
});

해제하지 않은 타이머

// ❌

let a = 0;

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

setTimeout(() => {
  console.log(a);
}, 1000);

콘솔에 값이 찍히고 끝인줄 알았겠지만, setInterval()은 계속 실행 중이다.

// ✅

let a = 0;

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

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

항상 clear를 잊지 말자!

잘못된 클로저 사용

// ❌

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

const func = sayHello();
console.log(func("iam454"));
console.log(func("choonsik"));

변수 a는 불필요한 로직이다.