How to Perform CRUD Operations on JavaScript Object ?

This article will demonstrate the CRUD Operations on a JavaScript Object. The operations are Create, Read, Update, and Delete. With these operations, we can create, take input, manipulate & destroy the objects.

JavaScript Objects are a collection of keys, values or properties/attributes, and entries. The values can be any data type as well as JavaScript functions, arrays, etc.

Syntax

// Creating an Object
const rectangle = {
    length: 25,
    width: 20,
    area: function(){
        return this.length*this.width;
    }
}

CRUD operations in JavaScript Objects

• Create: Create a new object or add an object property to an existing object.
• Read: Read any object existing property property
• Update: Update or modify an object or the attribute values.
• Delete: Delete or remove an entry from an object or the whole object.

We will explore each operation & will understand the associated different methods available in JavaScript to accomplish this task.

Create Operation

This operation refers to the creation of an object or adding a new property to it. The following methods can be used to create the Object: 

• Using Object Constructor: It is a function that is used to create and initialize an object. The return value is assigned to a variable. The variable contains a reference to the new object.
• Using Object literals: It is the list of key-value pairs separated by a comma “, “ for creating an object.

Syntax

// Using Object Constructor
const obj = new Object();

// Using Object Literals
cosnt obj = {
    key1 : value1
}

Example: In this example, we will create an object using the above two methods.

Javascript

const rectangle = {
    length: 25,
    width: 20,
    area: function () {
        return this.length * this.width
    }
}
const square = new Object();
square.side = 10;
square.area = function () {
    return this.side * this.side
};
square.side = 20;
console.log(rectangle, "area: " + rectangle.area());
console.log(square, "area: " + square.area());

Output

{ length: 25, width: 20, area: [Function: area] } area: 500
{ side: 20, area: [Function (anonymous)] } area: 400

Read Operation

The read operation refers to reading and accessing the properties and values of an object. It can be done using the following methods:

• Using Destructuring Assignment: It refers to the JavaScript syntax for unpacking the object values and assigning them to other variables.
• Using Dot Notations: This syntax allows to access the object properties and items using a [dot] or “. ” symbol.
• Using Bracket Notation: It allows to access the object property using the property name inside the brackets “[ ]”

Syntax

console.log(obj.property1)                           // Usign dot notation
console.log(obj.property1.subProperty)    // For Nested objects
console.log(obj['property2'])                       // Using Square Brackets 
const { key1 } = obj1;                                      // Using Object Destructuring
console.log(key1);

Example: In this example, we will use different methods to read object property values.

Javascript

// Creating new object
const rectangle = {
    length: 25,
    width: 20,
    area: function () {
        return this.length * this.width
    }
}

const { length } = rectangle
console.log("Rectangle length: " + length);
console.log("Rectangle width: " + rectangle['width']);
console.log("Rectangle area: " + rectangle.area());

Output

Rectangle length: 25
Rectangle width: 20
Rectangle area: 500

Update Operation

It means to access and modify an object’s properties. It can be done using these methods:

• Using Destructuring Assignment: It refers to the JavaScript syntax for unpacking the object values and assigning them to other variables.
• Using Dot Notations: This syntax allows to access the object properties and items using a [dot] or “. ” symbol.

Syntax

obj.property1 = "newValue";             // Using dot notation
obj['property2'] = "value2";              // Using brackets

Example: This example describes the manipulation of the Object properties & their associated values.

Javascript

const rectangle = {
    length: 25,
    width: 20,
    area: function () {
        return this.length * this.width;
    }
}

// Display Initial Area
console.log("Original Area: " + rectangle.area());

// Update Values
rectangle.length = 50;             // Usign dot notation
rectangle['width'] = 40;           // Usign brackets

// Display Updated Area
console.log("Original Area: " + rectangle.area());

Output

Original Area: 500
Original Area: 2000

Delete Operation

Delete operation refers to the removal of an object property. It can be done as follows:

• Using Delete operator: Delete keyword is used to remove the object property mentioned after it.
• Using Destructuring Assignment: It refers to the JavaScript syntax for unpacking the object values and assigning them to other variables.

Syntax

delete obj.propety  or  delete obj['property']        // Using delete operator
const {property1, newObj} = oldObj;                      // Using destructuring

Example: This example describes the deletion of the Object & its associated properties & values.

Javascript

const obj = {
    name: 'xyz',
    age: 52,
    city: 'delhi'
}


// Display original object
console.log("Original object: ", obj);

// Using destructuring
const { age, ...newObj } = obj;
console.log("New object without age attribute: ", newObj);


// Using delete operator
delete obj.city;
console.log("Original object after deleting city: ", obj);

Output

Original object:  { name: 'xyz', age: 52, city: 'delhi' }
New object without age attribute:  { name: 'xyz', city: 'delhi' }
Original object after deleting city:  { name: 'xyz', age: 52 }