Understanding the Difference Between Object.create and New Operator

Most of us must have seen object creation using two methods, Object.create and new operator). But some of you must have wondered what the difference is between the two methods. Let's dive into the them and outline the differences.

Consider the below code snippet.

function Animal()
{
 this.name = null;
}

Animal.prototype.getName = function()
{
 return this.name;
}

It's a pretty simple snippet. We have defined Animal constructor which has a property and a method. Now we will create object using the two methods.

Using Object.create

Here is the object creation using

Object.create

Syntax:

Object.create

1. The first parameter(proto) is an existing object which is assigned to __proto__ property of newly created object. This is where prototypal inheritance happening.
2. The second parameter creates an object having its own properties defined as a second parameter.
3. Finally Object.create returns newly created object. So object needs to be stored in a variable.

Too theoretical....now it's time for action.

var animalObj = Object.create(Animal.prototype)

Internally,

__proto__

Animal.prototype

So the object diagram will look like this:

The animalObj will not have any property/function as its own property.

New operator

We will now use

new

1. Creates an empty object
2. Adds

   __proto__

   property and assigns parent object prototype to it
3. Runs the constructor in newly created object context

Lets take below example and understand what is happening here

var animalObj = new Animal();

We are creating animal object from Animal constructor

Following steps are happening while using new keyword along with constructor

1. new 

   operator first creates empty object. We can safely assume it is creating empty object internally
   

   var obj = {};

2. then it assigns __proto__ to it and points back to Animal.prototype
   

   obj.__proto__= Animal.prototype

3. It runs Animal constructor in newly created object.
   

   Animal.call(obj)

4. Finally it returns object which we are storing in

   animalObj

So whatever script is written in Animal constructor will run. This is where the major difference comes in because if we are defining n number of variables/function using

this

in constructor, all variables/functions will be assigned to newly created object as its own property, which may sometimes consume memory depending on the use case.

So in this case object structure would look like this.

Check this out,

animalObj

name

In the era of modern Javascript frameworks if anyone is still using vanilla Javascript for inheritance then it's better to use

Object.create

to extend one class from another, as it does not create unnecessary object variable in prototype object.

I hope that this post has been informative for you.