JavaScript Loops: For, While, and Enhanced Loops

Topic Overview

Greetings, Explorer! In this lesson, we will delve into the essential tools of JavaScript loops . Loops in programming simplify and enhance the efficiency of repetitive tasks — much like a coffee maker brewing multiple cups with a single press, they automate the process, ensuring each cup is brewed quickly and consistently. In this lesson, we will explore the universe of looping in JavaScript and gain hands-on experience by applying loops to JavaScript arrays and strings.

Understanding Looping

Imagine listening to your favorite song on repeat. That's the concept of loops in programming. For instance, we can use a for loop to print greetings for a group of friends. JavaScript let friends = ["Alice", "Bob", "Charlie", "Daniel"]; for (let i = 0; i < friends.length; i++) {// `i` is the index that changes with each iteration // For each friend, print the greeting console.log("Hello, " + friends[i] + "! Nice to meet you.");} // Output: // Hello, Alice! Nice to meet you. // Hello, Bob! Nice to meet you. // Hello, Charlie! Nice to meet you. // Hello, Daniel! Nice to meet you. let friends = ["Alice", "Bob", "Charlie", "Daniel"]; for (let i = 0; i < friends.length; i++) {// `i` is the index that changes with each iteration // For each friend, print the greeting console.log("Hello, " + friends[i] + "! Nice to meet you.");} // Output: // Hello, Alice! Nice to meet you. // Hello, Bob! Nice to meet you. // Hello, Charlie! Nice to meet you. // Hello, Daniel! Nice to meet you. Loops enable us to execute repetitive sequences automatically and efficiently.

For Loop in JavaScript

The for loop is a control flow statement that allows code to be executed repeatedly. The structure of a for loop is typically for (initialization; condition; iteration) { loop body }, where the loop body gets executed for as long as the condition evaluates to true. After each loop, the iteration is executed, which generally updates the value of the loop control variable. Here is how it generally works: Initialization : This is where you set up the loop variable. It's executed once when the loop begins. Condition : This Boolean expression determines if the loop will continue or stop. If it's true, the loop continues; if it's false, the loop ends, and the flow jumps to the next statement after the loop block. Iteration : This is where you update the loop variable. This statement executes after the loop body and right before the next condition check. Loop Body : The block of code to be executed in each loop. Let's print a range of numbers using a for loop: JavaScript for (let num = 0; num < 5; num++) {console.log(num);} // Output: // 0 // 1 // 2 // 3 // 4 In each cycle of the loop, the variable num is updated after executing the code inside the block.

Join the 1M+ learners on CodeSignal

Be a part of our community of 1M+ users who develop and demonstrate their skills on CodeSignal

JavaScript

let friends = ["Alice", "Bob", "Charlie", "Daniel"];

for (let i = 0; i < friends.length; i++) {
    // `i` is the index that changes with each iteration
    // For each friend, print the greeting
    console.log("Hello, " + friends[i] + "! Nice to meet you.");
}

// Output:
// Hello, Alice! Nice to meet you.
// Hello, Bob! Nice to meet you.
// Hello, Charlie! Nice to meet you.
// Hello, Daniel! Nice to meet you.

JavaScript

let fruits = ["apple", "banana", "cherry"];

// `fruit` stands for each fruit in the `fruits` array
for (let fruit of fruits) {
    console.log(fruit);
}

// Output:
// apple
// banana
// cherry

let fruits = ["apple", "banana", "cherry"];

// `fruit` stands for each fruit in the `fruits` array
for (let fruit of fruits) {
    console.log(fruit);
}

// Output:
// apple
// banana
// cherry

JavaScript

let word = "hello";
// `ch` is each individual character in `word`
for (let ch of word) {
    console.log(ch);
}

// Output:
// h
// e
// l
// l
// o

let word = "hello";
// `ch` is each individual character in `word`
for (let ch of word) {
    console.log(ch);
}

// Output:
// h
// e
// l
// l
// o

JavaScript

let num = 0;
// The loop keeps running until `num` is no longer less than 5
while (num < 5) {
    console.log(num);
    // Increase `num` by 1 at the end of each iteration
    num++;
}

// Output:
// 0
// 1
// 2
// 3
// 4

let num = 0;
// The loop keeps running until `num` is no longer less than 5
while (num < 5) {
    console.log(num);
    // Increase `num` by 1 at the end of each iteration
    num++;
}

// Output:
// 0
// 1
// 2
// 3
// 4

JavaScript

let numbers = [1, 2, 3, 4, 5];

let total = 0;
// `num` is each number in `numbers`
for (let num of numbers) {
    total += num; // Add each number in the array
}
console.log(total); // print the total sum

// Output:
// 15

let numbers = [1, 2, 3, 4, 5];

let total = 0;
// `num` is each number in `numbers`
for (let num of numbers) {
    total += num; // Add each number in the array
}
console.log(total); // print the total sum

// Output:
// 15

JavaScript

let text = "hello";
let vowelCount = 0;
// `ch` is each character in `text`
for (let ch of text) {
    // If a vowel letter is found, increment the count
    if (ch === 'a' || ch === 'e' || ch === 'i' || ch === 'o' || ch === 'u') {
        vowelCount++;
    }
}
console.log(vowelCount); // print the count of vowels

// Output:
// 2

let text = "hello";
let vowelCount = 0;
// `ch` is each character in `text`
for (let ch of text) {
    // If a vowel letter is found, increment the count
    if (ch === 'a' || ch === 'e' || ch === 'i' || ch === 'o' || ch === 'u') {
        vowelCount++;
    }
}
console.log(vowelCount); // print the count of vowels

// Output:
// 2

JavaScript

let fruits = ["apple", "banana", "cherry"];

// `fruit` stands for each fruit in the `fruits` array
for (let fruit of fruits) {
    console.log(fruit);
}

// Output:
// apple
// banana
// cherry

JavaScript

let word = "hello";
// `ch` is each individual character in `word`
for (let ch of word) {
    console.log(ch);
}

// Output:
// h
// e
// l
// l
// o

JavaScript

let num = 0;
// The loop keeps running until `num` is no longer less than 5
while (num < 5) {
    console.log(num);
    // Increase `num` by 1 at the end of each iteration
    num++;
}

// Output:
// 0
// 1
// 2
// 3
// 4

JavaScript

let numbers = [1, 2, 3, 4, 5];

let total = 0;
// `num` is each number in `numbers`
for (let num of numbers) {
    total += num; // Add each number in the array
}
console.log(total); // print the total sum

// Output:
// 15

JavaScript

let text = "hello";
let vowelCount = 0;
// `ch` is each character in `text`
for (let ch of text) {
    // If a vowel letter is found, increment the count
    if (ch === 'a' || ch === 'e' || ch === 'i' || ch === 'o' || ch === 'u') {
        vowelCount++;
    }
}
console.log(vowelCount); // print the count of vowels

// Output:
// 2

Topic Overview

Understanding Looping

For Loop in JavaScript

Join the 1M+ learners on CodeSignal

Enhanced For Loop in JavaScript

While Loop in JavaScript

Applications of Looping

Lesson Summary and Practice