What does this code using [].filter.call do?

Question

I’m learning javascript and trying to write code that sorts a list, removing elements if they meet certain criteria.

I found this snippet that seems promising but don't have a clue how it works so I can adapt it to my needs:

list = document.getElementById("raffles-list").children; // Get a list of all open raffles on page
list = [].filter.call(list, function(j) {
    if (j.getAttribute("style") === "") {
        return true;
    } else {
        return false;
    }
});

Can you guys help me learn by explaining what this code block does?

Answer 1

It's getting all the children of the "raffles-list" element, then returning a filtered list of those that contain an empty "style" attribute.

The first line is pretty self-evident - it just retrieves the children from the element with id "raffles-list".

The second line is a little more complicated; it's taking advantage of two things: that [], which is an empty array, is really just an object with various methods/properties on it, and that the logic on the right hand side of the equals sign needs to be evaluated before "list" gets the new value.

1. Uses a blank array in order to call the "filter" method
2. Tells the filter to use list as the array to filter, and uses function(j) to do the filtering, where j is the item in the list being tested
3. If the item has a style attribute that is empty, i.e. has no style applied, it returns true.

Edit: As per OP comment, [].filter is a prototype, so essentially an object which has various properties just like everything else. In this case filter is a method - see here. Normally you just specify an anonymous function/method that does the testing, however the author here has used the .call in order to specify an arbitrary object to do the testing on. It appears this is already built into the standard filter method, so I don't know why they did it this way.

Answer 2

Array like objects are some of javascript objects which are similar to arrays but with differences for example they don't implement array prototypes. If you want to achieve benefits of array over them (for example like question filter children of an element )you can do it this way:

Array.prototype.functionName.call(arrayLikeObject, [arg1, [arg2 ...]]);

Here in question array like is html element collection; and it takes items without any styling.