Array.filter Vs $filter('filter')

Which one should i use in an angular app and why? array.filter(o => o.name === myName); or $filter('filter')(array, {name: myName}, true);

Solution 1:

The key difference is the shortcuts or syntactic sugar provided by the $filter('filter'). For example, the following syntax can be used to get the items containing the keyword string in any of the item's string properties:

$filter('filter')(array, 'keyword')

Which can not be as simple using the standard ES5 Array.prototype.filter.

Whereas the general idea is the same for both approaches - to return a subset of a given array as a NEW array.

Update:

Under the hood angular uses the Array.prototype.filter:

functionfilterFilter() {
    // predicateFn is created here...returnArray.prototype.filter.call(array, predicateFn);
}

So, if you don't use the shortcuts - angular simply delegates the call to the standard filter.

To answer your question: use the one that lets you write less code. In your particular case it would be array.filter(o => o.name === myName);

Solution 2:

While using $filter('filter') can be easier and more syntactically attractive, I can think of four good reasons to use Array.filter over $filter('filter')

Efficiency

While it is true that $filter('filter') uses Array.filter under the hood, it also uses other code, including deep comparisons, in addition to Array.filter. In most cases the speed difference is negligible, but in some use cases it can be substantial. When working with large data objects for example, I've found that using Array.filter makes a difference.

Angular 2+ does not support AngularJS-style filter

From the angular migration guide:

The built-in AngularJS filter and orderBy filters do not exist in Angular, so you need to do the filtering and sorting yourself.

If there is any possibility that you may upgrade to Angular 2 or higher in the future, then using Array.filter will save you some migration migraines. Even if you don't plan on upgrading, clearly the Angular team didn't think the AngularJS filter was worth keeping, which leads me to think it's probably better to avoid it anyway.

Favor native code over library code

Libraries and frameworks like AngularJS are amazing tools; But if you have to choose between using vanilla javascript or using a library, and there isn't a good reason to use the library, you should always use the vanilla javascript. It is more universally understood, less dependent on 3rd party code, etc. There are a plethora of online articles arguing this point.

"$filter" inhibits type-checking in Typescript files

This one only applies if you use (or plan to use) Typescript. At the time of writing, the @types library for angularjs defines the return type of all $filter functions as any, which can lead to some serious type-checking problems if you aren't careful. By contrast, Array.filter always returns the expected array type.

Solution 3:

You should use Array.filter and then assign the result. When you use $filter, it is re-applied at the end of every $digest cycle for all the bindings and that is performance intensive to watch for the values and update the results after every $digest cycle. Instead you should filter your result and assign it to your scope variable explicitly