Steer clear of making changes to a JavaScript array

Question

Steer clear of making changes to a JavaScript array

Here is my code snippet:

let traces = { ref: null, min: null, max: null, avg: null };
let learning = {
    "Application": "b3",
    "t": [
        {
            "d": 2,
            "BinaryType": "Current"
        },
        {
            "d": 3,
            "BinaryType": "Max"
        },
        {
            "d": 4,
            "BinaryType": "Avg"
        },
        {
            "d": 5,
            "BinaryType": "Min"
        }
    ]
};

let traceArr = Object.assign([],learning.t);

traceArr.forEach(trace => {

    if (trace.BinaryType == 'Current') {            
        traces.ref = Object.assign({}, learning);   
        traces.ref.t = [];
        traces.ref.t.push(trace);
        traces.ref.t[0].BinaryType = 'Refeyrence';            
    }

    if (trace.BinaryType == 'Min') {           
        traces.min = Object.assign({}, learning);
        traces.min.t = [];
        traces.min.t.push(trace);            
    }

    if (trace.BinaryType == 'Max') {            
        traces.max = Object.assign({}, learning);
        traces.max.t = []
        traces.max.t.push(trace);            
    }

    if (trace.BinaryType == 'Avg') {            
        traces.avg = Object.assign({}, learning);
        traces.avg.t = [];
        traces.avg.t.push(trace);            
    }          
});

console.log("Output",traces);
console.log("Traces- Should be non mutated",traceArr);
console.log("Original",learning.t)

It is my belief that modifying the array contents should not affect the content of the original object (learning).

I have two questions:

I assumed that traces.ref.t = []; would change the reference in the newly created object. However, this does not seem to be the case. Why is that?
The console.log("Original",learning.t) output shows that the content has been modified (the text Refeyrence was changed during array iteration). Why is this happening and how can I prevent it?

'Original' [ { d: 2 , BinaryType: "Refeyrence" }, { d: 3 , BinaryType: "Max" }, { d: 4 , BinaryType: "Avg" }, { d: 5 , BinaryType: "Min" } ]

javascript arrays typescript

Answer 1

Answer №1

It seems like there are two related issues revolving around modifying a shared object.

My assumption was that setting traces.ref.t = []; would alter the reference in the newly created object. Is this not the case?

Using `[]` creates a new array instance, but `traces.ref` still references the shared `traces` object initially. To resolve this, you should create a copy of the `traces` object. Since it doesn't contain any nested values, using spread syntax is a simple way to achieve this in your situation:

const newTrace = { ...traces }

The output of console.log("Original", learning.t) shows that the content has been modified (the text "Reference" was changed during array iteration). Why is this happening and how can it be prevented?

This issue arises because the `trace` object is being pushed into the array and then modified. To work around this, you can also use object spread to create a shallow copy:

newTrace.ref.t.push({ ...trace });

With only these modifications, your original code may appear as follows:

let traces = { ref: null, min: null, max: null, avg: null };
let learning = {
  Application: "b3",
  t: [
    {
      d: 2,
      BinaryType: "Current"
    },
    {
      d: 3,
      BinaryType: "Max"
    },
    {
      d: 4,
      BinaryType: "Avg"
    },
    {
      d: 5,
      BinaryType: "Min"
    }
  ]
};

let traceArr = Object.assign([], learning.t);

traceArr.forEach(trace => {
  if (trace.BinaryType == "Current") {
    const newTrace = { ...traces };
    newTrace.ref = Object.assign({}, learning);
    newTrace.ref.t = [];
    newTrace.ref.t.push({ ...trace });
    newTrace.ref.t[0].BinaryType = "Reference";
  }

  // Other conditions and logic here...

});

console.log("Output", traces);
console.log("Traces - Should not be mutated", traceArr);
console.log("Original", learning.t);

Click here to view this code in the TypeScript playground. It may have a few type errors, but these changes should help prevent mutations.

Answer 2

It seems like there are two related issues revolving around modifying a shared object.

My assumption was that setting traces.ref.t = []; would alter the reference in the newly created object. Is this not the case?

Using `[]` creates a new array instance, but `traces.ref` still references the shared `traces` object initially. To resolve this, you should create a copy of the `traces` object. Since it doesn't contain any nested values, using spread syntax is a simple way to achieve this in your situation:

const newTrace = { ...traces }

The output of console.log("Original", learning.t) shows that the content has been modified (the text "Reference" was changed during array iteration). Why is this happening and how can it be prevented?

This issue arises because the `trace` object is being pushed into the array and then modified. To work around this, you can also use object spread to create a shallow copy:

newTrace.ref.t.push({ ...trace });

With only these modifications, your original code may appear as follows:

let traces = { ref: null, min: null, max: null, avg: null };
let learning = {
  Application: "b3",
  t: [
    {
      d: 2,
      BinaryType: "Current"
    },
    {
      d: 3,
      BinaryType: "Max"
    },
    {
      d: 4,
      BinaryType: "Avg"
    },
    {
      d: 5,
      BinaryType: "Min"
    }
  ]
};

let traceArr = Object.assign([], learning.t);

