Differenza simpatica tra for loop e forEach in JavaScript
Usiamo quotidianamente questi due strumenti per ciclare i nostri amici per la pelle array, sto parlando naturalmente del ciclo for, e del metodo forEach.
E' doveroso fare una piccola - e scontata - introduzione, ma ci tengo a segnalarvi anche una nozione Bonus teorica che una volta mi ha permesso di essere fatto fuori dignitosamente ad un colloquio 🧠🦾
Cos'è un array...
Un array è una struttura che memorizza una collezione di dati, ordinati in base al loro indice.
L'indice dell'array parte da 0 e scala fino al numero totale degli elementi dell'array meno 1 (da 0 a n-1)
Creare un array
Possiamo creare un array sostanzialmente tramite la square bracket notation [] o tramite la classe Array
Ad esempio possiamo definire un array di 5 elementi in uno dei seguenti modi:
let items = ['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5'];
oppure
let items = new Array ('Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5');
oppure ancora
let items = new Array ();
items[0] = 'Item 1';
items[1] = 'Item 2';
items[2] = 'Item 3';
items[3] = 'Item 4';
items[4] = 'Item 5';
Come accedere agli elementi di un array
-
Tramite il suo indice
- items[0] per accedere al primo elemento dell'array
- items[1] per accedere al secondo elemento dell'array
- items[4] per accedere all'ultimo elemento dell'array
-
Tramite un ciclo for
-
Ad ogni iterazione possiamo stampare l'elemento dell'array, o modificarne il valore 👉 items[i] = 'Nuovo valore'for (let i = 0; i<items.length; i++) { console.log('items[' + i + '] = ' + items[i]); } //output items[0] = Item 1 items[1] = Item 2 items[2] = Item 3 items[3] = Item 4 items[4] = Item 5
-
-
Tramite il metodo forEach
-
Ad ogni iterazione possiamo stampare l'elemento dell'array, o modificarne il valore 👉 items[index] = 'Nuovo valore'items.forEach(function(el, index){ console.log('items[' + index + '] = ' + el) }); //output items[0] = Item 1 items[1] = Item 2 items[2] = Item 3 items[3] = Item 4 items[4] = Item 5
-
Differenza (simpatica) tra ciclo for e metodo forEach
Veniamo al punto di questa chiacchierata 😅
Supponiamo di aggiungere un nuovo elemento all'array items definito in precedenza, alla posizione 10, sapendo che l'ultimo indice dell'array è 4, quindi:
items[10] = 'Item 11';
Come reagiranno a questa espansione dell'array i due approcci utilizzati in precedenza per iterarlo?
Andiamo di nuovo a stampare le due iterazioni:
for (let i = 0; i<items.length; i++) {
console.log('items[' + i + '] = ' + items[i]);
}
//output
items[0] = Item 1
items[1] = Item 2
items[2] = Item 3
items[3] = Item 4
items[4] = Item 5
items[5] = undefined
items[6] = undefined
items[7] = undefined
items[8] = undefined
items[9] = undefined
items[10] = Item 11
items.forEach(function(el, index){
console.log('items[' + index + '] = ' + el)
});
//output
items[0] = Item 1
items[1] = Item 2
items[2] = Item 3
items[3] = Item 4
items[4] = Item 5
items[10] = Item 11
La visualizzazione del ciclo for() mostra che gli elementi con indici da 5 a 9 esistono ma hanno un valore undefined, perché di fatto non sono stati inseriti valori per questi indici dell'array.
Tuttavia, gli indici da 5 a 9 con i loro valori undefined vengono visualizzati dal ciclo for().
Al contrario, il metodo forEach() fornisce la funzione di callback indicata nei parametri solo agli elementi dell'array che sono stati effettivamente interessati nell'array. In questo modo si evitano gli elementi agli indici da 5 a 9, che non sono stati assegnati.
Bonus
Domanda da colloquio, perché l'array è considerata una struttura dati ad accesso casuale (randomico)?
Da Wikipedia:
In informatica, con accesso casuale o accesso diretto si indica la caratteristica di poter accedere ad un elemento arbitrario di una sequenza in tempo costante e indipendente dalla dimensione della sequenza stessa. L'elemento è arbitrario nel senso che la sua posizione non è prevedibile, motivo per il quale si usa il termine "casuale". Il concetto opposto è quello di accesso sequenziale, in cui l'accesso ad un elemento richiede più o meno tempo a seconda della sua posizione.
Quindi, possiamo affermare che una struttura dati è considerata ad accesso casuale o randomico perché il tempo di accesso ad uno dei suoi elementi è costante, ed è indipendente dalla posizione dell'elemento e dalla dimensione della struttura.
Se ho un array di 100 elementi, impiegherò lo stesso tempo per accedere ad array[0] oppure ad array[99]
Un saluto, Pietro