JavaScript - SQL CRUD Operations

Quiz

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 Object
const 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 Constructor
const obj = new Object();

// Using Object Literals
const 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 () { 
       return this.height * this.breadth;
   } 
}; 

const cube = new Object(); 
cube.edge = 10; 
cube.volume = function () { 
   return this.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 Destructuring
const { 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 () { 
      return this.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 () { 
      return this.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 operator
delete obj.property  

// Using destructuring
const {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 }

Print Page