Javascript ES6 — The for loop # 8

In general, if you’ve got a list, and you want to get each element from this list, or in other words if you want to iterate over elements of an array you use the old style for loop.

for Loop

As an example, if you’ve got a fixed set of values numbers.

let numbers = [45, 78, 95, 36, 47];

And you want to get each number from this list,first you create a for loop, you initialize the counter to 0, the condition to be evaluated before each iteration, and the expression to be evaluated after each iteration, in this case incrementing the counter by one, and as long as the condition is true you console.log an element from the list numbers at a specific index using the counter.

for (let i = 0; i < numbers.length; i += 1) {
  console.log(numbers[i]);
}

ES5 – forEach

Now, and for the same example, you can use the ES5 forEach loop, that executes a function on each element in the array

numbers.forEach(number => {
  console.log(number);
});

Just to notice that the forEach is used only for arrays, maps, and sets, just forget about maps and sets, you’ll see them later on a specific video.

As you see, that the forEach is shorter than the for loop, however, there are some weaknesses of using it, first, there is no way to break or stop a current loop.

numbers.forEach(number => {
if (number == 45) {
  console.log("terminate the current loop");
  break;
}
console.log(number);
});

This syntax is totally incorrect, the second problem is, you can’t either use the return statement from an enclosing function within the loop.

numbers.forEach(number => {
if (number == 45) {
  console.log("terminate the current loop");
  return false;
}
console.log(number);
});

In this example, the loop should stop and return false (select the return line) if the condition is true (select the condition line).

ES6 – for in

Okay, now let’s use a newer syntax of creating a loop using the ES6, for in loop, which it’ll iterate over the array numbers and return these indexes.

for (index in numbers) {
  console.log(index);
}

If you can access to the indexes, now display each number on the list numbers

for (index in numbers) {
  console.log(numbers[index]);
}

However, you’ve to be cautious when you use for in, I’ll present some of the things you should know before using it, let’s comment out this line

for (index in numbers) {
  // console.log(numbers[index]);
}

And check the type of the index.

for (let index in numbers) {
  console.log(typeof index);
}

We’ve got a list of indexes 0, 1, 2, 3 and 4 as strings and not actual numbers.
What if you want to do arithmetic index + 1.

for (let index in numbers) {
  console.log(index + 1);
  console.log(typeof index);
}

In this case, you’ll have respectively a result of 01, 11, 21, 31 and 41, so you’re concatenating a string to a number, instead of adding two numbers. And in some cases, for in isn’t guaranteed to preserve element ordering, you’ll see that later when you’ll use the delete operator to remove a property from an object in a future video.

To summarise, for in is not fit to be used for arrays when the order of elements is super important, and it’s more designed to work for objects.

ES6 – for of

Let’s now move to the for of which is more accurate to use with arrays, same here, you create a new variable number, and you get each element from the array numbers, console.log the value of number.

for (let number of numbers) {
  console.log(number);
}

You’re thinking now, why I’d have to use the for of syntax if I can achieve the same result by using forEach.

numbers.forEach(number => {
  console.log(number);
});

Remember, when I list some of the pitfalls of using forEach, so you can’t use break or return within this kind of loops (select the forEach loop code).

Now, and by using the for of you can stop a loop while you’re iterating over the array numbers, Okay, let’s create a condition that checks if the value of number is equal to 36, which it’s already on the list (select the 36 number from the numbers array ), and if the condition is true, terminate the current loop by using the break statement.

for (let number of numbers) {
if (number == 36) {
  console.log("terminate the current loop");
  break;
}

console.log(number);
}

Now you are getting the number 45, 78 and 95 (select these numbers from the list and the console.log(number)) from the list, and once the condition is true the loop will terminate.

Anything after the for of loop will be displayed, let’s go for a console log numbers after the loop, which will display all the numbers

console.log(numbers)

So far break work perfectly, and, if you decide to use a return false instead of break.

for (let number of numbers) {
if (number == 36) {
  console.log("terminate the current loop");
  return false;
}

console.log(number);
}

Not even the current loop will be terminated, but also, anything after the for of loop will not be evaluated. Okay, break and return work perfectly within a for of loop, let’s return the break statement, and comment out this last line

for (let number of numbers) {
if (number == 36) {
  console.log("terminate the current loop");
  break;
}

console.log(number);
}

// console.log(numbers);

You can even access to both the index and the value of a specific element on the list, now instead of iterating over the numbers array, you’ll iterate through number.entries() method that returns an array iterator that contains the key and value pairs of each index in the array.

for (let number of numbers.entries()) {
if (number == 36) {
  console.log("terminate the current loop");
  break;
}

console.log(number);
}

You’re getting as a result, at each index, an array that include booth the index and the number (point at one index 0 and one number 45), and to get them separated, you’ve to use the destructuring assignment and map the index value with an index variable, and same for the number.

for (let [index, number] of numbers.entries()) {
if (number == 36) {
  console.log("terminate the current loop");
  break;
}

console.log(index, number);
}

Conclusion

To recap:

Use the for in loop to loop over object properties, example

for (key in studentInfo) {
  console.log(key);
}

And use the for of loop over the data (select the last for loop code).

Leave a Reply

Your email address will not be published. Required fields are marked *