Article Categories

Selected Reading

How to create JavaScript objects using new operator?

Javascript Web Development Front End Technology

The new operator in JavaScript creates instances of objects. It can be used with built-in constructors like Object(), Array(), or with custom constructor functions to create objects with specific properties and methods.

Syntax

let objectName = new ConstructorFunction(parameters);

Using new with Object Constructor

The most basic way is using new Object() to create an empty object, then add properties:

<!DOCTYPE html>
<html>
  <body>
    <p id="test"></p>
    <script>
      var dept = new Object();
      dept.employee = "Amit";
      dept.department = "Technical";
      dept.technology = "Java";

      document.getElementById("test").innerHTML =
        dept.employee + " is working on " + dept.technology + " technology.";
    </script>
  </body>
</html>

Amit is working on Java technology.

Using new with Built-in Constructors

You can use new with various built-in JavaScript constructors:

<!DOCTYPE html>
<html>
  <body>
    <p id="demo"></p>
    <script>
      // Creating different object types
      let arr = new Array(1, 2, 3);
      let date = new Date();
      let regex = new RegExp("abc");
      
      let result = "Array: " + arr.join(", ") + "<br>";
      result += "Date: " + date.toDateString() + "<br>";
      result += "Regex: " + regex.toString();
      
      document.getElementById("demo").innerHTML = result;
    </script>
  </body>
</html>

Array: 1, 2, 3
Date: Mon Dec 23 2024
Regex: /abc/

Using new with Custom Constructor Functions

You can create your own constructor functions and use new to create instances:

<!DOCTYPE html>
<html>
  <body>
    <p id="output"></p>
    <script>
      function Employee(name, department, technology) {
        this.name = name;
        this.department = department;
        this.technology = technology;
        this.getDetails = function() {
          return this.name + " works in " + this.department + " on " + this.technology;
        };
      }
      
      let emp1 = new Employee("John", "Development", "JavaScript");
      let emp2 = new Employee("Sarah", "Testing", "Python");
      
      document.getElementById("output").innerHTML = 
        emp1.getDetails() + "<br>" + emp2.getDetails();
    </script>
  </body>
</html>

John works in Development on JavaScript
Sarah works in Testing on Python

How the new Operator Works

When you use new with a constructor function, JavaScript:

Creates a new empty object
Sets the prototype of the new object
Calls the constructor function with this pointing to the new object
Returns the new object (unless the constructor explicitly returns another object)

Comparison with Object Literals

Method	Use Case	Reusability
`new Object()`	Basic object creation	Low - manual property assignment
Custom Constructor	Multiple similar objects	High - reusable template
Object Literal `{}`	Single objects	Low - one-time use

Conclusion

The new operator is essential for creating object instances in JavaScript. Use it with built-in constructors or custom functions to create objects with predefined properties and methods.

Krantik Chavan

Updated on: 2026-03-15T23:18:59+05:30

381 Views

Kickstart Your Career

Get certified by completing the course

Get Started

Previous Next