Array.prototype.filter( )
INTRODUCTION
The .filter() method is available to the array object and any array has access to this method. It is a non-destructive method, meaning it will not alter the original array. It will create a brand new array by iterating through the original array and performing a function on each item. To access the new array, you’ll want to create a variable to save the new array in.
HOW IT WORKS
Like other array methods, it takes a callback function as its parameter, this function will be called once for each item in the array as it iterates through. The callback function itself takes in three parameters (one required and two optional):
- item parameter (required) - this allows the function to execute on each item value in the array.
- index parameter (optional) - we can pass the index into the callback function if we wish to use the indices in our function.
- array parameter (optional) - we can pass the array into the callback function if we wish to use the entire array in a single execution of the callback function.
You can name these callback function parameters whatever you like, but the order must be: .filter(item, index, array){ executable code }
This call back function only returns true or false. You, the developer, set what a true statement is in this function. If the function returns true during its call on an item, then that item will be passed into the new array; if the function returns false during its call on an item, then that item won’t be passed into the new array.
EXAMPLE
In this example, the callback function is set to return items less than 500. Only three items in the originalArray are true according to that set condition so they will be filtered into the new array and the others will not. You will see if you log the originalArray it will be unchanged.
NOTES
- In these examples I am using an anonymous function. You could create a global function that does the same thing and pass it in as the callback function by name.
- This method is essentially extracting certain pieces of data from an array and using them to create a new array based on a condition that you have set to return true, all while not altering the original array.
- In the examples both above and below, I have added the optional callback function parameters as I find it helps give me a complete picture of what I am able to pass in (even though I am not utilizing them), however only the first one is required and would work fine on its own in these circumstances.
- For very simple callback functions you can use the arrow function notation to clean up your code. I have used the standard function notation to more easily see what is going on.
- You can name the item parameter to the singular form of what type of content your array is holding to make more linguistic sense. For example:
Top comments (0)