How to create an object in JavaScript?

When it comes to dealing with objects in JavaScript, users need to create these first, and then they can store values or data into these objects. Generally, JavaScript is an object-based programming language that implies that users can term everything as an Object.

They can define a string object or an array object as input. Also, users can use an Object constructor in JavaScript to create an object and add values and properties to it. In this article, the users will find ideas on how JavaScript objects function and the different ways to create an object.

What are Objects in JavaScript?

In JavaScript, objects are standalone entities, i.e., the fundamental element of a JS program. In more precise words, users can define objects as the building blocks of modern JavaScript.

These objects are much distinct from the primitive data types such as String, undefined Boolean, Number, null, and symbol in JavaScript. All these primitive data types can store only a single value on each data type and depending on their type.

But the JavaScript objects can have any combination of all the primitive data types, including reference data types.

Different methods to create objects in JavaScript:

1. new keyword
2. Objects Literals
3. Object.create() method
4. Object.assign() method

Method 1: Using Constructors to create objects:

Users can use a constructor to create objects in JavaScript. It is one of the simplest methods to create an object in JavaScript. A constructor is a function, and using a new keyword constructor function permits users to create multiple objects of the same type.

Code Snippet:

    function demo (brand, maker, engine) {
		this.a = brand;
		this.b = maker;
		this.c = engine;
	}
	
	//new keyword to create an object
	let bike  = new demo ('Amaze', 'Honda', 'ASWE12232345424490');
	//property accessors
	console.log(bike.a);
	document.write(bike.a);
		
	console.log(bike.b);
	document.write('<br>' + bike.b);
	
	console.log(bike.c);
	document.write('<br>' + bike.c);

Output:

Run Code Snippet

Explanation:

In this code snippet, we declared a function the same as that of a class. In the JS function, we passed three parameters, brand, maker, engine, where we used the "this" keyword to distinguish the name, maker, engine of the class from the brand, maker, engine of the arguments we will pass. We then created the object named "bike" with data of the vehicle, initialized it, and called the method.

Method 2: Using Objects Literals:

Compared to other methods of creating objects in JavaScript, programmers can say that literals are simpler and more efficient.

Code Snippet:

	let demo = {
		a : 'Amaze',
		b : 'Honda',
		c : 'ASWE12232345424490'
	};
	
	console.log(demo.a); //Here, we print using the dot notation
	document.write(demo.a);
		
	console.log(demo.b);
	document.write('<br>' + demo.b);

Output:

Run Code Snippet

Explanation:

In the above example, we constructed a simple JavaScript object named "demo" with the help of object literal. It includes properties such as brand, maker, engine. Then we used the property accessor methods, namely Dot notation and Bracket notation inside the console.log the values.

Method 3: Using the Object.create() method:

Users can also use the JS Object.create() method to create objects. All a user needs to remember to understand the Object.create method is that this method accepts two parameters. The first parameter is a compulsory object that functions as the prototype of the new object that users will create. The second parameter is an optional object which holds the properties that users will add to the new object.

Code Snippet:

const a = {
		b : false,
		c : function() {
			console.log(`My name is ${this.brand}. Is this KTM?: ${this.b}`);
			document.write(`My name is ${this.brand}. Is this KTM?: ${this.b}`);
		}
	};
	const me = Object.create(a);
	me.brand = 'KTM'
	me.b = true;
	me.c();

Output:

Run Code Snippet

Method 4: Using the Object.assign() to create object:

Object.assign method can accept single or multiple objects as its parameters. The first parameter is the object that the method will create and return. The other objects users will pass to it will be to copy the properties into a new object.

Code Snippet:

	const a = {
		b : false,
		c : function() {
			console.log(`My name is ${this.brand}. Is this KTM?: ${this.b}`);
			document.write(`My name is ${this.brand}. Is this KTM?: ${this.b}`);
		}
	};
	const me = Object.assign(a);
	me.brand = 'KTM'
	me.b = true;
	me.c();

Output:

Run Code Snippet

Explanation:

Here, we have used the Object.assign() method to copy the values and properties from a single or more than one source object to the targeted object.

Conclusion:

These are all the methods that help users to create an object in JavaScript. This article also provides code snippets of all the ways with the respective explanations of each. We hope it has provided a precise detail on what JavaScript users will look for while creating objects.