Manipulating Complex Objects in JavaScript

JavaScript is one of the most popular and widely used programming languages for web development. It allows for the creation of complex objects that can be manipulated in a variety of ways. In this tutorial, we will discuss how to manipulate complex objects in JavaScript.

Creating Complex Objects

Before we can manipulate complex objects, we must first learn how to create them. To create a complex object, we can use the JavaScript Object Notation (JSON). JSON provides a standardized way to represent objects and their properties. Here is a basic example of a JSON object:

[dm_code_snippet background=”yes” background-mobile=”yes” slim=”no” line-numbers=”no” bg-color=”#abb8c3″ theme=”dark” language=”php” wrapped=”no” height=”” copy-text=”Copy Code” copy-confirmed=”Copied”]

 
{
    "name": "Bob",
    "age": 35,
    "address": {
        "street": "123 Main St",
        "city": "New York",
        "state": "NY"
    }
}

[/dm_code_snippet]

This object has three properties: name, age, and address. The address property is an object itself, containing three properties: street, city, and state. This is an example of a complex object in JSON.

Accessing Properties of an Object

Once an object is created, we can access its properties using dot notation. Dot notation is a way to access an object’s properties using the object’s name followed by a period and the property name. For example, if we wanted to access the name property of the object above, we would write:

[dm_code_snippet background=”yes” background-mobile=”yes” slim=”no” line-numbers=”no” bg-color=”#abb8c3″ theme=”dark” language=”php” wrapped=”no” height=”” copy-text=”Copy Code” copy-confirmed=”Copied”]

let name = object.name;

[/dm_code_snippet]

This would assign the value of the name property to the variable name. We can also use dot notation to access nested properties. To access the street property of the address object, we would write:

[dm_code_snippet background=”yes” background-mobile=”yes” slim=”no” line-numbers=”no” bg-color=”#abb8c3″ theme=”dark” language=”php” wrapped=”no” height=”” copy-text=”Copy Code” copy-confirmed=”Copied”]

let street = object.address.street;

[/dm_code_snippet]

Modifying Properties of an Object

Once we have access to an object’s properties, we can modify them as needed. To modify a property, we simply assign a new value to it using the assignment operator. For example, to modify the age property of our object, we would write:

[dm_code_snippet background=”yes” background-mobile=”yes” slim=”no” line-numbers=”no” bg-color=”#abb8c3″ theme=”dark” language=”php” wrapped=”no” height=”” copy-text=”Copy Code” copy-confirmed=”Copied”]

object.age = 36;

[/dm_code_snippet]

This would change the age property from 35 to 36. We can also use dot notation to modify nested properties. For example, to change the city property of our object’s address, we would write:

[dm_code_snippet background=”yes” background-mobile=”yes” slim=”no” line-numbers=”no” bg-color=”#abb8c3″ theme=”dark” language=”php” wrapped=”no” height=”” copy-text=”Copy Code” copy-confirmed=”Copied”]

object.address.city = "Newark";

[/dm_code_snippet]

Adding New Properties to an Object

We can also add new properties to an object. To do this, we use the assignment operator to assign a value to a property that does not already exist. For example, to add a new property called “phone number” to our object, we would write:

[dm_code_snippet background=”yes” background-mobile=”yes” slim=”no” line-numbers=”no” bg-color=”#abb8c3″ theme=”dark” language=”php” wrapped=”no” height=”” copy-text=”Copy Code” copy-confirmed=”Copied”]

object.phoneNumber = "123-456-7890";

[/dm_code_snippet]

This would add the phoneNumber property to the object with the value of “123-456-7890”.

Deleting Properties from an Object

Finally, we can delete properties from an object using the delete operator. For example, to delete the phoneNumber property from our object, we would write:

[dm_code_snippet background=”yes” background-mobile=”yes” slim=”no” line-numbers=”no” bg-color=”#abb8c3″ theme=”dark” language=”php” wrapped=”no” height=”” copy-text=”Copy Code” copy-confirmed=”Copied”]

delete object.phoneNumber;

[/dm_code_snippet]

This would delete the phoneNumber property from the object.

Conclusion

In this tutorial, we discussed how to manipulate complex objects in JavaScript. We learned how to create complex objects using JSON, how to access and modify properties of an object, and how to add and delete properties from an object. With this knowledge, you will be able to effectively manipulate complex objects in JavaScript.