Append an array's reverse to itself
<p>I have created an array of color values which represents a smooth transition of colors from red to blue.</p>

<p>Now I want this array to take you from red to blue and back again. The obvious solution is to append the reverse of the array to the array.</p>

<p>I have written code to do it, but it isn't working as I understand it should. Instead, it's creating the reversed array, repeated. Instead of "Red to Blue, Blue to Red", it's going "Blue to Red,  Blue To Red".</p>

<p>Clearly, there's some behavior of arrays in javascript that I haven't grasped yet.</p>

<p>What should I be doing?</p>

<p>My first attempt is this:</p>

<pre><code>colors = colors.concat(colors.reverse());
</code></pre>

<p>Based on the first stackoverflow answer, I tried this:</p>

<pre><code>var arrayCopy = colors;
arrayCopy.reverse();
colors = colors.concat(arrayCopy);
</code></pre>

<p>But this produces identical results!</p>

<p>For context, here's the surrounding code:</p>

<pre><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 &lt; 3; ++j) {
                steps[j] = (endColor[j] - startColor[j]) / colorSteps;
            }
            var colors = Array();
            for (j = 0; j &lt; 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's 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 &gt;= 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);
</code></pre>
