For each in JavaScript?

QUESTION: Is there a way to do a for-each loop in pure JavaScript?

ANSWER: There are several ways to do it, both for Arrays and Objects.

Ways to iterate over Arrays and Objects in JavaScript

Array#forEach method

Array.prototype.forEach( callback(value, index, array) ) Array.forEach Method [Arrays Only]

var miArray = [ 2, 4, 6, 8, 10 ];
miArray.forEach( function(valor, indice, array) {
    console.log("En el índice " + indice + " hay este valor: " + valor);
});

Object#keys method combined with Array#forEach method

Object.keys(object) To obtain the properties of an Object in an associative array. eledgaar 's contribution

var obj = {
  first: "John",
  last: "Doe"
}

// ES6
Object.keys(obj).forEach(key => console.log(key, obj[key]))

// ES5
Object.keys(obj).forEach(function(key) {
  console.log(key, obj[key])
})

for-i loop

for ([initial-expression]; [condition]; [final-expression]) statement for-i Loop [Only Arrays]

var miArray = [ 2, 4, 6, 8, 10 ];
for (var i = 0; i < miArray.length; i+=1) {
  console.log("En el índice '" + i + "' hay este valor: " + miArray[i]);
}

for-in loop

for (variable in object) statement Arrays [Not recommended] and Objects [Recommended]

var miArray = [ 2, 4, 6, 8, 10 ];
for (var indice in miArray) {
  console.log("En el índice '" + indice + "' hay este valor: " + miArray[indice]);
}
    
var miObjeto = { "marca":"audi", "edad":2 };
for (var propiedad in miObjeto) {
  if (miObjeto.hasOwnProperty(propiedad)) {
    console.log("En la propiedad '" + propiedad + "' hay este valor: " + miObjeto[propiedad]);
  }
}

for-of loop

for (variable of object) statement For any type Iterable (Arrays)

var miArray = [ 2, 4, 6, "hola", "mundo" ];
for (var valor of miArray) {
  console.log("Valor: " + valor);
}

Conclusion:

If you need to iterate over an Array use the forEach method and if you need to iterate over an object use the for-in method .

Array.prototype.forEach ( callbackfn [ , thisArg ] )

 
var arr = ["uno", "dos", "tres"];

arr.forEach(function(elemento) {
    console.log(elemento);
});

forEachaccepts a function as a callback . By passing this function, which acts as an iterator, it is called for each element of the Array.

^{*Note: Works as of ECMAScript 5.}

call back

The function that is passed as the callback accepts 3 parameters: the value of the element, the index, and a reference to the array being iterated over. The last 2 are optional (the first example just passed the element). If we also wanted to use the index:

var arr = [];
arr[0]  = "cero";
arr[10] = "diez";
arr[20] = "veinte";

arr.forEach(function(elemento, indice) {
    console.log("pos=", indice, "valor=", elemento);
});

In addition, it should be noted that .forEachit does not mutate at all to the array. If the value of is changed elemento, the arraywill not be modified (although it could be referenced to change the value).

Other similar functions

• .every()Exits the loop as soon as the function returns false.
• .some()Exits the loop as soon as the function returns true.

As a note and correcting @dddenis's comment about iterating an object, comment that objects can also be iterated with this method.

The Object constructor has the Object.keys() method that returns an Array of the properties of a given object.

Object.keys(obj)

In this way we could iterate said Array and access the values ​​of said properties as follows:

const obj = {
  first: "John", 
  last: "Doe"
}

console.log(Object.keys(obj))  // ["first", "last"]

// ES6
Object.keys(obj).forEach(key => console.log(key, obj[key]))

// ES5
Object.keys(obj).forEach(function (key) {
  console.log(key, obj[key])
})

The foreach using await and async, check the next code:

const waitFor = (ms) => new Promise(r => setTimeout(r, ms));
[1, 2, 3].forEach(async (num) => {
  await waitFor(50);
  console.log(num);
});
console.log('Done');