Deep JavaScript Foundations, v3

The new Keyword

Kyle Simpson

Kyle Simpson

You Don't Know JS
Deep JavaScript Foundations, v3

Check out a free preview of the full Deep JavaScript Foundations, v3 course

The "The new Keyword" Lesson is part of the full, Deep JavaScript Foundations, v3 course featured in this preview video. Here's what you'd learn in this lesson:

Kyle highlights the four-part result of invoking a function with the new keyword.


Transcript from the "The new Keyword" Lesson

>> Kyle Simpson: All right, the third way that we'll look at invoking functions uses the new keyword. And I fully understand that the new keyword seems as if it has something to do with invoking class constructors. This has not got anything to do with classes. It's just an unfortunate syntactic trick to make it look like it's dealing with classes when it really isn't.

Actually, the new keyword is the third way that you can invoke a function. And it turns out that it does four very specific things, which I'm about to list for you. It does four very specific things, which are not particularly obvious when you look at the call say.

But the purpose of the new keyword is actually to invoke a function with a this keyword pointing at a whole new empty object. If we have invoking functions and pointing them at a context object, like a workshop.ask, that's one way. Or we say I'm gonna invoke a function and give it a specific object with .call or .apply or I'm gonna force it with a .bind.

A third way of doing it is to say I wanna invoke a function and use a whole new empty object. And the new keyword can accomplish that. It does other stuff, but it also accomplishes that task, which is to invoke a function with a new empty object. Now, I would say that you could accomplish that same goal by saying, function dot call, open, close curly bracket.

Cuz that would invoke your function in the context of a brand new empty object. So the new keyword isn't actually buying you much except the syntactic sugar of, hey I want this function invoked with a new this content. That's our third and final way of doing it. So what are those four things by the way?

You're gonna wanna be able to refer back to this slide in a bit. What are the four things that the this keyword, that the new keyword is going to do when it's used to invoke our function, what I call a with heavy air quotes a constructor call, what are those four things?

Number 1, number 1 we create a brand new empty object. Well we already know that part but we create a brand new empty object out of thin air, that's what the new keyword does. Number 2, the new keyword links that object to another object. And you're thinking link, what?

That's why there's an asterisk there. We'll come back and explain the linkage later. But it first creates a brand new object and then links it somewhere. And then number 3, it invokes the function, it calls the function with its, this, keyword pointed at the new object. Not the linked object, the new object.

>> Kyle Simpson: And fourth and finally, the new keyword after the function call is done, if that function does not return its own object, the new keyword assumes that you meant to return this keyword.
>> Kyle Simpson: So these four things happen every single time a new keyword is invoked with a function.

Now I just wanna ask sort of in a meta sense, which one, when I describe it this way, which of the two entities seems like it's doing all the work? Does it seem like the new keyword is doing all the work, or does it seem like your constructor function's doing all the work?

>> Kyle Simpson: It's really the new keyword, isn't it? As a matter of fact, if you put new in front of almost any function, even a completely empty function, all four of these things would happen. It’s almost as if the function doesn’t even matter. The new keyword is just sort of hijacking the function so that it can do these four things.

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now