JavaScript Arrays .push() not working as Expected

Question

I'm writing this JavaScript code expecting the output as

[["o","o","x","o","o"],["o","x","x","x","o"]]

but instead it gives

<script>
function createArray(x) {
  var array=[];
  var finalArray=[];
  
  for(var i=1;i<=x;i++){
    array[i-1]='O';
  }

  var midIndex=Math.round(x/2)-1;
  
  array[midIndex]='X';


  finalArray.push(array);

  var num1=midIndex-1;
  var num2=midIndex+1;
 
 
  
    array[num1]="X";
    array[num2]="X";
    
    finalArray.push(array);

  console.log(finalArray) ;
  
}

createArray(5);


</script>

please some one show the reason for this.

`.push()` doesn't clone the array you're pushing into `finalArray`. You push the "same array" (a reference to the same array) twice. — Andreas, Jul 28 '20 at 06:03
[Is JavaScript a pass-by-reference or pass-by-value language?](https://stackoverflow.com/questions/518000/is-javascript-a-pass-by-reference-or-pass-by-value-language) — Andreas, Jul 28 '20 at 06:06

Ravi Chaudhary · Answer 1 · 2020-07-28T06:55:49.290

3

In Javascript, objects(in your case array) are passed by reference. You push the array into finalArray and then update the array. But you have updated the data from same reference. So you could use spread operator which would effectively create a new array(with new reference) and you can push this array to finalArray

finalArray.push([...array]);

edited Jul 28 '20 at 06:55

answered Jul 28 '20 at 06:04

Ravi Chaudhary

660
6
22

1

This is called [spread syntax](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax) not destructuring – adiga Jul 28 '20 at 06:06
@adiga Was just about to comment the same. Spot ON – Always Helping Jul 28 '20 at 06:06

score 2 · Accepted Answer · answered Jul 28 '20 at 06:07

That's because Javascript objects are passed by reference. You should create a copy of the array and push to the final one

function createArray(x) {
  var arr=[];
  var finalArray=[];
  
  for(var i=1;i<=x;i++){
    arr[i-1]='O';
  }

  var midIndex=Math.round(x/2)-1;
  
  arr[midIndex]='X';


  finalArray.push(arr.slice());

  var num1=midIndex-1;
  var num2=midIndex+1;
 
 
  
    arr[num1]="X";
    arr[num2]="X";
    
    finalArray.push(arr.slice());

  console.log(finalArray) ;
  
}

createArray(5);

score 2 · Answer 3 · answered Jul 28 '20 at 06:22

2

It's for JS pointer When you Push array into final u push pointer of array into an index of final and when change array the final changed too.

for resolve it u can use easy Code:

finalArray.push([...array]);

GoodLuck

answered Jul 28 '20 at 06:22

HamidReza Heydari

302
1
8

JavaScript Arrays .push() not working as Expected

3 Answers3