Home
Introduction to JavaScript for Front-End Engineers
Lesson 6

Journey through JavaScript Looping Constructs

Launch Into Loops: Overview and Goals

Hello, space explorer! Today, we're diving into JavaScript loops. Loops automate repetitive code. In this lesson, we'll cover two types of loops: for and while, and their usage in creating a dynamic HTML list.

Introduction to JavaScript Loops

Loops are all about repetition. Think about your morning routine of brushing your teeth — back and forth until they are all clean. That's a loop! In JavaScript, there are two types of loops: for and while. Let's get started!

Singularly Stepping into the "for" Loop

In a for loop, you're aware of the loop's iterations. Its syntax includes initialization, condition, and update.

JavaScript
1for (initialization; condition; update) {
2  // code to loop over
3}

For instance, let's say we want to print numbers from 1 to 5:

JavaScript
1for (let i = 1; i <= 5; i++) {
2  console.log(i); // prints the number
3}

Here, we initialize i to 1, ensure i is less than or equal to 5, and increment i by 1 after each loop. The loop stops when i > 5.

Wandering In the "while" Loop

Next, we explore the while loop, which continues for as long as a certain condition is true.

Here’s the syntax:

JavaScript
1while (condition) {
2  // code to loop over
3}

As an example, consider a countdown from 5 to 0:

JavaScript
1let countdown = 5;
2while (countdown >= 0) {
3  console.log(countdown); // prints the countdown number
4  countdown--;
5}

Here, as long as countdown is greater than or equal to 0, we print the countdown number and decrement it by 1.

Dynamic Lists in an HTML Page With Loops

Loops generate dynamic content in HTML pages. Just imagine dynamically creating a list of planet names:

HTML, XML
1<body>
2  <ul id="planet-list"></ul>
3</body>
JavaScript
1const planets = ["Earth", "Mars", "Venus", "Jupiter", "Saturn"];
2let listHTML = '';
3for (let i = 0; i < planets.length; i++) {
4  listHTML += '<li>' + planets[i] + '</li>'; // creates a list item for each planet
5}
6
7// Displays the list on the webpage by taking the element with the id "planet-list" and updating its content.
8document.getElementById("planet-list").innerHTML = listHTML;
9
10// This console log will print the final HTML string that represents the list of planets.
11console.log(listHTML); // Will print <li>Earth</li><li>Mars</li><li>Venus</li><li>Jupiter</li><li>Saturn</li>

We've managed to create a dynamic list of planets!

The Concept of the Infinite Loop

Infinite loops are those that never end. They arise when the termination conditions are never met.

JavaScript
1while (true) {
2  console.log('This is an infinite loop!');  // This will run indefinitely.
3}

This endless loop will continue to run as the condition always remains true. Although there are occasional use cases for these types of loops, they are generally considered to be a programming error as they can freeze your programs.

Summary of JavaScript Looping Structures

The exploration of JavaScript loops has been fantastic! We've covered for and while loops, and we've dynamically generated an HTML list. Are you ready to practice these loops? Remember: practice makes permanent. Prepare yourself to blast off into the programming cosmos!

Enjoy this lesson? Now it's time to practice with Cosmo!

Practice is how you turn knowledge into actual skills.