Why does the second call override the result of the first call?

Question

I am shuffling all the elements in an array by changing the index at which it appears normally. It works well but the problem is that I want to keep the array state before I shuffle it but it is not working because when I save the array before I shuffle it the array's first call takes the same array state as the shuffled array. I want to know why?

See below illustration of the behavior...

$(document).ready( event=>{
        let imager =[];

       $("img").map( (n,e)=>{
           imager.push({n,e})
       })
       console.log(imager)   //  saved version of imager before I shuffle :Why it takes the state of the shuffled array here
       shuffle2(imager)  // I shuffle the array
       console.log(imager)  // shuffled version
    })



// these are  images element in the dom inside html
<img src = "https://raw.githubusercontent.com/thetalent/omapuzzle16/master/image_part_001.jpg">
<img src = "https://raw.githubusercontent.com/thetalent/omapuzzle16/master/image_part_002.jpg">
<img src = "https://raw.githubusercontent.com/thetalent/omapuzzle16/master/image_part_003.jpg">
<img src = "https://raw.githubusercontent.com/thetalent/omapuzzle16/master/image_part_004.jpg">
<img src = "https://raw.githubusercontent.com/thetalent/omapuzzle16/master/image_part_005.jpg">
 <img src = "https://raw.githubusercontent.com/thetalent/omapuzzle16/master/image_part_006.jpg">
<img src = "https://raw.githubusercontent.com/thetalent/omapuzzle16/master/image_part_007.jpg">
<img src = "https://raw.githubusercontent.com/thetalent/omapuzzle16/master/image_part_008.jpg">
<img src = "https://raw.githubusercontent.com/thetalent/omapuzzle16/master/image_part_009.jpg">
<img src = "https://raw.githubusercontent.com/thetalent/omapuzzle16/master/image_part_010.jpg">
<img src = "https://raw.githubusercontent.com/thetalent/omapuzzle16/master/image_part_011.jpg">
<img src = "https://raw.githubusercontent.com/thetalent/omapuzzle16/master/image_part_012.jpg">
<img src = "https://raw.githubusercontent.com/thetalent/omapuzzle16/master/image_part_013.jpg">
<img src = "https://raw.githubusercontent.com/thetalent/omapuzzle16/master/image_part_014.jpg">
<img src = "https://raw.githubusercontent.com/thetalent/omapuzzle16/master/image_part_015.jpg">
<img src = "https://raw.githubusercontent.com/thetalent/omapuzzle16/master/image_part_016.jpg">


// the shuffle function
function shuffle(array) {
  for (let i = array.length - 1; i > 0; i--) {
    let j = Math.floor(Math.random() * (i + 1));
    [array[i], array[j]] = [array[j], array[i]];
  }
}

You're moving around elements in the same array. Of course the original array is going to change. — Taplar, Jun 13 '19 at 19:34
As far as why the console log shows both as having the same value, that is because the browser console shows the up to date version of the variable, not what it was when it was logged. — Taplar, Jun 13 '19 at 19:36
@Taplar the update to date explanation does not work I use a simple variable as in ...let m = 10 ; console.log(m) // it output 10 ; m=1000 ; console.log(m) // it output 1000 — GNETO DOMINIQUE, Jun 13 '19 at 19:43
See [weird array behaviour in javascript](https://stackoverflow.com/questions/49838597/weird-array-behaviour-in-javascript) for an explanation of the console's behavior. It only occurs with variables that are not primitives (e.g., objects, arrays). — Heretic Monkey, Jun 13 '19 at 20:07

score 0 · Answer 1 · answered Jun 13 '19 at 19:44

Cause you passing Array with reference check this

https://medium.com/nodesimplified/javascript-pass-by-value-and-pass-by-reference-in-javascript-fcf10305aa9c

you could use functional programming by using reduce

const shuffledArray = [6,8,4,9,6].reduce((a,x,i)=>{a.splice(Math.floor(Math.random()*(i+1)),0,x);return a},[]);

score 0 · Accepted Answer · answered Jun 13 '19 at 20:31

The shuffle method is mutating (changing) the original array. You can do a deep copy of your original array using the jQuery extend method:

$(document).ready( event=>{
    let origImager = [];
    let imager;

    $("img").map( (n,e)=>{
        origImager.push({n,e})
    });

    console.log(origImager)   //  saved version of imager before I shuffle

    imager = $.extend(true, [], origImager); // creates a copy so that the original is not modified
    shuffle2(imager)  // I shuffle the array
    console.log(imager)  // shuffled version
})

Why does the second call override the result of the first call?

2 Answers2