How to Perform CRUD Operations on a 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.
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.
Create Operation
You can append new key-value pairs to an existing object using dot notation or bracket notation.
Dot Notation: Best for standard, single-word keys.
Bracket Notation: Required if the key contains spaces, special characters, or is stored in a dynamic variable
`// Using dot notation
user.email = "alice@example.com";
// Using bracket notation
user["home address"] = "123 Main St"; `
2. Read (Access Properties)
Retrieve values by referencing their corresponding keys. If a key does not exist, it safely returns undefined.
`// Using dot notation
console.log(user.name); // Output: Alice
// Using bracket notation
console.log(user["home address"]); // Output: 123 Main St`
3. Update (Modify Properties)
Modify an existing property value by re-assigning it using its key. You can also use the spread operator (...) to shallowly merge updates into a new object
`// Direct modification
user.age = 26;
// Functional modification using the spread operator
const updatedUser = { ...user, age: 27, status: "active" };`
4. Delete (Remove Properties)
Remove a property entirely from an object using the delete operator. This deletes both the key and its value, returning the object to a state where accessing that key yields undefined.
`// Removes the email property, completely
deletes the user.email;
console.log(user.email); // Output: undefined`
Constructors in JavaScript: From Functions to Classes.
A constructor is a special function that creates and initializes an object instance of a class. In JavaScript, a constructor gets called when an object is created using the new keyword.
The purpose of a constructor is to create a new object and set values for any existing object properties.
What Happens When A Constructor Gets Called?
When a constructor gets invoked in JavaScript, the following sequence of operations take place:
A new empty object gets created.
The this keyword begins to refer to the new object and it becomes the current instance object.
The new object is then returned as the return value of the constructor.
Create Multiple Objects
In JavaScript, multiple objects can be created in a constructor:
`//Constructor
function User() {
this.name = 'Bob';
}
var user1 = new User();
var user2 = new User();`
Constructor with Parameters
A constructor can also have parameters:
`//Constructor
function User (name, age) {
this.name = name;
this.age = age;
}
var user1 = new User('Bob', 25);
var user2 = new User('Alice', 27);`
An object literal is typically used to create a single object, whereas a constructor is useful for creating multiple objects:
Constructor vs Object Literal
An object literal is typically used to create a single object, whereas a constructor is useful for creating multiple objects
Each object created using a constructor is unique. Properties can be added or removed from an object without affecting another one created using the same constructor. However, if an object is built using an object literal, any changes made to the variable that is assigned the object value will change the original object.
Top comments (0)