JS/ReactJS - Assigning a new variable changes the original

Question

I have a react app with an array formatted like so:

var themes = [
  {
    id: 1,
    name: 'Light',
  },
  {
    id: 2,
    name: 'Dark',
  }
];

I have a method inside my React Component that adds a new item to the theme using overrides:

  addTheme = (theme) => {
    const base = themes.find(t => t.name.toLowerCase() === theme.base.toLowerCase());
    var newTheme = base ? base : themes[0];
    console.log(newTheme);
    newTheme.id = themes[themes.length - 1].id + 1;
    newTheme.name = theme.name;
    themes.push(newTheme);
    console.log('themes:', themes);
  };

The issue I am getting is that setting the newTheme variable to the base seems to overwrite the base object in the array.

So if I am adding a theme named Midnight, the Dark theme gets changed also?

`var newTheme = base ? base : themes[0];` newTheme is referring to the original one. So you change newTheme property, it also changes to orignal one. Try this: `var newTheme = Object.assign({}, base ? base : themes[0]);` — ninhjs.dev, Aug 23 '18 at 15:52
Because it all does with references https://stackoverflow.com/questions/597588/how-do-you-clone-an-array-of-objects-in-javascript — Sumanth Itha, Aug 23 '18 at 15:53

Jordan Enev · Accepted Answer · 2018-08-23T16:14:28.277

2

You should do a copy of a theme object, because find returns a reference to the object.

You have 2 options - shallow or deep copying the object.

1. Shallow copy (using ES6):

const newTheme = {...base ? base : themes[0]}

2. Deep copy (If you do not have function properties) :

JSON.parse(JSON.stringify(base ? base : themes[0]))

Here's a great discussion about - How do I correctly clone a JavaScript object?.

edited Aug 23 '18 at 16:14

answered Aug 23 '18 at 15:53

Jordan Enev

16,904
3
42
67

Brilliant. Thanks all for the quick responses. I'll keep this in mind for the future – Timmo Aug 23 '18 at 16:07
I'm afraid this deep copy trick of you is not valid for an object having function properties. – UtkarshPramodGupta Aug 23 '18 at 16:11
Thanks! Added it to the answer! :) – Jordan Enev Aug 23 '18 at 16:14

score 1 · Answer 2 · answered Aug 23 '18 at 15:51

1

The find() array method will not return a copy of your theme, but rather a reference to it, so you're actually altering the original theme.

answered Aug 23 '18 at 15:51

Dan

9,912
18
49
70

UtkarshPramodGupta · Answer 3 · 2018-08-23T15:59:44.850

Use Object.assign()

Array.find() method doesn't return a copy of the value matched but the actual matched object from the object array. You need to make a copy of that returned theme object to create the new theme that you wish to add. Object.assign({}, obj) returns a clone of the obj object (mind you, not deep cloning though).

addTheme = (theme) => {
    const base = themes.find(t => t.name.toLowerCase() === theme.base.toLowerCase());
    var newTheme = base ? Object.assign({},base) : Object.assign({},themes[0]);
    console.log(newTheme);
    newTheme.id = themes[themes.length - 1].id + 1;
    newTheme.name = theme.name;
    themes.push(newTheme);
    console.log('themes:', themes);
};

Object.assign might break in IE. Browser Compatibility here : https://mdn.io/object.assign — VigSank, Aug 23 '18 at 16:07

JS/ReactJS - Assigning a new variable changes the original

3 Answers3