Javascript part 11

6 min readFeb 15, 2021

Today we talk about “For Loops” and Nested “For Loops”

As we move along with javascript, the subject matter will get a bit more complicated. If you want to see the first ten articles for beginners, start here (or go to the bottom of the page) Gracias! Moving on.

For Loop:

We use “For loops” to run code multiple times instead of coding it over and over! It's called a “for loop” because it runs “for” a specific number of times. The structure of the for loop is as follows;

for ([initialization]; [condition]; [final-expression]) { then a function or whatever you want to run }

so the initialization is the initials state (or where the counter starts), the condition is evaluated until it runs false(so the example below is “i < 5”; or ask yourself is “i” less than 5? yes, so keep running till “i” hits five). The final expression is to increment or decrement the initial value(thats the timer increase or decreaser) and will keep running the “funTime.push(i) method” till we hit that “5” mark.

Above, we set our empty array to “funTime.”

Then we call the for loop, setting the initializer to 0 (like so var i = 0; This could be anything you want the state to start with).

If “i” is less than 5, keep running this code.

After that, it pops down to see what method we are running on each piece of the array (which we are pushing “i” into the “funTime” array. since the variable “i” is still less than 5, it will continue).

Lastly, we increment the counter or variable “i” by one(i++ means to increments just by one) It will keep doing this till “i” equals five.

We Finally call “funTime” array, and it has all the numbers inside the array.

side note: The example above is similar to the other example initially, but we used a “break ” statement. “break” basically stops the code from continuing after the code sees that “i” is greater than 2. Then If we call “breakTime,” it has [1,2] since we told it to jump out after you hit 2 in the “for loop.”

Ok moving on

On the bottom example, we are using the for loop again to iterate over an array.

We have our “dogNames” variable with some dog names in it.

For the for loop setup, we have our initializer with 0 (since we want all the dog names printed out).

We say if “i” is less than “dogNames.length”( the .length method returns the number of elements in an array. Basically how ever many objects in this array run that many times.)

It runs console.log on “dogNames” with the “[i]” variable, which is each index of the array(essentially we console.log index 0 of dogNames, then index 1 of dogNames, index 2 of dogNames, and so on…)

Lastly, “i++” runs and increments the variable “i” which was originally 0, then every pass it prints out the names.

One last thing to add, if you didn't put “dogNames” in the console.log and just “i” you would get the index numbers and not the actual names. (I just thought I mention that)

Nested For Loops:

Ok, we start with “babyNames” variable, and inside of that variable there is an array, and inside that array is more arrays. (if we look at it this way, we have one large array, with different boxes in that array, then think of every [array] as its own index, so []=1 , [] =2, []=3).

Inside each of those little arrays, we have elements with their own individual indexes (Each one would be [0,1] index). (ARE WE LOST YET? : ) )

Stay with me; this is some inception sh*t….

now let's break this down very simply, that first “for loop” right under “babyNames.” That first initial loop, all it's doing is getting us into the door of the first big array.

All that first “for loop” is doing is getting us inside the initial array.

Next “for loop” we have to change it to “j” (since we can't use the same variable name “i” again.) We run it.

If “j” is less than “babyNames[i].length (←- ill explain this real quick, so we see the “babyNames” array and call “.length method” on it. which returns a number since there are only two elements in each of the arrays. It will output index number 2.)

then we console.log(babyNames[i][j]) (← More explaining ,the first “[i]” is getting us “in the door” of the first array, then the “[j]” is outputting all the elements of the nested arrays)

Lastly, I wanted to show you an example if we just put the “[j]” in the console.log to show you what would happen if we didn't console.log with both the “[i] & [j]” we get all the nested arrays printed out but not the actual elements inside of those arrays. OK we made it!

I like to think of coding as we are diggers of data!

Is your head hurting yet? Mine is, dont forget to play around with this, and hop into the console in your web browser.

WE can all learn this, it's just a matter of how many times we see it and practice it. Good luck and 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)

Javascript 8 (switch statements and arrays)