- You may have noticed that so far in the course every thing we've done has focused on the singular. We've created variables, functions and objects, and added interactivity using events but all these things have been unique one off things. In the real world, that is rarely how things work and, in many cases, we specifically want our code to do things more than once, usually as many times as is necessary and sometimes even endlessly. For this, we have loops. Loops are quite literally loops.
We start a process, usually a function, then, when it's done, we start the process again. Loops are a vital part of all programming languages and will play a vital role in most JavaScript code you'll write, so, we'll dedicate a whole chapter to them. At their core, loops are simple. We create some sort of condition and say for as long as this condition holds, keep running the loop. The class A example of a loop looks like this. For (vari=0;i<10;i++){ and then we console.log(i).
When we run this, it'll spit out zero, one, two, three, four, five, six, seven, eight, nine, and then stop. If we break this apart, here's what happens. First, we step up a for loop which will run the core block inside the curly brackets for as long as the condition is true. Then, inside the condition area of the for loop, we set up a variable I for index or increments and assign zero to it. Then we check to see if I is smaller than 10, which it is, so the condition is true, and, finally, we add one to I.
This loop will run 10 times and then stop on its own. The for loop assumes you know how many times you want to loop to run but sometimes you just want to run the loop until some condition changes. In that case, you can use a while loop instead. This example does the exact same thing as the first one, looping through the same code 10 times, but here it tests a condition that is altered outside the while declaration.
The while loop allows us to create more advanced functions inside the core block and run the loop as long as these or other external conditions are true. A basic example of this would be to use a while loop to find out how many times we can exponentially grow 2.1 before it gets to 567. Run this code example in the console and you'll get nine repetitions. However, if we start it out with 567 as the value, it would never run and we wouldn't be told it only needs to run once.
To ensure the loop runs at least once, we have the do while loop. Here, we run the core block first and then check the while statement. Exactly what type of loop works best for your situation depends on, well, what type of loop you're creating. For loops are by far the most common but while and do while loops also have their uses and, in some cases, they're all interchangeable, it all depends.
The important thing is to remember you have options and each is slightly different from the next.
Author
Updated
4/1/2019Released
5/17/2017Through practical examples and mini-projects, this course helps you build your understanding of JavaScript piece by piece, from core principles like variables, data types, conditionals, and functions through advanced topics including loops, closures, and DOM scripting. Along the way, you will also be introduced to some ES6 and the basics of JavaScript libraries.
- What is JavaScript?
- Working with data
- Using functions and objects
- Working with JavaScript and the DOM
- Changing DOM elements
- Handling events
- Working with loops
- Making images responsive using markup
- Troubleshooting code
- Validating functionality
- Minifying JavaScript
Skill Level Beginner
Duration
Views
Related Courses
-
Introduction
-
Welcome1m 7s
-
-
1. JavaScript: An Introduction
-
What is JavaScript?2m 38s
-
-
2. The Basics
-
Introducing the browser console10m 31s
-
3. Working with data
-
Data types in JavaScript4m 2s
-
Arrays2m 20s
-
4. Functions and Objects
-
Functions in JavaScript3m 28s
-
Build a basic function3m 29s
-
Anonymous functions5m 11s
-
Variable scope3m 17s
-
ES2015: let and const6m 12s
-
Make sense of objects3m 19s
-
Object constructors6m 16s
-
Closures8m 11s
-
-
5. JavaScript and the DOM, Part 1: Changing DOM Elements
-
Access and change elements4m 33s
-
Access and change classes3m 45s
-
Access and change attributes4m 53s
-
Add DOM elements6m 56s
-
6. Project: Create an Analog Clock
-
Use CSS to move clock hands3m 49s
-
7. JavaScript and the DOM, Part 2: Events
-
What are DOM events?1m 31s
-
Some typical DOM events1m 59s
-
Add and use event listeners6m 51s
-
-
8. Project: Typing Speed Tester
-
Rundown of HTML markup2m 58s
-
Build a count-up timer5m 56s
-
Add a reset button5m 3s
-
-
9. Loops
-
Loops3m 37s
-
Looping through arrays4m 7s
-
Break and continue loops7m 9s
-
-
10. Project: Automated Responsive Images Markup
-
Project breakdown1m 55s
-
Rundown of project setup3m 26s
-
-
11. Troubleshooting, Validating, and Minifying JavaScript
-
Troubleshooting JavaScript7m 20s
-
Online script linting5m 57s
-
Automate script linting8m 24s
-
Online script minification2m 50s
-
Automate script minification2m 24s
-
12. Bonus Chapter: Ask the Instructor
-
What are arrow functions?3m 11s
-
What does the % symbol do?3m 47s
-
-
Conclusion
-
Next Steps1m 55s
-
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
This will not affect your course history, your reports, or your certificates of completion for this course.
CancelTake notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.
Share this video
Embed this video
Video: Loops