For Loops - Beau teaches JavaScript

For loops are one of the most common ways to repeat things in JavaScript.
Code:
🔗 codepen.io/beaucarnes/pen/YZyW...
More info:
🔗 developer.mozilla.org/en-US/d...
Beau Carnes on Twitter: / carnesbeau
⭐JavaScript Playlists⭐
▶ES6: • ES6 - Beau teaches Jav...
▶JavaScript Basics: • JavaScript Basics Course
▶Design Patterns: • Design Patterns - Beau...
▶Data Structures and Algorithms: • Data Structures and Al...
▶Clean Code: • Clean Code - Beau teac...
-
We're busy people who learn to code, then practice by building projects for nonprofits. Learn Full-stack JavaScript, build a portfolio, and get great references with our open source community.
Join our community at freecodecamp.com
Follow us on twitter: / freecodecamp
Like us on Facebook: / freecodecamp
Follow Quincy on Quora: www.quora.com/Quincy-Larson

[@FreelanceFadi]

The nested array part makes me wanna dropkick a toddler.

[@YourBeautyRefinedAracely]

LOL!!! this legit made me cackle. But I understand what u mean!

[@EssLoco]

I'm learning JS atm and nested for loops threw me off terriably, still got to push on i suppose

[@grant2572]

I needed this laugh while going through the same emotions lmao

[@EssLoco]

@@grant2572 i haven't laughed since learning about nested loops, unfortunately...

[@grant2572]

@@EssLoco - You on freecodecamp?

[@oufcena5092]

Loops are used to access arrays using the index of its elements.
Nested arrays needs nested loops as a result.
1st loop to access the outer array &
2nd loop to access the inner one.
var arr = [0, 2, [3, 2], 7];
arr[0] = 0;
arr[1] = 2;
arr[2] = [3, 2];
arr[2][0] = 3;
arr[2][1] = 2;
arr[3] = 7;

[@godismyway7305]

Thank you so much!

[@izaakchater9165]

Thank you very much for this. I was struggling to get a good understanding of this section in Code Academy but you've broken it down in a way that's given me a lightbulb moment

[@bikepackingeurope2085]

me too!

[@ImParzelli]

Coming from Codeacademy aswell haha One Year ago huh what's your progress now?

[@godismyway7305]

@@ImParzelli What is n your progress brother?

[@Mohammed-od4ju]

Beau is a LEGEND in the dev game!

[@Paltibenlaish]

always forget this for loop.
thanks for the explanation!!!!!
keep doing !

[@nicolejsaunders]

Thank you so much! This one had my head spinning.

[@Sage16226]

thanks for the easy explanation, just learning how to program, couldn't grasp the for loop until this video.

[@temzeks]

Any advances?

[@fabriciohlgn6397]

Thanks Beau, I needed a break; to fix my for loop… many thanks 😊

[@Hellokittyenby]

I didn’t understand 😭💔

[@alicenikuze231]

Im also struggling to understand but i get the idea.

[@alejandrocano88]

keep on practicing, but i guess by this time you should already know ;)

[@temzeks]

Did you guys understand

[@benjameerave4329]

its just like while loops

[@veetoutas]

Thank You for sharing the knowledge. I really like Your videos, because You touch the topic a little bit deeper than just very very basics. I really start to understand stuff because of You. Your tutorials are highly appreciated. Liked and subscribed, my man.

[@kandysman86]

It's been 11 months since this comment, how are you doing now?

[@temzeks]

Yeh id wanna know too

[@haycheC]

@@kandysman86 what about you? been 2 years?

[@whyfoo]

@@haycheC how about you its been 1 year ??

[@SmokeDemonKenpachi]

​@waifutrades what about you? It's been half a year???

[@janosvegh2510]

Very good explanation, real teacher value here.

[@eklavyasharma]

My output seems to be overlapping while debugging in Chrome Browser Dev tool. I found the bug when I used the tab '\t' between nested loop. Anyone has idea why the chrome is behaving that way?

[@ChrisTian-ox5nr]

Thank You great tutorial on loops.

[@cinammondream]

What a beautiful thing to say! "Use your code for good!" WOW!!!

[@MrWardo2009]

Thanks! Great explanation!

[@Urmomsstockings]

I am confused just because I feel like the first for loop for variable i could be sufficient to display the whole array. Is there a reason there is a second for loop?

[@ciceroaraujo5183]

Excellent professor

[@danielstoicamusic]

About the first example, why would you add an if statement which is totally opposite of the initial condition? Why not just say from the beginnin i

[@joxim697]

From my point of view, he just used current example to explain how break works.

[@neenus]

Great explanation thank you ... can I just ask is that jsfiddle that you are using?? if yes how did you show the console?? I'm new to all of this and I'm trying to do this so I can test my javascript while learning but I can't figure out how to show the console ... so far I've been using the console in developer tools in Chrome

[@neenus]

never mind I just noticed your link to codepen but thanks anyway! that works as well.

[@DrBotnus]

