Javascript part 11

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)

Javascript 9 (10 commonly used arrays in javascript)

Javascript 10 (8 different Math. methods And parseInt Usage)

Javascript 11 (for loops and nested for loops)

Javascript 12(while loops and for..in and for..of loops)

Javascript 13(8 diff array methods)

Javascript 14(objects and ways to use objects)

Javascript 15(JSON and fetch request)

Javascript 16(“this” keyword)

Javascript 17(strict mode and error handling)

Javascript 18(setInterval/setTimeout and Dates)

React info…

React part 1 (How to start a react app)

React part 2 (components and dynamic values)

React part 3 (Multiple components and small styling)

React part 4 (click events with functions and react dev tools)

React part 5 (link to: useState hook and how to output lists in react)

React part 6 (Props and reusable components)

React part 7 (passing functions as props and use effect hook)

React part 8 (continue with useEffect hook, dependencies with useEffect, and setting up the JSON server to fetch)

React part 9 (Fetching data with JSON)

React part 10 (loading bar and fetch errors)

React part 11(custom hooks)

React part 12(React Router Dom, Exact, and Links)

The Social Media…

Github

Instagram

Facebook

Linked-In

Medium

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Jonathan Bleibdrey

Jonathan Bleibdrey

Software engineer, Creator, Ball of Energy