
Understanding #"https://hackernoon.com/u/KondovAlexander">@KondovAlexander | Published on2017-06-27T16:32:17.774ZTL;DR →
One specific part of the JavaScript language that brings a lot of misunderstanding with it is the <em>new</em> keyword. If JS is not your first programming language and you have done some OOP, you are undoubtedly used to seeing the <em>new</em> keyword used whenever a class is instantiated.
One specific part of the JavaScript language that brings a lot of misunderstanding with it is thenew keyword. If JS is not your first programming language and you have done some OOP, you are undoubtedly used to seeing thenew 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 usenew. In JavaScript we can use a function instead of a class to achieve the same result. In fact, we can technically call any function withnew before it.
Functions that are called with thenew 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.
Herevariable will be assigned an empty object as a value since no bindings were made inside thegetName 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 withnew:
- 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. Anythis bindings in the function are made on the object being returned.
Even though a name is added tothis, 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 fromhere or you can take a look at the other articles from the same series:
Understanding #"https://hackernoon.com/understanding-javascript-scope-1d4a74adcdf5">
Understanding #"https://hackernoon.com/understanding-javascript-the-this-keyword-4de325d77f68">
Understanding #"https://hackernoon.com/understanding-javascript-new-keyword-ec67c8caaa74">
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
Written by@KondovAlexander | Software EngineerTopics & Tags This story onHackerNoon has a decentralized backup onSia.
Meta Data:📄
TL;DR →
One specific part of the JavaScript language that brings a lot of misunderstanding with it is the <em>new</em> keyword. If JS is not your first programming language and you have done some OOP, you are undoubtedly used to seeing the <em>new</em> keyword used whenever a class is instantiated.
variable will be assigned an empty object as a value since no bindings were made inside thegetName function. It doesn't matter what the function's return value is - if we make a constructor call we will always receive an object.This story onHackerNoon has a decentralized backup onSia.
Meta Data:📄