Creating Objects in JavaScript (4 Different Ways)

August 14, 2022 | by Arround The Web | No comments

Creating Objects in JavaScript (4 Different Ways)

JavaScript is a programming language that is designed to facilitate interaction between objects. In this scripting language, an object is basically a variable that can store many values. For example, cars in a showroom, students in school, and cash in bank accounts. There are different ways of creating objects using JavaScript, such as object literals, constructor methods, classes, and new keywords. However, the object literal is the most common way of creating objects using JavaScript.

In this article, we have explained two methods for creating objects in JavaScript.

Method 1: Create an Object Using the Object Literals in JavaScript

It is the simplest way for creating an object in JavaScript by initializing the object. Users can create and define an object in a single line. A key-value pair phenomenon is carried out to assign the values separated by a colon. The assignment of values is written in curly braces:

Syntax

The syntax for creating an object with an object initializer is given below:

var object= {propertyName:propertyValue}

The property name refers to the name of the property, and the propertyValue represents the value of that property.

Example

In this example, all the values are assigned to the properties of the object with a key value.

Code

// An example of creating an object using Object literals

var teacher = {firstName:"Harry",

lastName:"Billi",

age:35,

subject:"Math"};

console.log(teacher.firstName);

In the code:

The object teacher is defined, and different properties are created for this object.
Afterward, different values are assigned to these properties.
In the end, the specific property teacher.firstName is displayed using the console.log() method in JavaScript.

Output

The output returns the specific property of an object by creating the object literal method in JavaScript.

Note: JavaScript 1.1 and earlier do not support object literals for initializing objects.

Method 2: Creating an Object Using the Constructor Method in JavaScript

Another alternative way that can be utilized to create an object in JavaScript is the constructor method. The method creates an object instance of the class. In this method, first define an object type by utilizing the constructor method:

Syntax

function Constructor(property) {

this.property = property;}

let newObject= new Constructor('objectValue');

Parameter:

The parameters are described as follows.

Constructor: a method that initializes an object of the class.
newObject: represents the newly created object
property: indicates the existing object property
objectValue: specifies the value that is assigned to the object.

Example

An example is provided for creating an object with the constructor method in JavaScript. For this purpose, the code is as follows:

Code

// An example of creating an object using Constructor

function Class(name, subject) {

this.name = name;

this.subject = subject;

}

let teacher1 = new Class('John', 'Math');

let teacher2 = new Class('Harry', 'Physics')

console.log(teacher1.name);

console.log(teacher2.name);

In this code:

A constructor is called by passing the property name and subject.
After that, two objects are created with the names of teacher1 and teacher2.
The different values are assigned to them by calling the constructor.

Output

The output returns the names John and Harry that are associated with the properties of teacher1 and teacher2.

Method 3: Creating an Object Using the Class in JavaScript

The new version of JavaScript ES6 supported the concept of class. Creating the object by utilizing the class is quite like the above constructor method. However, the methods are replaced with the classes by providing the functionalities in the ES6 version in JavaScript. The syntax to create this method is provided below:

Syntax

Class className{

constructor(property) {

this.property = property;}}

let newObject= new className('objectValue');

In the above syntax:

The className specifies the name of the class.
After that, the property is passed to the constructor.
In the end, the objectValue is assigned to the newObject variable in JavaScript.

Example

An example of creating an object is demonstrated by utilizing the class in JavaScript.

Code

// An example of creating an object using Classes

class Teacher {

constructor(name, subject, haircolor) {

this.name = name;

this.subject = subject;

this.haircolor = haircolor;

}

let teacher1 = new Teacher('Ali', 'Physics', 'black');

let teacher2 = new Teacher('John', 'Math', 'brown');

console.log(teacher1.name);

console.log(teacher2.subject);

In this code:

The class Teacher is defined in three properties: name, subject and haircolor.
Furthermore, two objects are created: teacher1 and teacher2.
Afterwards, different values are assigned to teacher1 and teacher2 objects.
Finally, present the information with the console.log() method in JavaScript.

Output

The output shows the execution of the above code in such a way that object teacher1 returns the name property Ali. In the same way, the subject property of object teacher2 is returned by utilizing the dot operator in JavaScript.

Method 4: Creating an Object Using the new Keyword in JavaScript

This method refers to creating an object using the new keyword in JavaScript. The dot operator is utilized to create the properties of new objects. After that, values are assigned to them. It is also a commonly used method to create objects in JavaScript. To better understand the new keyword, an example is provided here.

Example

The example is demonstrated by creating an object teacher in JavaScript.

Code

// An example of creating an object using new keyword

var teacher = new Object();

teacher.firstName = "Ali";

teacher.lastName = "Ahmed";

teacher.subject = "Math";

teacher.age = 35;

teacher.hairColor = "brown";

console.log(teacher.firstName);

console.log(teacher.age);

console.log(teacher.subject);

In this code, the description is as follows:

An object teacher is created with a new keyword.
After that, firstName, lastName, subject, age, and hairColor properties are defined with the dot operator.
Different values are assigned to these properties.
In the end, the object properties are displayed using the console.log() method.

Output

The output displays the execution of the code by utilizing the new keyword in JavaScript. First, the teacher.Name returned the name of teacher Ali. Similarly, teacher.age and teacher.subject is utilized to display the age and subject of the teacher in JavaScript.

Conclusion

The four different ways are demonstrated for creating objects in JavaScript, including object literals, constructor methods, classes, and the new keyword. Firstly, the object literal is used for creating an object by the name-value pairs. The constructor method is employed to initialize an object and assign values based on its existing properties. Furthermore, classes are adapted to create objects and display their properties by assigning values to them. In the end, the keyword new is utilized to create a single object at a time and present it in the console window.

Source: linuxhint.com