JavaScript Object Using Object.create() Method

Back to: JavaScript Tutorial For Beginners and Professionals

JavaScript Object Using Object.create() Method with Examples

In this article, I am going to discuss Creating JavaScript Object Using Object.create() Method with Examples. Please read our previous article where we discussed Real-World Constructors in JavaScript.

Creating JavaScript Object Using Object.create() Method

The Object.create() method will create a new JavaScript object whose properties can be initialized using dot(.) or bracket notation []. We can also create new objects using the Object.create() method, which allows us to specify the prototype object (means JavaScript objects can inherit properties and behavior from other Objects) and the properties.

This method can be very useful, because it allows us to choose the prototype object for the object we want to create, without the need to define a constructor function.

In JavaScript, all the objects can inherit properties and behavior from other objects. The object we are inheriting from is called Prototype. All the inherited properties of an object can be found in the prototype object of the constructor and we can read the inherited properties of an object calling the __proto__ i.e.: objectName. __proto__

Syntax:
var myObj = Object.create({});
myObj.propName = “value”; //dot notation
myObj[“propName”] = “value”; //bracket notation

Let’s understand by an example
var Car = {
      model: ‘Audi’,
      color: ‘black’
}

We can use the Car object as a prototype to create another object, as shown below:
var electricCar = Object.create(Car);
console.log(electricCar.model);

What we discussed above is given in the below example.

Example: Creating JavaScript Object Using Object.create() Method

In the below example, we have created an object called electricCar using the Car object as a prototype, so the electricCar object will have all the properties of the Car object. We can also use the Object.create() method to create inheritance between objects. Please note that when we directly call the electricCar object to see its content we received an empty object as {} this is because all the inherited properties of the electricCar object from the Car object lies under the proto of electricCar. Hence, in order to read the inherited properties, we have to call __proto__ of the object in this way i.e.: electricCar.__proto__

In the same manner, we have created another car type object called normalCar using the Car object as a prototype, so the normalCar object will have all the properties of the Car object. Also, we use the Object.create() method to create inheritance between objects like we have overridden the type properties of normalCar object from Luxury-car to Normal-car.

Please note that when we directly call the normalCar we received one property in the object as {type: “Normal-car”} this is because we have created/override the type properties of Car inside normalCar with normalCar.type = ‘Normal-car’; and the remaining all the inherited properties of normalCar object from Car object lies under proto of electricCar. Hence, in order to read the inherited properties, we have to call __proto__ of the object in this way i.e.: normalCar.__proto__

<html>
<head>
    <title>Object's creation in JavaScript, by Using Object.create() method example1</title>
</head>
<body>
    <script>
        //car properties and method encapsulation
        var Car = {
            model: 'Audi',
            color: 'black',
            type: 'Luxury-car', // Default value of properties
            displayType: function () {  // Method which will display type of Animal
                return this.type;
            }
        }

        //Object.create() method syntax. Create new car type called electricCar
        var electricCar = Object.create(Car);
        electricCar.displayType(); //Luxury-car

        //Object.create() method syntax. Create new car type called normalCar
        var normalCar = Object.create(Car);
        normalCar.type = 'Normal-car';
        normalCar.displayType(); //Normal-car

        console.log("Using Object.create() method - Car object: ", Car)
        console.log("Using Object.create() method - Car object length: ", Object.getOwnPropertyNames(Car).length)
        console.log("Car type? : ", typeof Car);// object

        console.log("Using Object.create() method - electricCar object without __proto__: ", electricCar)//return empty as there was no property 
        //created by electricCar except others are inherited from Car object
        console.log("Using Object.create() method - electricCar object with __proto__: ", electricCar.__proto__)
        console.log("Using Object.create() method - electricCar object length: ", Object.getOwnPropertyNames(electricCar.__proto__).length)
        console.log("electricCar Using Object.create() method type? : ", typeof electricCar);// object

        console.log("Using Object.create() method - with dot notation-->Property model value of electricCar is: " + electricCar.model);
        console.log("Using Object.create() method - with dot notation-->Property color value of electricCar is: " + electricCar.color);
        console.log("Using Object.create() method - with dot notation-->Property type value of electricCar is: " + electricCar.type);
        console.log("Using Object.create() method - with dot notation-->method displayType of electricCar is: " + electricCar.displayType()); //Luxury-car

        console.log("Using Object.create() method - with bracket notation-->Property model value of electricCar is: " + electricCar['model']);
        console.log("Using Object.create() method - with bracket notation-->Property color value of electricCar is: " + electricCar['color']);
        console.log("Using Object.create() method - with bracket notation-->Property type value of electricCar is: " + electricCar['type']);

        console.log("Using Object.create() method - normalCar object without __proto__: ", normalCar)//return property name Type as there was one property 
        //created by normalCar except others are inherited from Car object
        console.log("Using Object.create() method - normalCar object with __proto__: ", normalCar.__proto__)
        console.log("Using Object.create() method - normalCar object length: ", Object.getOwnPropertyNames(normalCar.__proto__).length)
        console.log("normalCar Using Object.create() method type? : ", typeof normalCar);// object

        console.log("Using Object.create() method - with dot notation-->Property model value of normalCar is: " + normalCar.model);
        console.log("Using Object.create() method - with dot notation-->Property color value of normalCar is: " + normalCar.color);
        console.log("Using Object.create() method - with dot notation-->Property type value of normalCar is: " + normalCar.type);
        console.log("Using Object.create() method - with dot notation-->method displayType of normalCar is: " + normalCar.displayType()); //Normal-car

        console.log("Using Object.create() method - with bracket notation-->Property model value of normalCar is: " + normalCar['model']);
        console.log("Using Object.create() method - with bracket notation-->Property color value of normalCar is: " + normalCar['color']);
        console.log("Using Object.create() method - with bracket notation-->Property type value of normalCar is: " + normalCar['type']);

    </script>
