CODEWITHSUNDEEP
javascriptarrayssplice
Queen Code
Queen Code

Reputation: 129

Why isn't splice working in this for loop?

var arr = ['apples','oranges','pears','grapes'];

for (var i=0; i<arr.length; i++) {
  if (arr[i] == 'pears') {
    arr.splice(i,0,'limes');
  }
}

When I try to run this in jsfiddle, the page freezes. jsfiddle also freezes if I use a specific index in place of i (arr.splice(2,0,'limes')) or if I try to remove items (arr.splice(2,1)). If I do this without the for loop and instead choose a specific index, it will work. What's wrong here? Is there any way I can make splice work (for adding, not removing items) inside a for loop?

Also, when I use FreeCodeCamp's editor with this code, it does not freeze but it gives me back the original array as if splice was never used on it. If I assign a variable to it (var rem = arr.splice(i,1) in a for loop), however, it returns the removed items without actually modifying the array itself (the array remains exactly the same).

Upvotes: 2

Views: 1121

Answers (3)

Yasin Yaqoobi
Yasin Yaqoobi

Reputation: 2040

You have an infinite loop. You are adding a new element before the pears instead of removing it. so the next iteration will give you pears again. If that's your intention just add a break statement. If you want to replace the element pear you can use the following function.

From MDN

array.splice(start, deleteCount[, item1[, item2[, ...]]])

You can see that you are not deleting anything but adding a new element before at index i (i.e before pears).

var arr = ['apples','oranges','pears','grapes'];

for (var i=0; i<arr.length; i++) {
  if (arr[i] == 'pears') {
    arr.splice(i,1,'limes');
 
  }
}

console.log(arr);

Upvotes: 1

zeppelin
zeppelin

Reputation: 9355

arr.splice(i,0,'limes');

will inject 'limes' element before the 'pears' element, effectively shifting it one position towards the end of array, so on the next iteration your code will hit 'pears' once again, and inject one more 'limes' in front of it and so on.

You can easily visualize this by adding

console.log(arr);

after your if block, which will result in the output like this:

    ["apples", "oranges", "limes", "pears", "grapes"]
    ["apples", "oranges", "limes", "limes", "pears", "grapes"]
    ["apples", "oranges", "limes", "limes", "limes", "pears", "grapes"]
    ["apples", "oranges", "limes", "limes", "limes", "limes", "pears","grapes"]
    ...

Upvotes: 3

Ismail RBOUH
Ismail RBOUH

Reputation: 10450

This is how for loops work :

for (var i=0; i < arr.length; i++);

i=0; initialize i with 0; Then, at the beginning of every iteration check this condition i < arr.length if it's true perform next iteration, otherwise leave the loop. At the end of each iteration i++ increments i.

Since arr.splice(i,0,'limes') alter the array and add an element at position i, it will push the value pears to the next index. Thus, if (arr[i] == 'pears') will be always true and this condition i < arr.length will never be false: Endless for ...

Upvotes: 1

Related Questions