DEV Community

loading...
Cover image for JavaScript Garbage collection

JavaScript Garbage collection

bello profile image Bello Updated on ・2 min read

A garbage collector monitors all objects and removes those that have become unreachable.

Memory management is crucial in programming that is why the JavaScript engine removes or cleans up all objects that aren't reachable.

We've learned about garbage collection in the previous articles but let's go a little further below:


Reachability

Programs ran on the script are stored in memory for accessibility or reachability.

Let's see a couple of examples below:

const person = {
  name: 'Bello'
};
Enter fullscreen mode Exit fullscreen mode

In the example above person references the object { name: 'Bello' } but what if it is changed or overwritten.

See the example below:

let person = {
  name: 'Bello'
};

person = null;
Enter fullscreen mode Exit fullscreen mode

In the example above, Bello is now unreachable because there are no references to it. This is where the Garbage collector discards the data to free the memory.

Two references

It is possible to set an object to null and still reference it provided it is already copied to another variable.

See the example below:

const person = {
  name: 'Bello'
};

let user = person;
user = null;

console.log(person.name); // Bello
Enter fullscreen mode Exit fullscreen mode

In the example above, the object person is still reachable but through the copied object, user.

Interlinked Objects

See the example below:

const marry = (man, woman) => {
  woman.husband = man;
  man.wife = woman;

  return {
    father: man,
    mother: woman
  }
}

const family = marry(
  { name: "Bello" },
  { name: "Monica" }
);

console.log(family);

/*
{
  father: { name: 'Bello', wife: { name: 'Monica', husband: [Circular] } },
  mother: { name: 'Monica', husband: { name: 'Bello', wife: [Circular] } }
}
*/

delete family.father; // true
delete family.mother.husband; // true

console.log(family) // { mother: { name: 'Monica' } }
Enter fullscreen mode Exit fullscreen mode

The [Circular] means there's an interlinked (closed-loop) relationship between objects.

Circular reference is a series of references where an object references itself directly or indirectly through a series of objects, resulting in a closed-loop, appearing in most computer programming including JavaScript - Akinjide Bankole

All objects above are reachable even after the following code occurred

delete family.father;
delete family.mother.husband;
Enter fullscreen mode Exit fullscreen mode

But if we delete the father object from the family object then Bello has no incoming reference anymore.

delete family.father;

console.log(family)

/*
{
  mother: { name: 'Monica', husband: { name: 'Bello', wife: [Circular] } }
}
*/

console.log(family.father) // undefined
Enter fullscreen mode Exit fullscreen mode

Since Bello is unreachable it gets removed from memory by the garbage collector. Its data also became inaccessible.

Unreachable island

The interlinked objects become unreachable if the global object (family) is initialized to null

See the example below:

const marry = (man, woman) => {
  woman.husband = man;
  man.wife = woman;

  return {
    father: man,
    mother: woman
  }
}

let family = marry({
  name: "Bello"
}, {
  name: "Monica" 
});

family = null;

console.log(family) // null
Enter fullscreen mode Exit fullscreen mode

Setting the global object, familly to null makes the whole island of interlinked objects above removed from memory.

Discussion (0)

pic
Editor guide