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

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:

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