alt text
Benjamin Thomson
Web & UX Designer

Drink A Coffee With Me Today

Loading...
Success!
Error!

Follow On Instagram

Mayank Gupta (+91-9711083089)
Menu
Close

JavaScript Objects

In the following article, we shall be covering different methods to create Objects in JavaScript


The article shall cover the Following topics:

1. Object creation using String Literal

2. Creating Objects using "New Object"

3. Using "Constructor Function" to create Objects


We shall also discuss in details about the difference in each method.


Object Literal

Object Literal is the simplest form of creating Objects in JavaScript.


It is a set of comma seperated values enclosed inside "{ }"


It do not require "new" keyword to be initialised.

Lets see a small example:


var Employee = {

  name: 'Mayank',

  age: '28,

  designation: 'Engineer'

}

This is a simple Employee Object.


Accessing Properties of Object Literal

1. Employee.name

2. Employee['age']


Adding Properties to Object Literals:

We can add further properties to the Object Literal Notation.


Employee.salary = "1LPA";

Employee.Address = "Rohini";


Adding Methods to Object Literal

Apart from properties, we can add Methods to Object Literals


var Employee = {

  name: 'Mayank',

  age: '28,

  designation: 'Engineer',

  showDetails: function() {

    // Some Code

  }

}


Also we can add function later once the Object Literal is defined.


Employee.getDetails = function() {

  // Some Code

}


Advantages of Object Literal:

1. No need to invoke constructors directly

2. No need to pass Arguments to the constructor function

3. It creates a singleton Object

4. It executes the fastest to create an Object



Creating Objects using "New Object"

The Other way to create object are to create them using "new Object"


Lets look for the simple implementation of this method:


var Employee = new Object();

Employee.name = "Mayank";

Employee.age = 28;

Employee.showDetails = function() {

  // Some Code

}

The above method using Öbject Literal"and this behaves in the similar manner.


The outcome of both the methods are same.

Object Literal is comparitively easier method to create an Object.


Every Object is derived from "Öbject" in JavaScript.


var Employee = new Object();

typeof Employee;    output: "object"

Similarly even Object literals would create a type of "Object"


var Employee = { };

typeof Employee;    // output: "object"

Both the implementation shall result in the variable of type Object


Difference b/w Object Literal and "new Object"

Since both of them results in the type "Object", the difference lies in the performance

Creating Object using Object Literals is the fastest way to create Object.


Lets look what happens when a function executes:

1. Each function executes under its own context

2. A new Context is created every time when a function is executed

3. Each context is created over the Context where it is already Executing.

4. This new Context is stacked over the Existing Context.

5. The main context is at the Allication Level, known as Global Context

6. It consumes some time in order to create the new Context for the Function.


Now lets evaluate the difference between them considering the above steps

1. When an Object is created using "new Object", a new function is executing

2. This new function shall create a Context for its Execution

3. The function shall now execute under its own context.

4. Creating and Executing under the context requires more time.


Considering the overhead required to create an object using "new Object".

Object Literal shall execute faster in order to creat an Objecct.


Using "Constructor Function"

Constructor function is an efficient way to Create Objects in the following casses:

1. Create a building block from which other Object can be created

2. Design a basic architecture to create more Objects


What is a Constructor Function

function Employee (name, age, designation) {

  this.Name = name;

  this.Age = age;

  this.Designation = designation;

}

This is a simple Implementation of the Consructor Function.


Constructor function act as a building block to store the detail of any Employee.

All the variables added to "this" keywod shall act as a public member to the created Object.


For those who belong to language like Java and C#, a constructor function shall resembel to a "Class".

We can create Objects from Constructor function just as we create Objects from Classes.


We can even add methods to the constructor function:

function Employee (name, age, designation) {

  this.Name = name;

  this.Age = age;

  this.Designation = designation;

  this.showDetails = function() [

    console.log("Age: " + this.Age + " Name: " + this.Name);

  }

}

The added function will be available to each of the Object created.



Creating Object from Constructor Function

Lets create a Object from a Constructor Function.


var newEmployee = new Employee("Mayank", 28, "Senior Software Developer"); 

We can create multiple instances of Employee using this "new" keyword.


We can now access the properties of the New Object in the following manner

1. newEmployee.Name

2. newEmployee['Age']
Lets see what "New Keyword" does while creating a new Object.

1. Create a new scope in the memory

2. Bind variables to the new scope

3. Refer to the newly created scope by "this"

4. Return "this" Object from the constructor function.


Difference b/w Constructor function and other Implementations

Constructor Function Implementation provides you the following benefits:

1. Object created is not Singleton

2. Constructor function can be used to create any number of Objects

3. Contains Prototype Property which helps us to add shared functionalities.

4. Although creating Object using Constructor Function is slowest method.


Conclusion:

Any of the method can be used to create an Object.

It all depends on the Requirement of the Project

{{Count}} Comments

{{comment.user}}

{{comment.message}}

{{comment.date.substring(0, 10)}}

Leave A Comment

;