JavaScript: Filter an Array

Introduction

In JavaScript, filtering an array is a common task used to extract elements that meet specific criteria. JavaScript provides the filter() method, which creates a new array containing elements that pass the test provided by a function. This method is useful for tasks such as filtering numbers, strings, or objects from an array based on a condition.

Problem Statement

Create a JavaScript program that:

• Accepts an array of elements.
• Filters the array based on a condition (e.g., filtering numbers greater than a certain value).
• Returns and displays the filtered array.

Example:

• Input: [5, 10, 15, 20, 25] (filter for numbers greater than 15)

• Output: [20, 25]

• Input: [2, 7, 8, 10, 1, 5] (filter for even numbers)

• Output: [2, 8, 10]

Solution Steps

1. Read the Input Array: Provide an array of numbers either as user input or directly in the code.
2. Filter the Array: Use the filter() method to extract elements that meet a specific condition.
3. Display the Result: Print the filtered array.

JavaScript Program

Example 1: Filter Numbers Greater Than a Given Value

// JavaScript Program to Filter Numbers Greater Than a Certain Value
// Author: https://www.javaguides.net/

function filterGreaterThan(arr, threshold) {
    // Step 1: Use filter() to get numbers greater than the threshold
    return arr.filter(num => num > threshold);
}

// Example input
let numbers = [5, 10, 15, 20, 25];
let filteredNumbers = filterGreaterThan(numbers, 15);
console.log(`Numbers greater than 15: [${filteredNumbers}]`);

Output

Numbers greater than 15: [20, 25]

Example 2: Filter Even Numbers from an Array

// JavaScript Program to Filter Even Numbers from an Array
// Author: https://www.javaguides.net/

function filterEvenNumbers(arr) {
    // Step 1: Use filter() to get even numbers
    return arr.filter(num => num % 2 === 0);
}

// Example input
let numbers = [2, 7, 8, 10, 1, 5];
let filteredNumbers = filterEvenNumbers(numbers);
console.log(`Even numbers: [${filteredNumbers}]`);

Output

Even numbers: [2, 8, 10]

Explanation

Step 1: Use the filter() Method

• The filter() method creates a new array with all elements that pass the test implemented by the provided function.
  • In the first example, the condition is num > threshold, which filters numbers greater than the given threshold.
  • In the second example, the condition is num % 2 === 0, which filters out even numbers.

Step 2: Return and Display the Filtered Array

• The filtered array is returned by the function and displayed using console.log().

Step 3: Customize Filtering

You can customize the filtering condition based on your requirements. For example, to filter odd numbers:

function filterOddNumbers(arr) {
    return arr.filter(num => num % 2 !== 0);
}

Conclusion

This JavaScript program demonstrates how to filter an array using the filter() method. The filter() method is versatile and can be used to extract elements that meet specific criteria, such as filtering numbers, strings, or objects. It's an efficient way to create new arrays based on conditions in JavaScript.