What makes using for faster than some() or filter()?

Question

What makes using for faster than some() or filter()?

After experimenting with two different approaches, I was taken aback by the performance results:

I have implemented 2 versions of a function :

First Method using a for loop :

$scope.hasBlockResult = function (IS, area, block) {
    if (!block)
        return false;
    for (var i = 0; i < $scope.filteredCartoList.length; i++) {
        if ($scope.filteredCartoList[i].informationSystem === IS 
            && $scope.filteredCartoList[i].area === area 
            && $scope.filteredCartoList[i].block === block)
            return true;
    }
    return false;
};

Second Method using some() function :

$scope.hasBlockResult = function (IS, area, block) {
    if (!block)
        return false;

    return ($scope.filteredCartoList.some(function (carto) {
        if (carto.informationSystem === IS && carto.area === area && carto.block === block)
            return true;
        return false;
    }));
};

Similar scenario here :

Comparing the for loop :

for (var i = 0; i < $scope.filteredCartoList.length; i++) {
    if ($scope.filteredCartoList[i].informationSystem == IS 
        && $scope.filteredCartoList[i].type != 'AM' 
        && $scope.filteredCartoList[i].type != 'IF' 
        && $scope.filteredCartoList[i].area == area 
        && $scope.filteredCartoList[i].block == block)
        $scope.resultList.push($scope.filteredCartoList[i]);
    }

and the filter() method :

$scope.resultList = $scope.filteredCartoList.filter(function (carto) {
    if (carto.informationSystem == IS 
        && carto.type != 'AM' 
        && carto.type != 'IF' 
        && carto.area == area 
        && carto.block == block)
        return true;
    return false;
});

I anticipated that the filter() and some() methods would outperform the for loop, but surprisingly, according to angularjs batarang's performance tab, the for loop turned out to be faster.

javascript angularjs performance

Answer 1

Answer №1

After reviewing the benchmarks shared in the comments through this link, it's clear that there are some flaws present in these tests:

The loop example includes operations like console.timeEnd and console.log within the benchmark itself, which can introduce slowdowns compared to other examples.
In the some example, type coercion is performed, potentially affecting the results.
All tests involve string concatenation within their loops, impacting performance.

To derive meaningful insights from these benchmarks, it's crucial to address these sources of bias first.

Below are the adjusted results on an 8GB DDR3 i5 Laptop after eliminating these biases, presented from fastest to slowest (lower values indicate better performance):

OBJECT Average 0.0010666643114139636
SEEK Average 0.00593666957380871
LOOP Average 0.008436664550875625
SOME Average 0.013993332007279
FILTER Average 0.02592999837361276

These outcomes align with expectations, as explained below:

Object Access

Accessing objects is fast due to their nature as hash maps, ensuring constant speed regardless of object size.

Seek

The seek operation involves locating an element using indexOf and accessing it directly via array index. This method closely resembles object access, resulting in swift performance.

Loop

The loop approach, unlike 'seek', requires iterating over the entire array and combining both array and object access. This additional step contributes to its slower execution compared to the seek test.

Hence, under most circumstances, seek will outperform loop.

Some

The 'some' test incurs overhead from invoking a function during each iteration. Additionally, JIT compiler optimizations are limited due to variable inputs, making 'some' generally slower than 'loop' even at its best performance levels.

Filter

Similar to 'some', 'filter' faces the challenges of function invocations and processing the entire array without early termination. Moreover, the creation of a new array by filter adds further overhead, highlighting its inherent slowness compared to traditional for loops.

Answer 2

After reviewing the benchmarks shared in the comments through this link, it's clear that there are some flaws present in these tests:

The loop example includes operations like console.timeEnd and console.log within the benchmark itself, which can introduce slowdowns compared to other examples.
In the some example, type coercion is performed, potentially affecting the results.
All tests involve string concatenation within their loops, impacting performance.

To derive meaningful insights from these benchmarks, it's crucial to address these sources of bias first.

Below are the adjusted results on an 8GB DDR3 i5 Laptop after eliminating these biases, presented from fastest to slowest (lower values indicate better performance):

OBJECT Average 0.0010666643114139636
SEEK Average 0.00593666957380871
LOOP Average 0.008436664550875625
SOME Average 0.013993332007279
FILTER Average 0.02592999837361276

These outcomes align with expectations, as explained below:

Object Access

Accessing objects is fast due to their nature as hash maps, ensuring constant speed regardless of object size.

