Using the new keyword to Create Objects in JavaScript

The new keyword in JavaScript is used to create new objects from a constructor function. It instantiates an object and stores it in memory, and then assigns the object to a variable for later use. It is a powerful tool for creating objects in JavaScript and can be used to create custom objects as well as objects that inherit from other objects. This tutorial will explain how to use the new keyword to create objects in JavaScript.

Creating Objects with the new Keyword

To create an object with the new keyword, you first need to define a constructor function. This is a special type of function that is used to create objects. The constructor function will have parameters that will be used to set the properties of the object. Here is an example of a constructor function that creates a Person object:

[dm_code_snippet background=”yes” background-mobile=”yes” slim=”no” line-numbers=”no” bg-color=”#abb8c3″ theme=”dark” language=”php” wrapped=”no” height=”” copy-text=”Copy Code” copy-confirmed=”Copied”]

function Person(name, age) {
  this.name = name;
  this.age = age;
}

[/dm_code_snippet]

Once the constructor function has been defined, you can use the new keyword to create a new Person object. Here is an example of creating a new Person object and assigning it to a variable:

[dm_code_snippet background=”yes” background-mobile=”yes” slim=”no” line-numbers=”no” bg-color=”#abb8c3″ theme=”dark” language=”php” wrapped=”no” height=”” copy-text=”Copy Code” copy-confirmed=”Copied”]

var person = new Person("John", 30);
console.log(person); // { name: "John", age: 30 }

[/dm_code_snippet]

As you can see, the new keyword instantiates an object with the properties that were passed to the constructor function. The object is then stored in memory and assigned to the person variable.

Using the Prototype Property

The prototype property of a constructor function is used to create objects that inherit from the constructor function. This means that any objects created with the new keyword will have access to the properties and methods defined in the prototype property. Here is an example of defining a prototype property for the Person constructor function:

[dm_code_snippet background=”yes” background-mobile=”yes” slim=”no” line-numbers=”no” bg-color=”#abb8c3″ theme=”dark” language=”php” wrapped=”no” height=”” copy-text=”Copy Code” copy-confirmed=”Copied”]

Person.prototype.greet = function() {
  console.log(`Hello, my name is ${this.name}`);
};

[/dm_code_snippet]

Now any objects created with the new keyword will have access to the greet method. Here is an example of using the greet method on the person object:

[dm_code_snippet background=”yes” background-mobile=”yes” slim=”no” line-numbers=”no” bg-color=”#abb8c3″ theme=”dark” language=”php” wrapped=”no” height=”” copy-text=”Copy Code” copy-confirmed=”Copied”]

person.greet(); // Hello, my name is John

[/dm_code_snippet]

Conclusion

In this tutorial, we learned how to use the new keyword to create objects in JavaScript. We saw how to define a constructor function and use the new keyword to instantiate an object. We also saw how to use the prototype property to create objects that inherit from the constructor function. By understanding how to use the new keyword, you can create powerful and sophisticated objects in JavaScript.