Creating objects in JavaScript

Introduction

Let us start our discussion with what an object in JavaScript is. So, an object is basically a collection of related data.  An object can contain all forms of primitive data types. They are structured as key-value pairs (name and value separated by a colon) and are put inside the figure { } brackets.
Here is an example for your reference.

let person = {
    name : "George",
    Weight : 65,
    Height : 172
}

Creating Objects

In JavaScript, we can define and create our own objects. There are quite a many ways to create objects in JavaScript. Let’s go through all of them.

1) Object literals

This is one of the most simple ways of creating an object. We just define the property and values inside curly braces and assign them to a variable which in turn represents the object. Here’s a simple example –

let person = {
    name : "George",
    weight : 65,
    height : 172
}
console.log(person.name)

Output:

George

We can also add more properties to an object which is already defined. Let us add a gender property to our ‘person’ object.

let person = {
    name : "George",
    weight : 65,
    height : 172
}
person.gender = "male"
console.log(person)

Output:

name : "George"
weight : 65
height : 172
gender : "male"

2) Using Object.create()

The Object.create() method helps to create a new object. It takes an existing object as an argument and uses this object as a part of the new object’s prototype. Let us understand it with the help of an example

const organization = { company: "Codedamn" };
const employee = Object.create(organization, { name: { value: 'George' } });
console.log(employee);
console.log(employee.name);

Output:

company: "Codedamn"
"George"

Note that the organisation object is not printed in the output. This is because it is a part of the prototype of the new object. You may go ahead and run this code snippet in the browser’s console. The organisation object data will be visible when you expand the prototype in the output.

We can also use the method Object.assign() to create a new object in JavaScript. It takes a variable number of objects as parameters. The first argument represents the ‘target’ object and the rest of the arguments represent the ‘source’ objects. So, it copies the data from all the source objects to the target object. At last, the Object.assign() method returns the target object’s value. Let us look at the following example.

const organization = { company: "Codedamn" };
const name = { Name: "George" };
const targetObject = {};
const employee = Object.assign(targetObject, organization, name);
console.log(targetObject);
console.log(employee);

Output:

{ Name: "George", Company: "Codedamn" }
{ Name: "George", Company: "Codedamn" }

3) Using the keyword new

We can use the new keyword pattern in two ways. Let us first see the case wherein we use the new keyword with an in-built object constructor function.

const person = new Object();
person.name = "George"
person.height = 172
person.weight = 65

Next, we can also use the new keyword with a user-defined constructor function. Let us see it in an example.

function Person( height, weight ) {
  this.height = height;
  this.weight = weight;
}

Now, whenever we need this object, we can do this

const personOne = new Person(170, 80);
const personTwo = new Person(180, 75);

4) Using ES6 classes

We can create an object from a class in JavaScript. This is similar to how we use the ‘new’ keyword with a user-defined constructor function. Let us see it in an example

class employee { 
  constructor(name, height, weight) { 
    this.name = name; 
    this.height =  height; 
    this.weight = weight; 
  } 
} 
let employee1 = new employee('George', 172, 65); 
console.log(employee1.name);
console.log(employee1.height);
console.log(employee1.weight);

Output:

George
172
65

This is all about creating an object in JavaScript. If you wish to learn Javascript, dive into the articles and courses at Codedamn. Codedamn has a browser in-built environment for various playgrounds to both learn and practice code. Join our discord community and never miss out on any new programs and updates.
Also, feel free to post any of your queries in the comment section!