4 Ways to Create Objects in JavaScript

JavaScript is a syntactically flexible object-oriented language. In this article, we will see different ways to initialize objects in JavaScript. Before continuing, it’s important to note that JavaScript is an object-based language that relies on prototypes and not classes. Because of this different basis, it’s less obvious how JavaScript allows you to create object hierarchies and inherit their properties and values.

Creating object with a constructor:

One of the easiest ways to instantiate an object is in JavaScript. Constructor is nothing but a function and with help of a new keyword, the constructor function allows to create of multiple objects of the same flavor as shown below:

JavaScript

// Simple function
function vehicle(name, maker, engine){
    this.name = name;
    this.maker = maker;
    this.engine = engine;
}
// New keyword to create an object
let car  = new vehicle('GT','BMW','1998cc');
// Property accessors
console.log(car.name);
console.log(car.maker);
console.log(car['engine']);

Output: 

GT
BMW
1998cc

Explanation: A class in OOP has two main components, some parameters and some member functions. In this method we declare a function similar to a class, with three parameters: name, manufacturer and tool (this keyword helps distinguish the name, manufacturer, tool of the class from the name, manufacturer production, tools of arguments are being provided.). All you have to do is create an obj object of the car, instantiate it, and call its method.

Using object literals:

Literals are smaller and simpler ways to define objects. We simply define the property and values inside curly braces as shown below:

JavaScript

// Creating js objects with object literal
let car = {
    name : 'GT',
    maker : 'BMW',
    engine : '1998cc'
};
// Property accessor
console.log(car.name); //dot notation
console.log(car['maker']); //bracket notation

Output: 

GT
BMW

In the above code, we created a simple object named car with the help of object literal,having properties like name, maker, engine. Then we make use of the property accessor methods (Dot notation,Bracket notation) to console.log the values. Now let’s see how we can add more properties to an already defined object:

JavaScript

let car = {
    name : 'GT',
    maker : 'BMW',
    engine : '1998cc'
};
// Adding property to the object
car.brakesType = 'All Disc';
console.log(car);

Output:

{name: 'GT', maker: 'BMW', engine: '1998cc', brakesType: 'All Disc'}

Methods can also be part of the object while creation or can be added later like properties as shown below:

JavaScript

// Adding methods to the car object
let car = {
    name : 'GT',
    maker : 'BMW',
    engine : '1998cc',
    start : function(){
        console.log('Starting the engine...');
    }
};
car.start();
// Adding method stop() later to the object
car.stop = function() {
    console.log('Applying Brake...');  
}
car.stop();

Output: 

Starting the engine...
Applying Brake...

Explanation: In the above code start method was added to the car object and later called by the car.start() and also the stop method was added too after the object was already declared.

Creating object with Object.create() method:

The Object.create() method creates a new object, using an existing object as the prototype of the newly created object. Example:

JavaScript

const coder = {
    isStudying : false,
    printIntroduction : function(){
        console.log(`My name is ${this.name}. Am I studying?: ${this.isStudying}`);
    }
};
const me = Object.create(coder);
me.name = 'Mukul';
me.isStudying = true;
me.printIntroduction();

Output: 

My name is Mukul. Am I studying?: true

Using es6 classes: ES6 supports class concept like any other Statically typed or object oriented language. So, object can be created out of a class in javascript as well as shown below:

JavaScript

// Using es6 classes
class Vehicle {
  constructor(name, maker, engine) {
    this.name = name;
    this.maker =  maker;
    this.engine = engine;
  }
}
 
let car1 = new Vehicle('GT', 'BMW', '1998cc');
 
console.log(car1.name);  //GT

Output: 

GT
Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, CodeConfig.in Courses are your key to success. We provide top-quality content at no cost, all geared towards accelerating your growth in a time-bound manner. Join the millions we’ve already empowered, and we’re here to do the same for you. Don’t miss out – check it out now!