1

I am working with the following array of objects and I am trying to run a function with forEach. However, I don't want to destroy the original tbl1. Hence, I made a copy of tbl1 in tbl2 and I am running forEach on tbl2.

What surprises me, if I run a forEach on tbl2 so that I can preserve the tbl1 structure, it also takes place in tbl1 which I don't want.

const tbl1 = [{ "Month": 1, "Value": 100 }, { "Month": 2, "Value": 200 }, { "Month": 3, "Value": 300 }]

const tbl2 = tbl1;

tbl2.forEach(
    (d)=>{d.newCol=d.Month*152;});

console.log(tbl1,tbl2);

Is it possible to run forEach on a copy table without destroying the source table?

smpa01
  • 4,149
  • 2
  • 12
  • 23
  • You're likely surprised to learn that `tbl2 = tbl1` does not make a copy. Rather, now `tbl2` is a variable that refers to the same array that `tbl1` does. – Wyck Apr 28 '22 at 18:19

2 Answers2

3

you can use map

const tbl1 = [{ "Month": 1, "Value": 100 }, { "Month": 2, "Value": 200 }, { "Month": 3, "Value": 300 }]

const tbl2 = tbl1.map(d => {
  return {
   ...d,
   newCol: d.Month*152
  }
})


console.log(tbl1,tbl2);
If you want to do a deep copy you should use JSON.parse and JSON.stringify 

const tbl1 = [{ "Month": 1, "Value": 100 }, { "Month": 2, "Value": 200 }, { "Month": 3, "Value": 300 }]

const tbl2 = JSON.parse(JSON.stringify(tbl1));

tbl2.forEach(
    (d)=>{d.newCol=d.Month*152;});

console.log(tbl1,tbl2);
R4ncid
  • 6,944
  • 1
  • 4
  • 18
2

That is because when you write const tbl2 = tbl1;, it doesn't clone the array, rather takes a reference to the original. So when you modify the the reference, the original gets modified as well.

ino
  • 1,002
  • 1
  • 8
  • 25
  • 1
    Wow I did not know that. Thanks. What is a convenient way take `tbl1` in a var/const where it does not refer to the original structure anymore and if I run `forEach` it does not hurt the source table. – smpa01 Apr 28 '22 at 18:14
  • 1
    @smpa01 use `map` to deep copy/clone. – ino Apr 28 '22 at 18:18