javascript
  1. javascript-filter
PreviousNext

JavaScript filter()

The JavaScript filter() method creates a new array with all the elements that pass the test implemented by the provided function. It does not change the original array and returns a new filtered array.

Syntax

array.filter(function(currentValue, index, arr), thisValue)
  • function(currentValue, index, arr): A required function, which accepts three arguments:
    • currentValue: Specifies the value of the current element being processed.
    • index: Specifies the index of the current element being processed.
    • arr: Specifies the array on which the filter() method was called.
  • thisValue (Optional): A value to use as this when executing the callback function.

Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Array Filter Example</title>
</head>
<body>

<!-- Placeholder for displaying the output -->
<p id="output"></p>

<script>
    // Array
    const numbers = [2, 5, 8, 1, 4, 10];

    // Use filter to create a new array with numbers greater than 5
    const filteredNumbers = numbers.filter(function(number) {
        return number > 5;
    });

    // Display the resulting array in HTML
    document.getElementById("output").innerHTML += "Filtered Numbers: " + filteredNumbers.join(', ');
</script>

</body>
</html>

Output

[8, 10]


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Array Filter Example</title>
</head>
<body>

<!-- Placeholder for displaying the output -->
<p id="output"></p>

<script>
    // Array
    const numbers = [2, 5, 8, 1, 4, 10];

    // Use filter to create a new array with numbers greater than 5
    const filteredNumbers = numbers.filter(function(number) {
        return number > 5;
    });

    // Display the resulting array in HTML
    document.getElementById("output").innerHTML += "Filtered Numbers: " + filteredNumbers.join(', ');
</script>

</body>
</html>
Try Playground

Explanation

In the above example, the filter() method is used to create a new array containing only the elements that are greater than 5 from the numbers array. The callback function inside the filter() method returns true when the current value is greater than 5, filtering out all the rest.

Use

The filter() method can be used when you need to create a new array from an existing array, but with some of the elements filtered based on a specific condition. Some common use cases of the filter() method include:

  • Removing unwanted elements from an array based on a certain condition.
  • Creating a new array with only some elements from an existing array.
  • Filtering out empty or undefined elements from an array.

Important Points

  • The callback function passed to the filter() method must return either true or false.
  • The filter() method does not modify the original array, instead, it returns a new array containing only the filtered elements.
  • The filter() method can be used with arrow functions to make the code more concise.

Summary

In summary, the filter() method in JavaScript is a useful tool when you need to create a new array with only specific elements from an existing array. It allows you to filter out elements based on your own custom condition and returns a new array with only the filtered elements.

map()reduce()
Published on: