Table of contents
While working with an array, we may frequently only need a part of its items rather than the entire array. So, we may apply the .filter() method to an array to retrieve certain specific desired elements.
.filter() method
In JavaScript, the .filter() method is one of the most useful array methods that allows you to filter an array based on a specific condition.
This method takes a callback function as its argument and returns a new array containing only the elements that meet the condition specified in the callback.
Iterative techniques are used in the .filter() method. Every element in an array is called once by the specified callback function, and a new array is created with all the values for which callback function returns a truthy value. The new array does not contain any array members that fail the callback function test.
Only array indexes with assigned values receive a callback function call. For open slots, it is not called.
The .filter() method creates a new array rather than mutating the primary array.
The basic syntax of the .filter() method is as follows:
array.filter(callback(element, index, array) {}, thisArg)
Parameters
Callback Function
It is a procedure to run on each component of the array. If the element is to be kept, it should return a truthy value; otherwise, it should return a falsy value.
That means the callback function should return true if the element should be included in the new array, and false if it should be excluded.
The callback function takes three arguments:
element: This refers to the array's current element under processing.
index: This is the array's index of the element that is currently being processed.
array: This is the array that the
.filter()method was called upon.
thisArg
This is a value that callback function can use as this.
The this value that callback function will ultimately be able to observe will be determined by the standard rules: if callback function is non-strict, primitive this values will be wrapped in objects, and globalThis will be used in place of undefined/null. Since arrow functions don't have their own this binding, the thisArg parameter is meaningless for any callback function defined with an arrow function.
Examples
Let's take a look at some examples to see how the .filter() method works:
const numbers = [1, 2, 3, 4, 5, 6];
const evenNumbers = arr => arr.filter(num => num%2===0)
console.log(evenNumbers(numbers)); // Output: [2, 4, 6]
In this example, we have an array of numbers. We use the .filter() method to create a new array that only contains the even numbers from the original array. The callback function checks if the current number is divisible by 2 (i.e., even), and returns true if it is.
const words = ['hello', 'world', 'foo', 'bar'];
const shortWords = arr => arr.filter(str => str.length < 5)
console.log(shortWords(words)); // Output: ['foo', 'bar']
In this example, we have an array of words. We use the .filter() method to create a new array that only contains words with less than 5 characters. The callback function checks the length of each word and returns true if it is less than 5.
Conclusion
The .filter() method is a powerful tool that allows us to filter an array based on a specific condition. It is easy to use and can help us write more concise and readable code.