Add an array back to itself

Question

I created an array of color values, which is a smooth transition of colors from red to blue.

Now I want this array to take you from red to blue and vice versa. The obvious solution is to add an array reverse to the array.

I wrote code to do this, but it does not work, as I understand it. Instead, it creates an inverse array, repeating itself. Instead of "From red to blue, from blue to red," he goes from "Blue to red, from blue to red."

It is clear that in javascript there is some behavior of arrays that I still do not understand.

What should I do?

My first attempt:

colors = colors.concat(colors.reverse()); 

Based on stackoverflow's first answer, I tried this:

 var arrayCopy = colors; arrayCopy.reverse(); colors = colors.concat(arrayCopy); 

But it gives the same results!

In context, here is the surrounding code:

  /////////////////////////////////////////////////////////// // Creating the array which takes you from Red to Blue // var colorSteps = 400; var startColor = [255, 0, 0]; var endColor = [0, 127, 255]; var steps = new Array(); var j = 0; for (j = 0; j < 3; ++j) { steps[j] = (endColor[j] - startColor[j]) / colorSteps; } var colors = Array(); for (j = 0; j < colorSteps; ++j) { colors[j] = [ Math.floor(startColor[0] + steps[0] * j), Math.floor(startColor[1] + steps[1] * j), Math.floor(startColor[2] + steps[2] * j) ]; } //////////////////////////////////////////////////////// // Here the bit where I'm trying to make it a mirror // of itself! // // It ain't working // colors = colors.concat(colors.reverse()); /////////////////////////////////////////////////////// // Demonstrating what the colors are // j = 0; var changeColorFunction = function () { if (++j >= colors.length) { j = 0; } var colorName = "rgb(" + colors[j][0] + ", " + colors[j][1] + ", " + colors[j][2] + ")"; debugText.style.background = colorName; debugText.innerHTML = j; } setInterval(changeColorFunction, 10); 

Answer 1

A problem with:

 colors = colors.concat(colors.reverse()); 

... lies in the fact that colors.reverse() mutates the colors array itself, which means that you are adding a reverse array to an already modified array. Try instead:

 colors = colors.concat(colors.slice().reverse()); 

Answer 2

Copy the colors array first. reverse modifies the array itself, and not just returns the returned one.

UPDATE

Code example:

 colors.concat(colors.slice(0).reverse());