In using JavaScript, you will inevitably come across 'Objects' on a regular basis. Assuming you already possess a basic understanding on how to actually create them, it will also be important to understand how to modify them. In an effort to ease comprehension of the subject, I will flesh out each of the three main methods of object modification individually.
Modifying Objects with Dot or Bracket Notation
This method is especially convenient when adding properties to an 'Object'. Let's say we find ourselves in front of an empty 'Object'.
const city = {};
And let's say we want to fill in this currently empty object with information. We could do so, very simply, using dot or bracket notation:
const city = {};
city.name = 'New York';
city['population'] = '8 million';
Now while the ways in which I added the name and the population of the city may seem different, their outcome is exactly the same. They both create a 'key' within the 'Object' and assign it a value using the assignment operator.
Now, if we call our object it will display all the information that we attached to it in the step above.
const city = {};
city.name = 'New York';
city['population'] = '8 million';
city.state = 'New York';
city;
//=> { name: New York, population: 8 million, state: New York };
Now let's say we realize we made a mistake and we want to change on the values of our object. We can do so using the same methods of bracket and dot notation.
city['name'] = 'Los Angeles';
city.population = '3.8 million';
city.state = 'California';
What this will do is go into our 'Object' and modify the values as we told it to do. It is important to note however, that modifying objects with this method does so destructively. Therefore when we call our 'city' it will no longer return the values we initially assigned.
city;
//=> { name: Los Angeles, population: 3.8 million, state: California };
Now lets say we wanted to showcase an increase in our city's population size by comparing it to what it was in the past without having to rewrite all of the data we already wrote.
Modifying Objects using the Spread Operator
Much like how we do with 'Arrays', we can use the spread operator to copy all elements of an existing 'Object' into a new one. So let's create a new 'city' to show Los Angeles' population from a century ago.
const oldCity = {...city};
At this point all we have done is create an exact copy of our 'Object'. From here we can modify our new 'Object' using the methods learned above. Using this method will leave our original 'city' unchanged, so we will still be able to call it and see the values we assigned it above.
oldCity.population = '575 thousand';
oldCity;
//=> { name: Los Angeles, population: 575 thousand, state: California };
city;
//=> { name: Los Angeles, population: 3.8 million, state: California };
As you can see, our original 'city' remained intact, and we were able to modify a value of our 'oldCity' without having to rewrite all its other properties.
Removing Properties from an Object
The final topic I'd like to touch on with regards to object modification is how to remove one of its properties.
Let's say we no longer want to include the state of our 'city'. All we have to do is tell JavaScript to delete that property.
city;
//=> { name: Los Angeles, population: 3.8 million, state: California };
delete city.state;
city;
//=> { name: Los Angeles, population: 3.8 million };
Conclusion
Objects are very useful, versatile, and above all, common in JavaScript. Knowing how to modify them is just as important. My hope is that this blog helped the reader gain even just an ounce more clarity on the topic of Object Modification.
Top comments (0)