CODEWITHSUNDEEP
javascript
m-a.D
m-a.D

Reputation: 97

Javascript array reverse function unexpected behavior

I would like to understand why situation 1 and situation 2 don't return the same results.

Situation 1 :

var array1 = ["1", "2", "3"];
var array2 = array1.reverse();

console.log(array1); // ["3", "2", "1"]
console.log(array2); // ["3", "2", "1"] Why this doesn't work ?

Situation 2 :

var array1 = ["1", "2", "3"];
var array2 = array1;

console.log(array1);           // ["1", "2", "3"]
console.log(array2.reverse()); // ["3", "2", "1"] Why this works ?

Upvotes: 5

Views: 1776

Answers (8)

Ramin
Ramin

Reputation: 207

Array is object in javascript so assigning an array to another array simply assigns its reference so both of them will be pointing to same object. Whereas for this situation it is better to use slice function of array to copy data of array to another like

var array1 = ["1", "2", "3"];
var array2 = array1.slice().reverse();

console.log(array1); // ["1", "2", "3"]
console.log(array2); // ["3", "2", "1"]

Upvotes: 1

Juan Cortés
Juan Cortés

Reputation: 21082

When you call .reverse you are reversing the value, and then returning the array.

var array1 = ["1", "2", "3"]; //Create a new array
var array2 = array1.reverse();//Reverse array1 and assign it to array2

Any changes made to array1 are also reflected in array2 in this case, the confusion arose from the fact that you were printing the value before it was modified.

Upvotes: 6

Mottie
Mottie

Reputation: 86413

Try this (demo)

var array1 = ["1", "2", "3"];
var array2 = array1.slice(0).reverse();

console.log(array1, array2);

Using slice(0) creates a new array.

Upvotes: 1

Nick Zuber
Nick Zuber

Reputation: 5637

It's important to note that Array.reverse() does two things:

  • It mutates the array it's given by reversing it
  • It returns a reference to the array that was just reversed

Let's take a look at your examples and what's going on/

Situation One

var array1 = ["1", "2", "3"];  // Creates new array
var array2 = array1.reverse(); // Reverse array1 and stores reference to array1 in array2

// Since array1 and array2 point to the same object, they will have
// the same values since they are pointing to the same object
console.log(array1); // ["3", "2", "1"]
console.log(array2); // ["3", "2", "1"]

Situation Two

var array1 = ["1", "2", "3"];  // Creates new array
var array2 = array1;           // array2 now holds a reference to array1

// Same as the previous example, array1 and array2 both have the
// same values since they are pointing to the same object    
console.log(array1);           // ["1", "2", "3"]

// Now we reverse array2, which reverses array1 AND array2
console.log(array2.reverse()); // ["3", "2", "1"]

// array1 is now also reversed
console.log(array1);           // ["3", "2", "1"]

In the second situation, after you call array2.reverse(), both array1 and array2 become reversed since they're pointing to the same object reference.

Upvotes: 2

user6186801
user6186801

Reputation:

The reverse method transposes the elements of the calling array object in place, mutating the array, and returning a reference to the array. Thus, it does not return the reversed array.

CHECK the manuel. https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Array/reverse

Upvotes: 2

Simon Schüpbach
Simon Schüpbach

Reputation: 2683

The problem is that reverse() change the array itself. That means, if you write var array2 = array1.reverse() then array1 is reversed. Array1 contains now the reversed entries and on the other side array2 is initialized with this reversed array. Therefor you have the same output.

On the second example with var array2 = array1 you have two variable referencing the same array. First you print out array1 which result in normal order. As second step you reverse array2 and print it out. The order has changed now. But if you print out array1 again now, the result will be the array in reversed order, because array1 and array2 refer to the same array.

Upvotes: 1

isvforall
isvforall

Reputation: 8926

In Situation 1

The reverse method transposes the elements of the calling array object in place, mutating the array, and returning a reference to the array.

In Situation 2 you have the same reference. You are printing array1 array before reverse it.

var array1 = ["1", "2", "3"];
var array2 = array1;

console.log(array1);           // [ '1', '2', '3' ]
console.log(array2.reverse()); // [ '3', '2', '1' ]
console.log(array1);           // [ '3', '2', '1' ]

Upvotes: 10

Simonxca
Simonxca

Reputation: 678

reverse() modifies and returns the original array. See MDN Array.prototype.reverse()

var array1 = ["1", "2", "3"];
var array2 = array1;             // point to the same object

console.log(array1);             // original array1 (["1", "2", "3"])
console.log(array2.reverse());   // reverses array2 and array1 since they
                                 //   point to the same object and returns
                                 //   array2 (["3", "2", "1"])
console.log(array1);             // check that array1 was reversed (["3", "2", "1"])
console.log(array1.reverse() === array1);   // returns true

Upvotes: 4

Related Questions