Array findAll JavaScript: 6 Essential Techniques

Array findAll JavaScript: What is the appropriate JS function?

To get all matching elements from an array or array of objects, the appropriate JS method is the array.filter() method, not the array.find() method.

In most cases, developers are trying to get elements from an array using the array.find() method because this method name sounds very similar to the word “find all elements”.

Though the array method array.find() sounds similar to the word “array.findAll” but always keep in mind that this find() method always returns the very first element of the provided array that satisfies the provided criteria. Not all, my brother! 

So, as of now, just keep in mind that the array.filter() method always creates a shallow copy of a given array, keeping only the elements from the given array that pass the conditions of the provided function. More clearly Array.filter returns a new array containing all matching elements, or an or an empty array [] if it matches nothing.

Don’t worry at the end of the article we will discuss more about array.find() vs. array.filter() method.

Verify the array.filter() method – Is it returning all matching elements?

<script>
    
    function moreThanHundred(value) {
        return value > 100;
        }
    
    // array.findall javascript code example
    // filtered array will hold all matching elemnts
    var filtered = [99, 65, 78, 145, 155].filter(moreThanHundred);

    //Now print the array
    console.log(filtered)

</script>

Output

Code Explanation

Here first, we write a JS function named “moreThanHundred” and this function will return true or false based on the provided value.

Later on, we have declared an array “filtered” which contains 5 elements.

Apply the filter() method. As per our visual observations, only 2 out of 5 elements are able to get a true value, right?

Now print the “filtered” array to verify whether the array.filter() method returned multiple values or not. Hope you get a simple implementation of array findAll JavaScript method.

Verify the array.filter() method – verify it for JS objects?

<script>
    
    const course = [
    {
        name: 'Javascript',
        duration: 30,
        code: 'js001'
    },
    {
        name: 'Advance Javascript',
        duration: 15,
        code: 'js002'
    },
    {
        name: 'C#',
        duration: 30,
        code: 'c#001'
    },
    {
        name: 'Advance C#',
        duration: 15,
        code: 'c#002'
    }
    ];

    // filter array findall js
    var filterd = course.filter(e => e.name.includes('Javascript'));

    // print array.findall javascript
    console.log(filterd)

</script>

Output

So what do we get? Are we getting all matching elements or objects using the array.filter() method? Yes, we get all values accordingly, right? As per our above discussion, the array.filter() methods return all matching values and discard other values based on callback function criteria.

JavaScript Array filter() syntax

filter(callbackFn)
filter(callbackFn, thisArg)

Discuss Parameters

callbackFn: A function executes each element in the array. It always returns a truthy value to store the conditionally satisfied element in the resulting array and a falsy value otherwise.

thisArg – Optional: Read more about from here.

More About array.filter() considering “Array findAll JavaScript”

The array.filter() method is an iterative method. It calls a supplied callbackFn function once for each and every element of the array to filter and creates a new array with all elements for which callbackFn returns a value of true. Array elements that fail the callbackFn criteria are not added to the new array.

The array.filter() method is a generic method. Expect only this value to get a length property and integer-keyed attributes.

More Code Examples on “array.findall javascript”

Here we are going to explain 6 most essential techniques that you must know. So without wasting any time let’s start:

#1 Removing every small value of an array

<script>
    
    function getAcceptedPercentage(value) {
        return value >= 80;
        }

    const filtered = [33, 55, 67, 82, 79, 89].filter(getAcceptedPercentage);
    console.log(filterd)

</script>

#2 Removing Invalid Values From JSON

<script>

    const arrJSON = [
    { num: 76 },
    { num: 19 },
    { num: 23.5 },
    {},
    { num: null },
    { num: NaN },
    { num: "undefined" },
    ];

    function filterInvalid(item) {
    if (Number.isFinite(item.num)) {
        return true;
    }
    
    return false;
    }

    // Find all elements with the matching criteria
    const filteredJSON = arrJSON.filter(filterInvalid);

    console.log("Array findall JS: ", filteredJSON);

</script>

Output

#3 Find all the array elements that match the substring

