JavaScript object create vs new

JavaScript object create vs new keywords are both used to create objects, but they differ in their approach and behavior. The Object.create() creates a new object with an existing object as its prototype, while new is used to create a new instance of a constructor function.

JavaScript object create vs new examples

Simple example code with both methods.

Object.create() is a method that creates a new object, using an existing object as the prototype of the new object. This allows you to create a new object that inherits properties and methods from the prototype object. This method takes one argument, which is the object that will be used as the prototype of the new object.

<!DOCTYPE html>
<html>
<body>
    <script>
    const person = {
        firstName: "John",
        lastName: "Doe",
        getFullName() {
            return `${this.firstName} ${this.lastName}`;
        }
    };

    const john = Object.create(person);

    console.log(john.firstName); 
    console.log(john.getFullName());
    
    </script>
</body>
</html>

Output:

The new keyword is used to create a new instance of a constructor function. When a constructor function is called using new, a new object is created and assigned to the this keyword inside the constructor function.

function Person(firstName, lastName) {
  this.firstName = firstName;
  this.lastName = lastName;
  this.getFullName = function() {
    return `${this.firstName} ${this.lastName}`;
  }
}

const john = new Person("John", "Doe");

console.log(john.firstName); // "John"
console.log(john.getFullName()); // "John Doe"

Here is a tabular representation of the differences between Object.create() and new in JavaScript:

Feature	`Object.create()`	`new`
Prototype object	Takes an existing object as the prototype of the new object	Inherits from the constructor’s `prototype` property
Constructor function	Not used	Used to create a new instance
Instance properties	Not set during creation	Set using `this` keyword inside the constructor
Flexibility	More flexible, allows creating objects with different prototypes	Less flexible, creates instances of a specific constructor function
Syntax	`Object.create(prototypeObject)`	`new ConstructorFunction(arguments)`

In summary, Object.create() is more flexible and allows you to create objects with different prototypes, while new is a more straightforward way to create instances of a specific constructor function.

Object create() takes an existing object as the prototype of the new object, while new uses the prototype property of the constructor function to create new objects. Finally, Object.create() does not require a constructor function, while new can only be used with constructor functions.

Comment if you have any doubts or suggestions on this Js difference topic.

Note: The All JS Examples codes are tested on the Firefox browser and the Chrome browser.
OS: Windows 10
Code: HTML 5 Version

JavaScript object create vs new