Removing items from an array in javascript

Question

This code is supposed to remove numbers from an array. The expected output of the code below should be the strings "cat", "dog", and "bird" logged to the console. The actual output is actually leaves the console blank. Note that for the website I am programming this on, removeItem() is the correct notation for removing an array item.

var animals = ["cat", "dog", 2, 11, "bird", 13];
var i;
for (i = 0; ((isNaN(animals[i])) == false) && (i < animals.length - 1); i++) {
 removeItem(animals, i);
 console.log(animals);
}

• Jaromanda X: so, what does happen?
• Technoh: What exactly happens? Do you get any errors in the console? Also, what is the code of the removeItem function?
• Jaromanda X: that's because the first array item is not a number, so the loop is never entered - also, if removeItem (whatever that is) removes the current item from the array, you'll end up skipping items in the array ... you'll also never test the last item in the array
• The Bomb Squad: no need for a loop, mureinik gave the answer
• Jaromanda X: @TheBombSquad unless you need to mutate the array, rather than re-assign it

Answer 1

There are two conceptual issues here. First, you have a condition on a specific value in the loop's condition. In other words, the loop will terminate when the first number is encountered. Second, you're modifying the array while iterating over it, which will probably mess up your result.

Using a filter call would address both issues and also clean up your code:

animals = animals.filter(x => isNaN(x));

• Jaromanda X: Not really the same, you're not mutating animals, you're re-assigning it
• Mureinik: @JaromandaX That's true, but without some more context, it doesn't seem like mutating animals in-place is a real requirement

Answer 2

The problem is the second argument to for needs to be the MAX value for the loop not what you have.

var animals = ["cat", "dog", 2, 11, "bird", 13];
var i;
for (i = 0; i<animals.length; i++) {
 if(isNaN(animals[i])){
 removeItem(animals, i);
 }
}
console.log(animals);

for a complete replacement this will replace your need for the removeItem function also

var animals = animals.filter(function(el) {
 return el.length && el==+el;
});

• Jaromanda X: surely you meant i<animals.length not <=
• Jaromanda X: the second code does not equate to the OP's code - OP is mutating animals, not reassigning it

Answer 3

The for loop should look something like this:

for (i = 0; i < animals.length; i++) {
 // check if isNaN inside here then remove..
}

But I would suggest using filter() instead.

var animals = ['cat', 'dog', 2, 11, 'bird', 13];
var result = animals.filter(item => isNaN(item));
console.log(result);

Answer 4

There is some issue that needs to be changed:

• Loop backwards throught the array because you are removing items.
• Create a condition to remove desidered items.
• Log the result outside the loop.

After it your code will be like this:

var animals = ["cat", "dog", 2, 11, "bird", 13];
for (var i = animals.length - 1; i >= 0; i--) {
 if (isNaN(animals[i])) { 
 removeItem(animals, i);
 }
}
console.log(animals);

Answer 5

The reason the loop never runs is because the first element is not a number

therefore the condition in the for loop fails on the first test

You need to move the test for NaN inside the loop

Assuming removeItem(animals, i); mutates the array, you'll also have another issue

If you remove an item in the array, then everything to the right of the removed item shifts one to the left ... but the for loop will increase i, therefore the next element will be skipped

so, whenever you have 2 numbers in a row, the second will not be removed - i.e in this case, the 11

Ignoring the mis-placed isNaN test, you also loop until i < animals.length - 1 - which means you'd never test the last element - so in this case, the 13 will not be removed either

function removeItem(arr, i) {
 arr.splice(i, 1);
}
var animals = ["cat", "dog", 2, 11, "bird", 13];
var i;
for (i = 0; i < animals.length - 1; i++) {
 if (!isNaN(animals[i])) {
 removeItem(animals, i);
 }
}
console.log(animals);

In the above, when i == 2, the value of animals[i] is 2 ... this gets removed ... now i == 2 still, and animals[i] is 11 ... but before the next iteration of the loop occurs, i becomes 3 and the 11 value slips through the code

You could simply put --i in the if condition after removeItem ... or even use removeItem(animals, i--) - that way removeItem is called with the current value of i, which then gets decreased, then increased by the i++ before the next iteration

That's could look misleading to some people, but works

function removeItem(arr, i) {
 arr.splice(i, 1);
}
var animals = ["cat", "dog", 2, 11, "bird", 13];
var i;
for (i = 0; i < animals.length; i++) {
 if (!isNaN(animals[i])) {
 removeItem(animals, i--);
 }
}
console.log(animals);

A cleaner and easier way to fix that is to iterate through the array from end to start

function removeItem(arr, i) {
 arr.splice(i, 1);
}
var animals = ["cat", "dog", 2, 11, "bird", 13];
var i;
for (i = animals.length - 1; i >= 0; --i) {
 if (!isNaN(animals[i])) {
 removeItem(animals, i);
 }
}
console.log(animals);