loading...
Cover image for The new Keyword in JavaScript

The new Keyword in JavaScript

bhagatparwinder profile image Parwinder πŸ‘¨πŸ»β€πŸ’» ・3 min read

JavaScript with Parwinder (42 Part Series)

1) What is Javascript? 2) Where can I run JavaScript? 3 ... 40 3) Types in JavaScript 4) What are objects in JavaScript? 5) Reference vs Value 6) Arrays in JavaScript 7) Array Methods in JS 8) Array Instance Methods 9) Array Instance Methods II 10) Functions in JavaScript 11) Type of Functions in JavaScript 12) Scope in JavaScript 13) Hoisting in JavaScript 14) Closures in JavaScript 15) Debugging in JavaScript: Console Methods 16) The new Keyword in JavaScript 17) JavaScript: Type Conversion 18) JavaScript: While Loop 19) JavaScript: Do While Loop 20) JavaScript: For Loop 21) Lesser-Known JavaScript Tricks 22) Events & Event Handling 23) Event Bubbling 24) Event Capturing 25) JS: Switch Statement Explained 26) Arrow Function: Basics 27) this Keyword in JavaScript 28) Arrow functions & this keyword 29) Callback Functions & Callback Hell 30) Strict Mode in JavaScript 31) Optional Chaining 32) Timers & Intervals 33) Arrow Function and The new, arguments & super Keyword! 34) Promises: Introduction 35) Promises: Chaining, Error Handling & Operators 36) New Promise Methods: allSettled & any 37) Async/Await: Introduction 38) Async/Await: Common Mistakes 39) Async/Await: Error Handling 40) Truly Understand Bind, Call & Apply 41) Destructuring Arrays 42) 8 Features From ES2020/ES11 You Should Know!

We did talk about how everything in JavaScript is an object. This makes it essential to know how to create new objects or new instances of objects.

You would create a new object in JavaScript in two ways:

const myObject = {
    name: "Parwinder",
    age: 33
};

console.log(myObject); // { name: 'Parwinder', age: 33 }

This is known as literal notation or object initializer

const myDate = new Date("06/01/2020");
console.log(myDate); // Mon Jun 01 2020 00:00:00 GMT-0500 (Central Daylight Time)

The second method is using the new keyword. Both of these ways of creating objects create a new instance of an Object. We can use the new keyword with anything that has a constructor.

Identical object initializers or literal notations create distinct objects that will not compare to each other as equal. Objects are created as if a call to new Object() was made.

Creating an object of a custom type

You saw in the date example that I created a new instance of Date object. new keyword allows you to create a new instance of any custom object as well.

function Car(make, model, year) {
    this.make = make;
    this.model = model;
    this.year = year;
}

const myCar = new Car("BMW", "X5", 2015);
const igorCar = new Car("Tesla", "Model S", 2020);
const laurenCar = new Car("Ford", "Escape", 2015);

console.log(myCar); // Car { make: 'BMW', model: 'X5', year: 2015 }
console.log(igorCar); // Car { make: 'Tesla', model: 'Model S', year: 2020 }
console.log(laurenCar); // Car { make: 'Ford', model: 'Escape', year: 2015 }

console.log(typeof myCar); // object
console.log(myCar instanceof Car); // true

I created three new and separate instances of the Car object with their unique properties of make, model, and year. Since this is an object, it is of no surprise that the typeof variable provides an object as output. When you do an instanceOf check, it comes back true, for instance, of a Car as we have instantiated these object variables from Car object. Car object acts as the blueprint or the mother object for myCar, igorCar, and laurenCar.

What happens when I use the new keyword?

In the above example, Car will be called a constructor function. It helps us to construct objects with properties we have defined.

When we use the new keyword, it goes through four steps:

  1. It creates a new empty object
  2. It sets the prototype property of the new empty object to the constructor function's prototype property.
  3. It binds the property/function declared with this keyword to the new object.
  4. It returns the newly created object.

Why is it important to know about the new keyword?

The new keyword, classes, objects, this property and prototype are the foundations of object-oriented programming in JavaScript. You would hear OOPs or functional programming in JavaScript. Neither is better or worse, but there are two different ideologies of how we should write code in JavaScript. Knowing about these principles can make you aware of how the two coding styles work, their advantages and disadvantages.

⭐Side note: If you remember that the type of an Array is an object, we can create Arrays using the new keyword and inherit all the methods that Array constructor supports like pop, push and unshift

JavaScript with Parwinder (42 Part Series)

1) What is Javascript? 2) Where can I run JavaScript? 3 ... 40 3) Types in JavaScript 4) What are objects in JavaScript? 5) Reference vs Value 6) Arrays in JavaScript 7) Array Methods in JS 8) Array Instance Methods 9) Array Instance Methods II 10) Functions in JavaScript 11) Type of Functions in JavaScript 12) Scope in JavaScript 13) Hoisting in JavaScript 14) Closures in JavaScript 15) Debugging in JavaScript: Console Methods 16) The new Keyword in JavaScript 17) JavaScript: Type Conversion 18) JavaScript: While Loop 19) JavaScript: Do While Loop 20) JavaScript: For Loop 21) Lesser-Known JavaScript Tricks 22) Events & Event Handling 23) Event Bubbling 24) Event Capturing 25) JS: Switch Statement Explained 26) Arrow Function: Basics 27) this Keyword in JavaScript 28) Arrow functions & this keyword 29) Callback Functions & Callback Hell 30) Strict Mode in JavaScript 31) Optional Chaining 32) Timers & Intervals 33) Arrow Function and The new, arguments & super Keyword! 34) Promises: Introduction 35) Promises: Chaining, Error Handling & Operators 36) New Promise Methods: allSettled & any 37) Async/Await: Introduction 38) Async/Await: Common Mistakes 39) Async/Await: Error Handling 40) Truly Understand Bind, Call & Apply 41) Destructuring Arrays 42) 8 Features From ES2020/ES11 You Should Know!

Posted on by:

bhagatparwinder profile

Parwinder πŸ‘¨πŸ»β€πŸ’»

@bhagatparwinder

Happy, cheerful, confident. Web developer based out of Chicago :)

Discussion

markdown guide
 

Good article, really informative series thank you :).

console.log(myCae instanceof Car);
I think I see a type, myCae should probably be myCar

 

Thank you, Russ! I appreciate it ❀️ Fixed.

 

The name of the post is kind of misleading. The new keyword gave me the idea that there was something new in javascript that I didn't already know about.

 

Thanks for the feedback. This is the reason why the post title is prefixed and emphasized with β€˜The’. Not β€œA new keyword” or β€œnew keywords in JavaScript”.

 
 

hey ya'll , you might also like dev.to/tilakmaddy/recreating-new-k... where I recreate the new keyword . make sure you check it out :)