Saving reversed array to variable in javascript

Question

I have an array of colors that I want the option to reverse. I have a toggle function that basically colors elements based on the array. If I throw a reverse variable then it reverses, but it reverses the global variable instead of the local variable.

var inc_colors = ['#000','#333','#888']; //global inc_colors

function toggleLegendColors(reverse){
  var reverse = reverse || false;
  var colors = inc_colors; //local colors
  if(reverse) colors.reverse(); //reverses inc_colors array as well as colors
  ...
}

How can I get the reversed global array without changing the global array?

Answer 1

Since nobody has really explained why you were having a problem, I'll add that to the mix.

When you assign an array or an object in javascript to a variable, it assigns a reference to that array/object. It does not make a copy of the array/object. So, then you would have two variables that both point at the same array/object and modifying either one will affect the other (since they both point to the same underlying piece of data).

So, when you had this:

var inc_colors = ['#000','#333','#888']; //global inc_colors
var colors = inc_colors; //local colors

All you have now is two variables that both point to the exact same piece of data. Modify either one and the same result will show via the other variable because they point to the same underlying data.

If you want to make a copy, then have to explicitly make a copy (javascript doesn't do it for you automatically). For an array, the simplest way to make a shallow copy is like this:

var newColors = Array.prototype.slice.call(inc_colors);

So, in your exact code, you could apply that copy like this:

var inc_colors = ['#000','#333','#888']; //global inc_colors

function toggleLegendColors(reverse){
  var reverse = reverse || false;
  var colors = Array.prototype.slice.call(inc_colors);  //local copy of the colors array
  if(reverse) colors.reverse(); //reverses inc_colors array as well as colors
  ...
}

Answer 2

You can do this by using the es6 spread operator now too:

let colors = [ ...inc_colors ].reverse()

Answer 3

Just make a copy of the array using Array.slice (safe way):

var colors = Array.prototype.slice.call(inc_colors);

Answer 4

clean simple way that you may consider , but involves creating a new instance of the array is

var arr_reverse=arr.slice(0).reverse();

Answer 5

Simplistic solution:

var inc_colors = ['#000','#333','#888']; //global inc_colors

function toggleLegendColors(reverse) {
  var colors = (inc_colors instanceof Array) ? inc_colors : [];
  colors = (!reverse) ? inc_colors.slice() : inc_colors.slice().reverse();
  // ...
}