Introduction to Object Manipulation

In JavaScript, objects are fundamental data structures that store collections of key-value pairs. Object manipulation refers to the processes of creating, accessing, modifying, and deleting properties and methods of these objects. Understanding object manipulation is crucial for effective JavaScript programming, as it allows you to work with data in a structured and dynamic way.

What is Object Manipulation?

Object manipulation involves interacting with the properties and methods of an object after it has been created. This includes:

• Adding properties: Dynamically adding new key-value pairs to an existing object.
• Removing properties: Deleting key-value pairs from an object.
• Updating properties: Changing the value associated with a specific key in an object.
• Adding methods: Defining functions (methods) and associating them with an object.
• Removing methods: Removing a method from an object.
• Updating methods: Changing the implementation of a method in an object.

Techniques for Object Manipulation

Adding Properties

You can add properties to an object using dot notation or bracket notation.

 // Using dot notation
const myObject = {};
myObject.name = "John Doe";
myObject.age = 30;

// Using bracket notation (useful when the property name is a variable or contains spaces)
const propertyName = "city";
myObject[propertyName] = "New York";

console.log(myObject); // Output: { name: 'John Doe', age: 30, city: 'New York' } 

Removing Properties

The delete operator is used to remove properties from an object.

 const myObject = { name: "John Doe", age: 30, city: "New York" };
delete myObject.age;

console.log(myObject); // Output: { name: 'John Doe', city: 'New York' } 

Updating Properties

You can update the value of an existing property using dot notation or bracket notation, similar to adding properties.

 const myObject = { name: "John Doe", age: 30, city: "New York" };
myObject.age = 35; // Using dot notation
myObject["city"] = "Los Angeles"; // Using bracket notation

console.log(myObject); // Output: { name: 'John Doe', age: 35, city: 'Los Angeles' } 

Adding Methods

Methods are functions that are properties of an object. You can add methods in several ways.

 const myObject = {
    name: "John Doe",
    greet: function() { // Anonymous function assigned as a method
        console.log("Hello, my name is " + this.name);
    }
};

myObject.greet(); // Output: Hello, my name is John Doe

//Using ES6 method definition syntax
const myObject2 = {
    name: "Jane Smith",
    greet() { // Shorthand method definition
        console.log("Hi, I am " + this.name);
    }
}
myObject2.greet(); //Output: Hi, I am Jane Smith 

Removing Methods

You can remove methods using the delete operator, just like removing properties.

 const myObject = {
    name: "John Doe",
    greet: function() {
        console.log("Hello, my name is " + this.name);
    }
};

delete myObject.greet;

console.log(myObject.greet); // Output: undefined 

Updating Methods

You can update methods by re-assigning a new function to the method name.

 const myObject = {
    name: "John Doe",
    greet: function() {
        console.log("Hello, my name is " + this.name);
    }
};

myObject.greet = function() {
    console.log("Greetings!  I am " + this.name);
}

myObject.greet(); //Output: Greetings! I am John Doe