Lesson Weekend

Over the course of this section, we've covered many different looping techniques. It may feel overwhelming to decide which loop is best for a specific use case. This lesson will hopefully narrow things down and make life a little easier.

Also, it's important to note that at this point in your learning, you shouldn't worry too much about which loop is "best" for the job at hand. You should feel free to practice them all - and also to experiment with code and solutions that interest you. For the upcoming independent project, you will be required to loop - but how you implement a loop is up to you.

All of these examples assume that you are starting with the following array:

const array = [0,1,2,3,4,5];

Yep, we are returning to the doubled array example - but this time all of our looping examples are in one place!

for

Example

let doubledArray = [];
for (let index = 0; index < array.length; index +=1) {
  doubledArray.push(array[index] * 2);
}

When to Use

This is a great "starter" loop. You should practice it frequently - at least until you get the hang of it. At that point, you should favor other kinds of loops instead!

Array.prototype.forEach()

Example

let doubledArray = [];
array.forEach(function(element) {
  doubledArray.push(element * 2);
});

When to Use

Use this when both conditions are met:

  1. You want to loop through every element in an array without breaking out of the loop;
  2. You don't want a transformed array.

for...of

Example

let doubledArray = [];
for (const element of array) {
  doubledArray.push(element * 2);
}

When to Use

Use this whenever you want to loop through an array or a string but you don't want to transform the elements into a new string or array. It comes down to preference, but generally you can favor this one over Array.prototype.forEach().

Array.prototype.map()

Example

const doubledArray = array.map(function(element) {
  return element * 2;
});

When to Use

Use this whenever you want to iterate through an array and create a new array with all of its elements transformed.

while

Example

let index = 0;
let doubledArray = [];
while
 (index < array.length) {
  doubledArray.push(array[index] * 2);
  index ++;
}

When to Use

You won't use this one often - practice it until you have the hang of it and then use it sparingly.

What About a Use Case That Doesn't Fit Perfectly?

Let's look at a use case that doesn't fit perfectly - and then solve it with two different kinds of loops. Let's say we want to use a loop to create a transformed string. Should we solve the problem with Array.prototype.map() if we need to transform the string into an array first? Or should we solve it with for...of even though we should favor Array.prototype.map() for transformations?

Well, neither approach is wrong. Ultimately, we can try both solutions and see which feels more elegant and concise. Let's return to our for...of vowelized loop example:

const consonantString = "bdfmxtgl";
let vowelizedString = "";
for (const letter of consonantString) {
  vowelizedString = vowelizedString.concat(letter + "a");
}
vowelizedString;

Here's how we'd solve the same problem with Array.prototype.map():

const consonantString = "bdfmxtgl";
const consonantArray = consonantString.split("");
const vowelizedArray = consonantArray.map(function(element) {
  return element + "a";
});
vowelizedArray.join(""); 

Both of these solutions come up with the same answer in the same number of lines. Ultimately, the approach we take here comes down to preference. There are valid reasons for both approaches.

You can use just about any kind of loop to solve many problems - and while there are best practices and ways to improve our code, there's no one right approach.

Lesson 11 of 12
Last updated December 1, 2020