Angular Code Optimized Functions

Satheesh Elumalai

6y6.8k10100Article

Angular performanceAngular code optimised functionsangular optimisedangular shortcut code

10 Comments

Join the conversation! Your thoughts help the community grow.

Sourav Kumar Das6y ago
Nice and useful article.
- Satheesh Elumalai6y ago
  Thanks.............................
Maragatha Mani6y ago
Its very useful and nice
- Satheesh Elumalai6y ago
  Thanks..............
Vidyadharran G6y ago
Nice one bro :) thanks for sharing
- Satheesh Elumalai6y ago
  Thanks..............
shenbagam N6y ago
Practicable Information. Keep post your thoughts.
- Satheesh Elumalai6y ago
  Thanks..............
Haridhass Mani6y ago
Useful of this article
- Satheesh Elumalai6y ago
  Thanks..............

Introduction

In Angular mostly we are using for loop for finding values from an array list. When we have more lists it takes some time to find the list value. So we need to reduce time and performance to find the list values using the below functions.

The first one is finding a specific item in an array. This is a very common scenario. Let's say your user wants to view detailed information about a specific item in their exportlist. You need to grab the item from the exportlist array with a specific ID. It's common to go use a for loop to get this.

Something like this,

let providerid = 5;
let foundedItem = null;
for (var i = 0; i < this.exportlist.length; i++) {
if (this.exportlist[i].providerid == providerid) {
foundedItem = this.exportlist[i].providerid;
}
}

Find() Function

Now, this is certainly a reasonable method to use to find this item. But let's use a better structure. The find() method is much more optimized for this scenario,

let foundedItem = this.exportlist.find(x => {
return x.providerid == providerid
});

Which can even be shortened to this:

let foundedItem=this.exportlist.find(x=>x.providerid == providerid);

In the list, Find will return the first item that matches the query. Most of the time we want to use this when we need to find a specific item in an array.

Generally, this is used when we are finding an item by some unique criteria, like the id shown above.

Some() Function

Even though we can use this same find function to find an item by non-unique criteria, such as finding the first item that has the providerStatus flag, generally this use case is better served by a Some()function.

When we want to find an item by some non-unique criteria, like an out of stock item, what we are really trying to do is find out if any item in the list, In a for loop, this looks like this,

let anyItemproviderStatus = false;
for (var i = 0; i < this.exportlist.length; i++) {
if (this.exportlist[i].providerStatus) {
anyItemproviderStatus = this.exportlist[i].providerStatus;
}
}
if (anyItemproviderStatus) {
//User need to do function logic
}

Sure, this works, but in this case, what we really want is the some() function.

if(this.exportlist.some(x=>x.providerStatus)){
//User need to do function logic
}

Some method returns true if any item in the array matches the given criteria. Otherwise, it returns false. The longhand of the above is the following,

let anyItemOutOfStock =this.exportlist.some(x=>{
return x. providerStatus;
});

Filter() Function

We can do this much easier with the filter option,

If we need to filter more then list value from the particular list we have to split out not match providerStatus value to filter the list.

let foundedItem=this.exportlist.filter(x=>
x. providerStatus!= providerStatus);

I hope this article is most helpful to you. Thanks.