The new Keyword in JavaScript

In JavaScript the new keywords comes in very few times. When ever you deal with Oops in your codebase, new keyword comes in. But just use this with no proper logic is not fair. So let's understand this with example.

A) What the `new` keyword does?

The new operator is used to create an instance of an object which has a constructor function. It works with some step, but first understand some related concept:

What is Constructor Function?
How object creates?
What is __proto__ and .prototype?

B) Constructor functions

A constructor function in JavaScript is a special function, used to create and initialize objects. Like in JavaScript you can create an object using Constructor Function . See in the example:

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

const car1 = new Car("Toyota", "Corolla");

console.log(car1.brand); // Toyota

But in ES6, there introduced a new method called, class , by using class you can create as many objects as you want with same style and method, but you can control the output by different parameters. See in the example:

class Car {
  constructor(brand, model) {
    this.brand = brand;
    this.model = model;
  }

  showDetails() {
    console.log(this.brand + " " + this.model);
  }
}

const car1 = new Car("Toyota", "Corolla");
const car2 = new Car("Honda", "Civic");

car1.showDetails(); // Toyota Corolla
car2.showDetails(); // Honda Civic

If you understand Class in depth read this article: https://object-oriented-programming-in-javascript-by-koushik.hashnode.dev

C) Object creation process

An object in JavaScript is a collection of key-value pairs. These key-value pairs are properties of the object. A property can be an array, a function, an object itself or any primitive data type such as strings or integers.

1) Class method

You already know about this method. Let's see other methods.

2) Object Literal Notation

let user1 = {
  name: "Koushik",
  scores: 10,
  increment: function() {
    user1.scores++;
  }
};

A JavaScript object literal is a list of name-value pairs wrapped in curly braces. In the example above, the object ‘user1’ is created, and the associated data is stored within it.

3) Object.create() method

You pass into Object.create an object that you want to inherit from, and it returns a new object that inherits from the object you passed into it.

let user2 = Object.create(null);

user2.name = "Koushik";
user2.scores = 10;
user2.increment = function() {
  user2.scores++;
}

D) What is `proto` and `.prototype`?

In JavaScript, .prototype is a property set on constructor functions used to define shared methods/properties for instances that are create from it.

__proto__ or [[Prototype]] is an internal property on actual objects (instances) that points to the prototype object it inherits from.

E) How `new` links prototypes?

When we call the constructor function with new, we automate the following some actions:

A new object is created
It binds this to the object
The constructor function’s prototype object becomes the proto property of the new object
It returns the object from the function

function Player(username, score) {
  this.username = username;
  this.score = score;
}

Player.prototype.addScore = function () {
  this.score += 10;
};

Player.prototype.showMessage = function () {
  console.log("Welcome player!");
};

let player1 = new Player("Koushik", 20);

player1.addScore();

console.log(player1.score); // 30

F) Instances created from constructors

When you create objects from using a constructor function, each object is called Instance of that constructor.

function User(name, points) {
  this.name = name;
  this.points = points;
}

User.prototype.increment = function () {
  this.points++;
};

const user1 = new User("Koushik", 5);
const user2 = new User("KK", 10);

These are created using new User() and follow the structure defined in User, behind the constructor function this prototype method works. They share methods from User.prototype.

Command Palette

A) What the new keyword does?