Project 4: Array Cardio Day 1

Welcome to my "Build 30 Js Projects in 30 Days" Series .This is day 4 and project 4. 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 4 challenge of Wes Bos Javascript30 course.

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.

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.

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.filter(): It is used to filter elements of array that returns true for any condition written inside the function passed as it's parameter. It returns an array of such elements.

E.g. Suppose we have an array=[1,2,3,4,5,6] and we want to get odd elements from this array. There are 2 ways to do this:

let result=[];
for(item of array)
{
 if(item%2!=0) result.push(item);
}

Now this can be done in a single line using filter() 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 filter is used(optional) as parameters.

let result=array.filter( (item)=>item%2!=0);

Here item is the current element, and if item%2 returns true only then the value would be added to result.

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

2.map(): It is used when we want to traverse an array and change values of all it's elements. It creates a new array with modified elements and hence, is not preferred if the new array isn't useful/ if we are not using the returned array further in our code.

e.g. we want to add 1 to each element of array:
First way is to traverse an array using for loop and then add 1 to each element.
Second way->

let array=[1,2,3,4,5];    

result=array.map( (item)=>item+=1);

Map takes three arguments: the value of the element, the index of the element(optional), and the array object being mapped(optional) just like filter().

Here is the documentation I read along with the video.

3.reduce(): It is used when we want to add calculation of previous elements to the next element.
It takes two parameters, the function that will perform calculations and an initial value(optional).
If initial value is not provided, then the array will be traversed from the second element ,taking first element as the previous value and second as the current value. If specified, initial value is given to the previous element and traversing begins from the first element of array.

function passed as parameters takes 4 upto values:
previousValue: the value resulting from the previous call to function. On first call, initialValue if specified, otherwise the value of array[0].
currentValue: the value of the current element. On first call, the value of array[0] if an initialValue was specified, otherwise the value of array[1].
currentIndex: the index position of currentValue in the array. On first call, 0 if initialValue was specified, otherwise 1.(optional)
array: the array to traverse (optional)

e.g. suppose we want the products of elements in our array
First way->

let array=[1,2,3,4,5];    
let result=1;
for(item of array)
{
    result*=item;
}

Second way (using reduce)->

result=array.reduce(((product,next)=>product*=next),1);

Here first argument is the value that is finally returned by reduce function and second value is the current element value. I've provided the initial value 1 that will be given to product during 1st iteration.I can skip giving initial value as well.

Here is the documentation I read along with the video.

Note: these methods will give console error if not used with array.If you want to use it on non array collection then use Array.from(collection) which converts an array instance from an array-like or iterable object.

Things I learnt:

1.map()
2.reduce()
3.filter()

Previous article from this series:

Project 3 Day 3

Conclusion

That's it for today's project.Next project will be Flex panel Image gallery .

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. :)