traceArr.forEach(trace => {
  if (trace.BinaryType == "Current") {
    const newTrace = { ...traces };
    newTrace.ref = Object.assign({}, learning);
    newTrace.ref.t = [];
    newTrace.ref.t.push({ ...trace });
    newTrace.ref.t[0].BinaryType = "Reference";
  }

  // Other conditions and logic here...

});

console.log("Output", traces);
console.log("Traces - Should not be mutated", traceArr);
console.log("Original", learning.t);

Click here to view this code in the TypeScript playground. It may have a few type errors, but these changes should help prevent mutations.

Answer 3

Answer №2

It seems like Object.assign() doesn't perform a deep copy. Rather, it creates a new array where the elements still reference the original array. To achieve a deep copy, the easiest method is to convert it to JSON and then back again.

let traceArr = JSON.parse(JSON.stringify(learning.t));

However, a drawback of this approach is that if there are any circular references within the object being copied, this method will not work.

UPDATE:

Just to demonstrate what is happening, let's begin with the learning object:

let learning = {
    "Application": "b3",
    "t": [Object1, Object2, ...]
}

Then, the following occurs:

let traceArr = Object.assign([], learning.t);

This action creates a new array and duplicates the contents from learning.t into it. At this point, traceArr will appear like:

traceArr = [Object1, Object2, ...]

Subsequently, it iterates over the items in traceArr, which are essentially the same objects from learning.t, but now referenced from a different array.

if (trace.BinaryType == 'Current') {            
    // Here, trace === Object1

    // Creating a shallow copy of learning
    traces.ref = Object.assign({}, learning);
    // traces.ref = { "Application": "b3", "t": [Object1, Object2, ...] }

    // Generating a new array for traces.ref.t
    traces.ref.t = [];
    // traces.ref = { "Application": "b3", "t": [] }

    // Adding Object1 (which is the same object from learning.t) to the new array
    traces.ref.t.push(trace);
    // traces.ref = { "Application": "b3", "t": [Object1] }

    // Modifying Object1
    traces.ref.t[0].BinaryType = 'Reference';            
}

If you wish for the elements of traces.ret.t to not reference the same objects as those in learning.t, then you'll need to create new objects. In other words, pushing a copy of trace instead of just trace. Alternatively, as previously mentioned, make traceArr a deep copy of learning.t so that all the objects are fresh, and nothing is shared.

Answer 4

It seems like Object.assign() doesn't perform a deep copy. Rather, it creates a new array where the elements still reference the original array. To achieve a deep copy, the easiest method is to convert it to JSON and then back again.

let traceArr = JSON.parse(JSON.stringify(learning.t));

However, a drawback of this approach is that if there are any circular references within the object being copied, this method will not work.

UPDATE:

Just to demonstrate what is happening, let's begin with the learning object:

let learning = {
    "Application": "b3",
    "t": [Object1, Object2, ...]
}

Then, the following occurs:

let traceArr = Object.assign([], learning.t);

This action creates a new array and duplicates the contents from learning.t into it. At this point, traceArr will appear like:

traceArr = [Object1, Object2, ...]

Subsequently, it iterates over the items in traceArr, which are essentially the same objects from learning.t, but now referenced from a different array.

if (trace.BinaryType == 'Current') {            
    // Here, trace === Object1

    // Creating a shallow copy of learning
    traces.ref = Object.assign({}, learning);
    // traces.ref = { "Application": "b3", "t": [Object1, Object2, ...] }

    // Generating a new array for traces.ref.t
    traces.ref.t = [];
    // traces.ref = { "Application": "b3", "t": [] }

    // Adding Object1 (which is the same object from learning.t) to the new array
    traces.ref.t.push(trace);
    // traces.ref = { "Application": "b3", "t": [Object1] }

    // Modifying Object1
    traces.ref.t[0].BinaryType = 'Reference';            
}

If you wish for the elements of traces.ret.t to not reference the same objects as those in learning.t, then you'll need to create new objects. In other words, pushing a copy of trace instead of just trace. Alternatively, as previously mentioned, make traceArr a deep copy of learning.t so that all the objects are fresh, and nothing is shared.

Steer clear of making changes to a JavaScript array

Answer №1

Answer №2

Similar questions

Submission error in Ripple-lib: 'UnhandledPromiseRejectionWarning - DisconnectedError: not opened'

Access various results from a jQuery function

When I attempt to utilize the API, the JavaScript implementation of a <script src=...> element seems to interfere

A compilation of approved classes for the quill toolbar

What is a method for capturing the value of a nested input element without requiring its ID to be

Is there a way to generate and transmit a text file using XmlHttpRequest or $.ajax?

Using Pug/Jade, be sure to call a function during each loop iteration

What are the ways to implement global functions in Vue.js?

fade out row upon successful deletion using ajax

What is the process of comparing one regular expression against another in JavaScript?

JavaScript taking over the HTML footer content

Packing third-party npm modules with Webpack for seamless integration

Introducing a detailed model showcasing information sourced from an array of objects within Angular 14

Class methods cannot be invoked within their constructor

Is there a way to remove specific items from my array in Vue.js?

Using an arrow function in Aurelia to read a json file

Encountering a problem sending an array of objects to a controller via jQuery AJAX

Guide on Redirecting in Express.js

The functionality of transparent code on Three.js appears to be not functioning properly

Did the IBM MobileFirst client miss the call to handleFailure?