Seeking explanation forEach javascript [duplicate]

Question

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?

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
– Wyck, Commented Apr 28, 2022 at 18:19

R4ncid · Accepted Answer · 2022-04-28 18:21:24Z

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);

edited Apr 28, 2022 at 18:21

answered Apr 28, 2022 at 18:12

R4ncid

7,1651 gold badge8 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

smpa01 Over a year ago

Many thanks for showing JSON.parse(JSON.stringify()).

ino · Accepted Answer · 2022-04-28 18:12:18Z

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.

answered Apr 28, 2022 at 18:12

ino

1,1451 gold badge11 silver badges29 bronze badges

2 Comments

smpa01 Over a year ago

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.

ino Over a year ago

@smpa01 use map to deep copy/clone.

Collectives™ on Stack Overflow

Seeking explanation forEach javascript [duplicate]

2 Answers 2

1 Comment

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Linked

Related