Project 7: Array Cardio Day 2

Welcome to my "Build 30 Js Projects in 30 Days" Series .This is day 7 and project 7. If you haven't read the other articles in this series please check them out first. I'll list them at the end of this article.

As mentioned in my previous article. This is the Day 7 challenge of Wes Bos Javascript30 course.

This challenge was more theoretical rather than implementation. It explained various array prototype methods that I found super helpful and so I'll be explaining each method taught in this challenge and I strongly recommend you to not skip this challenge.
Checkout the first part if you haven't yet.

As always before starting download the starter files from here. I've made a separate article on how to download starter files, you can check it out here.

I'll be linking the documentations I referred for each function to further clear up the topic.

Before proceeding you should be familiar with arrow functions.

1.some(): It returns true if at least one element of our array satisfies the test condition of the function passed as a parameter.
e.g. we want to check if any element is divisible by 3.There are 2 ways to do this:

let arr=[3,4,5,1,8];
let isDivisible=false;
for(item of arr){
    if(item%3==0)
    isDivisible=true;
}

Now this can be done in a single line using some() method.
It takes a function as a parameter(which will contain our condition), and the parameter function further takes the current element being checked, index(optional) and array on which some is used(optional) as parameters.

let arr=[3,4,5,1,8];
let isDivisible=arr.some(item=>item%3==0)

Here item is the current element being checked for its divisbiliy with 3.

See how code has been reduced to single line.
Here is the documentation I read along with the video.

2.every(): It is like some(),the difference is that it returns true ONLY IF ALL elements satisfies the condition.
Let's take the same example as above.
Long way->

let arr=[3,4,5,1,8];
let isDivisible=false;
let count=0;
for(item of arr){
    if(item%3==0)
    count++;
}
isDivisible=(count==5?true:false);

Now this whole can be reduced to one line using every().

let arr=[3,4,5,1,8];
let isDivisible=arr.every(item=>item%3==0);

3.find(): It is like filter,the difference is that instead or returning all the elements returning true for the condition,it returns the first element.

Taking similar example-
Long way->

let arr=[3,4,5,1,8];
let element;

for(item of arr){
    if(item%3==0)
    {
      element=item;
       break;
    }
}

using find() method-

let arr=[3,4,5,1,8];
let element=arr.find(item=>item%3==0)

Parameters are similar to all methods mentioned above.
Here is the documentation.

4.findIndex(): It returns the first index of the elements satisfying the condition. If no such element exists,-1 is returned.
Let's return the index for the element in above example-

let arr=[3,4,5,1,8];
let index;

for(i=0;i<arr.length;i++){
    if(arr[i]%3==0)
    {
      index=i;
       break;
    }
}

using findIndex() function -

let arr=[3,4,5,1,8];
let index=arr.findIndex(item=>item%3==0)

Parameters are same as above functions.

For further understanding, refer Documentation.

Things I learnt:

1. More Array.prototype methods.

Previous article from this series:

Day 6 Project 6.In this project I built a search filter which is very common feature in website nowadays. Do check it out if you haven't already.

Conclusion

That's it for today's project.
These functions as you saw are super handful and will surely help in reducing the line of code.

Next project will be HTML5 Canvas .

If you have any doubts or suggestions please do let me know in the comment section. I'll be more than happy to interact with you.

If you like this series and want to be a part of it, do consider following me at @prachigarg19

Thanks for reading. :)