Friday , 17 November 2017
Home / Programming / JavaScript / Garbage Collection – Advanced JavaScript Tutorial
Garbage Collection
Garbage Collection

Garbage Collection – Advanced JavaScript Tutorial

It’s time to take out the trash! No, not the one in your home. I’m talking about the one in your programs. For every object you create, you take up memory in the visitor’s computer. It isn’t just in some imaginary storage. JavaScript will free up space when you have objects that are no longer in use. This is what’s called garbage collection.

Garbage collection isn’t just for JavaScript. Various languages implement garbage collection. Let me explain what garbage collection is using a real world example.

You decide to buy some cereal. After a couple of days, you run out of cereal and all you’re left with is a cereal box. You throw it out and then your friendly local garbage man comes and picks it up for you. Now, you have space your cereal box was previously taking up. In programming, this is called garbage collection. Let’s now take a look how to use garbage collection to your advantage in JavaScript.

Garbage Collection in JavaScript

Let’s update your script to this.

What’s going on here is simple. We create a new Date object and store it in a variable called d. We then output it onto the document. Now, here’s the problem. We no longer need the date object. Even though we’re not using it, it’s still taking up memory. So, how do we get the garbage collector to free up this space?

Add this 1 line of code.

Just like that, we have made the memory used for the date object eligible for garbage collection. So, when does this occur? Well, it depends. The JavaScript host environment, a.k.a your web browser, is responsible for when garbage collection happens. Most browsers usually perform garbage collection by the amount of objects. If you had 100 objects, then you would have a high frequency of garbage collection occurring. If you had one, then it would happen a lot less.

You don’t have to worry about the rest. JavaScript takes care of determining the intervals of when garbage collection happens and freeing up the memory.

So, why set it to null to make it eligible for garbage collection? Well, JavaScript doesn’t like to guess when you don’t need an object anymore. If we don’t set our variable to null, then JavaScript will not free up the memory even if 6 hours pass. By setting it to null, you’re telling JavaScript, “Hey, this variable doesn’t contain anything so you don’t need to have space for it.”.

Does this mean our variable isn’t usable anymore? You can still use your variable after garbage collection. In fact, we can update it to contain a new instance of the Date object. JavaScript will just make space for it again for you.

Automatic Garbage Collection

When you use functions, JavaScript will make any variables you create inside functions eligible for garbage collection. Let’s take a look at an example of this. Clear your script and add this bit of code.

This does what we were previously doing, but in function form. However, we don’t set our variable d to null. Why not? Well, in JavaScript, functions are expected to perform once and then anything inside your function doesn’t need to exist anymore. After your function is finished executing, all variables and objects are set to null for you. This makes them eligible for garbage collection. This is quite useful especially with a function that creates a lot of variables.

Why use garbage collection?

It’s absolutely important you make your objects eligible for garbage collections. You can’t assume visitors will only have your site open. They can have multiple tabs open and probably a program or 2 running in the background. If your site uses too much memory, then it can crash their browser. By removing objects that you no longer need, you can greatly enhance the performance of your site.

Conclusion

There are some programming languages that require developers to specify when objects get garbage collected. In JavaScript, a lot of the work is done for you. This allows you to focus more on your web app and less on memory management. For more information about garbage collection, then go here.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Memory_Management

About Jasko Koyn

Check Also

Try-Catch Statement

Try-catch Statement – Advanced JavaScript Tutorial

The try-catch statement is a unique way to handle errors. When errors occur, usually it …

One comment

  1. How lucky i am to view your site!So amazing!
    You make so easy for me to understand !Thank you

Leave a Reply

Your email address will not be published. Required fields are marked *

ULTIMATE WORDPRESS DEVELOPMENT COURSE
Want to learn how to create your own custom WordPress plugins and themes? Check out my course!
Get 93% off my course. You'll also learn how to integrate WooCommerce and BuddyPress into your projects. This is a limited time offer
Yes, I would like to get 93% off your course!
No Thanks!
close-link