What are Objects:

Concept of objects in javascript is quite similar to objects in many statically typed languages. An object in real life represents an entity and some associated attributes. For example a pen object can have characteristics like color, type and brand etc.

Object Data Type:

To mold real world entity-data in programming world of javascript, we have been provided Object data type. Unlikely primitive types, object data type is capable of storing collection data or more complex entities. Every item in collection is represented as key:value pair. Value can be accessed using Key so called identifier. Value can be a function as well. Please note, primitive types can also be used to create variable of type object when used with new keyword to store single data.

Get it worked:

Now we will talk about how to create an object in javascript. How to work with object data type in javascript ? Objects in javascript can be defined using following options:

  • Object literals
  • Constructor functions
  • Object.Create method
  • ES6 classes

Object Literals:

An object literals can be created using {...}. Let us create our pen object using literal syntax.

var pen = {
    color: "Red",
    brand: "Parker",
    write: function() {
            console.log("It's Red Pen");
                                }                                   
}
Once we have defined an object. We can add properties later as:
pen.type = "Parker";

Constructor Functions:

What if need to create multiple instance of pen ? In that case object literals are not that much significant. We can easily achieve that using Constructor functions syntax. Simply a new keyword followed by function name can do the job.

function Pen(color, brand){
                            this.color: color;
                            this.brand: brand;
}
var parker_pen = new Pen("Blue","Parker");
var space_pen = new Pen("Red","Fisher Space");
Here new keyword does three things.
  • A new empty object is created and assigned to current context this.
  • Then it executes followed function and add properities to this
  • The value of this is returned.

Object.Create Method:

In ECMA Script 5, Javascript provided another way to define an object using Object.Create method. This method can be used as follows:

var pen = Object.create(Object.prototype,{
    color: {
	    value: "Red",
	    configurable: true,
	    writable:true,
	    enumerable: true
                            },
    brand: {
        value: "Parker",
        configurable: true,
        writable: true,
        enumerable: true   
                            }
});
Object.Create is bit cumbersome but at the same time it is more flexible due to properties like configurable, enumerable and writable. By default, with this syntax values of these properties are false. These properties are set to true by default, on object created using literals or constructor functions syntax. and you can access these properties using getOwnPropertyDescriptor method.

ES6 Class Syntax:

At last, ECMA Script 6 now supports class construct, an object-oriented programming paradigm. We will be using new ClassName() syntax to create new object.

class Pen {	
	constructor(color,brand) {
                                this.color = color;
                                this.brand = brand;
                                }
                                }
var pen = new Pen("Red","Parker");

Occurring new keyword automatically calls constructor of class to initialize the properties.

Conclusion:

In this article we learnt about What are the objects and How to create objects in javascript using different syntaxes like Object literals, Constructor Functions, Object.Create method and ES6 classes.

Good Bye 👋 !! until I write again. Code well, Cook good.