Filter Elements from Array | #2634 | LeetCode Solution

Author: neptune | 06th-Sep-2023

Problem : Filter Elements from Array | #2634 | LeetCode

Given an integer array `arr` and a filtering function `fn`, return a filtered array `filteredArr`.

The `fn` function takes one or two arguments:

  • arr[i] - number from the arr

  • i - index of arr[i]

`filteredArr` should only contain the elements from the arr for which the expression `fn(arr[i], i)` evaluates to a truthy value. A truthy value is a value where Boolean(value) returns `true`.

Please solve it without the built-in `Array.filter` method.


Example 1:

Input: arr = [0,10,20,30], fn = function greaterThan10(n) { return n > 10; }

Output: [20,30]

Explanation:

const newArray = filter(arr, fn); // [20, 30]

The function filters out values that are not greater than 10

Example 2:

Input: arr = [1,2,3], fn = function firstIndex(n, i) { return i === 0; }

Output: [1]

Explanation:

fn can also accept the index of each element

In this case, the function removes elements not at index 0

Example 3:

Input: arr = [-2,-1,0,1,2], fn = function plusOne(n) { return n + 1 }

Output: [-2,0,1,2]

Explanation:

Falsey values such as 0 should be filtered out


Solution:

            /**

     * @param {number[]} arr

     * @param {Function} fn

     * @return {number[]}

     */

    var filter = function (arr, fn) {


        filteredArr = []

        for (let i = 0; i < arr.length; i++) {

            if (fn(arr[i], i)) {

                filteredArr.push(arr[i])

            }

        }

        return filteredArr


    };



Explanation:

Certainly, let's break down the code step by step:


1. The code defines a function called `filter` which takes two parameters:

   - `arr`: An array of numbers.

   - `fn`: A function that will be used as a filter criteria.


2. Inside the `filter` function, a new array called `filteredArr` is declared. This array will be used to store the elements of the input array `arr` that satisfy the filter condition defined by the `fn` function.


3. The function then enters a `for` loop that iterates through each element of the input array `arr`. The loop is controlled by the variable `i`, which starts at 0 and goes up to the length of the array.


4. Inside the loop, there's an `if` statement that checks whether the result of calling the `fn` function with the current element of `arr` and its index `i` is truthy.


   - `fn(arr[i], i)`: This calls the `fn` function with two arguments: the current element `arr[i]` and its index `i`. The purpose is to allow the `fn` function to evaluate the element and index and return `true` or `false` based on some condition.


5. If the result of `fn(arr[i], i)` is `true`, indicating that the element meets the filter criteria defined by `fn`, then that element is pushed into the `filteredArr` using `filteredArr.push(arr[i])`.


6. After the loop has processed all elements in the input array `arr`, the `filteredArr` now contains the elements that passed the filter.


7. Finally, the `filteredArr` is returned as the result of the `filter` function.


In summary, this `filter` function takes an array and a filter function as input, and it iterates through the array, applying the filter function to each element. It collects the elements that satisfy the filter criteria into a new array and returns that filtered array as the output. This is essentially an implementation of a basic filtering operation similar to JavaScript's built-in `Array.prototype.filter` method.





👉 Read More
Generate Fibonacci Sequence - JavaScript | Hackerank
Managing Virtual Environments in React JavaScript Projects
To Be Or Not To Be | #2704 | LeetCode Solution
Apply Transform Over Each Element in Array | #2635 | LeetCode Solution
Function Composition | #2629 | LeetCode Solution
Counter | #2620 | LeetCode Solution
Different ways to handle state in React applications
Chunk Array | #2677 | LeetCode Solution
Counter 2 | #2665 | LeetCode Solution
Array Reduce Transformation | #2626 | LeetCode Solution
Add Two Promises | #2723 | LeetCode Solution
Arrow Functions in JavaScript | ES6
From REST to GraphQL: The Future of API Design
Is Object Empty | #2727 | LeetCode | JavaScript Solution
How I Built My Blogging Website Using React, Node.js, and Jamstack Architecture?
How to Perform Unit Testing in React Components with Examples?
Do you know ! How to manage State in Functional & Class Components in React ?
A Guide to Writing Clean, Readable, and Maintainable Code in JavaScript
How to Get Started with Jamstack: A Comprehensive Guide?
Why, What, and When: Understanding Jamstack?
Explore more Blogs...