The differences between for loop as for...in, for...of, for await...of and forEach in Array

for...in

Show demo below

const arr = ['a', 'b', 'c'];
for (index in arr) { console.log(index); }

//ouput:
//1

//2

//3

The for...in loop logs only enumerable properties of the iterable object. It doesn't log array elements a, b, c  because those are not properties — they are values. It logs array indexes as well as arr , which are actual properties. If you're not sure why these properties are iterated over, there's a more thorough explanation of how array iteration and for...in work.

Array indexes are just enumerable properties with integer names and are otherwise identical to general object properties. The for...in loop will traverse all integer keys before traversing other keys, and in strictly increasing order, making the behavior of for...in close to normal array iteration. However, the for...in loop will return all enumerable properties, including those with non–integer names and those that are inherited. Unlike for...of, for...in uses property enumeration instead of the array's iterator. In sparse arrays, for...of will visit the empty slots, but for...in will not.

It is better to use a for loop with a numeric index,  because they will return the index as a number instead of a string, and also avoid non-index properties.

for...of

Show demo below

const arr = ['a', 'b', 'c'];
for (index of arr) { console.log(index); }

//ouput:
// a

// b

// c

The for...of loop iterates and logs values that iterable, as an array (which is iterable), defines to be iterated over. The object's elements a, b, c are shown, but none of the object's properties are.

A for...of loop operates on the values sourced from an iterable one by one in sequential order. Each operation of the loop on a value is called an iteration, and the loop is said to iterate over the iterable. Each iteration executes statements that may refer to the current sequence value.

Difference between for...of and for...in

Both for...in and for...of statements iterate over something. The main difference between them is in what they iterate over.

The for...in statement iterates over the enumerable string properties of an object, while the for...of statement iterates over values that the iterable object defines to be iterated over.

for await...of

The for await...of statement creates a loop iterating over async iterable objects as well as on sync iterables, including: built-in String, Array, Array-like objects (e.g., arguments or NodeList), TypedArray, Map, Set, and user-defined async/sync iterables. It invokes a custom iteration hook with statements to be executed for the value of each distinct property of the object. This statement can only be used inside an async function.

forEach

 The Array.prototype.forEach() is prototype method that executes a provided function once for each array element.

const arr = ['a', 'b', 'c'];
arr.forEach {element => console.log(element); }

//ouput:
// a

// b

// c

forEach() calls a provided callbackFn function once for each element in an array in ascending index order. It is not invoked for index properties that have been deleted or are uninitialized. (For sparse arrays, see example below.)

Note: "break" and "return" can not use in forEach

const arr = ['a', 'b', 'c'];
arr.forEach {element => {console.log(element); break;}}

//ouput:
// Uncaught SyntaxError: expected expression, got keyword 'break'