</body>
</html>

Run the above code and open the browser developer tool by pressing the F12 key and have a look at the Console tab and you should see the following logs in the Console tab.

Creating JavaScript Object Using Object.create() Method with Examples

Example: Object’s creation in JavaScript, by Using Object.create() method with null prototype

In the below example, we have created an object called employee using the Object.create({}) as a null prototype by defining {} inside the Object.create() method implies that it doesn’t inherit any properties/function from any object. Please note that when we directly call the employee object, we received the list of properties defined by the employee object i.e.: {name: “Maria”, age: 20, gender: “female”} and when we call the employee object with prototype i.e.: employee.__proto__ we received empty object as because it doesn’t inherit anything from any object hence it shows empty object {}.

<html>
<head>
    <title>Object's creation in JavaScript, by Using Object.create() method with null prototype example</title>
</head>
<body>
    <script>
        //Object.create() method syntax
        var employee = Object.create({})
        employee.name = "Maria";
        employee["age"] = 20;
        employee.gender = "female";

        console.log("Using Object.create() method - employee object with __proto__: ", employee.__proto__)//returns nothing as it doesn’t inheriting anything from any object.
        console.log("Using Object.create() method - employee object without __proto__: ", employee) //returns objects own defined properties
        console.log("Using Object.create() method - employee object length: ", Object.getOwnPropertyNames(employee).length)
        console.log("employee Using Object.create() method type? : ", typeof employee);// object

        console.log("Using Object.create() method - with dot notation-->Property name value of employee is: " + employee.name);
        console.log("Using Object.create() method - with dot notation-->Property age value of employee is: " + employee.age);
        console.log("Using Object.create() method - with dot notation-->Property gender value of employee is: " + employee.gender);

        console.log("Using Object.create() method - with bracket notation-->Property name value of employee is: " + employee['name']);
        console.log("Using Object.create() method - with bracket notation-->Property age value of employee is: " + employee['age']);
        console.log("Using Object.create() method - with bracket notation-->Property gender value of employee is: " + employee['gender']);

    </script>
</body>
</html>

Run the above code and open the browser developer tool by pressing the F12 key and have a look at the Console tab and you should see the following logs in the Console tab.

Object's creation in JavaScript, by Using Object.create() method with null prototype

Difference between Array and Object in JavaScript

Difference between Array and Object in JavaScript

In the next article, I am going to discuss How to Create JavaScript Objects using Factory Pattern with an Example. Here, in this article, I try to explain Creating JavaScript Object Using Object.create() Method with Examples and I hope you enjoy this How to Create JavaScript Object Using Object.create() Method article.

Leave a Reply

Your email address will not be published. Required fields are marked *