Fun with Array Iteration

I remember first messing with arrays in the beginning of my bootcamp prep-work days and thinking to myself, "I have a feeling I am going to be seeing this a lot." Fast-forward to today upon the completion of my Phase 1 JavaScript project at Flatiron where I realized just how right I was.

I may be weird, but of all of the things that I have learned in JavaScript up to this point, all things arrays and objects have been the most interesting to me. Learning how to add and remove elements to arrays by using commands such as .push() and .shift() came easily to me. However, once I was introduced to looping and iteration things got a little bit more complicated.

This can get confusing, let's understand the difference:

Looping executes a set of statements (typically uses for or while) and allows us to loop over the same block of code again and again until a condition is met or the code within the code block has run the amount of times desired.
Iteration executes a set of statements once for each element in a collection.
A loop can be iterated over many times

My project required that I render some data from an open API. In order to get the objects to manifest on the page in the way I desired I needed to iterate over an array of objects within that API using forEach(). But, the for loop also allows you to iterate over an array as well. I’m going to focus this tutorial on these two specifically. With fun pictures that I’ve created!

The For loop

The For loop loops an item in an array in a countdown using a start and stop count. It's made up of 4 parts: initialization, condition, final expression, and statement.

Using forEach()

In the case of my project, there were only a few elements that I wanted to render on the page from this array of objects in the makeup API using a fetch request.
The easiest way I found was to create our array in global scope. This allows us to create a function and assign it to a variable in order to access the items in the array. Once I set up my GET request, I created a CSS element to store the collection of makeup items I wanted to render on the page and then assign it a variable to be used in my function forEach(). Then I used the parameter "makeup" and the function "rendermakeup" throughout my project.
In plain English: from my makeupArray (which is the json aka the api) for Each makeup in that array add it to the collection and do what the function (renderMakeup) is asking to do to it which in my case is show the price, picture, and name.

let makeupArray = [] 
const fetchArray = () => {
fetch("http://makeup-api.herokuapp.com/api/v1/products.json?brand=maybelline")
        .then((response) => response.json()).then(function (json) {
            //the json array is what is being
            // returned and is 54 items long
            makeupArray = json;
            let makeupCollection = document.getElementById("makeup-collection");
            makeupArray.forEach((makeup) => (makeupCollection += renderMakeup(makeup)));
        });

To bring it back to more simplified fun images explaining forEach() and maybe a more common way you might use it you can see the images below:

To wrap things up on our fun with array iteration, just know that whichever method you choose to use, know that it is a matter of preference. I'm sure every developer has had to use these at some point, although I am curious to know how often. Leave me a comment telling me what you think!

To those of you who got this far, thank you and I hope that you find this helpful!

And to anyone wanting to take a look at my final project, you can find it on my github here:https://github.com/KollerCode/Shopping-Project

Happy Coding!👩🏽‍💻