. Advertisement .
..3..
. Advertisement .
..4..
There are several ways to add a key/value pair to all objects in array in JavaScript. Check them out with the examples below.
Add A Key/Value Pair To All Objects In Array In JavaScript
With For Loops
In this tutorial, we have this initial array of objects representing information about some programming websites.
let sites = [
{
'name': 'ITTutoria',
'domain': 'ittutoria.net'
},
{
'name': 'Stack Overflow',
'domain': 'stackoverflow.com'
},
{
'name': 'Quora',
'domain': 'quora.com'
}
]
console.log('Old array:\n', sites);
Output:
Old array:
[
{ name: 'ITTutoria', domain: 'ittutoria.net' },
{ name: 'Stack Overflow', domain: 'stackoverflow.com' },
{ name: 'Quora', domain: 'quora.com' }
Let’s say we want to add a new key type with value Q&A to every object in this array. The most straightforward solution is, of course, using a simple for loop to go through all objects inside the array and add a new key and value pair to them.
This is a program that implements that idea:
for (const object of sites) {
object.type = 'Q&A';
}
console.log('New array:\n', sites);
Output:
New array:
[
{ name: 'ITTutoria', domain: 'ittutoria.net', type: 'Q&A' },
{ name: 'Stack Overflow', domain: 'stackoverflow.com', type: 'Q&A' },
{ name: 'Quora', domain: 'quora.com', type: 'Q&A' }
]
When the for loop above stops at each object, it adds the key-value pair we want with a simple assignment operator. Keep in mind that this operation modifies the array directly.
With Array.forEach()
Array objects in JavaScript come with the forEach() method, which can execute a specified function for each element of an array. You can use it to modify all objects in our array and add a key-value pair to each of them.
sites.forEach(object => {
object.type = 'Q&A';
});
console.log('New array:\n', sites);
Output:
New array:
[
{ name: 'ITTutoria', domain: 'ittutoria.net', type: 'Q&A' },
{ name: 'Stack Overflow', domain: 'stackoverflow.com', type: 'Q&A' },
{ name: 'Quora', domain: 'quora.com', type: 'Q&A' }
]
In the example above, we use the forEach() method with an arrow function. It is a type of function in JavaScript, enabling a shorter way to create function expressions.
With Array.map()
In addition to forEach(), map() is another method of Array objects that call a function on all elements of the array. There is a crucial difference between them, however.
With forEach(), you can totally modify the array directly. This isn’t the case with map(), which creates a new array first and then populates its elements with results from the provided function.
As a result, you must pay attention to several things. First, your original array will be left intact, and you must assign the returned array of map() to a new array. On top of that, the function called by map() must return a value, which will be used to populate the new array.
This is how you can replace forEach() with map() in the above example:
const newsites = sites.map(object => {
return {...object, type: 'Q&A'};
});
console.log('New array:\n', newsites);
Output:
New array:
[
{ name: 'ITTutoria', domain: 'ittutoria.net', type: 'Q&A' },
{ name: 'Stack Overflow', domain: 'stackoverflow.com', type: 'Q&A' },
{ name: 'Quora', domain: 'quora.com', type: 'Q&A' }
]
Keep in mind that you shouldn’t use map() when you don’t plan to use the returned array or your callback function doesn’t return a value. In those cases, use for loops or the forEach() methods instead. You can also use map() to convert an array of objects to a map as we have shown here.
Summary
You can add a key/value pair to all objects in array in JavaScript with a simple for loop, which helps you modify each object when it goes through the array. JavaScript also provides two built-in methods that can do the same thing: forEach() and map().
Leave a comment