This chapter will show the CRUD operations on a JavaScript object. The operations are Create, Read, Update, and Delete. We can create, modify, take input, and delete objects with these actions. A JavaScript object consists of a collection of keys, values, or properties/attributes, and entries. Values can be any type of data, including arrays, JavaScript functions, and more.
CRUD Operations
Create, read, update, and delete is what CRUD stands for. These are permanent storage’s four primary purposes. Also, any function that is carried out in relational database applications and translated to a typical HTTP method, SQL statement, or DDS action can be denoted by any letter in the acronym.
- CREATE Operations: To create a new record, execute the INSERT statement.
- READ the Steps: Uses the primary keynoted in the input parameter to read the table records.
- UPDATE Procedures: Uses the primary key that has been specified for a record in the WHERE clause of the statement to execute a UPDATE statement on the table.
- DELETE processes: Removes a specific WHERE clause row.
Syntax
Here is the syntax for using CRUD operations in JavaScript −
// Creating an Objectconst circle ={ radius:10,area:function(){return Math.PI*this.radius *this.radius;}};
CREATE Operation
This operation is the process of creating an object or giving it with a new property. The following methods can be used to generate the object:
- Using Object Constructor: This function allows you to create and initialize an object. The return value is assigned to a variable. The variable has a reference to the new object.
- Using object literals: Making use of object literals Use a list of key-value pairs separated by a comma (“,” to build an object).
Syntax
Here is the syntax for create operation in Javascript −
// Using Object Constructorconst obj =newObject();// Using Object Literalsconst obj ={ key1 : value1 }
Example
In the below example we will create an object with the help of the above two methods.
const box ={ height:25, breadth:20,volume:function(){returnthis.height *this.breadth;}};const cube =newObject(); cube.edge =10; cube.volume=function(){returnthis.edge *this.edge;}; cube.edge =15; console.log(box,"Volume of the box: "+ box.volume()); console.log(cube,"Volume of the cube: "+ cube.volume());
Output
This will produce the below result −
{ height: 25, breadth: 20, volume: [Function: volume] } Volume of the box: 500 { edge: 15, volume: [Function (anonymous)] } Volume of the cube: 225
Read Operation
The read operation is the process of reading and accessing the values and properties of an object. The methods listed below can be used −
- Using Destructuring Assignment: To unpack object values and allocate them to other variables in JavaScript, use the syntax known as “using destructuring assignment.”
- Using Dot Notations: Making use of Dot Notations this syntax makes it possible to access the object attributes and items by using a [dot] or “.” symbol.
- Using Bracket Notation: The property name enclosed in brackets “[ ]” can be retrieved from the object property using Bracket Notation.
Syntax
Below is the syntax for Read operation in Javascript −
// Using dot notation console.log(obj.prop1)// For Nested objects console.log(obj.prop1.subProperty)// Using Square Brackets console.log(obj['prop2'])// Using Object Destructuringconst{ key1 }= obj1; console.log(key1);
Example
In the below example we will use another methods for reading the object property values.
// Creating a new object const box ={ height:25, width:20,volume:function(){returnthis.height *this.width;}};const{ height }= box; console.log("Box height: "+ height); console.log("Box width: "+ box['width']); console.log("Box volume: "+ box.volume());
Output
This will generate the following output −
Box height: 25 Box width: 20 Box volume: 500
Update Operation
It shows that you can see and change an object’s properties. These methods can be used −
- Using Destructuring Assignment: To unpack object values and allocate them to other variables in JavaScript, use the syntax known as “using destructuring assignment.”
- Using Dot Notations: Making Use of Dot Notations this syntax makes it possible to access the object attributes and items by using a [dot] or “.” symbol.
Syntax
Below is the syntax for Update operation in Javascript −
// Using dot notation obj.prop1 ="newValue";// Using brackets obj['prop2']="value2";
Example
This example shows the manipulation of the Object properties and their related values.
const box ={ height:25, depth:20,volume:function(){returnthis.height *this.depth;}};// Display Initial Volume console.log("Initial Volume: "+ box.volume());// Update Values // Using dot notation box.height =50;// Using brackets notation box['depth']=40;// Display Updated Volume console.log("Updated Volume: "+ box.volume());
Output
This will generate the below result −
Initial Volume: 500 Updated Volume: 2000
Delete Operation
A delete operation is the process of removing an object property. Below is one method for doing it −
- Using the Delete operator: The Delete keyword is used to remove the object property that comes after it.
- Using Destructuring Assignment: To unpack object values and allocate them to other variables in JavaScript, use the syntax known as “using destructuring assignment.”
Syntax
Here is the syntax for Delete operation in Javascript −
// Using delete operatordelete obj.property // Using destructuringconst{prop1, newObj}= oldObj;
Example
In this example we will describe the deletion of the Object and its associated properties and values.
const person ={ firstName:'Amit', yearsOld:52, location:'mumbai'};// Display original person object console.log("Initial person object: ", person);// Using destructuring const{ yearsOld,...updatedPerson }= person; console.log("New person object without yearsOld attribute: ", updatedPerson);// Using delete operator delete person.location; console.log("Person object after removing location: ", person);
Output
This will create the below outcome −
Initial person object: { firstName: 'Amit', yearsOld: 52, location: 'mumbai' } New person object without yearsOld attribute: { firstName: 'Amit', location: 'mumbai' } Person object after removing location: { firstName: 'Amit', yearsOld: 52 }
Leave a Reply