CODEWITHSUNDEEP
javascript
Subham Bisoyi
Subham Bisoyi

Reputation: 53

The output is coming different than what I thought?

function nextInLine(arr,Item){
  arr.push(Item);
  return arr.shift();
}
var testArr=[1,2,3,4,5];
console.log("Before : "+testArr);
console.log(nextInLine(testArr,6));
console.log("after : "+testArr);

It should be resulting in printing [1,2,3,4,5] both before and after as I am not changing the global variable but the change inside a function is affecting the global values(var testArr).

Upvotes: 0

Views: 66

Answers (5)

Gibor
Gibor

Reputation: 1721

When you pass array / object to a function- a reference to it is passed, not a copy. this means the arr.push(item) actually changes your array, as well as the array.shift() statement.

On variables it is indeed a copy passed, so you will not see such behaviour. If you want to return a new array and keep the previous untouched: 

function nextInLine(arr,Item){
  const newArr = [...arr];
  newArr.push(item);
  newArr.shift(); /* array.shift() returns the omitted value, if you return newArr.shift() you'll lose the new array and get only the removed item */
  return newArr;
}

Upvotes: 1

F.bernal
F.bernal

Reputation: 2684

as you don't want your function has side effects do something like this:

function nextInLine(arr,Item){
  const aux = [...arr];
  aux.push(Item);
  const removedItem = aux.shift();
  return {arr: aux, removedItem};
}
var testArr=[1,2,3,4,5];
console.log("Before : "+testArr);
console.log(nextInLine(testArr,6));
console.log("after : "+testArr);

you will get both a new array with the modified data and the removed item if it is needed for something, if not, you can return only return aux

Upvotes: 1

Alireza HI
Alireza HI

Reputation: 1933

Array is passed as a reference while when you pass a simple variable (which is not array) it makes a copy of that. So when you change a simple variable you are changing a copy of it.

But array is exactly the one that you have passed and is reference to that. You should consider whether you want to change the origin one or the copy of the array.

Solution of not changing the origin array:

To avoid mutating or changing the origin array you can pass it but making a copy of array like this:

nextInLine([...testArr],6)

Using [...testArr] you are deconstructing the old one a making a new array which is a copy of the origin one.

function nextInLine(arr,Item){
  arr.push(Item);
  return arr.shift();
}
var testArr=[1,2,3,4,5];
console.log("Before : "+testArr);
// making a copy of the testArr
console.log(nextInLine([...testArr],6));
console.log("after : "+testArr);

Upvotes: 1

Beginner
Beginner

Reputation: 9095

since the array is a primitive value it passes the pointer. so instead of mutating the existing array, you need to take a copy. In es6 you can use spread syntax.

if you do as below your actual array won't update. See the below snippet

function nextInLine(arr,Item){
  const updatedArray = [...arr]
  updatedArray.push(Item);
  return updatedArray.shift();
}
var testArr=[1,2,3,4,5];
console.log("Before : "+testArr);
console.log(nextInLine(testArr,6));
console.log("after : "+testArr);

Upvotes: 1

Cid
Cid

Reputation: 15247

Arrays are references when passed to functions, that's why it's not changed.

You might want to copy that array :

function nextInLine(arr,Item){
  arr.push(Item);
  return arr.shift();
}
var testArr=[1,2,3,4,5];
console.log("Before : "+testArr);
// this trick copy an array or an object
// --------------------v---------------------------------v
console.log(nextInLine(JSON.parse(JSON.stringify(testArr)),6));
console.log("after : "+testArr);

Upvotes: 1

Related Questions