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.

{ 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.

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.

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.

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 }