Different loops

Kodexempel

<div class="input-group mb-3">
  <ul id="ulCarArrays"></div>
</div>
<script>
// This example demonstrates different types of loops in JavaScript to iterate over an array of car objects
//cars is an array of car objects, each with properties like id, brand, model, year, price, and isElectric
const cars = [
  { id: 1, brand: "Toyota", model: "Camry", year: 2020, price: 24000, isElectric: false },
  { id: 2, brand: "Tesla", model: "Model 3", year: 2022, price: 45000, isElectric: true },
  { id: 3, brand: "Ford", model: "Mustang", year: 2021, price: 38000, isElectric: false },
  { id: 4, brand: "BMW", model: "X5", year: 2023, price: 52000, isElectric: true },
  { id: 5, brand: "Honda", model: "Civic", year: 2019, price: 22000, isElectric: false },
];

const ul = document.querySelector("#ulCarArrays");

// Create Bootstrap grid container
ul.innerHTML = `
  <div class="container">
    <div class="row">
      <div class="col">
        <div class="card">
          <div class="card-header bg-primary text-white">Index-based for loop</div>
          <div class="card-body" id="for-loop"><!--dynamically filled using loops--></div>
        </div>
      </div>
      <div class="col">
        <div class="card">
          <div class="card-header bg-info text-white">for...of loop</div>
          <div class="card-body" id="for-of-loop"><!--dynamically filled using loops--></div>
        </div>
      </div>
      <div class="col">
        <div class="card">
          <div class="card-header bg-danger text-white">forEach loop</div>
          <div class="card-body" id="foreach-loop"><!--dynamically filled using loops--></div>
        </div>
      </div>
      <div class="col">
        <div class="card">
          <div class="card-header bg-success text-white">While loop</div>
          <div class="card-body" id="while-loop"><!--dynamically filled using loops--></div>
        </div>
      </div>
    </div>
  </div>
`;

// Helper function to create simple string representation of a car item
//to be put in car-body of the different loops
function createCarItem(car) {
  return `
    <div class="mb-2 p-2 bg-light rounded">
      <strong>${car.brand}</strong> ${car.model}<br>
      <small class="text-muted">${car.year} • ${car.isElectric ? '⚡' : '⛽'}</small>
    </div>
  `;
}

// 1. Index-based for loop
const forLoopCol = document.querySelector("#for-loop");
//innerHTML is used to set the content of the forLoopCol element
// It creates a Bootstrap list group to hold the car items
forLoopCol.innerHTML = '<div class="list-group">';
for (let i = 0; i < cars.length; i++) {
  //createCarItem is called to create a string representation of the car item
  // and it is added to the innerHTML of the forLoopCol element
  forLoopCol.innerHTML += createCarItem(cars[i]);
}
forLoopCol.innerHTML += '</div>';

// 2. for...of loop
const forOfLoopCol = document.querySelector("#for-of-loop");
forOfLoopCol.innerHTML = '<div class="list-group">';
for (const car of cars) {
  forOfLoopCol.innerHTML += createCarItem(car);
  
}
forOfLoopCol.innerHTML += '</div>';

// 3. forEach loop
const forEachLoopCol = document.querySelector("#foreach-loop");
forEachLoopCol.innerHTML = '<div class="list-group">';
cars.forEach((car, index) => {
  forEachLoopCol.innerHTML += createCarItem(car);
});
forEachLoopCol.innerHTML += '</div>';

// 4. While loop
const whileLoopCol = document.querySelector("#while-loop");
whileLoopCol.innerHTML = '<div class="list-group">';
let index = 0;
while (index < cars.length) {
  whileLoopCol.innerHTML += createCarItem(cars[index]);
  index++;
}
whileLoopCol.innerHTML += '</div>';
</script>