Loops

Intro

Loops in JavaScript are like a path that bends back upon itself, allowing you to repeat a block of code multiple times without having to write it out again and again. Whether you need to process items in a list, perform a task a set number of times, or keep going until a certain condition is met, loops are your go-to solution for the task at hand.

While

The while loop in JavaScript is like the steady heartbeat of your code, ticking away as long as a certain condition holds true. It’s the perfect choice when you need a loop but aren’t quite sure how many times you’ll need to run it. The beauty of the while loop lies in its simplicity: it keeps going as long as the condition you set remains true, and stops as soon as that condition is no longer met.

Imagine you’re waiting for something to happen, like a signal, a certain user input, or a specific value to appear—this is where the while loop shines. It’s a patient loop, checking its condition at the start of each iteration and continuing only if everything checks out.

Here’s a simple example: let’s say you’re flipping a coin and want to keep flipping until you get heads:

let coin;

while (coin !== "heads") {
  coin = Math.random() < 0.5 ? "heads" : "tails";
  console.log(\`You flipped ${coin}\`);
}

In this scenario, the loop will keep flipping the coin until it finally lands on heads. Notice how it checks the condition right at the start—if the condition isn’t met (meaning you flipped tails), it goes back and flips again. But the moment you flip heads, the loop exits, and your code moves on.

The while loop is also useful in situations where the number of iterations isn’t fixed ahead of time. Maybe you’re reading lines from a file until you reach the end, or you’re waiting for a user to input the correct password. With a while loop, you’ve got the flexibility to handle these situations gracefully.

Just be cautious: since the while loop depends on its condition to stop, it’s easy to accidentally create an infinite loop if the condition never becomes false. Always ensure that something in the loop will eventually change the condition, allowing the loop to finish.

In summary, the while loop is your go-to when you need to keep the action going as long as a specific condition is true. It’s simple, flexible, and a great tool for those times when you need a bit of uncertainty in your looping logic.

Do/While

The do/while loop in JavaScript is the adventurous cousin of the while loop, with a twist: it guarantees that the code inside the loop runs at least once, no matter what. If you’re in a situation where you need to ensure that something happens before you even start checking a condition, the do/while loop is your solution.

The do/while loop is less commonly used than its while cousin—in practice, it's somewhat rare to be absolutely sure that you want a loop to execute at least once.

Here’s how it works: the do/while loop first executes the code block within it and then checks the condition at the end. If the condition is true, it loops back and runs the code block again. This cycle continues until the condition finally returns false. It’s like diving into a pool first and then checking the water temperature afterward—no backing out, you’re already in!

For instance, let’s say you want to prompt a user for input and keep asking them until they provide something valid:

let userInput;

do {
  userInput = prompt("Enter a number greater than 10:");
} while (userInput <= 10);

console.log(\`You entered ${userInput}, which is greater than 10.\`);

In this example, the loop will prompt the user for input at least once. After each input, it checks if the condition (input being greater than 10) is met. If not, it prompts the user again. But no matter what the user does, the code inside the loop executes at least once before any conditions are considered.

The do/while loop is particularly handy in scenarios where you need to run your code block first to generate some data, which you’ll then evaluate. Unlike the standard while loop, where the condition is checked upfront, the do/while loop ensures that your code gets a chance to do its thing before making any decisions.

However, like with any loop, there’s a risk of creating an infinite loop if the condition never turns false. So, always double-check that your loop has a way to break out.

In short, the do/while loop is your trusty sidekick when you need to take action first and ask questions later. It’s perfect for situations where you need at least one go-round before deciding whether to continue or move on.

For

The for loop in JavaScript is a powerful and often more convenient way to handle looping, especially when compared to the while loop. It’s particularly handy for situations where you need to iterate a set number of times, making it perfect for loops that follow a specific pattern.

Most loops involve some kind of counter variable that tracks how many times the loop has run. Typically, this counter is initialized before the loop starts, tested before each iteration to see if the loop should continue, and updated at the end of each loop cycle. These three steps—initialization, testing, and updating—are crucial for most loops.

The beauty of the for loop is that it neatly packages these three steps into a single line of code, which makes it easier to understand at a glance and reduces the chance of errors like forgetting to initialize or increment the loop variable.

Here’s how it works:

// For loop example
for (let i = 0; i < 5; i++) {
  console.log(i);
}

Breakdown:

Initialization (let i = 0;): This is where you set up your counter variable (i) and give it an initial value, in this case, 0. Condition (i < 5;): Before each iteration of the loop, this condition is checked. If it’s true, the loop runs. If it’s false, the loop stops. Update (i++): After each loop iteration, the counter i is incremented by 1. Putting these three expressions right at the top of the loop makes it crystal clear how the loop works, reducing the risk of mistakes. When you run this example, the loop prints numbers 0 through 4 to the console, as it starts at 0 and increases by 1 each time until it reaches 5, at which point the loop stops.

The for loop is your ideal choice when you need a clean, straightforward way to handle loops that rely on a counter variable.

For/Of

Introduced in ES6, the for/of loop is a handy way to iterate over the elements of an iterable object, like arrays, strings, or even objects that implement iterable protocols. It's an elegant and straightforward solution when you want to loop through the values directly without worrying about the index or the mechanics of iteration.

Imagine you have an array of items and want to perform an action on each one—for/of makes this process smooth and intuitive. Unlike the traditional for loop, which requires you to manage the loop counter and index, for/of takes care of that for you, letting you focus on what really matters: the data itself.

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

for (const fruit of fruits) {
  console.log(fruit);
}

In this example, for/of cycles through each element in the fruits array, assigning each one to the fruit variable, and logging it to the console. It's clean, easy to read, and perfect for situations where you just need to work directly with the values in your collection.

This loop is especially useful when working with arrays or any iterable, providing a clear and concise way to access each item without the overhead of managing indices manually.

Asynchronous Iteration with For/Await

ES2018 introduced the asynchronous iterator, along with a new loop called for/await. Just like for/of loops through synchronous iterators, for/await is designed to handle asynchronous iterators. This makes it perfect for situations where you're working with promises or asynchronous data streams, allowing you to process each resolved value one at a time, in a clean and readable way.

async function fetchData() {
  const data = [
    Promise.resolve("apple"),
    Promise.resolve("banana"),
    Promise.resolve("cherry"),
  ];

  for await (const item of data) {
    console.log(item);
  }
}

fetchData();

For/In

The for/in loop in JavaScript is a handy way to loop through the properties of an object. It has been part of JavaScript since the beginning of the language, hence why it has a more natural sounding syntax than for/of which was not introduced until ES6. Unlike for/of, which is used for iterating over iterable objects like arrays, for/in is specifically designed to enumerate over an object’s enumerable properties. It gives you access to each key or property name in an object one at a time, making it useful for inspecting or manipulating all the properties an object has.

const car = {
  make: 'Toyota',
  model: 'Corolla',
  year: 2020
};

for (const key in car) {
  console.log(\`Key: ${key}, Value: ${car[key]}\`);
}

In this example, the for/in loop cycles through each property of the car object. The key variable represents each property name, and car[key] accesses the corresponding value. This loop is especially useful when you need to work with the structure of an object itself, rather than just the data it holds. Keep in mind, though, that for/in also enumerates properties inherited from an object’s prototype chain (more on the prototype chain will be discussed on a more advanced belt so don’t worry about it to much for now), so if you’re only interested in the object’s own properties, you might want to pair it with Object.hasOwnProperty().

A Final note

That was quite a journey through the world of loops—hopefully, you’re still with me! We’ve covered a lot, but don’t worry if you’re not ready to rattle off every loop from memory just yet. The key is understanding how each one works and knowing that when you encounter a situation in your code that needs a loop, you can refer back to these concepts to find the best fit. With practice, picking the right loop will become second nature. So, take your time, and soon enough, loops will be your new best friends in coding.

Study Style Notes

Overview

Loops in JavaScript allow you to repeat a block of code multiple times without rewriting it. Whether you're processing items in a list, performing a task a set number of times, or continuing until a condition is met, loops are your essential tool.

While Loop

• Function: Repeats code as long as a specified condition is true.
• Use Case: Ideal when you don’t know beforehand how many iterations are needed.
• Explanation: This loop keeps flipping a coin until it lands on heads. It checks the condition at the start of each iteration.
• Note: Be careful to ensure the condition will eventually be false, or you might create an infinite loop.

Do/While Loop

• Function: Executes code at least once before checking the condition, then repeats as long as the condition is true.
• Use Case: Useful when you need the loop to run at least once, regardless of the condition.
• Explanation: The loop prompts the user at least once and continues until the input is greater than 10.
• Note: The do/while loop is less commonly used than the while loop because it guarantees the loop will run at least once.

For Loop

• Function: A convenient way to handle loops, especially when iterating a set number of times.
• Structure: Packages initialization, condition, and update into a single line.
• Explanation: This loop prints numbers 0 through 4. The initialization (let i = 0;), condition (i < 5;), and update (i++) are all clearly defined at the top of the loop.
• Note: The for loop is a great choice for loops with a counter variable, providing a clean and straightforward structure.

For/Of Loop

• Function: Iterates over the elements of an iterable object, like arrays or strings.
• Use Case: Ideal for working directly with values in a collection.
• Explanation: This loop prints each fruit in the array. The for/of loop simplifies the process of iterating through values without managing an index.

For/In Loop

• Function: Loops through the properties of an object.
• Use Case: Useful for inspecting or manipulating an object’s properties.
• Explanation: This loop prints each property and its value from the car object. The for/in loop accesses each key in the object.
• Note: The for/in loop has been around since the beginning of JavaScript, making it a fundamental tool for working with object properties. Be aware that it also iterates over inherited properties unless paired with Object.hasOwnProperty().

Asynchronous Iteration with For/Await

• Function: Iterates over asynchronous iterators.
• Use Case: Ideal for working with promises or asynchronous data streams.
• Explanation: This loop processes each resolved promise, making it easy to handle asynchronous operations in a loop.