Il linguaggio JavaScript è fondamentale per tutti coloro che aspirano a diventare web developer. Insieme a linguaggio CSS e linguaggio HTML fa parte di quei linguaggi necessari per sviluppare siti web, specialmente lato front-end.
Per migliorare la tua conoscenza di questo linguaggio, vedremo diversi esercizi JavaScript volti ad approfondire alcuni costrutti logici built-in fondamentali per padroneggiarlo al meglio.
Nella programmazione informatica la pratica è fondamentale per assimilare tutte le regole sintattiche e semantiche che distinguono i vari linguaggi di programmazione che si vogliono imparare. Tutti i linguaggi si distinguono per sintassi, metodi built-in, costrutti dedicati, ma condividono la logica di base che accomuna il mondo della programmazione nel strutturare determinati script.
Una struttura dati comune a tutti i linguaggi che vedremo oggi è l’array JavaScript. L’array (vettore in italiano) è una struttura statica formata da un insieme di variabili. Spesso questi array vengono popolati tramite cicli foreach JavaScript, vale a dire costrutti iterativi molto importanti non solo in JS, ma nella programmazione in generale.
In questo articolo vedremo come gestire JavaScript array foreach tramite degli esempi / esercizi JavaScript. Partiamo dalla sintassi Javascript per il metodo foreach, che è la seguente:
nomeArray.forEach(function(currentValue, index, array)).
nomeArray corrisponde alla variabile array che abbiamo nominato e dichiarato. currentValue rappresenta il valore corrente dell’elemento dell’array. Index è opzionale, rappresenta l’indice dell’elemento corrente del vettore. Array è invece opzionale, rappresenta l’array a cui appartiene l’elemento preso in considerazione. Vediamo alcuni esempi in cui è possibile sfruttare questo metodo JavaScript.
let numbers = [44, 25, 16, 0, 12, 9];
numbers.forEach(function(number, index){
console.log('indice: ' + index + ' numero: ' + numero);
});
Tramite il console.log stampiamo lungo tutta la durata del ciclo l’indice e il numero, ovvero ciò che è contenuto nell’array.
Vediamo adesso un esempio un po’ più complesso del JavaScript for each. Dichiarando in input un array di numeri, controlliamo la posizione pari o dispari utilizzando l’operatore modulo.
let sum_even = 0, sum_odd = 0;
let numbers = [44, 25, 16, 0, 17, 9];
numbers.forEach(sumEvenOdd);
function sumEvenOdd(element, index) {
if (index % 2 == 0){
sum_even += element;
}
else {
sum_odd += element;
}
document.getElementById("somma-pari").innerHTML = sum_even;
document.getElementById("somma-dispari").innerHTML = sum_odd;
}
Questo semplice script alla fine ci stamperà i valori, sommati, individuati come pari e come dispari mentre viene condotta l’iterazione sull’array. Il JS foreach è molto più compatto del ciclo for che comunemente viene utilizzato per iterare su un array o su un costrutto statico formato da più variabili.
let sum_even = 0, sum_odd = 0;
let numbers = [44, 25, 16, 0, 17, 9];
for(let i = 0; i < numbers.length; i++){
if (index % 2 == 0){
sum_even += numbers[i];
}
else {
sum_odd += numbers[i];
}
document.getElementById("somma-pari").innerHTML = sum_even;
document.getElementById("somma-dispari").innerHTML = sum_odd;
Il JS array foreach nella sua forma risulta molto più facile da scrivere, anche nel corpo della funzione stessa. Non dobbiamo inserire manualmente l’incremento e abbiamo più versatilità nella gestione dei parametri da passare in input alla funzione forEach. Di seguito verrà riportata la traccia di un esercizio basato sul foreach JavaScript che puoi provare a risolvere autonomamente.
Dato un array di numeri, per ogni elemento aggiungere un numero random. (Suggerimento: sfrutta la funzione Math.random built-in di JavaScript per generarne uno o, se ti piacciono le sfide, crea un secondo array di numeri su cui iterare per selezionare il numero random da aggiungere).
Ricorda che fare pratica nella programmazione è importante, specialmente per un aspirante web developer. Padroneggiare un linguaggio è un processo che richiede esercizio, esperienza ed approfondimento non solo del linguaggio di programmazione, ma proprio della logica che c’è alla base di ogni riga di codice.
A tal proposito, se ti interessa dedicarti maggiormente allo studio del linguaggio Javascript, abbiamo scritto per te una guida Javascript in Italiano, da consultare ogni qualvolta tu ne senta il bisogno.
