Javascript part 12

6 min readFeb 22, 2021

Today we talk about some more LOOPS! The “while/do-while loops” and “for...in/for…of loops”.

Its going to be a fruit loop kinda day!

we have talked about some of these in other lectures, but I feel the need to learn them again as it is a must in javascript! Lets begin.

While loop:

the “while loop” defers from the “for loop”, the while loop will stay in the loop as long as the condition returns true.

the “for loop” will pop out of the loop the moment it becomes truthy or true.

while loop = will keep rolling as long as the condition is true (this is more like a carousel )

for loop = will pop out as soon as something returns true (more like a timer or a count down)

here we set our variable “n” to 0 then call the while loop function. As long as “n” is less than 5(or as long as the condition is true). We run the “while loop”!

Inside those curly brackets, we tell it to run the console.log(“n=” + n)(basically saying, output the numbers plus/concatenate whatever “n” is by adding “n =” to the front of it.)

But we also have to increment the number ourselves, as we go through each iteration. (that's another thing that differs from the “for loops.” we have to set it manually in the function.)

remember: it will only run the loop if that conditional is true

Do while loop:

this version of the while loop is identical but, it keeps GOING until the conditional runs falsy or false. (the way to look at is if you want a timer to run out, use a do-while. if you want to count down to some specific time, use a while loop.)

here we set the variable equal 0. then we use the “do” loop with curly brackets.

which we add an increment to the counter by 1 with “a++” and run console.log(“we have this many numbers” + a).

UNTIL the “while loop” condition continues till it runs false or a is no longer less than 10

Then STOP the loop.

The do loop will always run at least once.

Little Test Reference:

here we set the values each to 5 then we run the loops. if you see the while loop on the bottom, it didn't do anything since it checks to see if “n<5”. Thus proving that it stops running the moment the conditional is true.

the do-while loop still ran once, because it reads everything inside the statement first (a++ and console.log), then runs the conditional to see if it's indeed false.

I hope this all makes sense!

Keywords in while loops:

The “continuing” (keyword)

in the above example, we use a “continue” method, and all that does is skip that iteration for that specific element (in this case the 3). So it will see the “continue” and will skip the console.log for the specific number 3(since we set it to do that). Then goes back to the top and continues on with the rest of the numbers.

The “break” (keyword)

In this example we use the “break ” keyword, all this does is jump out of the loop completely. So it runs the while loop and goes through all the steps, then sees “n === 3". Then says, “ ok there is a Break lets jump out of the loop. (walla you broke your code, I mean jumped out of your code. I never use these two keywords.)

Moving on!

for…in loop:

this type of loop is great for objects.

the “for in loop” will go through property NAMES.

the “for of loop” will go through the property VALUES.

these are how they are usually set up:

for(variable in object){ something to execute on each variable statment}

I purposely wanted to show you what happens when you just console.log() “i”. you will see you only get the keys back, not the values.

Now how to do it properly, Ok we first look at the “for in loop” we set up a new person object, with the keys of “firstName, lastName, arms” then they each have values. We run the “for in loop”, we start with the keyword “for”, then we set our variable to “i” (this variable can be whatever you want). Then we use the “in” keyword (its also a keyword), then we put the name of the object/variable that we are calling upon.

after that, we run a method/function on each one of our elements that is in the object/variable, but all WE are doing, is console. logging each element.

Remember you have to console.log() “object name” (person) then [I]. or it will only return keys in object. It is like saying person[firstName]? person[lastName]? person[arms]?. thus getting the values out of all of them.

Moving on!

for…of loop

this one is good for array’s, My go to one.

Like we said above, the “for in loop” will go through property NAMES

The “for of loop” will go through the property VALUES. these are how they are usually set up:

for(variable of object){ something to execute on each variable statment}

they look very similar just with the changed word between “in and of”.

here we see we set a variable to “arr” and add numbers as elements. We then run the “for loop” with the variable “i” (once again it doesn't matter what you call it, it's just a placement holder.)

then we use the “of” keyword, on the object/array you want to iterate over(which is ‘arr’ in our case). Then we call console.log on each element, which returns all the numbers in the array.

let me show you something:

this is what happens when you use a “for in” loop on an array. we get the index number of where the element is in the array. instead of the actual numbers, so watch out.

thank you for hanging out, hope you learned something. See you all 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)