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?

@RicardoLohmann That one is a duplicate of a duplicate in itself. :) — bozdoz
– bozdoz, Commented Jan 16, 2013 at 20:08
There is a better answer here stackoverflow.com/questions/30610523/… — daniella
– daniella, Commented Feb 16, 2017 at 17:41

jfriend00 · Accepted Answer · 2013-01-16 20:26:43Z

14

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
  ...
}

answered Jan 16, 2013 at 20:26

jfriend00

711k104 gold badges1.1k silver badges1k bronze badges

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

4 Comments

bozdoz Over a year ago

Why does that happen to arrays and not other variable types?

jfriend00 Over a year ago

@bozdoz - it happens to arrays and objects. Strings are immutable so they can never be changed (a new string object is created whenever the string is modified) so you can't have a constant reference to a string that gets modified. The other variable types (boolean, number, etc...) are just simple types and when they are assigned they are copied. As to why it's this way, that would need to be explained by the designers of the language.

daniella Over a year ago

Why does it matter why they were having the problem?

jfriend00 Over a year ago

@daniella - Understanding how assignment of objects works in Javascript is fundamental to writing good code.

Ian · Accepted Answer · 2016-01-25 17:16:17Z

14

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

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

answered Jan 25, 2016 at 17:16

Ian

1632 silver badges7 bronze badges

2 Comments

devprashant Over a year ago

@RubenMartinezJr. using it for same reason. good use of spread operator.

blessing dickson Over a year ago

This is really simple and efficient

VisioN · Accepted Answer · 2013-01-16 19:54:26Z

11

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

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

edited Jan 16, 2013 at 19:54

answered Jan 16, 2013 at 19:48

VisioN

146k35 gold badges287 silver badges291 bronze badges

9 Comments

ithcy Over a year ago

what I meant is: are you sure you don't mean reverse.call()? :)

Gabriel Gartz Over a year ago

var colors = inc_colors.slice(); also will work, because it's an array

gen_Eric Over a year ago

@ithcy: You want to copy the array before you reverse it, so that you are reversing the copy.

VisioN Over a year ago

@Ian It is just a safe way. In case if inc_colors is not an array.

gen_Eric Over a year ago

@Ian: You normally use Array.prototype.slice.call when the "array" isn't really an array, like a NodeList or arguments.

|

yeahdixon · Accepted Answer · 2015-07-03 21:18:49Z

11

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

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

answered Jul 3, 2015 at 21:18

yeahdixon

6,9641 gold badge45 silver badges45 bronze badges

1 Comment

Venkata Raju Over a year ago

0 is not required (default)

Gabriel Gartz · Accepted Answer · 2013-01-16 20:25:04Z

1

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();
  // ...
}

edited Jan 16, 2013 at 20:25

answered Jan 16, 2013 at 20:00

Gabriel Gartz

2,87024 silver badges24 bronze badges

1 Comment

Ian Over a year ago

Do you need the var for inc_colors inside the function? If you take it out, it will keep inc_colors global, in case it was never defined. Not too important, just didn't know if there was a reason for the var :)

Collectives™ on Stack Overflow

Saving reversed array to variable in javascript

5 Answers 5

4 Comments

2 Comments

9 Comments

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

4 Comments

2 Comments

9 Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related