DEV Community

Cover image for 10 Genius Hacks Using Array.filter() That You Must Try
Aneeqa Khan
Aneeqa Khan

Posted on

2

10 Genius Hacks Using Array.filter() That You Must Try

Array filtering in JavaScript is a powerful feature that can be used creatively and practically.

Here are some innovative uses of the array.filter method:

1. Removing Duplicates

const numbers = [1, 2, 2, 3, 4, 4, 5];
const uniqueNumbers = numbers.filter((value, index, self) => self.indexOf(value) === index);
// uniqueNumbers: [1, 2, 3, 4, 5]
Enter fullscreen mode Exit fullscreen mode

2. Finding Prime Numbers

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const isPrime = num => {
    for (let i = 2, s = Math.sqrt(num); i <= s; i++)
        if (num % i === 0) return false;
    return num > 1;
};
const primeNumbers = numbers.filter(isPrime);
// primeNumbers: [2, 3, 5, 7]
Enter fullscreen mode Exit fullscreen mode

3. Filtering Objects by Property

const users = [
    { name: 'Alice', age: 25 },
    { name: 'Bob', age: 30 },
    { name: 'Charlie', age: 25 }
];
const age25 = users.filter(user => user.age === 25);
// age25: [{ name: 'Alice', age: 25 }, { name: 'Charlie', age: 25 }]
Enter fullscreen mode Exit fullscreen mode

4. Excluding Falsy Values

const values = [0, 1, false, 2, '', 3, null, undefined, 4];
const truthyValues = values.filter(Boolean);
// truthyValues: [1, 2, 3, 4]
Enter fullscreen mode Exit fullscreen mode

5. Filtering Nested Arrays

const nestedArrays = [[1, 2, 3], [4, 5, 6], [7, 8, 9]];
const flattenedAndFiltered = nestedArrays.flat().filter(num => num > 5);
// flattenedAndFiltered: [6, 7, 8, 9]
Enter fullscreen mode Exit fullscreen mode

6. Filtering Unique Values in Nested Arrays

const arrays = [[1, 2, 3], [3, 4, 5], [5, 6, 7]];
const uniqueValues = [...new Set(arrays.flat())];
// uniqueValues: [1, 2, 3, 4, 5, 6, 7]
Enter fullscreen mode Exit fullscreen mode

7. Filtering by Date Range

const events = [
    { name: 'Event 1', date: new Date('2023-01-01') },
    { name: 'Event 2', date: new Date('2023-06-01') },
    { name: 'Event 3', date: new Date('2023-12-01') }
];
const startDate = new Date('2023-01-01');
const endDate = new Date('2023-06-30');
const filteredEvents = events.filter(event => event.date >= startDate && event.date <= endDate);
// filteredEvents: [{ name: 'Event 1', date: new Date('2023-01-01') }, { name: 'Event 2', date: new Date('2023-06-01') }]
Enter fullscreen mode Exit fullscreen mode

8. Filtering with Multiple Conditions

const products = [
    { name: 'Laptop', price: 1000, inStock: true },
    { name: 'Phone', price: 500, inStock: false },
    { name: 'Tablet', price: 300, inStock: true }
];
const availableExpensiveProducts = products.filter(product => product.inStock && product.price > 400);
// availableExpensiveProducts: [{ name: 'Laptop', price: 1000, inStock: true }]
Enter fullscreen mode Exit fullscreen mode

9. Filtering Array of Strings by Length

const words = ['apple', 'banana', 'cherry', 'date'];
const longWords = words.filter(word => word.length > 5);
// longWords: ['banana', 'cherry']
Enter fullscreen mode Exit fullscreen mode

10. Filtering Non-Numeric Values

const mixedValues = [1, 'two', 3, 'four', 5];
const numericValues = mixedValues.filter(value => typeof value === 'number');
// numericValues: [1, 3, 5]
Enter fullscreen mode Exit fullscreen mode

Thank you for reading!

Feel free to connect with me on LinkedIn or GitHub.

Sentry blog image

How to reduce TTFB

In the past few years in the web dev world, we’ve seen a significant push towards rendering our websites on the server. Doing so is better for SEO and performs better on low-powered devices, but one thing we had to sacrifice is TTFB.

In this article, we’ll see how we can identify what makes our TTFB high so we can fix it.

Read more

Top comments (0)

SurveyJS custom survey software

JavaScript UI Library for Surveys and Forms

Generate dynamic JSON-driven forms directly in your JavaScript app (Angular, React, Vue.js, jQuery) with a fully customizable drag-and-drop form builder. Easily integrate with any backend system and retain full ownership over your data, with no user or form submission limits.

View demo

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay