Loops and Functions in ES6 part 1

• COURSES
• CODE PLAYGROUND
• DISCUSS
• TOP LEARNERS

Loops and Functions in ES6

14

1/3

     

Loops in ECMAScript 6

In JavaScript we commonly use the for loop to iterate over values in a list:

let arr = [1, 2, 3];
for (let k = 0; k < arr.length; k++) {
console.log(arr[k]);
}Try It Yourself

The for...in loop is intended for iterating over the enumerable keys of an object.
For example:

let obj = {a: 1, b: 2, c: 3};
for (let v in obj) {
console.log(v);
}Try It Yourself

The for...in loop should NOT be used to iterate over arrays because, depending on the JavaScript engine, it could iterate in an arbitrary order. Also, the iterating variable is a string, not a number, so if you try to do any math with the variable, you'll be performing string concatenation instead of addition.
ES6 introduces the new for...of loop, which creates a loop iterating over iterable objects.
For example:

let list = ["x", "y", "z"];
for (let val of list) {
console.log(val);
}Try It Yourself

During each iteration the val variable is assigned the corresponding element in the list.

The for...of loop works for other iterable objects as well, including strings:

for (let ch of "Hello") {
console.log(ch);
}Try It Yourself

The for...of loop also works on the newly introduced collections (Map, Set, WeakMap, and WeakSet). We will learn about them in the upcoming lessons.
Note that ES6 code will run only in browsers that support it. Older devices and browsers that do not support ES6 will return a syntax error.