JavaScript objects have different properties in it.
You can add a property to an array of objects in JavaScript by iterating it over the array and adding a new element to each object.
This tutorial teaches you how to add a property to an array of objects in JavaScript and when it is appropriate to use each method.
Table of Contents
Using For Each
This section teaches you how to use the foreach() method to add a property to an array of objects.
ForEach() applies the defined function once to each element in the array.
To add a property to the objects,
- Use
foreach()and iterate over the array elements - During each iteration, add a new property to the object. You can assign a value or create new values based on the existing properties.
Use this method when you want to modify the objects in the same array instead of creating a new array.
Code
The following code demonstrates how to use the forEach() and add the new property called Fullname into each object.
const arr = [{
FirstName: 'Vikram',
LastName: 'A'
}, {
FirstName: 'Sakthi',
LastName: 'S'
}, {
FirstName: 'Frank',
LastName: 'H'
}];
arr.forEach((element) => {
element.FullName = element.FirstName + "_"+element.LastName;
});
console.log(arr)Output
[{
FirstName: "Vikram",
FullName: "Vikram_A",
LastName: "A"
}, {
FirstName: "Sakthi",
FullName: "Sakthi_S",
LastName: "S"
}, {
FirstName: "Frank",
FullName: "Frank_H",
LastName: "H"
}]Using Map
This section teaches you how to use the map() method to add a property to an array of objects.
The map() method creates a new array populated with the result of applying a defined function to every element in the array.
To add a property to the objects,
- Use
map()and iterate over the array elements - During each iteration, create a new object by expanding the existing object using the spread operator and additionally adding new properties.
- Assign the new array to a variable. This array will have new array objects with defined properties and a new property. Objects in these arrays will not have any reference to the objects in the existing array.
Use this method when you create a new array of objects with existing properties and a new property.
Code
The following code demonstrates how to use the map() method and add the new property called Fullname into each object and create a new array out of the result.
const arr = [{
FirstName: 'Vikram',
LastName: 'A'
}, {
FirstName: 'Sakthi',
LastName: 'S'
}, {
FirstName: 'Frank',
LastName: 'H'
}];
const updatedArray = arr.map((element) => ({
...element,
FullName: element.FirstName + "_" + element.LastName
}));
console.log(updatedArray);Output
[{
FirstName: "Vikram",
FullName: "Vikram_A",
LastName: "A"
}, {
FirstName: "Sakthi",
FullName: "Sakthi_S",
LastName: "S"
}, {
FirstName: "Frank",
FullName: "Frank_H",
LastName: "H"
}]