How to Move a Key in an Array of Objects using JavaScript?

Last Updated : 18 Jul, 2024

The JavaScript array of objects is a type of array that contains JavaScript objects as its elements.

You can move or add a key to these types of arrays using the below methods in JavaScript:

Table of Content

Using Object Destructuring and Map()

This method uses the map() function along with object destructuring to generate an array of objects with the current key at a new place.

Example: The below code implements the above-discussed methods to move a key in an array of objects.

JavaScript

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, ind) => (
        { 
            ...obj, 
            ['index']: ind 
        }));

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 }
]

Using forEach() method

Loop through every item in the array using the forEach() method, and do it for every item move the key to the desired place.

Example: The below code implements the above-discussed methods to move a key in an array of objects.

JavaScript

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, ind) => (
        newArray.push({ 
            ...obj, 
            ['index']: ind 
        })));

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 }
]

Using for...of Loop

Navigate every object in the array of objects using a for...of loop, and create another object that puts the key at the desired position for each object in the array.

Example: The below code implements the above-discussed methods to move a key in an array of objects.

JavaScript

const array = [
    {
        name: 'John',
        age: 30,
        gender: 'male'
    },
    {
        name: 'Alice',
        age: 25,
        gender: 'female'
    },
    {
        name: 'Bob',
        age: 35,
        gender: 'male'
    }
];

const newArray = [];
for (const [ind, obj] of
    array.entries()) {
    newArray.push(
        { 
            ...obj, 
            ['index']: ind 
        });
}

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 }
]

Using reduce() method

We can use the reduce() method to change the array of objects where the key will be moved to the required position within the objects.

Example: The below code implements the above-discussed methods to move a key in an array of objects.

JavaScript

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, ind) => {
        acc.push(
            {
                ...obj,
                ['index']: ind
            });
        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 }
]

Using for loop

The code moves a key within each object in an array by iterating with a `for` loop, checking for the old key, assigning its value to a new key, deleting the old key, and returning the modified array.

Example:

JavaScript

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' }
]

Using Object.assign() and Array.map()

In this approach, we use Object.assign() in combination with Array.map() to create a new array of objects with the key moved to the desired position. This method constructs a new object for each element in the array, ensuring immutability and preserving the original array.

Example: The below code demonstrates how to move a key in an array of objects using Object.assign() and Array.map().