DISTINTAS FORMAS DE ITERAR SOBRE UN ARRAY CON JAVASCRIPT

Cuando se trabaja con Javascript, como en otros lenguajes, es habitual utilizar el objeto Array para almacenar una colección de distintos elementos bajo una misma variable. Para recuperar esa información almacenada en el array es necesario recorrerlos. En este artículo vamos a repasar distintas formas con las que podemos hacerlo utilizando Javascript. 

FOR

Con la sentencia for se crea un bucle con una condición que se evalúa en cada iteración, y que se seguirá ejecutando mientras se cumpla esa condición:

const array = [ 1, 2, 3, 4, 5 ];

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

// SALIDA: 1 2 3 4 5

WHILE

Como en el caso de la sentencia for, con while se ejecutan sus sentencias mientas se cumple la condición:

const array = [ 1, 2, 3, 4, 5 ];

let i = 0;

while ( i < array.length ) {
    console.log( array[i] );
    i++;
}

// SALIDA: 1 2 3 4 5 

FOREACH 

En el método forEach se ejecuta una función en cada iteración, para cada elemento del array:

const array = [ 1, 2, 3, 4, 5 ];

array.forEach( elem => {
    console.log( elem );
});

// SALIDA: 1 2 3 4 5 

MAP

El método map permite iterar sobre el array y aplicar una función a cada elemento, generando un nuevo array:

const array = [ 1, 2, 3, 4, 5 ];

const nuevoArray = array.map( (elem) => {
    return elem * 2;
});

console.log( nuevoArray );

// SALIDA: [ 2, 4, 6, 8, 10 ]

FILTER

El método filter genera un nuevo array con los elementos iterados que cumplan una condición:

const array = [ 1, 2, 3, 4, 5 ];

const nuevoArray = array.filter( (elem) => {
    return elem < 4;
});

console.log( nuevoArray );

// SALIDA: [ 1, 2, 3 ]

DO WHILE

La instrucción do...while crear un bucle que se ejecuta mientras se cumple la condición:

const array = [ 1, 2, 3, 4, 5 ];

let i = 0;

do {
    console.log( array[i] );
    i++;
} while (i < array.length);


// SALIDA: 1 2 3 4 5

FOR OF

Con la sentencia for...of es posible iterar sobre cada elemento del array:

const array = [ 1, 2, 3, 4, 5 ];

for ( let item of array ) {
    item *= 2;
    console.log( item );
}

// SALIDA: 2 4 6 8 10

FOR IN

Con la instrucción for...in se puede iterar sobre todas las propiedades de un objecto, devolviendo la clave que permite acceder al valor:

const array = {
    nombre: 'Manuel', 
    apellido: 'García', 
    edad: 23, 
}

for ( const key in array ) {
    console.log( array[key] );
}

// SALIDA: Manuel García 23