Understanding JavaScript: New Keyword

One specific part of the JavaScript language that brings a lot of misunderstanding with it is the new keyword. If JS is not your first programming language and you have done some OOP, you are undoubtedly used to seeing the new keyword used whenever a class is instantiated.

Thanks to all the features that came to JavaScript with ES6 the code snippet above works exactly as you would expect. The typical behavior in languages that have classes is pretty straight forward. The arguments are passed to the constructor function of the class and it gives you a new object.

While the JavaScript syntax is visually the same it is only syntactic sugar to what happens under the hood.

There are no constructors

The first thing we need to get out of the way is that we don’t need to have a class in order to use new. In JavaScript we can use a function instead of a class to achieve the same result. In fact, we can technically call any function with new before it.

Functions that are called with the new keyword are usually called constructor functions. However, we could argue that there are no constructor functions, only constructor calls since any function can be used as a constructor.

Here variable will be assigned an empty object as a value since no bindings were made inside the getName function. It doesn't matter what the function's return value is - if we make a constructor call we will always receive an object.

Constructor calls

There are a few things that happen whenever we call a function with new:

• A new object is created
• this is bound to the new object
• The new object is returned, unless the function returns its own object
• The newly created object is assigned as value to the variable

In other words, we tell JavaScript to execute a function and return an object. Any this bindings in the function are made on the object being returned.

Even though a name is added to this, since the function returns an object it will be used rather than the regular binding.

ES6

From ES6 forward we can use the class syntax and the constructor like in typical object oriented languages. I find this to be a great addition since it makes the language more accessible to people comming from an OO language. Still, it’s important to note that classes are just syntactic sugar on top of JavaScript’s existing functionality.

If you’re interested in more JS related content you can subscribe to my newsletter from here or you can take a look at the other articles from the same series:

Understanding JavaScript: Scope_Due to the amazing quantity of libraries, tools and all kinds of things that make your development easier, a lot of…_hackernoon.com

Understanding JavaScript: Prototype and Inheritance_Due to the amazing quantity of libraries, tools and all kinds of things that make your development easier, a lot of…_hackernoon.com

Understanding JavaScript: This Keyword_Due to the amazing quantity of libraries, tools and all kinds of things that make your development easier, a lot of…_hackernoon.com

Understanding JavaScript: New Keyword_Due to the amazing quantity of libraries, tools and all kinds of things that make your development easier, a lot of…_hackernoon.com

Understanding JS: Coercion_Due to the amazing quantity of libraries, tools and all kinds of things that make your development easier, a lot of…_hackernoon.com

Understanding JS: The Event Loop_Due to the amazing quantity of libraries, tools and all kinds of things that make your development easier, a lot of…_hackernoon.com