Creating objects in JavaScript (4 Different Ways)
Last Updated :
13 Dec, 2023
JavaScript is a flexible object-oriented language when it comes to syntax. In this article, we will see the different ways to instantiate objects in JavaScript. Before we proceed it is important to note that JavaScript is an object-based language based on prototypes, rather than being class-based. Because of this different basis, it can be less apparent how JavaScript allows you to create hierarchies of objects and to have an inheritance of properties and their values.
These are the following 4 ways:
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 the help of a new keyword, the constructor function allows to creation of multiple objects of the same flavor as shown below:
Example: This example shows the implementation of the above-explained approach.
javascript
function vehicle(name,maker,engine){
this .name = name;
this .maker = maker;
this .engine = engine;
}
let car = new vehicle( 'GT' , 'BMW' , '1998cc' );
console.log(car.name);
console.log(car.maker);
console.log(car[ 'engine' ]);
|
Explanation: A class in OOPs have two major components, certain parameters and few member functions. In this method we declare a function similar to a class, there are three parameters, name, maker and engine ( the this keyword is used to differentiate the name,maker,engine of the class to the name,maker,engine of the arguments that are being supplied.). We then simple create an object obj of the vehicle, initialize it and call it’s method.
Literals are smaller and simpler ways to define objects. We simply define the property and values inside curly braces as shown below.
Example: This example shows the implementation of the above-explained approach.
javascript
let car = {
name : 'GT' ,
maker : 'BMW' ,
engine : '1998cc'
};
console.log(car.name);
console.log(car[ 'maker' ]);
|
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'
};
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
let car = {
name : 'GT' ,
maker : 'BMW' ,
engine : '1998cc' ,
start : function (){
console.log( 'Starting the engine...' );
}
};
car.start();
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.
The Object.create() method creates a new object, using an existing object as the prototype of the newly created object.
Example: This example shows the implementation of the above-explained approach.
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.
Example: This example shows the implementation of the above-explained approach.
javascript
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);
|
Share your thoughts in the comments
Please Login to comment...