Array iterations and how to use them

Learning JavaScript was probably one of the hardest and most rewarding things I have ever done in my life. During my Phase 1 curriculum at Flatiron school, I have to write a technical blog about something I learned in this phase. We learned about so many great things and picking one topic was not as easy as I thought it was going to be. Then I started thinking about the process I went through to build my application and what methods I used in doing so. I decided to write about some array iterations we learned early on in the Phase. To be exact, I will be talking about map(), find(), reduce() and forEach()

• map() - this method allows you to apply a transformation for every item in an array. It basically goes through each element in the array and creates a new one, making a copy of the original array, without changing the original array in any shape or form. Thus the end result will be an array containing the same number of items (but most likely different values for those items). Here is an example for easier visualization:

let grades = [10, 15, 13]

let doubledGrades = grades.map(function(grade) {
    return grade * 2
})
console.log(doubledGrades) // [20, 30, 26]

• find() - this method goes through a provided array and returns the first element that meets certain criteria, something that we asked it to do. If it doesn't meet that criterion,then undefined will come back. So, if you have an array of numbers and you would like to find the first number that is bigger than a certain number, you can use the find() method like so:

const arrayOfNumbers = [7, 15, 2, 122, 4];

const found = arrayOfNumbers.find(element => element > 5);

console.log(found);
// Expected output: 7

• reduce() - this method is used to calculate a single value from an array. In other terms, the reduce() method reduces an array into a single value. The most common use cases of reduce (assuming we are working with arrays of numbers) are sum & multiplication. The reduce() method takes a reducer which allows you to configure the logic of how the array will be reduced into a single number. The reduce() method takes two parameters: reducer and initalValue. An example of the reduce() method in the case of the sum would look like this:

let grades = [5, 7, 18]
let sum = grades.reduce(function(total, current) {
   return total + current}, 0);
console.log(sum)
// Expected output: 30

In the case above, the callback function takes two parameters: total and current. The total is always referring to the last computed value by the reduce function. And the current is referring to a single item in the array. The initial value here is 0, so the first thing the reduce() method is going to do is add 0 to the current number, which in this case is 5. The sum will be equal to 5. Then it's going to go to the next number. The next thing is going to do is add 5 to the next element in the array, which is 7 and get 12. The last thing is going to do is add 12 to 18, the last element in the array and since at this point it went through the whole array, it will give us an output of 30.

Another example of the reduce() method is in the case of multiplication:

let numbers = [5, 2, 10]

let result = numbers.reduce(function(total, current) {
    return total * current
}, 1)
console.log(result)
// Expected output: 100

This is very similar to the sum reducer,the only difference is that the initial value is 1 instead of zero and we are going to go through each element in the array starting with multiplying 1 by 5. The output is 5. The next thing we do is multiply 5 by 2, which gives us 10 and the last thing is to multiply 10 by 10, which gives us the end result of 100.

• forEach() - this method takes an array of objects and iterates (goes) through each object once and gives us the result. So basically, once it goes through an array (which is passing through each object in that array), it will display all the objects on the page. The function that you pass to the .forEach() will get called for every item of the array. Here is an example for easier visualization:

let grades = [14, 10, 18]

grades.forEach(function logGrade(grade) {
    console.log(grade)
})
// Expected output:14, 10, 18

So for the above code, when JavaScript encounters grades.forEach(), it's going to do the following:

1. Take the first item of the array, which is 14, and run the function logGrade while passing it the number 14.
2. Then it'll take the second item of the array, which is 10, and run the function logGrade while passing it the number 10.
3. And the same for the last item of the array, which is 18.

In conclusion, these 4 array iterations are all great and fairly easy to use when you are working with an array of objects.