Seek

The seek operation involves locating an element using indexOf and accessing it directly via array index. This method closely resembles object access, resulting in swift performance.

Loop

The loop approach, unlike 'seek', requires iterating over the entire array and combining both array and object access. This additional step contributes to its slower execution compared to the seek test.

Hence, under most circumstances, seek will outperform loop.

Some

The 'some' test incurs overhead from invoking a function during each iteration. Additionally, JIT compiler optimizations are limited due to variable inputs, making 'some' generally slower than 'loop' even at its best performance levels.

Filter

Similar to 'some', 'filter' faces the challenges of function invocations and processing the entire array without early termination. Moreover, the creation of a new array by filter adds further overhead, highlighting its inherent slowness compared to traditional for loops.

Answer 3

Answer №2

When it comes to performance, nothing can beat using native (vanilla) javascript. The question essentially boils down to whether you want to invest time and resources into reinventing the wheel by coding everything from scratch, or if you prefer to utilize an external library that can do the heavy lifting for you. While using an external library may impact load time and overall performance, it ultimately saves you valuable time - and as they say, time is money. One way to optimize your code further is to cache the length of an array in a for loop like this:

for (var i = 0, len = $scope.filteredCartoList.length; i < len; i++)

This approach can significantly improve speed, especially in browsers like Internet Explorer, by storing the length of $scope.filteredCartoList instead of recalculating it with every iteration of the loop.

Answer 4

When it comes to performance, nothing can beat using native (vanilla) javascript. The question essentially boils down to whether you want to invest time and resources into reinventing the wheel by coding everything from scratch, or if you prefer to utilize an external library that can do the heavy lifting for you. While using an external library may impact load time and overall performance, it ultimately saves you valuable time - and as they say, time is money. One way to optimize your code further is to cache the length of an array in a for loop like this:

for (var i = 0, len = $scope.filteredCartoList.length; i < len; i++)

This approach can significantly improve speed, especially in browsers like Internet Explorer, by storing the length of $scope.filteredCartoList instead of recalculating it with every iteration of the loop.

Answer 5

Answer №3

Consider these contrasting examples:

for (var i = 0; i < list.length; i++) {
    doAction(list[i]);
}

vs.

function processItem(item) {
    doAction(item);
}
for (var i = 0; i < list.length; i++) {
    processItem(list[i]);
}

Essentially, this illustrates the difference between the two approaches. In addition to this, there needs to be specific handling within filter and some functions to deal with the output of processItem, but fundamentally, an extra function call is being added on top of the looping mechanism.

Answer 6

Consider these contrasting examples:

for (var i = 0; i < list.length; i++) {
    doAction(list[i]);
}

vs.

function processItem(item) {
    doAction(item);
}
for (var i = 0; i < list.length; i++) {
    processItem(list[i]);
}

Essentially, this illustrates the difference between the two approaches. In addition to this, there needs to be specific handling within filter and some functions to deal with the output of processItem, but fundamentally, an extra function call is being added on top of the looping mechanism.

What makes using for faster than some() or filter()?

Answer №1

Object Access

Seek

Loop

Some

Filter

Answer №2

Answer №3

Similar questions

Avoiding the duplication of selected items in a dropdown within a gridview can be achieved effectively by implementing a JavaScript/jQuery

How does node.js enhance the functionality of Protractor?

What could be causing the Error when using the then() callback in ExpressJS following a promise?

Exploring the Uses of JQuery Functions

Automatically open the first panel of the Jquery Accordion

When working with Mongoose and TypeScript, encountering the 'connect' error from mongoose can be frustrating and disruptive to your

There was an error in the syntax: an expression was expected, but instead the character '}' was found in mongoDB

What are the steps for implementing function composition or pipelines with a multi-parameter function?

How to transform a JSON object into an array using JavaScript

Modify the nested object's two layers using the designated ID

Creating dynamic scroll animations for sidebar navigation in a single-page website with anchor links

Storing user credentials in Firestore after registration - best practices

deck.gl TripLayer showcases individual route mapping

Having trouble making this button function in HTML/JavaScript?

From HTML to Python to Serial with WebIOPi

Guidelines for setting the Id and value for a Hidden field

A guide on storing data in a database with AngularJS within the Django framework

Exploring the method of displaying a JSON 2D array through the utilization of getJSON

JavaScript does not always display the correct results for past day dates

Angular - Utilizing Mat Paginator with Multiple Tables within a Single Component