After I do "x=y" and change "x", it also changes "y". How do I prevent this?

Question

For example I have listings array :

[ { name: 'bob', price: '10' }, { name: 'jack', price: '12' } ]

I am trying to find lowest seller and work with it's data later. I do var currentLowestSeller = listings[0];

Now currentLowestSeller is:

{ name: 'bob', price: '10' }

Later I do changes is currentLowestSeller but I don't want main listings array to be changed. I do currentLowestSeller.price = currentLowestSeller.price * 0.5; and after this listings array looks like this:

[ { name: 'bob', price: 5 }, { name: 'jack', price: '12' } ]

How do I prevent this?

If you wanna recreate this just run this code:

var listings = [];

var name1 = 'bob';
var name2 = 'jack';
var price1 = '10';
var price2 = '12';

listings.push({
  name: name1,
  price: price1
})

listings.push({
  name: name2,
  price: price2
})

var currentLowestSeller = listings[0];
currentLowestSeller.price = currentLowestSeller.price * 0.5;

console.log(listings);

What I have tried:

I tried creating a copy of listings array before doing anything.

var unchangedListings = listings;
var currentLowestSeller = listings[0];
currentLowestSeller.price = currentLowestSeller.price * 0.5;

console.log(unchangedListings);

But it didn't work.

Later I decided that const unchangedListings = listings; would help. But for some reason it also changes a value defined as a constant.

Answer 1

var unchangedListings = listings;

This means, unchangedListings is indicating to the value of the listings, so if you change the unchangedListings value, it means that you are also updating the listings.

To prevent this, you need to clone the value. You should deep clone the object.

var currentLowestSeller = JSON.parse(JSON.stringify(listings[0]))

or

var currentLowestSeller = Object.assign({}, listings[0])

Answer 2

Origin of the problem

The behaviour you are seeing is common to most languages, and not related to javascript.

Arrays only contain references to the objects they contain. Extracting a key from an array (or an object for that matter) does not make copies of the value of the key. If that was the case there would be no way to perform any change in the state of the program.

var a = { toto: 1 };  // create object
var b = a;            // b is pointing the the same object
b['toto'] = 2;        // update the object (there is only one)

console.log(a == b);  // true because a and b are the SAME object (not just equal,
                      // both a and b point to the same place in the computer memory)

console.log(a);       // { toto: 2 } both objects have been edited

If you need to manipulate an object, without modifying the original, you need to explicitly make a copy.

However, when using nested objects or nested arrays a problem will occur. Do you need a "deepcopy" or a "shallow copy"?

Shallow copy

A shallow copy means copying only the "first level".

var a = { toto: 1, tata: { tutu: 1 } };
var b = { ... a }; // make a "shallow copy"

// We change "b", did "a" change? => No
b.toto = 2;
console.log(a); // { toto: 1, tata: { tutu: 1 } }
                // "a" was not modified!

console.log(b); // { toto: 2, tata: { tutu: 1 } }
                // "b" was modified!

// we change a nested object in "b", did "a" change? => Yes
b.tata.tutu = 2;
console.log(a); // { toto: 1, tata: { tutu: 2 } }
                // "a" was modified!

console.log(b); // { toto: 2, tata: { tutu: 2 } }
                // "b" was modified!

Deep copy

A deep copy will make a copy of all nested arrays and objects (and comes with a significant cost in performance).

Javascript does not come with a language built-in to perform deep copies, because it is not a common operation, and is expensive.

The most common way to perform deep copies of objects is to use the JSON built-ins, but many ways exist with different pros and cons (for instance, using the JSON builtins is fast, but will break if your objects contain NaN or Date instances).

Check this thread for more info: What is the most efficient way to deep clone an object in JavaScript?

var a = { toto: 1, tata: { tutu: 1 } };
var b = JSON.parse(JSON.stringify(a)); // make a "deep copy"

// a and b are now completely different, they share nothing in memory
// we can edit any subobject, they will not be any consequence between them.
a.tata.tutu = 2;

Answer 3

In case the list or dictionary is nested, you could use clone from the Ramda library:

import { clone } from 'ramda';

var currentLowestSeller = clone(listings[0]);

You can find more information here: https://medium.com/javascript-in-plain-english/how-to-deep-copy-objects-and-arrays-in-javascript-7c911359b089, they explain very well the difference between shallow and deep copies.

Answer 4

One of the most important concepts of Javascript (and many other languages) is the concept of reference types. Javascript has 3 data types that are passed by reference: Array, Function, and Object. Since it is really important to understand this, I would recommend reading this article.

In your case:

var unchangedListings = listings; // still points to listings
var currentLowestSeller = listings[0]; // changes listings

It is always a good practice to copy arrays before mutating them:

const currentLowestSeller = [... listings]; // currentLowestSeller points to a new array