Understanding the difference between Object.create() and the new operator.

Why is it important to know the difference?

  1. You will run across code that is not the absolute most recent Javascript.
  2. To be a great developer you need to learn how to deal with all types of code. That includes old code!
  3. Underneath the hood, the class keyword introduced in ECMAScript 6 utilizes the new operator behind the scenes.

Let’s start by examining what Object.create does:

var dog = {
eat: function() {
console.log(this.eatFood)
}
};

var maddie = Object.create(dog);
console.log(dog.isPrototypeOf(maddie)); //true
maddie.eatFood = 'NomNomNom';
maddie.eat(); //NomNomNom

Let’s go step by step through the above example and see what exactly is happening.

  1. Create an object literal named dog which has a single method called eat.
  2. Initialize maddie using Object.create(dog), which creates a completely new object with its prototype set to dog.
  3. Test to see if dog is a prototype of maddie.
  4. Set the string to be output via this.eatFood
  5. Call the eat function with the newly created object, maddie.
  6. Javascript will go through the prototype chain and find the eat method on dog with the “this” keyword set to maddie.
  7. Outputs NomNomNom in console.

Object.create() created an entirely new object maddie, with its prototype set to dog. The freshly created maddie object now has access to the eat method in dog.

Now, let’s check out the new operator:

var Dog = function(){
this.eatFood = 'NomNomNom';
this.eat = function(){
console.log(this.eatFood)
}
};

var maddie = new(Dog);
console.log(maddie instanceof Dog); // True
maddie.eat(); //NomNomNom

Let’s see how the new operator is applied to this function and what it does.

  1. Create a new object named maddie
  2. maddie inherits the prototype of the constructor function
  3. Executes constructor with “this” set to object created in step one.
  4. returns created object (unless constructor returns the object)

You may be thinking, what’s the difference between Object.create() and the new operator? They both seem to do the same thing. They both create a new object and inherit a prototype.

Hopefully this example can clear up any confusion:

function Dog(){
this.pupper = 'Pupper';
};

Dog.prototype.pupperino = 'Pups.';
var maddie = new Dog();
var buddy = Object.create(Dog.prototype);

//Using Object.create()
console.log(buddy.pupper); //Output is undefined
console.log(buddy.pupperino); //Output is Pups.

//Using New Keyword
console.log(maddie.pupper); //Output is Pupper
console.log(maddie.pupperino); //Output is Pups.

The key thing to note in this example is:

console.log(buddy.pupper); //Output is undefined

Notice the output of buddy.pupper is undefined. Even though Object.create() sets its prototype to Dog, buddy does not have access to this.pupper in the constructor. This is due to the important difference that new Dog actually runs constructor code, whereas Object.create will not execute the constructor code.

Hopefully this has given you a little more insight on how Object.create() and the new operator work as well as how they differentiate from each other.

Written by

As curious and passionate as it gets.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store