console.log(Whatever you are logging in the console, for example calling a function and getting the outputs of it.);

[@ninastech777]

Thanks for explain!

[@Fishfood007]

What is the practical appilcation to this? I mostly get it and how it works wouldn't know what to do with it though...

[@freecodecamp]

For loops are used all the time in programming. Here is one example: You may have an array of usernames. You could use a for loop to loop through the array and print every username to the screen in just a couple lines of code.

[@goldensleeves]

Great video! It's very confusing how i++ happens AFTER each loop but it's placed at the beginning. Your video helped me see that was true. Thank you

[@TheHappyKamper]

yeah I think while loops are so much easier to understand visually. Using a while loop, the example in the video would look like this:
while(i

[@josh__f]

Thanks, Beau!

[@vmax924]

Thanks Beau, awesome tutorial! Just 1 question: I don't understand the output flow of 'console.log(arr[ i ] [ j ])'.
I tried to output the log of 'console.log(arr[ j ])', the result was like :
(2) [1, 2]
(2) [3, 4]
(2) [1, 2]
(2) [3, 4]
(2) [1, 2]
(2) [3, 4]
and also tried 'console.log(arr[ i ])', it was like:
(2) [1, 2]
(2) [1, 2]
(2) [3, 4]
(2) [3, 4]
(2) [5, 6]
(2) [5, 6]
why does it always output 6 times? why on the first example, the loop didn't find the array [5,6]?
Thanks for your great tutorial again!

[@souravsuman1993]

I first part arr[j] the value of j was never 2 that' is why the it doesn't print [5,6]
The six times printing on console was because your for loop goes 3*2 times

[@cyrilmacauley9383]

nice.. which text editor are you using that comes with a console?

[@zakiulhasan808]

I guess it's codepen.io

[@djhonz45]

Thank you!!!!

[@zachferell8359]

how do you increment by two when looping thru an array?

[@codynelson4]

I believe you'd just do i + 2 instead of i++

[@DrBotnus]

for (let i=0; i < array.length; i+2)

[@DrBotnus]

or if you want to check all the adjacents, you could do for (let i=0; i < array.length; i++) {
let up = array[i-4].something based of your code
let left = array[i-1].something based of your code
let right = array[i+1].something based of your code
let down = array[i+4].something based of your code

[@orion.5611]

what if the variable just holds one number?

[@orion.5611]

what if it is not an array?

[@garrettbaker2320]

Does anyone ever give an example of for loops that actually ends up on a web page, and not just "console.log"? I'm at my wits end. "document.write" and "console.log" are of no use to me.

[@danielstoicamusic]

No. :)

[@geovaniraffaelli4508]

You can use it to loop through an array, so the instant someone writes something in a text box and submits it automatically goes to the array and back to the HTML, just like in a bookmarkers app or to-do list app. Dude I was struggling with this too but I didn't give up and eventually I understood it. Don't give up and sooner or later everything will click! Best wishes

[@percyblakeney3743]

Nanika This comment wasn't directed at me but I'm going to pretend it was since it's sound advice I needed to hear (read) at this very moment. :)

[@kandysman86]

@@percyblakeney3743 it's been 7 months, how are you doing now?

[@percyblakeney3743]

@@kandysman86 I have a greater understanding now than I did 7 months ago. I even managed to finally obtain my javascript cert of completion from fcc, however I cannot stress enough the importance of persistence. To be honest I think I may give the course a second go in order to really drive it home. Thank you for asking and for reminding me to get back at it.
How's your javascript knowledge?

[@benjameerave4329]

ok i understand but what to do with it?

[@debabratasen6955]

didn't understand that nested for loop

[@JD-kf2ki]

thanks dude

[@struestorystudios9225]

If i want to loop * how do i do?

[@freecodecamp]

What do you mean when you say 'loop *'?

[@jordan0076]

Who ate my sandwich... MYYYYYYY SANDWICHHHHHH

[@igotapochahontas]

That voice.....is that taco from the league? Or John lejoie from CZcams?

[@oamobile8415]

Who new Ben Affleck was so good at JS!

[@aaronargottelopez3488]

[@liuziyu4272]

the very last part I still can't understand it's so confusing

[@liuziyu4272]

I don't understand the last part when I=0 j=0 it selects 1, but then doesn't I increased to 1 and it selects the second index which contains 3,4 shouldn't it display 1,3,5? I know the second loop continues if j is less than 2.

[@liuziyu4272]

why does the second loop goes twice first?

[@liuziyu4272]

is it because the second loop is nested inside the first loop?

[@freecodecamp]

The second loop runs twice because of this part: "j < arr[i].length". arr[i].length equals two because there are two elements in the first nested array ([1, 2]). The first time the second loop runs, j = 0. The second time, j = 1. At the end of the second time, j is set to 2 so the loop stops since j is no longer less than 2.

[@eumhiralejandrino885]

Grade 9?

[@gheorgheslicari1773]

Can you please to put more accent on explaining things and clean !!! rather than showing up , and yours how you speak !