Objects and Creation of Objects In Javascript

Introduction

Objects are the most powerful datatype in javascript. Objects are generally a collection of data in the form of key-value pairs. Key here referred to as properties or methods depending on its value. If the value is a function, we will call that property as a method. Objects are reference data types which means each object has a different reference and is distinct even if they have the same properties and methods. For more understanding let us suppose that we have an object car so properties of the car are color, model, brand, etc. We can use {} to create an object in javascript. Objects are variables but have more complex data and multi values. We have named values in the object. 

 var car = {};

We can create an object simply using the curly braces{}. This is the simplest way of creating objects in javascript.

Creating Objects

We can create objects in several ways in javascript. We will discuss all the ways one by one.

Using the curly braces or object literal syntax

We can create an object using the curly braces syntax as follows. This is the easiest way of creating objects in javascript. 

  • A shorter way to write code.
  • Can create objects on the go
var car = {
 brand: 'BMW',
 color: 'black'
};

Using Object constructor

We can create objects using the Object constructor function Object(). We will see how we can create an object car using this constructor function and adding properties to it. We need to assign the return value of the Object() constructor into a variable. This variable now acts as a reference to the object. We will assign properties to the object using the dot(.) notation. We can even assign properties using the square brackets[ ]. 

var car = new Object();
car.brand = "BMW"; // Using dot operator
car[color] = "black";  // Using square bracket

Using New Keyword

We can create objects using the new keyword with function constructors. We can reuse the function constructor to create as many objects as we need. When we create an object using this method we need to use a new keyword. A new keyword will assign the scope to this.  We have build-in objects in javascript such as Date, Numbers, and Strings which we can create using the new keyword.

What new keyword do?
The new keyword creates an object and assigns it to this. Then it will assign new properties or methods to this. In the end, the value of this is returned by the function. Usually, when we call a function constructor using the new keyword we can create similar objects having the same properties. 

function Car(brand, color) {
  console.log(this);
  this.brand = brand;
  this.color = color;
}

var CarBMW = new Car("BMW", "black");  
var CarAudi =  new Car("AUDI", "red");
console.log(CarBMW);
console.log(CarAudi);

The output of the following will be:

Now we can access the properties like:

carBWM.brand; // BMW
carBMW[color]; // black

Using Object.create()

This is a useful method to create objects in javascript as we can pass the prototype object for the newly created object. It generally takes two arguments. The first argument is the prototype object and the second argument is the properties object. This method will return the object with the given prototype object and properties.

Object.create(prototype, [propertiesObject])

The two arguments are:

  • prototype - This is the prototype for the new object. The new object has its methods and properties. It has to be an object or null.
  • properties Object - This is the optional argument. We can define new properties and values for the newly created object. 

Object.create() Usage

We will pass null for the prototype here:

var car = Object.create(null);

Here our car is object type now.


Now we will see an example passing prototype as the first argument:

const car = {
  brand: "BMW",
  color: "black",
  show: function () {
    console.log("The car brand is"+ $this.brand);
  }
};

const BmwCar = Object.create(car);
BmwCar.year = 2010;
console.log(BmwCar); // {  "year": 2010 }
console.log(BmwCar.brand); // BMW
BmwCar.show(); // black

We have created a new object here BmwCar bypassing the first argument car as a prototype object. So our new object has access to all the properties and methods present in the car prototype.

Passing Second Argument to Object.create()

Now we will pass propertyObject which will define properties for the new object. We can define and describe new properties using this argument. We have data descriptors and access descriptors.
The data descriptors are defined. You can read about descriptors here.
  • writeable - If the property value can be changed or not using the assignment operator. Default vale us false. Conveys whether the property can be assigned a new value or not.
  • configurable - if true we can change the type of the property descriptor or even delete that property from the object. The default value is false.
  • enumerable - if true that property will show up during enumeration of the objects or not. The default value is false.
  • value - The value of the property. The default value is undefined.

const car = {
  show: function () {
   console.log(this.brand);
  }
};

const BmwCar = Object.create(car,{
'brand':{
writable: true,
enumerable: true,
value: "AUDI",
configurable: true
},
'color':{
writable: true,
enumerable: true,
value: "white"
},
});
BmwCar.brand = "BMW"; // Can be reassigned as writeable is true
delete BmwCar.brand; // Can be deleted as configurable sets to true
console.log(BmwCar); {  "color": "white" }
BmwCar.show(); // undefined 


Comments