Duplicate the array of objects and make alterations without affecting the original array

Question

Duplicate the array of objects and make alterations without affecting the original array

I have an array of objects that I need to deep copy and make modifications to each object without altering the original array or its contents. Here is my approach in JavaScript, but I am open to suggestions on a better method.

const users = 
[
    {
        id       : 1,    
        name     : 'Jack',
        approved : false
    },
    {
        id       : 2,    
        name     : 'Bill',
        approved : true
    },
    {
        id       : 3,    
        name     : 'Rick',
        approved : false
    },
    {
        id       : 4,    
        name     : 'Rick',
        approved : true
    }
];


const users2 = 
    users
        .map(
            (u) => 
            {
                return Object.assign({}, u);
            }
        )    
        .map(
            (u) => 
            {
                u.approved = true;
                return u;
            }
        );    


console.log('New users2 array of objects:')
console.log(users2);

console.log('The original users array remains untouched:')
console.log(users);

Output:

New users2 array of objects:
[ { id: 1, name: 'Jack', approved: true },
  { id: 2, name: 'Bill', approved: true },
  { id: 3, name: 'Rick', approved: true },
  { id: 4, name: 'Rick', approved: true } ]
The original users array remains untouched:
[ { id: 1, name: 'Jack', approved: false },
  { id: 2, name: 'Bill', approved: true },
  { id: 3, name: 'Rick', approved: false },
  { id: 4, name: 'Rick', approved: true } ]

javascript arrays ecmascript-6 immutability

Answer 1

Answer №1

One way to achieve this in a single pass is by utilizing Object.assign with the updated property.

const users = [{ id: 1, name: 'Jack', approved: false }, { id: 2, name: 'Bill', approved: true }, { id: 3, name: 'Rick', approved: false }, { id: 4, name: 'Rick', approved: true }];
const users2 = users.map(u => Object.assign({}, u, { approved: true }));

console.log(users2);
console.log(users);

.as-console-wrapper { max-height: 100% !important; top: 0; }

Alternatively, you can update using spread properties like so:

const users = [{ id: 1, name: 'Jack', approved: false }, { id: 2, name: 'Bill', approved: true }, { id: 3, name: 'Rick', approved: false }, { id: 4, name: 'Rick', approved: true }];
const users2 = users.map(u => ({ ...u, approved: true }));

console.log(users2);
console.log(users);

.as-console-wrapper { max-height: 100% !important; top: 0; }

Answer 2

One way to achieve this in a single pass is by utilizing Object.assign with the updated property.

const users = [{ id: 1, name: 'Jack', approved: false }, { id: 2, name: 'Bill', approved: true }, { id: 3, name: 'Rick', approved: false }, { id: 4, name: 'Rick', approved: true }];
const users2 = users.map(u => Object.assign({}, u, { approved: true }));

console.log(users2);
console.log(users);

.as-console-wrapper { max-height: 100% !important; top: 0; }

Alternatively, you can update using spread properties like so:

const users = [{ id: 1, name: 'Jack', approved: false }, { id: 2, name: 'Bill', approved: true }, { id: 3, name: 'Rick', approved: false }, { id: 4, name: 'Rick', approved: true }];
const users2 = users.map(u => ({ ...u, approved: true }));

console.log(users2);
console.log(users);

.as-console-wrapper { max-height: 100% !important; top: 0; }

Answer 3

Answer №2

Absolutely, that approach seems efficient. Another suggestion could be implementing the modification during the cloning process to prevent iterating over the array multiple times.

const updatedUsers = users.map((user) => {
    const copiedUser = Object.assign({}, user);
    copiedUser.approved = true;
    return copiedUser;
});

Answer 4

Absolutely, that approach seems efficient. Another suggestion could be implementing the modification during the cloning process to prevent iterating over the array multiple times.

const updatedUsers = users.map((user) => {
    const copiedUser = Object.assign({}, user);
    copiedUser.approved = true;
    return copiedUser;
});

Answer 5

Answer №3

My go-to method is using JSON.stringify and JSON.parse for deep copying arrays.

const people = [ { id: 1, name: 'Alice', active: true },
{ id: 2, name: 'Bob', active: false },
{ id: 3, name: 'Charlie', active: true } ];

// Create a deep copy of the people array
const copiedPeople = JSON.parse(JSON.stringify(people));

Answer 6

My go-to method is using JSON.stringify and JSON.parse for deep copying arrays.

