JS(자바스크립트의) 메모리 누수에 관해 알아보자

많은 경우에 코드를 작성하다 보면 메모리 누수가 발생하게 된다.

우리는 성능 좋은 쩌는 웹앱을 만들것이기 때문에 이런거는 생각하고 코드를 적어야 한다.!

그러므로 메모리 누수에 대해 알아보자!

---

메모리 누수

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

 

큰 예시들로 4가지가 있는데 코드와 함께 살펴보자

 

• 불필요한 전역 변수 사용

var globalVar = "global"; // 불필요한 전역 변수

function doSomething() {
    console.log(globalVar);
}

doSomething();

function doSomething() {
    let localVar = "local"; // 필요한 범위 내에서만 변수를 선언
    console.log(localVar);
}

doSomething();

• 분리된 노드 참조

let el = document.getElementById('myElement');

function removeEl() {
    // DOM에서 요소를 제거하지만 여전히 변수에 참조가 남아 있음
    document.body.removeChild(el);
}

removeElement();
// element 변수가 여전히 DOM 요소를 참조하고 있어 메모리 누수가 발생

let el = document.getElementById('myElement');

function removeEl() {
    // DOM에서 요소를 제거하고 변수 참조도 해제
    document.body.removeChild(el);
    el = null; // 참조를 해제하여 메모리를 해제함
}

removeElement();

• 해제하지 않은 타이머

function startTimer() {
    setInterval(function() {
        console.log("Timer running");
    }, 1000);
}

startTimer();
// 타이머를 멈추지 않으면 계속해서 메모리를 사용함

function startTimer() {
    let timer = setInterval(function() {
        console.log("Timer running");
    }, 1000);

    // 타이머를 일정 시간 후에 정리
    setTimeout(function() {
        clearInterval(timer);
    }, 5000); // 5초 후 타이머 해제
}

startTimer();

• 잘못된 클로저 사용

function outerFunction() {
    let largeData = new Array(1000000).fill('some data');

    return function innerFunction() {
        console.log(largeData[0]);
    };
}

let myFunction = outerFunction();
// innerFunction이 largeData를 계속 참조하고 있어 메모리 누수가 발생

function outerFunction() {
    let largeData = new Array(1000000).fill('some data');

    function innerFunction() {
        console.log(largeData[0]);
    }

    innerFunction();
    largeData = null; // 참조를 해제하여 메모리를 해제함
}

outerFunction();

 

큰 예시들로 이렇게 4가지가 있다.

앞으로의 코딩생활에 있어서 이런것들은 꼭 생각해서 만들어야 성능에 영향이 없을 거라고 생각한다!