I am going to talk about array iterator methods. Then we can have some fun with them. Coding should be fun.
Array iterator methods include the following: find(), filter(), reduce(), map(), and forEach().
The two iterator methods that I will focus on are the map() and forEach() methods. Before, I discuss these two methods, I will review the other methods in the code window below.
const array = [1,2,3,4,5,2,4,8,2]
array.find(num => num===2)
//2
//returns the first element of the array that meets the callback function's condition which is 2
array.filter(num => num===2)
//[2,2,2]
//returns a new array with elements that meets the callback function's condition which is [2,2,2]
array.reduce((acc, prev)=>acc + prev, 0)
//31
//this returns a single value from an array. In this case it adds all of the elements of the array to return a sum of 31
Now lets talk about map() and forEach(). Like the other array iterator methods they take a callback function as a parameter. The map() method takes the elements of an array and passes each element of the array into a callback function and manipulates the element and returns a value. Each value is placed in a new array. Hence map() returns a new array of values from the manipulated elements. It does not change the old array, so it is described as non destructive.
Array.forEach() functions just like map() except that it does not return a value. It is literally called the iterator of no return. It takes each element of an array and passes them as arguments into a callback function and runs code to manipulate the element to perform task such as logging values, modifying an array, and many other things.
Now let's make this fun.
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<title>Project Rainbow</title>
</head>
<body></body>
<script src="index.js"></script>
</html>
const light = ["red", "orange", "yellow", "green", "blue", "indigo", "violet"]
function makeARainbow(aRayOfLight){
return aRayOfLight.map(ray=>makeAColor(ray))
}
function forEachMakeRainbow(visibleSpectrum){
return visibleSpectrum.forEach(color=>makeAColor(color))
}
const sky = document.querySelector('body')
function makeAColor(thisColor){
const color = document.createElement('div')
color.textContent = '.'
color.style.background = thisColor
sky.append(color)
return color
}
In the above block of code, I have created an array which consists of the colors seen in a rainbow. Two functions were written to create a rainbow in the browser. The makeARainbow function is a map() method. The forEachMakeRainbow function is a forEach() iterator method. These both take a callback function. Let's see what happens when we invoke them. Lets start with makeARainbow().
makeARainbow(light)
//[div,div,div,div,div,div,div]
//this shows that map() returns a NEW ARRAY which consists of seven <div></div> elements
On the other hand, if we invoke forEachMakeRainbow, this is what happens.
forEachMakeRainbow(light)
//undefined
//this shows that forEach() does not return a value.
However, at the end of the day, both of these functions both produce the same result on the browser.
Which is a beautiful rainbow. They say life ain't all sunshine and rainbows. But the code says this is a rainbow. And you know what? It's all right with me.
Top comments (0)