Hello Readers!
Let me introduce you all with something new today!
The topic today is the JavaScript Keyword "new"! In JavaScript, the keyword new is used to create an instance of an object that has a constructor function.
Before diving into the details, we need to understand one thing, that is, in JavaScript almost everything is an Object and the concept of Object is very important to understand the keyword "New". When we define any Boolean, Number or String with the keyword New, it can be treated like an object.
Let me show an example first!
👉 This is a "constructor function" , Animal since it is responsible for constructing a new object, animal.
👉 We had to add properties to the animal object with the dot notation and return it from the constructor function.
👉 Let's assume that we need to create more than one Animal object in our application. So, we instantiated the constructor function twice.
👉 We can see the output where two new animal objects are created with name and legs properties.
Here is the interesting thing about the keyword new. When we use the keyword, a property called this is created which refers to the whole object and is returned automatically. So, we don't need to specify any additional object inside our constructor function. Basically, those two lines are done for us implicitly (under the hood).
Let's take a look what happens under the hood , assuming the Animal constructor is called with the new keyword. It can be re-written as following and it is equivalent to the previous example:
Here, a new object is automatically created and returned. (the commented out lines)
We can compactly write the code without the under the hood comments:
This concept is known as "Pseudoclassical Instantiation".
Similarly, we can define an Object property which is itself another Object!
For example, let's define an object called "Human" And then instantiate two new Human objects as follows:
Now, suppose we want to create an object type for cars and name it "Car". It should have properties named owner, model and yearOfPurchase. Instead of passing a literal string or integer value while creating the new objects, the following statements pass the objects man and woman as the parameters for the owners.
To find out the name of the owner of car2, we can access the property as follows:
console.log(car2.owner.name); //Swarnali
Top comments (4)
If I was to use something similar to your constructor from the first example that doesn't use new, would the output be different in the final example? Could I still use console.log(car2.wner.name)? And what's the advantages of using the new keyword?
Using the second method does offer some notable advantages. For example, you can test dynamically if an object is an instance of a certain type/class (see
instanceof-operator), or if two objects are of the same type/class (i.e.Object.getPrototypeOf(object1) === Object.getPrototypeOf(object2)).Another very noteworthy point is the prototype-chain. An object's prototype is like its blueprint.
You can define functions and default values on the prototype, which will then be defined on all instances of this prototype. Assigning a different value on an instance doesn't override it for others, as the newly assigned value is on the instance itself and not on its prototype, overshadowing the prototype's value. This is a resource-friendly way of handling objects, as defaults and functions only need to be instanced once instead of for every instance again.
Also, the ES6 classes have to be instanced using the
newkeyword. Under the hood, classes are very similar to (if not the same as) constructor functions.(I hope I didn't say anything wrong here 😅. Anyone correct me if I'm wrong pretty please)
It's a good basic javascript tutorial.
Impressive Explanation ❤