JavaScript: Filter an Array

🎓 Top 15 Udemy Courses (80-90% Discount): My Udemy Courses - Ramesh Fadatare — All my Udemy courses are real-time and project oriented courses.

▶️ Subscribe to My YouTube Channel (178K+ subscribers): Java Guides on YouTube

▶️ For AI, ChatGPT, Web, Tech, and Generative AI, subscribe to another channel: Ramesh Fadatare on YouTube

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.

My Top and Bestseller Udemy Courses. The sale is going on with a 70 - 80% discount. The discount coupon has been added to each course below:

Build REST APIs with Spring Boot 4, Spring Security 7, and JWT

🆕 High-Demand 80–90% OFF

[NEW] Learn Apache Maven with IntelliJ IDEA and Java 25

🆕 High-Demand 80–90% OFF

ChatGPT + Generative AI + Prompt Engineering for Beginners

🚀 Trending Now 80–90% OFF

Spring 7 and Spring Boot 4 for Beginners (Includes 8 Projects)

🔥 Bestseller 80–90% OFF
Available in Udemy for Business

Building Real-Time REST APIs with Spring Boot - Blog App

🔥 Bestseller 80–90% OFF
Available in Udemy for Business

Building Microservices with Spring Boot and Spring Cloud

🌟 Top Rated 80–90% OFF
Available in Udemy for Business

Java Full-Stack Developer Course with Spring Boot and React JS

🔥 Bestseller 80–90% OFF
Available in Udemy for Business

Build 5 Spring Boot Projects with Java: Line-by-Line Coding

🌟 Top Rated 80–90% OFF

Testing Spring Boot Application with JUnit and Mockito

🔥 Bestseller 80–90% OFF
Available in Udemy for Business

Spring Boot Thymeleaf Real-Time Web Application - Blog App

🔥 Bestseller 80–90% OFF
Available in Udemy for Business

Master Spring Data JPA with Hibernate

🔥 Bestseller 80–90% OFF
Available in Udemy for Business

Spring Boot + Apache Kafka Course - The Practical Guide

🎓 Student Favorite 80–90% OFF
Available in Udemy for Business

Java Testing: Mastering JUnit 5 Framework

🆕 New 80–90% OFF

Reactive Programming in Java: Spring WebFlux and Testing

🌟 Top Rated 80–90% OFF

Spring Boot + RabbitMQ Course - The Practical Guide

🌟 Top Rated 80–90% OFF
Available in Udemy for Business

Functional Programming in Java (Includes Java Collections)

🎓 Student Favorite 80–90% OFF

ChatGPT for Java Developers: Boost Your Productivity with AI

🚀 Trending Now 80–90% OFF