How can i compare Array.find with iterators like for foreach etc..?

Question

I regularly use for loop , forEach loop , Array.map etc for iterating arrays. i came to know that we can also use Array.find for looping array and it can also return the values matched in the array based on condition:

I have iterated array of objects using Array.find() and for loop as follows

Using Array.find:

[{
    name: "John"
}, {
    name: "Cannady"
}, {
    name: "Sherlock"
}].find(function(oArrayObject) {
    console.log(oArrayObject)   
});

output on console:

{name: "John"}
{name: "Cannady"}
{name: "Sherlock"}

Using for loop:

    var aNames=[{
           name: "John"
        }, {
            name: "Cannady"
        }, {
            name: "Sherlock"
        }]

for(var i=-0;i<aNames.length;i++){
console.log(aNames[i]);
}

output on console:

{name: "John"}
{name: "Cannady"}
{name: "Sherlock"}

Both codes did the same thing.

What is the advantage of Array.find() over for loop??

Which one gives the better performance ??

Please explain me the difference between array.find and other iterators in terms of performance , usage , internal functionality etc...


Show source
| javascript   | arrays   | loops   | for-loop   2017-01-04 20:01 3 Answers

Answers ( 3 )

  1. 2017-01-04 20:01

    Array#find is used to, well, find an item in the array that matches a predicate, and return it. When Array.find returns, the loop ends. Performance wise, you don't have to iterate the whole array, if the item you seek is not the last.

    var result = [{
        name: "John"
    }, {
        name: "Cannady"
    }, {
        name: "Sherlock"
    }].find(function(o) {
        return o.name.startsWith('Ca');
    });
    
    console.log(result);

    There are many methods to iterate arrays (see array in mdn), such as: forEach, map, filter, reduce, reduceRight, some, every, find, and findIntex.

    Except for Array#forEach, most of them provide additional functionality beyond the iteration itself.

  2. 2017-01-04 20:01

    Using for/forEach for iteration is when you need to touch or check every object in the collection. The find method is when you know what you're looking for and just want a quick search through the collection to see if it's there.

  3. 2017-01-04 20:01

    The find() method returns a value of the first element in the array that satisfies the provided testing function. Otherwise undefined is returned.

    find function use a callback function, for example:

    function isBigEnough(element) {
       return element >= 15;
    }
    [12, 5, 8, 130, 44].find(isBigEnough);
    

    The find method executes the callback function once for each element present in the array until it finds one where callback returns a true value. If such an element is found, find immediately returns the value of that element.

    The performance of find function varies, can be O(1),or O(n) or less,in contrast to the forEach and for ,where complexity is always O(n) because you have to iterate all the array.

◀ Go back