This course is out of date and does not reflect Frontend Masters current standards. We now recommend you take the JavaScript: The Hard Parts course.

Check out a free preview of the full Advanced JS Fundamentals to jQuery & Pure DOM Scripting course:
The "The delete Keyword" Lesson is part of the full, Advanced JS Fundamentals to jQuery & Pure DOM Scripting course featured in this preview video. Here's what you'd learn in this lesson:

The delete keyword does not remove objects from memory. its primary use is to de-reference objects. Alexis demonstrates how the delete keyword affects variables and memory.

Get Unlimited Access Now

Transcript from the "The delete Keyword" Lesson

>> [MUSIC]

>> Alexis Abril: So earlier we were talking about what is delete doing, deletes removing a key from our object is it really deleting data from memory, what's going on with delete? So let's take a look at one of our examples from earlier. We have me name first is gonna be Justin and then we have a reference, name = our little shortcut.

[00:00:27] And then we're gonna call delete and then name.first is still gonna be Justin. Really quickly, does anyone, does that look weird to anyone first? Got a few nods, yeah, that looks weird, this isn't right, this guys lying again, let's type this into a console. Let's work out in memory why this is the way it is.

[00:00:51] So we're gonna take a little graphical example here on the side of what's going on in memory. Here is our window. And we're gonna have this structure is gonna be created from the first object for first. We're not gonna talk about the second one just yet. So me as a pointer to a new object in memory.

[00:01:11] That object has a pointer called name which is gonna point to another object in memory. Which has a pointer called first which will lead us to our primitive Justin string in memory. So this is the path we're taking. We have our scope. We have a me pointer and two objects ending at a string at the end of the line.

[00:01:31] So far so good? This is the road we're gonna travel down. Now name is another pointer, right off the bat. Var name is another pointer in memory. So it's going to start here and it happens to points to our first object. This is a little bit easier way to kind of consume this information.

[00:01:53] So when we call delete That's the pointer that we're removing I don't know if you guys can see that animation. It's really subtle, [INAUDIBLE] walk. I'm going to dare walk away from the podium here without tripping on any wires. This reference, this link is all we're removing.

[00:02:13] When we called the delete key word in this line of code right here, deleting, this is the pointer we're going to remove. So when you have name.first, this path is still intact. So realize if delete was actually deleting data from memory. I would probably expect this entire object to be removed and be cleaned up.

[00:02:38] But that's not actually what's going on. You're actually just working with pointers either reallocating reassigning them or removing them from memory. Does that make sense? That clear things up a little bit? There's probably gonna be some weirdness when you're working with the delete key word, you're not seeing maybe what's going on behind the scenes.

[00:02:58] This is actually one of the things that's going on.
>> Student: So basically just expect that delete is gonna delete a reference not delete a value.
>> Alexis Abril: Yes, most of what you're working with in JavaScript is with pointers. So that part alone trips a lot of people up right off the bat.

[00:03:22] Cuz the same thing is gonna happen with when we're talking about me and name, the same thing is happening with assignment. But we're gonna show that here in two slides, why that first slide was really, really weird, too. It's just being able to understand, remember that things are just pointing to places in memory.

[00:03:42] A lot of times when I'm dealing with modules and a large application replication I haven't worked with or even something I'm just building for the first time, I'll draw stuff like this out. Just for my own sake, that's what going on. So it make it really really easy to understand seemingly more complex concepts.

>> Student: What would happen if you deleted me?
>> Alexis Abril: What would happen if we deleted me in this context? So me is our pointer to this object. So if we called delete me, what do you guys think would happen? Yeah.
>> Student: The me pointer would go away and then that object would get garbage collected because, there's no references to it.

>> Alexis Abril: The me pointer would go away, and that object would get garbage collected okay. Okay, any other thoughts, concerns.
>> Alexis Abril: No, this part, good. Was somebody gonna?
>> Student 2: There's still be a reference to it through name.
>> Alexis Abril: There would still be a reference. Okay cuz you're saying even if this is deleted in memory this would still exist.

[00:04:51] That parts true that is a true statement with the if condition on before that. There's a little,
>> Student: No, that's not true. Me would, me is referencing the name object but name does not reference the me object. So the me object if
>> Alexis Abril: It depends. That second variable, name, does.

>> Student: That references the name object, but it doesn't actually reference the me object.
>> Alexis Abril: Okay, yeah right.
>> Student: [CROSSTALK] And you know but
>> Alexis Abril: I misunderstood. This will not be removed. The trick is neither will be removed. [CROSSTALK] Delete is only going to actually remove attribute on an existing object not the object itself.

[00:05:52] And me is pointing to an object itself. So this is something where If you really wanted to have the garbage collector remove it. You could say me equals, you know, undefined. And then the garbage collector be like this isn't being used anymore if there's no hooks to it.

[00:06:08] If nothing is needing that has as a reference to that me variable, then the garbage collector will just come along but deleting yourself isn't something you can do. I feel like there's one browser way back in the day that let you do stuff like that.
>> Student: Right, but here's the one other thing, just to be clear.

[00:06:31] When you delete me, it doesn't do anything. The lead actually turns false. So, you can't actually delete a variable, it won't, remove the variable from the call object. And, it will not set it to point to no or undefined or anything like that. And not only, the interesting thing about the lead it does return true or false.

[00:06:54] But it only returns true if your syntax is right. If there's a dot operator, really. So the interesting thing, if you did delete here, it would return true. And if you immediately follow that with delete, it would still return true. So the return doesn't tell you if it did delete anything.

[00:07:14] It's could there have been something deleted there? It returns true. Then if you just delete me it returns false. Like I couldn't, this is wrong. You gave me something wrong. That's how delete works it's confusing, I don't know what else to say about that.
>> Alexis Abril: [LAUGH] It's a very special animal a good rule to live by with this is if you're focused on dereferencing attributes of objects of existing objects that's really only what you need to use it for.

[00:07:50] So if you wanted to say delete if you wanted to remove some key from an existing hash and not the hash itself. That's really what you use this stuff for. Does that makes sense?
>> Student 2: So, kind of just to recap if we do delete me, name.first no longer.

>> Alexis Abril: Name.first will still exist.
>> Student 2: Okay, okay.
>> Student 3: So, if you do
>> Alexis Abril: That's the really weird part. [LAUGH]
>> Student 3: So, after you delete me if you do you'll get object?
>> Alexis Abril: If for deleting me, yes, yes. You'll still get the object. You'll still get the first object up here, yeah.

>> [SOUND]
>> Alexis Abril: Bless you, Is that weird? Who thinks that's weird? I think that's crazy. [LAUGH] So this is one of the weird parts but it's always good to understand because especially if you're building a rich JavaScript application. You're probably going have a need for this keyword to fill, a need for this keyword.

[00:08:47] Be aware of what kind of behaviors that you're gonna get into especially if you're wrapping some kind of condition around. While if it was deleted do this other thing. That's not going to respond the way you think it's going to respond.