<script>

    const Employees = ["Brain Lara", "Lara Craft", "Moin Ali", "Allen Donald", "Robi Bepari"];

    // Filter array items get all based on search condition
    function filterEmployees(arr, sTerm) {
    return arr.filter((c) => c.toLowerCase().includes(sTerm.toLowerCase()));
    }

    console.log(filterEmployees(Employees, "lara"));
    console.log(filterEmployees(Employees, "don"));

</script>

Output

#4 Array findAll JavaScript – Using Inline Filter Function

<script>

    let Employees = [
        { name: 'Nicky', age: 31, department: 'Development' },
        { name: 'Lauren', age: 42, department: 'Sales' },
        { name: 'Paul', age: 33, department: 'Marketing' },
        { name: 'Robert', age: 29, department: 'Development' },
        { name: 'Mahindra', age: 32, department: 'Marketing' },
        { name: 'Raja', age: 26, department: 'Development' },
    ]

    let filteredEmployees = Employees.filter((c) => {
        return c.age > 28 && c.department === 'Development';
    });

    console.log(filteredEmployees);

</script>

Output

#5 array.findall javascript – Get multiple elements in a sorted list

The array.filter() method can perform multiple operations at a time without creating as many variables or functions because it can chain with other functional methods easily.

For example, you can sort the “Emplyees” array of objects like below:

<script>

    let Employees = [
        { name: 'Nicky', age: 31, department: 'Development' },
        { name: 'Lauren', age: 42, department: 'Sales' },
        { name: 'Paul', age: 33, department: 'Marketing' },
        { name: 'Robert', age: 29, department: 'Development' },
        { name: 'Mahindra', age: 32, department: 'Marketing' },
        { name: 'Raja', age: 26, department: 'Development' },
    ]

    let filteredSortedEmployees = Employees.filter(C => C.age > 28 && C.department === 'Development')
    .sort();

    console.log(filteredSortedEmployees);

</script>

Output

Same as #4. You must do the experiment in different ways.

#6 array.findall javascript: How to Achieve Manually

We can find all elements or values in an array by manually looping over the array in ascending order (on index). Here is the code for your understanding:

<script>

    let Employees = [
        { name: 'Nicky', age: 31, department: 'Development' },
        { name: 'Lauren', age: 42, department: 'Sales' },
        { name: 'Paul', age: 33, department: 'Marketing' },
        { name: 'Robert', age: 29, department: 'Development' },
        { name: 'Mahindra', age: 32, department: 'Marketing' },
        { name: 'Raja', age: 26, department: 'Development' },
    ]

    let filteredEmployees = [];

    for (let i= 0; i<Employees.length; i++) {
        if (Employees[i].age > 28 && Employees[i].department === 'Development' ) {
            filteredEmployees = [...filteredEmployees, Employees[i]];
        }
    }

    console.log(filteredEmployees);

</script>

Output

Same as #4, #5.

So far we have mentioned 6 practical ways to master “Array findAll JavaScript”. Hope you will practice and implement our code samples as per your requirement.

Final Considerations on – array.findall javascript

So, as of now, we fully understand that the array.filter() method is the only option to get multiple elements over the array.filter() method. Here are the five key takeaways to follow:

• The array.filter() method returns a new array filled with elements that pass a certain criteria.
• The array.filter() method does not execute the function for empty elements.
• The array.filter() method does not make any changes to the original array.
• The array.filter() method can use an annoynymous function.
• The array.filter() method can chain other methods, like sort.

Array.find() vs. Array.filter() – Return all matching elements of an array

Array.find()	Array.filter()
It returns only the first value of the array that matches.	It returns all matched values as an array.
It will terminate once a match found.	It will check every elements of an array.
Use find() for newer browsers only.	In case of Internet Explorer, you should use the filter() method.

Browser Support:

• Chrome 51
• Edge 15
• Firefox 54
• Safari 10 Opera 38

Conclusion

So, as far as our commitment, we have discussed all six methods of filter() to achieve our objective, “Array findAll JavaScript”.  And we are very confident that, from now on, you can implement your own array.findall method in your Javascript code. Happy coding!!

FAQs