This course has been updated! We now recommend you take the Introduction to Dev Tools, v3 course.

Check out a free preview of the full Mastering Chrome Developer Tools course:
The "Common Memory Leaks" Lesson is part of the full, Mastering Chrome Developer Tools course featured in this preview video. Here's what you'd learn in this lesson:

In JavaScript, memory is freed up through a process called garbage collection. Objects that are no longer referenced are flagged and cleared by the garbage collector. A memory leak typically occurs when an object that should be garbage collected is not. Jon talks through a few of the most common places memory leaks occur in JavaScript.

Get Unlimited Access Now

Transcript from the "Common Memory Leaks" Lesson

>> [MUSIC]

>> Jon Kuperman: And then this is the last section which is Memory Leaks. And before we go into memory leaks we just need to cover a little bit of boring computer science stuff which is Garbage Collection. So, there's kind of two kinds of languages garbage collected and not garbage collected languages JavaScript is garbage collected.

[00:00:21] And idea if you're in a not garbage collected language you have to actually allocate all the memory you use and de-allocate it when you're done. So, you've used old Objective C or something like that or to see where you have to do like Malik to grab some memory.

[00:00:35] You have to be like, hey, I'm gonna make an array you give me some memory you fully control it. But JavaScript and a lot of languages, scripting languages all of them, use garbage collection. And so what garbage collection is a little bit deeper down, is this is concept.

[00:00:51] They call it mark and sweep. And so, what it does is it goes and it finds a list of all of the items, like all the memory allocated that you have in the whole document. And then it's basically finding which ones still maintain some kind of reference somewhere.

[00:01:08] So, if you have an object in memory, but you have nothing referencing it, no nothing, not being passed into a function, not being used, not being anything like that. It gets marked for deletion basically. So, it's a little bit complicated and we don't really need to understand how it works exactly.

[00:01:25] It's just we need to understand that with garbage collector languages it's all about whether or not it has a reference still. If there's still anything using it or pointing at it it gets capped otherwise it gets ditched. So, in that level, JavaScript can't have memory leaks in the pure sense, right?

[00:01:43] Because memory gets automatically deallocated. But what it can have is like user error, where like a developer forgets to remove a pointer to something or a developer forgets to clean things up. So, there's some basic types of memory leaks that are really common but they really can range.

[00:02:04] They can be a lot of different things. So, the common ones that I've seen a lot are the first one I call the accidental global. So, for those who have taken some of the JavaScript classes. If you're not in script mode and you assign a variable like this without bar const with a keyword declaration.

[00:02:21] What it does is it binds it to the window, right? And the window is always gonna have that reference to it. So, stuff that you pinned to the global object is just gonna stick around forever. So, you probably meant to do for the bar equals whatever and then it would have been garbage collected as soon as that function was done.

[00:02:37] But in fact you're pinning stuff to the window and it's just sticking around there forever. Another one is things like timeouts and intervals can be really tricky. Especially if you don't remember to stop them. So, if you have a set interval or a set timeout that can dump into a variable that you could pause execution on or stop execution.

[00:02:58] But I see there's a lot with any kind of polling interval request. Just remember that whatever happens inside that interval that is gonna stay in memory because the interval is still referencing it. Another one is this is probably the most common one I see. So, it's like as front-end developers we often have this kind of duality the situation.

[00:03:21] Where we have DOM and we're taking the DOM into memory. And by that I just mean if you do a jQuery selector, okay? So, if you do jQuery selector button.. So, you have the button. That's in the DOM that's one place but now you also have this memory in memory representation of that button.

[00:03:38] And is important to memory of those are two different things, if you get rid of one, it doesn't get rid of the other one necessarily, right? So, if you do like var equals a jQuery selector on a button. And then you set equals undefined. You know the button's not gonna disappear off the website, right?

[00:03:56] Like cuz they're separate things, it's like a copy. And so, what can happen is if you, this is a contrived example, but if you grab the button. And then later you take care of it like you have a single page apps you erase all that mark up. It's not gonna erase all that stuff that you have in memory still holding on to that button.

[00:04:15] So, just kind of keeping in mind whenever you're working with this. You got a bunch of HTML in your append it. Did you get rid of that, did you unset that thing you know what I mean? And vice versa just because you're removing something from the document doesn't mean you're removing it from memory.