For each in javascript?

  

QUESTION: Is there a way to make 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 method # forEach

  

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 Method # forEach

  

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

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 ([inicialion-inicial]; [condicion]; [expresion -final]) statement For-i loop [Arrays only]

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 Iterable type (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);
});

forEach accepts a function such as callback . When passing this function, which acts as an iterator, it is called for each element of Array .

* Note: It works from ECMAScript 5.

Callback

The function that is passed as callback accepts 3 parameters: the value of the element, the index and a reference to the array that is being iterated. The last 2 are optional (the first example only passed the element). If we also want 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 clarified that .forEach does not change at all to array . If the value of elemento is changed, the array will 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 you point and correct the comment of @dddenis on iterating an object, comment that objects can also be traversed with this method.

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

Object.keys(obj)

In this way we could iterate that Array and access the values of these properties in the following way:

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])
})