Why below array is not being removed.

var removeableIndex =-1;
        bookingStatus.bookings.filter(function(item, index) {
            if(item.id == id){
                removeableIndex = index;
                return true;
            }
            return false;
        });
        console.log(removeableIndex)
        if(removeableIndex)
            var result = bookingStatus.bookings.splice(removeableIndex,1);

I have passed the correct array of bookings. Filter is correctly matching. This does not remove item when removeableIndex is 0. Suppose if removeableIndex is grater than zero it is being removed.

Below code with small change works correctly for all cases including removeableIndex is 0.

var removeableIndex =-1;
        bookingStatus.bookings.filter(function(item, index) {
            if(item.id == id){
                removeableIndex = index;
                return true;
            }
            return false;
        });
        console.log(removeableIndex)
        if(removeableIndex > -1)
            var result = bookingStatus.bookings.splice(removeableIndex,1);

Only difference is that if(removeableIndex > -1)

I would like to know why didnt the first set of code did not remove the item only when it is at zero index.

Why below array is not being removed.

var removeableIndex =-1;
        bookingStatus.bookings.filter(function(item, index) {
            if(item.id == id){
                removeableIndex = index;
                return true;
            }
            return false;
        });
        console.log(removeableIndex)
        if(removeableIndex)
            var result = bookingStatus.bookings.splice(removeableIndex,1);

I have passed the correct array of bookings. Filter is correctly matching. This does not remove item when removeableIndex is 0. Suppose if removeableIndex is grater than zero it is being removed.

Below code with small change works correctly for all cases including removeableIndex is 0.

var removeableIndex =-1;
        bookingStatus.bookings.filter(function(item, index) {
            if(item.id == id){
                removeableIndex = index;
                return true;
            }
            return false;
        });
        console.log(removeableIndex)
        if(removeableIndex > -1)
            var result = bookingStatus.bookings.splice(removeableIndex,1);

Only difference is that if(removeableIndex > -1)

I would like to know why didnt the first set of code did not remove the item only when it is at zero index.

• javascript
• arrays
• array-splice

3 Answers 3

This condition will be false when the index is zero:

if(removeableIndex)

As you are using the variable as the whole condition, it will be evaluated as a boolean value. It works the same as:

if(removeableIndex != 0)

It is important to know how JavaScript evaluates numbers as boolean values. 0 is evaluated as false, all other numbers are evaluated as true.

Because your removeableIndex starts off as -1, it will evaluate to true. If your filter matches an item at index 0 it will evaluate to false.

If you change the default value to something that evaluates false, that solves half the problem, but you also have to check if the value is 0 because that will evaluate to false.

var removeableIndex; // If we leave the variable undefined, it will evaluate false.
bookingStatus.bookings.filter(function(item, index) {
    if(item.id == id){
        removeableIndex = index;
        return true;
    }
    return false;
});
console.log(removeableIndex)
if(removeableIndex || removeableIndex === 0)
// If removeableIndex evaluates to true, or is equal to 0
    var result = bookingStatus.bookings.splice(removeableIndex,1);
    // remove the index

However, you should be able to use the following code, because Array.prototype.filter() returns an array based on the return value of the callback function

var result = bookingStatus.bookings.filter(function(item, index) {
    return item.id !== id;
});

When removeableIndex is 0 then evaluating if(removeableIndex) will be false, because 0 is a false-y value. So, you should evaluate it as follows,

if(removeableIndex >= 0)

OR To be more vigilant,

var removeableIndex; //Leave the removeableIndex undefined.
//... Do what you are doing
if(type of removeableIndex != "undefined" && removeableIndex >= 0)

For more info about Truthy/Falsy values in JavaScript, go here: http://www.sitepoint./javascript-truthy-falsy/