5 ways to create an object in JavaScript

5 ways to create an object in JavaScript 1
11 / 100

The object is the fundamental part of any modern OOP language. JS is very different in the case of objects compared to other programming languages. Unlike another language, we can create an object in javascript using multiple ways. As objects are treated as first-class entities in javascript we can easily store, manipulate and transfer it in from javascript application.
In javascript, we think of the object as the collection of key-value pairs. The key value pairs could be of anything: from basic numbers and strings to functions and another object. Because of this, it provides great flexibility in making complex data structure. Here we are going to review different 5 ways to create an object in javascript.

1. Using ES6 class syntax

If you have come from the background of other OOP languages you might find this syntax very handy and common. Modern ES6 syntax offers the class keyword as a replacement for function constructor. We can separately declare a constructor function with all necessary parameters. We can add methods like in any other OOP languages. we need to use the new keyword for creating an object.

class Player {
constructor(name, sign) {
this.name = name;
this.sign = sign;
this.positions = [];
}
onTap(position) {
this.positions.push(position);
}
}

let player1 = new Player("Ram", "X");
player1.onTap([1, 0]);

2. Using object literal syntax

This is the simplest method to create objects. For creating objects we just need to enlist key-value pairs separated by a colon (:) inside an object.

let player1={
name:"ram",
sign:"X",
positions:[],
onTap:function(position){
positions.push(position);
}
}

player1.onTap([1,0]);

3. Using function constructor

This method is somehow similar to how we create objects in modern class-based languages such as Java and C#. Initially, we create the class declared as a function with all necessary constructor params. After this, we just need to create an object using the new function.

function Player(name,sign){
this.name=name;
this.sign=sign;
this.positions=[];
function onTap(position) {
this.positions.push(position);
}
}

let player1=new Player("RAM","X");
player1.onTap([1,0]);

The new keyword before any function automatically invokes the respective constructor call.

4. Using an Object. create method

If we have to create objects composed of other objects it’s really handy to use this method. The Object.create() method in JS creates a new object using existing objects as a prototype of a newly created object. This method takes 2 parameters: the prototype object and the new object to be created. 2nd parameter is optional. As javascript follows the prototypical inheritance the prototype in javascript is the base object from which all other objects are created. We can call it a blueprint for objects in JS.

let Player= Object.create(Object.prototype,
{
name:"",
sign:"",
positions:[],
onTap:function(position){
this.positions.push(position);
}
});

5. Using the new Object

This is the older and little uglier way of creating an object. If you are from Java background you might find this method familiar. This is not a recommended format because of overhead in scope resolution for finding if the constructor function is user-defined or built in.

var playerX = new Object();
playerX.name = "ram";
playerX.sign = "X";
playerX.positions = [];
playerX.onTap = function() {
console.log("TAPPED");
};
playerX.onTap([1, 2]);

Which syntax would you prefer to create objects in JS? Please let us know in the comment section below. Thank You.

Leave a Reply

Your email address will not be published.