XQA
Back to Web Development
2026-02-255 min read

Loop Lists (Web Development)

Learn Loop Lists (Web Development) step by step with clear examples and exercises.

Title: Loop Lists (Web Development)

Why This Matters

Loop lists are essential for web development as they allow you to iterate through a collection of items, such as an array or a list, and perform the same operation on each item. This is crucial in creating dynamic web pages that can respond to user interactions, fetch data from APIs, and more. Understanding how to use loop lists effectively will help you build more efficient and dynamic websites.

Prerequisites

Before diving into loop lists, it's important to have a solid understanding of the following topics:

  1. HTML basic syntax
  2. CSS styling
  3. Understanding variables and data structures in JavaScript (arrays and objects)

Core Concept

What are Loop Lists?

In web development, loop lists are used to iterate through a collection of items in an array or list using a control structure like for, while, or forEach. This allows you to perform the same operation on each item in the collection.

JavaScript for Loops

The most commonly used loop list in JavaScript is the for loop. Here's its basic syntax:

for (initialization; condition; increment/decrement) {
// code to be executed
}
  • Initialization: This statement initializes the counter variable, usually named i.
  • Condition: This statement checks if the counter variable should continue looping. If the condition is false, the loop ends.
  • Increment/Decrement: This statement updates the counter variable after each iteration.

Here's an example of a simple for loop that prints numbers from 0 to 9:

for (let i = 0; i < 10; i++) {
console.log(i);
}

JavaScript while Loop

The while loop also allows you to iterate through a collection of items. The main difference between the for loop and the while loop is that the while loop checks the condition at the beginning of each iteration, whereas the for loop checks it at the start and end of each iteration.

Here's the basic syntax for a while loop:

while (condition) {
// code to be executed
}

The loop continues as long as the condition is true. Once the condition becomes false, the loop ends.

Example of a simple while loop that prints numbers from 0 to 9:

let i = 0;
while (i < 10) {
console.log(i);
i++;
}

JavaScript forEach Loop

The forEach() method is a built-in function in JavaScript that allows you to iterate through the elements of an array and perform the same operation on each element. Here's its basic syntax:

array.forEach(function(currentValue, index, array) {
// code to be executed
});

The forEach() method takes a callback function as an argument, which is called once for each element in the array. The callback function receives three arguments:

  1. currentValue: The current element being processed.
  2. index: The index of the current element.
  3. array: The original array object.

Example of using the forEach() method to print the elements of an array:

let fruits = ["apple", "banana", "orange", "grape"];
fruits.forEach(function(fruit) {
console.log(fruit);
});

Common Mistakes

  1. Forgetting to initialize the counter variable: If you forget to initialize the counter variable, you'll get an error when trying to use it in the loop condition.
  1. Infinite loops: An infinite loop occurs when the loop condition never becomes false. This can happen if the initialization or increment/decrement statement is incorrect.
  1. Accessing array indices out of bounds: If you try to access an index that doesn't exist in the array, you'll get an error. Always make sure to check for valid indices and handle edge cases appropriately.
  1. Ignoring the return value of forEach(): The forEach() method does not return a value. If you need to perform an operation that returns a value, consider using a different loop structure or the map(), filter(), or reduce() methods instead.

Worked Example

Let's create a simple web page that displays a list of fruits and allows users to remove fruits from the list by clicking on them.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Loop Lists Example</title>
<style>
ul {
list-style: none;
padding: 0;
margin: 0;
}
li {
display: inline-block;
margin: 5px;
}
.selected {
text-decoration: line-through;
}
</style>
</head>
<body>
<h1>Loop Lists Example</h1>
<ul id="fruits"></ul>
<button onclick="removeFruit()">Remove Fruit</button>

<script>
let fruits = ["apple", "banana", "orange", "grape"];
let selectedFruit;

function displayFruits() {
const fruitList = document.getElementById("fruits");
fruits.forEach(function(fruit) {
const li = document.createElement("li");
li.textContent = fruit;
li.addEventListener("click", function() {
if (selectedFruit === this) {
selectedFruit = null;
this.classList.remove("selected");
} else {
selectedFruit = this;
fruits = fruits.filter(function(fruit) {
return fruit !== this.textContent;
});
this.classList.add("selected");
}
});
fruitList.appendChild(li);
});
}

function removeFruit() {
if (selectedFruit) {
const index = fruits.indexOf(selectedFruit.textContent);
fruits.splice(index, 1);
selectedFruit.parentNode.removeChild(selectedFruit);
selectedFruit = null;
}
}

displayFruits();
</script>
</body>
</html>

Common Mistakes

  1. Not handling the case when no fruit is selected: In the removeFruit() function, make sure to check if a fruit is selected before trying to remove it from the list.
  1. Not updating the DOM after removing an item: After removing an item from the array, don't forget to update the DOM by removing the corresponding `` element.
  1. Not handling edge cases when multiple fruits have the same name: If you allow users to add fruits with the same name, make sure to handle edge cases appropriately when removing them from the list.

Practice Questions

  1. Write a JavaScript function that calculates and returns the sum of all numbers in an array using a for loop.
  1. Write a JavaScript function that reverses the order of elements in an array using a while loop.
  1. Write a JavaScript function that finds the second highest number in an array using a forEach() loop.

FAQ

--

  1. Why can't I use a for loop to reverse the order of elements in an array?

You can, but it's more common to use a while loop or the reverse() method for this purpose.

  1. What happens if I forget to initialize the counter variable in a for loop?

If you forget to initialize the counter variable, you'll get an error when trying to use it in the loop condition.

  1. Can I use a forEach loop to modify the original array?

Yes, you can modify the original array inside the callback function of a forEach() loop. However, keep in mind that forEach() does not return a modified version of the array; if you need to return a modified version, consider using map(), filter(), or reduce() instead.

  1. Why can't I use HTML tags directly in my JavaScript code?

To avoid syntax errors and maintain better separation between your HTML and JavaScript, it's best to create HTML elements using the DOM API rather than writing HTML directly in your JavaScript code.

Loop Lists (Web Development) | Web Development | XQA Learn