4

Which one should i use in an angular app and why?

array.filter(o => o.name === myName);

or

$filter('filter')(array, {name: myName}, true);
0

3 Answers 3

4

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:

function filterFilter() {
    // predicateFn is created here...

    return Array.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);

Sign up to request clarification or add additional context in comments.

2 Comments

IIRC, $filter('filter') also seem to performs LIKE check on all properties, which is a lot more powerful than equality predicate check. (and overkill for OP's case)
@kazenorin, if you pass true as a comparator parameter angular will do the strict comparison using angular.equals.
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.

1 Comment

"Angular 2+ does not support AngularJS-style filter... 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." 100% this. One tightly couples your business logic to AngularJS. The other is vanilla JavaScript and allows the same code to be [maximally] future-proof.
-1

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

5 Comments

which means in turn when i assign the result of array.filter somewhere and then modify my array, the reference to the filtered array wont be updated?
Yes. Its a bit mpre boilerplate to use array.filter but better performance. You need to decide between the tradeoff of performance vs code conciseness
Wrong, a $filter does not create a watch.
@Dieterg Updated the wordings. What I actually meant was that it is re-applied after every $digest cycle
Wrong, filters are not applied after every $digest cycle (unless you have the $stateful flag enabled. This also only applies for using filters in your HTML template. This does not occur if you use $filter in your controller (unless you're in a $watch ofcrouse). But to be clear, I agree that it's better to use Array.filter in this case.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.