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.