|
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;
}
}
- 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
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;
}
}
console.log("Original Area: " + rectangle.area());
rectangle.length = 50;
rectangle['width'] = 40;
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'
}
console.log("Original object: ", obj);
const { age, ...newObj } = obj;
console.log("New object without age attribute: ", newObj);
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 }
|
