Fun with Array Iteration

KollerCode — Fri, 21 Jan 2022 15:00:20 +0000

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!👩🏽‍💻

The Sad Truth as to Why I Chose to Change Careers to Software Engineering

KollerCode — Sun, 16 Jan 2022 20:56:32 +0000

When I am coding, it's like I am solving problems in my own life and it reminds me that as long as I don't give up and I am persistent I can do anything.

I'm going to date myself here, but I remember the first time my grandfather let me play on his computer. Back then, it had no mouse. We had to use the arrow keys and the enter button the navigate the files. Oh, and the internet? That didn't exist yet. But when it did, we needed a phone line and an awful screech to tell us when we were connected.

I grew up alongside the biggest advances in technology. I know computers practically as well as I know how to drive a car. However, it wasn't until 2021 when life hit me hard that I even considered making a career out of anything computer related.

Warning, it's about to get REAL sad and honest here

My year began with news that I was pregnant with my first child. I had not mentioned anything to my director at the time in fear of losing my job since I knew I was not the only pregnant woman on our team. Then, my cat broke his hip-bone and we discovered he has a rare degenerative bone disease that would require surgery. This added more unexpected costs.

The worst happened when my husband fell ill and we found a large tumor in his lung. He served in Afghanistan and we think that may have caused it- but that's a story for another time! The tumor was cancerous, but once the surgeon removed it, the cancer was taken with it. Shortly after my husband was in and out of the hospital with a collapsed lung. 2 surgeries, one massive infection, 2 lobes removed and several chest tubes and hospitalizations later, a near-death experience, and 7 months later he is finally recovering well and able to lift our son and return to work.

During that time, the baby's fluid levels were dangerously low and I had to be induced. After the baby was safe, I had to stay in the hospital for a few more days with post-partum Pre-eclampsia. Once I finally recovered, I had to be the bread-winner, the caretaker for both the baby and my husband, and take care of the house all while trying to recover myself as well.

I spoke with my director to return to work after just 2 weeks of unpaid maternity leave (not really leave, more of a two week vacation) only to find out that another person had been hired in my place and given my laptop (which had been wiped). I gave so much to this institution, worked from the hospital, only to be replaced during my time of need.

After nearly being evicted, my sister and her boyfriend who work for Microsoft mentioned to me that I should have worked in tech years ago. She felt I deserved better than the pay and the treatment I received. Also, my grandfather was an OG computer programmer. It literally RUNS IN MY BLOOD.

The only beacon of hope that has kept me going through this arduous time is that I know this change of career feels right. When I am coding, it's like I am solving problems in my own life and it reminds me that as long as I don't give up and I am persistent I can do anything.

Thanks for reading ya'll! Be on the lookout for some technical blogs coming your way real soon! I've got one cooking right now about some JavaScript commands.

Nothing but love,

-Natasha

DEV Community: KollerCode

Fun with Array Iteration

The For loop

Using forEach()

The Sad Truth as to Why I Chose to Change Careers to Software Engineering

Warning, it's about to get REAL sad and honest here