How to Move a Key in an Array of Objects Using JavaScript
In JavaScript, arrays of objects are a powerful data structure often used to store and manipulate complex data. Sometimes, you might need to move or rename a key within the objects in an array. This guide covers several methods to achieve this, complete with explanations and examples.
Table of Contents
- Using Object Destructuring and
map()
- Using
forEach()Method - Using
for...ofLoop - Using
reduce()Method - Using
forLoop - Using
Object.assign()andmap()
1. Using Object Destructuring and map()
This method leverages object destructuring and the map() function to iterate through the array, returning a new array of objects with the key moved or renamed.
Example:
const array = [
{ name: 'John', age: 30, gender: 'male' },
{ name: 'Alice', age: 25, gender: 'female' },
{ name: 'Bob', age: 35, gender: 'male' }
];
const newArray = array.map((obj, index) => ({
...obj,
index // Adding a new key
}));
console.log(newArray);
Output:
[
{ name: 'John', age: 30, gender: 'male', index: 0 },
{ name: 'Alice', age: 25, gender: 'female', index: 1 },
{ name: 'Bob', age: 35, gender: 'male', index: 2 }
]
2. Using forEach() Method
With forEach(), you can iterate through the array and create a new array of modified objects.
Example:
const array = [
{ name: 'John', age: 30, gender: 'male' },
{ name: 'Alice', age: 25, gender: 'female' },
{ name: 'Bob', age: 35, gender: 'male' }
];
const newArray = [];
array.forEach((obj, index) => {
newArray.push({ ...obj, index });
});
console.log(newArray);
Output:
[
{ name: 'John', age: 30, gender: 'male', index: 0 },
{ name: 'Alice', age: 25, gender: 'female', index: 1 },
{ name: 'Bob', age: 35, gender: 'male', index: 2 }
]
3. Using for...of Loop
The for...of loop can iterate over the array, allowing you to create and push modified objects into a new array.
Example:
const array = [
{ name: 'John', age: 30, gender: 'male' },
{ name: 'Alice', age: 25, gender: 'female' },
{ name: 'Bob', age: 35, gender: 'male' }
];
const newArray = [];
for (const [index, obj] of array.entries()) {
newArray.push({ ...obj, index });
}
console.log(newArray);
Output:
[
{ name: 'John', age: 30, gender: 'male', index: 0 },
{ name: 'Alice', age: 25, gender: 'female', index: 1 },
{ name: 'Bob', age: 35, gender: 'male', index: 2 }
]
4. Using reduce() Method
The reduce() method can be used to transform the array into a new one with the key moved or renamed.
Example:
const array = [
{ name: 'John', age: 30, gender: 'male' },
{ name: 'Alice', age: 25, gender: 'female' },
{ name: 'Bob', age: 35, gender: 'male' }
];
const newArray = array.reduce((acc, obj, index) => {
acc.push({ ...obj, index });
return acc;
}, []);
console.log(newArray);
Output:
[
{ name: 'John', age: 30, gender: 'male', index: 0 },
{ name: 'Alice', age: 25, gender: 'female', index: 1 },
{ name: 'Bob', age: 35, gender: 'male', index: 2 }
]
5. Using for Loop
A classic for loop can achieve the same result by manually iterating over the array and modifying each object.
Example:
const arr = [
{ id: 1, name: 'Geeks', age: 25 },
{ id: 2, name: 'Geek', age: 30 },
{ id: 3, name: 'Geeks1', age: 20 }
];
const moveKey = (arr, oldKey, newKey) => {
for (let i = 0; i < arr.length; i++) {
if (arr[i].hasOwnProperty(oldKey)) {
arr[i][newKey] = arr[i][oldKey];
delete arr[i][oldKey];
}
}
return arr;
};
const newArr = moveKey(arr, 'name', 'fullName');
console.log(newArr);
Output:
[
{ id: 1, age: 25, fullName: 'Geeks' },
{ id: 2, age: 30, fullName: 'Geek' },
{ id: 3, age: 20, fullName: 'Geeks1' }
]
6. Using Object.assign() and map()
This method combines Object.assign() with map() to move or rename keys immutably.
Example:
const moveKeyInArray = (arr, oldKey, newKey) => {
return arr.map(obj => {
const newObj = { ...obj };
if (oldKey in newObj) {
newObj[newKey] = newObj[oldKey];
delete newObj[oldKey];
}
return newObj;
});
};
const data = [
{ id: 1, name: 'John', age: 25 },
{ id: 2, name: 'Jane', age: 30 },
{ id: 3, name: 'Doe', age: 22 }
];
const result = moveKeyInArray(data, 'name', 'fullName');
console.log(result);
Output:
[
{ id: 1, age: 25, fullName: 'John' },
{ id: 2, age: 30, fullName: 'Jane' },
{ id: 3, age: 22, fullName: 'Doe' }
]
Conclusion
Choose the method that best suits your project requirements. For immutability, prefer map() or reduce(). For simpler use cases, the forEach() or for loop works just as well. By mastering these approaches, you can efficiently handle key manipulation in arrays of objects in JavaScript!
SOCIAL SHARE CARD GENERATOR