Javascript and memory

이전 인터뷰 경험에서, 자바스크립트에서의 메모리 관리에 대한 질문을 받았었다. 가비지가 쌓이지 않게 하려면 어떻게 할것인가에 대해서, 그리고 메모리 관리에 대해서 전반적으로 되돌아 보는 시간을 갖고자 한다.

Memory lifecycle

Memory allocation

Value initialization

Javascript will automatically allocate When values are initially declared

let n = 1; // allocate memory for a number
let s = "string"; // allocate memory for a string

let o = {a: 1}; // allocate memory for a object

function f() {
    return 1;
} // allocate a function, callable object

Allocation via function calls

let d = new Date(); // allocate date object

let s = [1].concat([2]) // allocate new array 

Release when that memory is not needed anymore

Garbage collector (GC) monitor memory allocation and determine when a block of allocated memory is no logner needed.

Garbage collection

References

If A object can access another then it means references.

Reference-counting GC

If an object is not referenced by others, then it would called as “Garbage”, and it could be collected

But in case of,

Circular References

function f() {
    let x = {};
    let y = {};
    x.a = y;
    y.a = x;

    return;
}

f();

Even though above function closure is ended, each object’s reference count is not 0, so it cann’t be collected Circular references are a common cause of memory leak

ex) DOM object

var div = document.createElement("div");
div.onclick = function(){
  doSomething();
};

Document has div element, and ‘div’ variable would reference that element. div element’s onclick event listener will refers function object

Mark-and-sweep algorithm

“An object is unreachable” From the roots object, GC will start from these roots, find all objects, are referenced from the roots. Starting from the roots, the garbage collector will thus find all reachable objects and collect all non-reachable objects.

Cycles are no longer a problem

roots cannot reach those objects, describes from upper. so they’ wll be cleaned.

Types of memory leak and how to get rid of them

1. Accldental global variables

    function foo(arg) {
        bar = "this is a hidden global variable";
    }
   

   it means,

    function foo(arg) {
        window.bar = "this is a hidden global variable";
    }
   

   'use strict'; at the beginning of js files, make prevent this kind of mistakes

2. Forgotten timers or callbacks

3. out of DOM references
4. Closures

References

• Memory Management
• Memory leak patterns in JavaScript
• 4 Types of Memory Leaks in JavaScript and How to Get Rid Of Them
• Beyond Memory Leaks in JavaScript