Search for a command to run...
Using destructuring to update an object's attribute
No comments yet. Be the first to comment.
index.html : <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Workers</title> <script src="main.js"></script> </head> <body> 1 USD = <span...
Fetch the latest currency conversion rate using async ... await
Taking advantage of latest JavaScript features: ECMAScript 2024
Replacing deprecated event.target.selectedIndex with this.selectedIndex
JavaScript
12 posts
If you have an object like this :
const default_object = {
vehicle: 'car',
color: 'red',
make: 'Honda',
};
and want to update the color then we would simply do default_object.color = 'green'
Let's say we have an array of objects like this :
const objects = [];
and we push as in objects.push(default_object);
But what if you wanted to add the default_object and at the same time update the color of the newly pushed object? This is what is done to update the color attribute.
objects.push({ ...default_object, color: 'green' });
This is equivalent to this writing like this :
objects.push({ vehicle: 'car', color: 'red', make: 'Honda', color: 'green' });
Adding color attribute twice only overwrites the first added color. So green gets assigned to the color value.
In objects.push({ ...default_object, color: 'green' }); , ...default_object is destructured, meaning it's "expanded" to vehicle: 'car', color: 'red', make: 'Honda' and then color: 'green' is added to the object overwriting color: 'red' in the expansion.
const objects = [];
const default_object = {
vehicle: 'car',
color: 'red',
make: 'Honda',
};
console.log(objects);
objects.push(default_object);
console.log(objects);
objects.push({ vehicle: 'car', color: 'red', make: 'Honda', color: 'green' });
objects.push({ ...default_object, color: 'blue' });
console.log(objects);