Javascript part 13

7 min readMar 1, 2021

Today we talk about 8 different ways to iterate through arrays— forEach, map, filter, reduce, some, every, find, findIndex…etc.

to iterate means to go through the array and doing something to each item/element of the array(most of these do…). Lets begin!

forEach:

This takes an array, and for each element in that array, we can do something with each one of those elements (examples below).

Here we set a variable to “array’ and add burger values(“pickles,” “cheese,” “burger,” etc.…..)

We then call the “array” with the forEach method and with the arrow function. (I highly recommend learning the arrow function; it simplifies code so much.)

The forEach method takes an argument called “element” (This could be called anything you want, and It could be any function you want but I choose a console.log .) So on, For each element, we concatenate with the (+) symbol and a string saying “are GREAT” (like tony the tiger). Anyways, it returns each element from the array with “are GREAT” at the end of it.

map:

Map is used when you want to take an existing array, do something with the elements of that array and then make a new array out of it. Here we go!!

Here we set the “number” variable and put random numbers in it.

We set another variable to “double” since we need to have a place to put this new array that gets returned to us. Then call the map function on the number array.

We set the argument to num(Once again, num is just a placement holder for each element in the array, you can name it whatever), then with each element or num we multiply by two.

Lastly, we console.log the new array “double” and outputs the numbers doubled.

filter:

The filter method will take an array and check each item in the array, against some type of condition, to see if it's true or false. WHEN it's true, it will put it back into the array, and If it's false it will not put it back.

Here we go! We set up a variable to “animal” and fill it with animals, and other house held products.

Next, we make an “onlyAnimal” variable to have a place to store the return info, from the filter method.

in that variable, we call the filter method. The condition here is if ani(The made-up element placeholder name) equals “horse” or “lama,” put it into the “onlyAnimal” array. If not, toss them out.

Lastly, we call “onlyAnimal” and returns the only two things we wanted in there, “horse” and “lama”.

reduce:

reduce method will take an array, run a condition on it, and pass the total onto the next element.

Here we cheated a bit, instead of first making a variable and setting up a new array. I just put the array straight on the reduce method. (Which is totally cool, you can do it this way or set up a new variable, Either way, works.)

The “reduce” method takes in two arguments, result, and item. We set a 0 at the end of this to give the initial result value.

It then looks at the array and takes first element out, and runs it through our condition(result + item). So the first time it passes, it will be 0+1 = 1, now the result value is now 1. then take the next item from the array, which is 3, adds 1+ 3 = 4 and now the new total of “result” is 4. And, so on!

It will repeat down the line, till there are no elements. returning the result of 21.

some:

some method is checking to see if any elements in the array meet the condition you set up. If any of them come back true in the condition the whole answer will return true.

We set up a variable called “ran” and put positive and negative numbers in an array.

Then set up a variable named “hasNegativeNumbers” and that equals ran.some(), with a condition/function to run on each number. it's asking “are there any of these elements less than 0? yes, there are negative numbers in this array.” Then the whole thing returns “true.” if there were no negative numbers in the array, it would have returned false.

every:

every is similar to some, but it checks to see if everything is true to pass as true statement. If not it is false.

We set the variable to “number” and its values are all numbers but, one; we put “bear”in there for a reason.

We set up another variable called “numbersOnly” to save the return value inside something. Then we look through the “number” array with the “every” method, It takes in an argument of “num”, and we use the condition “num typeof == “number.” to see if array number is only numbers. If it's not all numbers, the whole problem is false, and since all the elements are not numbers. ( we blame it on the “bear.” that returns as a “string” instead of “number”)

It's all or nothing with this one.

find:

find is like our search feature; it will look through an array and find whatever returns true first from our condition. (I repeat, this will only return the first element that returns true.)

We have a “groceryList” variable; the value of that is an array of key-value pairs. Then we setup the “findMe” variable that will get the result of what “find”…finds. we call findMe variable and out comes the object with the id of “eggs”

Remember: It checks and returns the first item in the findMe variable.

findIndex:

find index is just like find, but instead of finding the element, it finds the position of that element in the array.

Here we use the same list of arrays from above. We use the same setup also on findMe but, we change to “find” to “findIndex.” All this does is, instead of returning the key-value pair. It will return the index of where that element is in that array.

so ours is in the first index or the “0” index of the array.

THE END

Ok, that was our eight methods on arrays. Hope you learn something, leave a comment if you like or if i can do something better.

see you next time.

check out some javascript….

Javascript 1 (variables and data types)

Javascript 2 (numbers and strings)

Javascript 3 (bracket notation and 20 diff string methods)

Javascript 4 (functions and how they work)

Javascript 5 (hoisting, comparison operators, and if-else statements)

Javascript 6 (diff. Equal signs, null, and undefined)

Javascript 7 (logical operator, &&, || and ternary operators)