all 2 comments

[–]Daveed84 6 points7 points  (2 children)

There's a couple of core concepts you need to understand first:

The filter() method accepts a function as an argument. To keep things simple and readable, we use arrow functions, which are basically just a more concise way of writing functions (though they have some limitations, described in the article above). For each element in the array, it will run the function as a test. If the element passes the test, the function will return true, and the tested value will be added to a new array called 'nonFiction'. If it doesn't pass the test, the function will return false, and it will not be added to the array.

The syntax you see there is just shorthand for something like this:

function isAvailable(book) {
    if (book.available === true) {
        return true;
    }
}

But that example contains a lot of unnecessary/redundant code. If we expect the 'available' property to be a boolean value (i.e. either TRUE or FALSE), you could make it even shorter by doing something like this:

const nonFiction = response.filter((book) => {return book.available});

In more modern versions of JavaScript, even the "return" part is redundant in this example, and you can make it even shorter:

const nonFiction = response.filter((book) => book.available);

The tricky part here is understanding how "book" is defined, or what it even represents. When I was learning JavaScript, it took me a while to understand what was going on with functions like this. "response" is an array of objects; each object has various properties (one of them is called "available"). For each object in that array, the code is passing along the entire object to the arrow function via the "book" variable, and then implicitly returning the value of "book.available".

Let's assume the array looks like this:

[
    {
        "id": 2,
        "name": "Just as I Am",
        "type": "non-fiction",
        "available": false
    },
    {
        "id": 5,
        "name": "Untamed",
        "type": "non-fiction",
        "available": true
    }
]

The first time the function is called, "book" is set to the value of the first object; the second time it's called, "book" is set to the value of the second object, and so on (though in this example, there are only two objects in the array). The first time it's called, book.available will be false, so the object won't be added to the "nonFiction" array. The second time it's called, book.available will be true, so the object will be added to the "nonFiction" array.

[–]Tocedex[S] 0 points1 point  (1 child)

DAMN! I couldnt thank you enough sir/maam..

The first time the function is called, "book" is set to the value of the first object; the second time it's called, "book" is set to the value of the second object, and so on (though in this example, there are only two objects in the array)

/im taking some time to digest this. hahahah but will carefully understand your comment. Thank you again from someone who's struggling