const people = [ { id: 1, name: 'Alice', active: true },
{ id: 2, name: 'Bob', active: false },
{ id: 3, name: 'Charlie', active: true } ];

// Create a deep copy of the people array
const copiedPeople = JSON.parse(JSON.stringify(people));

Answer 7

Answer №4

If you need to copy an array in javascript, there are a few popular methods that can be used:

slice()
Array.from()

The slice method allows you to create a new array by extracting a portion or the entire content of an existing array based on specified begin and end indexes (both optional):

const a = [1,2,3,4,5,6,7,8,9]
/*
* Using only begin index
*/
const b = a.slice(2)
console.log(b) //Output: [3,4,5,6,7,8,9]
/*
* Using both begin and end indexes
*/
const c = a.slice(5,8)
console.log(c) //Output: [6,7,8]
/*
* No indexes provided
*/
const d = a.slice()
console.log(d) //Output: [1,2,3,4,5,6,7,8,9]

The Array.from() function is another useful method for creating a new array from array-like or iterable elements.

const a = Array.from('bar');
console.log(a) //Output: ["b","a","r"]
const b = ["for","bar"];
const c = Array.from(b);
console.log(c) //Output:  ["for","bar"]

Learn more about slice method

Explore Array.from() further

Answer 8

If you need to copy an array in javascript, there are a few popular methods that can be used:

slice()
Array.from()

The slice method allows you to create a new array by extracting a portion or the entire content of an existing array based on specified begin and end indexes (both optional):

const a = [1,2,3,4,5,6,7,8,9]
/*
* Using only begin index
*/
const b = a.slice(2)
console.log(b) //Output: [3,4,5,6,7,8,9]
/*
* Using both begin and end indexes
*/
const c = a.slice(5,8)
console.log(c) //Output: [6,7,8]
/*
* No indexes provided
*/
const d = a.slice()
console.log(d) //Output: [1,2,3,4,5,6,7,8,9]

The Array.from() function is another useful method for creating a new array from array-like or iterable elements.

const a = Array.from('bar');
console.log(a) //Output: ["b","a","r"]
const b = ["for","bar"];
const c = Array.from(b);
console.log(c) //Output:  ["for","bar"]

Learn more about slice method

Explore Array.from() further

Answer 9

Answer №5

When working with React JS, I experimented with various methods to copy and make changes to a new array, but unfortunately, each attempt resulted in modifying the original array instead. Despite trying techniques such as using slice, Array.from, for loop, and the spread operator, the issue persisted.

The breakthrough came when I realized that I could resolve this by first stringify the original array and then storing it in a new variable. By subsequently parse the variable, I was able to obtain a fresh copy of the array without any reference complications, as advised by @Roman Yakoviv in a previous post.

Answer 10

When working with React JS, I experimented with various methods to copy and make changes to a new array, but unfortunately, each attempt resulted in modifying the original array instead. Despite trying techniques such as using slice, Array.from, for loop, and the spread operator, the issue persisted.

The breakthrough came when I realized that I could resolve this by first stringify the original array and then storing it in a new variable. By subsequently parse the variable, I was able to obtain a fresh copy of the array without any reference complications, as advised by @Roman Yakoviv in a previous post.

Duplicate the array of objects and make alterations without affecting the original array

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

What is the best way to run a lengthy task in Node.js by periodically checking the database for updates?

Gradient on multiple faces in Three.js

Automatically load content using AJAX when scrolling within a HTML5 segment

Encountered an error in AWS Lambda (Node 14.x): SyntaxError - Unexpected token 'export'

What is the best way to create an `isHook` function in my code?

Data is not found in req.body when making a fetch request

Is the iCheck feature designed to block all parent click events?

Removing all Null Form Inputs from the Document Object Model upon Submission utilizing JavaScript

HMR: The webpack-hot-middleware is not refreshing my webpage

Prevent postback when clicking on an image button in ASP

Verify whether a specific value exists in my React array; if it does, display a specific component

Sharing information between External JavaScript and React JS/Redux

Steps for including an animation class in a div

Encountered an issue while trying to add images and text simultaneously in asp.net

Is it possible for Jquery to directly retrieve the form input without the need for a SET button in the script?

Utilize Object by referencing a string

React displaying an error indicating that the setTimeout function is undefined?

Tips for retrieving the HTML file of a modified canvas in HTML5

Issues with the visibility of React Bootstrap components

Is there a way to display points on each vertex of my geometry using React, three.js, and Three-React-fiber?