What is Garbage Collection or GC?

When you declare a function, object, array, or variable in JS, they are all saved in memory.

So let's say for the time being that an object A (Obj A) exists in a program. Location (A) is formed when the program executes, and the data in Obj A is saved there. There are many places where data can be stored, but for the sake of clarity, let's say that Location (A) is the box in the image below.

Also, note that read-write activities between Obj A and Location (A) may occur while the program runs.

The data saved in Location (A) is no longer required once the program has finished running, thus we must clean Location (A) because it is no longer necessary. Currently, the garbage that needs to be wiped out is the data that is stored at Location (A).

Simply put, Memory Management in JS can be thought of as - Before we can have a function, object, array, or variable, memory must first be allocated. Then, until the program is finished, there may be read-write activities. The memory is released from the location once the program has finished.

In a nutshell, Garbage Collection, sometimes known as GC, is the process of removing these free locations (spaces). This GC process is also called Automatic Memory Management concerning JS.

In low-level languages like C,

• Memory allocation is done via calloc(), malloc() etc.

• It is up to the developer to free up the allocated space using free().

In high-level languages such as JS,

• Automatic memory allocation and release take place.

• Garbage Collection, or GC, is the process of making the memory free, and a routine called Garbage Collector is responsible for this task.

How does Garbage Collection work in JS?

When it comes to garbage collection in JS, references are taken into account, and unreachable memory is attempted to be released.

Understand Reachability

To understand reachability, let's take a few examples

1) Example 1

// Example 1
let Obj = {
    name: 'Orange'
}
let Obj = null

Obj had a reference to a name property named Orange before Obj=null; after Obj=null, that reference was lost. The name will no longer have any associations. Without a reference, nothing under this name can access this property Orange, making it unreachable.

2) Example 2

// Example 2
let Obj = {
    name: 'Orange'
}
let Obj1 = Obj
Obj = null

Here both Obj and Obj1 had a reference to a name property named Orange before Obj=null; after Obj=null, the reference of Obj was lost. The name will no longer have any associations with Obj. But note that Obj1 has still the reference to the name, therefore the name is still reachable in this context.

NOTE: If we include Obj1 = null in Example 2, the name becomes unreachable, as it has lost both the references of Obj and Obj1.

Mark and Sweep Algorithm

The Mark and Sweep algorithm is like a janitor for your computer's memory. It's a crucial part of how your web browser keeps things clean and efficient.

Here's a simple way to understand it:

1. The Mark Phase (Finding What's Used): Imagine your computer's memory as a big library with books (data) scattered all over the place. The Mark Phase is like a librarian going through the library, marking all the books that people are still reading or using (actively used memory). Everything else (books no one's reading) is left unmarked.

2. The Sweep Phase (Cleaning Up): Now that we have our marked books, it's time for the Sweep Phase. Think of it as the librarian coming back and removing all the unmarked books (memory that's no longer in use). This frees up space in the library (your computer's memory) for new books (data).

For JS, the Mark and Sweep algorithm works as follows:

1. The algorithm starts from the root (global) object and checks for the references linked.

2. In case the algorithm finds any unreachable locations, then those locations have to be removed.

3. Mark will mark all the referenced items, and values without any reference will be unmarked.

4. When Sweep runs, it locates unmarked locations and cleans them.

That's how Garbage Collection or GC in JS work

Need for Garbage Collection in JS

The Mark and Sweep algorithm is one of the core components of all Modern Web Browsers' effective memory management. It guarantees that web applications function smoothly and prevents memory leaks. Let's break down its importance in a simple, jargon-free way:

1. Preventing Memory Leaks: To avoid memory leaks, picture your browser as a room with each website you visit as a piece of furniture. Your room will quickly become cluttered and unusable if you constantly add new objects while never getting rid of the ones you no longer need. These "items" are data structures and objects made by web pages that are shown in the browser. By locating and deleting unnecessary things, the Mark and Sweep method helps keep the browser from running out of memory.

2. Effective Resource Management: With so many graphics, scripts, and other components, web pages can be quite resource-hungry. When you're finished with a web page, the algorithm makes sure that these resources are correctly cleaned up. It is comparable to turning off the lights and appliances while leaving a room to conserve electricity.

3. Responsive Web Experience: Nobody likes a slow browser, therefore it should be responsive. The Mark and Sweep technique keeps the browser's memory organized, which speeds up and improves responsiveness. It's similar to having a neat workspace in that you can find what you need quickly and complete tasks more rapidly.

4. Stress-free Multitasking: Each tab in your browser acts as a separate room if you have numerous windows or tabs open. Each of these "rooms" is individually managed by the algorithm in terms of memory. This keeps your multitasking experience fluid and prevents one problematic web page from crashing your entire browser.

5. Greater Battery Life: Effective memory management translates to greater battery life for people using laptops or mobile devices. Effective memory use by the browser lessens the load on your device's resources, enabling it to operate for longer periods between charges.

Summary

A quick summary to cover the core ideas revolving around GC in JS. In JS,

• Memory is automatically allocated.

• There will not be any cleaning or waste collection as long as references(reachable) exist.

• If a location is unreachable, then that will be collected/released as garbage.

For more informative blogs like this, check out my other blogs. Do give me a follow if you love my content. Thank You.

See you all very soon in the next blog.