Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
The new operator in JavaScript
The new operator in JavaScript creates instances of user-defined objects or built-in object types that have constructor functions. When used with a constructor function, it creates a new object, sets up the prototype chain, and returns the newly created object.
Syntax
new constructor([arguments])
How the new Operator Works
When you use the new operator, JavaScript performs these steps:
- Creates a new empty object
- Sets the object's prototype to the constructor's prototype
- Calls the constructor function with
thispointing to the new object - Returns the new object (unless the constructor explicitly returns another object)
Example with Constructor Function
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>New Operator Example</title>
</head>
<body>
<h1>New Operator in JavaScript</h1>
<div id="result"></div>
<button onclick="createPerson()">Create Person Object</button>
<script>
function Person(name, age, designation) {
this.name = name;
this.age = age;
this.designation = designation;
this.introduce = function() {
return `Hello, I'm ${this.name}, ${this.age} years old, working as ${this.designation}`;
};
}
function createPerson() {
// Using new operator to create an instance
let person1 = new Person("Rohan Sharma", 19, "student");
let output = `
<h3>Person Object Created:</h3>
<p><strong>Name:</strong> ${person1.name}</p>
<p><strong>Age:</strong> ${person1.age}</p>
<p><strong>Designation:</strong> ${person1.designation}</p>
<p><strong>Introduction:</strong> ${person1.introduce()}</p>
`;
document.getElementById("result").innerHTML = output;
}
</script>
</body>
</html>
Built-in Objects with new
// Creating built-in objects
let date = new Date();
let array = new Array(1, 2, 3);
let regex = new RegExp("\d+");
console.log("Date:", date.toDateString());
console.log("Array:", array);
console.log("RegExp test:", regex.test("123"));
Date: Mon Dec 16 2024 Array: [ 1, 2, 3 ] RegExp test: true
Without new vs With new
function Car(brand, model) {
this.brand = brand;
this.model = model;
}
// Without new operator (incorrect)
let car1 = Car("Toyota", "Camry");
console.log("Without new:", car1); // undefined
// With new operator (correct)
let car2 = new Car("Honda", "Civic");
console.log("With new:", car2);
Without new: undefined
With new: Car { brand: 'Honda', model: 'Civic' }
Key Points
- Always use
newwith constructor functions to create object instances - Constructor function names should start with a capital letter by convention
- Without
new, the function runs normally andthisdoesn't refer to a new object - The
newoperator automatically returns the created object
Conclusion
The new operator is essential for creating object instances from constructor functions. It sets up proper object initialization, prototype inheritance, and ensures this refers to the newly created object.
Updated on: 2026-03-15T23:18:59+05:30
481 Views
Advertisements