Metodi JavaScript e altro. Parte 9 Corso di JavaScript da Principiante ad Avanzato in 10 post sul blog

Questa è la parte 9 della serie di post sul blog JavaScript che ti porterà da principiante ad avanzato. Questa volta esploreremo i seguenti argomenti: metodi JavaScript, valori predefiniti dei parametri, l’oggetto Date in JavaScript e la funzione freccia. Alla fine di questa serie, conoscerai tutte le basi necessarie per iniziare a programmare in JavaScript. Se non hai letto il post precedente sul blog riguardante gli oggetti JavaScript, puoi farlo qui. Senza ulteriori indugi, iniziamo con il nono tutorial.

Metodi JavaScript e altro – indice:

1. Valori predefiniti dei parametri
2. L’oggetto Date in JavaScript
3. Metodo Map()
4. Metodo Filter()
5. Funzione freccia

Fino ad ora abbiamo visto molti concetti e argomenti in JavaScript, ma ci sono ancora alcuni comunemente usati che non abbiamo scoperto. In questo tutorial, vedremo di cosa si tratta. Il primo è i valori predefiniti dei parametri in JavaScript.

Valori predefiniti dei parametri

Le funzioni sono utilizzate estremamente comunemente nella programmazione, e quando qualcosa è usato così spesso non ci sono solo framework come React che sfruttano le funzioni JavaScript, ma ci sono anche ulteriori ottimizzazioni sviluppate per ottenere ancora di più dalle funzioni JavaScript. Una delle principali caratteristiche che abbiamo nelle funzioni è chiamata valori predefiniti dei parametri. I parametri predefiniti ci permettono di scrivere codici più sicuri che possono fare presunzioni sicure sull’input dell’utente. Questo beneficia anche l’utente fornendo un’impostazione predefinita che può rendere più facile scegliere tra le loro opzioni. Vediamo alcuni esempi a riguardo.

// supponiamo che tu stia sviluppando un sito web per un caffè
// e la maggior parte delle persone vuole ordinare un americano di dimensione media
// sapendo questo vuoi rendere più facile per le persone
// ordinare il loro caffè con meno problemi
function orderCoffee(typeOfCoffee="americano", sizeOfCoffee="medium", numberOfCoffee=1){
    return (numberOfCoffee + " " + sizeOfCoffee + " size " + typeOfCoffee + " è in preparazione. ");
}
console.log("Ordine predefinito:");
console.log(orderCoffee());
// in questo modo, quando un cliente medio ordina online, 
// sarà molto più facile per loro ordinare il loro caffè quotidiano
// tanto che saranno in grado di ordinarlo con un solo pulsante
// in alternativa, le persone possono anche personalizzare il loro caffè
// cambiando gli input
console.log("Ordine personalizzato:");
console.log(orderCoffee("latte", "large", 2));
console.log("Un altro ordine personalizzato:");
console.log(orderCoffee("macchiato", "small", 1));
// è anche possibile cambiare solo parte degli input
// e sfruttare i parametri predefiniti 
// per il resto dei campi di input
console.log("Ordine parzialmente personalizzato:");
console.log(orderCoffee("iced coffee"));

Eseguendo il codice sopra otteniamo il seguente output:

L’oggetto Date in JavaScript

L’oggetto Date in JavaScript è piuttosto comunemente usato, specialmente nello sviluppo web. Possiamo utilizzare l’oggetto Date per eseguire funzioni sensibili al tempo, come cambiare le impostazioni di visualizzazione in modalità scura, modalità chiara o qualsiasi altra modalità che l’utente potrebbe preferire. Possiamo anche utilizzare le informazioni sulla data come necessario all’interno del progetto su cui stiamo lavorando. Ecco alcuni esempi dell’oggetto Date in azione:

// il primo passo è creare un'istanza dell'oggetto data
// possiamo farlo scrivendo quanto segue e 
// impostandolo su una variabile o costante a nostra scelta
let today = new Date();
console.log("Siamo nell'anno: " + today.getFullYear());
console.log("Possiamo anche ottenere il mese in numero:");
console.log(today.getMonth());
console.log("Possiamo anche ottenere l'ora del giorno in questo modo:");
console.log(today.getHours());
console.log("Possiamo anche ottenere i minuti esatti insieme ai secondi");
console.log(today.getMinutes());
console.log(today.getSeconds());
// una volta che abbiamo questi numeri possiamo usarli come vogliamo
// se vogliamo possiamo visualizzarli o prendere decisioni basate su di essi.
// se vogliamo visualizzare il mese con un nome 
// piuttosto che un numero, possiamo anche ottenerlo
// con quanto segue
const months = ["Gennaio", "Febbraio", "Marzo", "Aprile", "Maggio", "Giugno", "Luglio", "Agosto", "Settembre", "Ottobre", "Novembre", "Dicembre"];
console.log("Siamo nel mese di " + months[today.getMonth()]);
// quello che abbiamo appena fatto è stato creare un array per memorizzare i nomi dei mesi
// e poi scegliere il mese corretto utilizzando un valore di indice
// fornito dal metodo .getMonth().
// se volessimo attivare la modalità scura dopo le 20:00,
// potremmo farlo con il seguente codice
// una delle prime cose che dovremmo ricordare è che
// le ore sono date nel formato di 24 ore
// ciò significa che le 20:00 saranno 20 come ore
// possiamo anche usare un modo abbreviato 
// e combinare la creazione del nuovo oggetto data
// con il metodo get hours
let timeOfDay = new Date().getHours();
if (timeOfDay >= 20) {
    console.log("Attivazione della modalità scura...");
} else {
    console.log("Non attivare la modalità scura");
}
// poiché l'ora attuale è oltre le 20:00,
// in questo caso ci aspettiamo di attivare la modalità scura.
// che è anche il risultato che otteniamo come possiamo vedere da
// l'output della console.

Eseguendo il codice sopra otterremo i seguenti log della console:

Metodo Map()

Il metodo map è un metodo altamente utile che può farti risparmiare molte righe di codice, e a seconda di come lo usi può rendere il tuo codice molto più pulito. Sostituisce essenzialmente l’uso di un ciclo for quando lo usi per iterare su un array. Ecco alcuni esempi del metodo map().

// creiamo un array che useremo per il mapping
let someNumbers = [1, 2, 3, 4, 5];
// creiamo anche le funzioni che forniremo al metodo map
function doubleNums(num1){
    return num1 * 2;
}
function squareNums(num1){
    return num1 * num1;
}
function add100(num1){
    return num1 + 100;
}
console.log("Array dei numeri raddoppiati:");
console.log(someNumbers.map(doubleNums));
console.log("Array dei numeri elevati al quadrato:");
console.log(someNumbers.map(squareNums));
console.log("100 aggiunti a ciascun elemento nell'array dei numeri:");
console.log(someNumbers.map(add100));
// il metodo map() itererà su ciascuno degli
// elementi in un dato array e applicherà la 
// funzione fornita
// nota che non includiamo le parentesi
// dopo i nomi delle funzioni, questo chiamerebbe la funzione
// invece passiamo il nome della funzione, 
// e il metodo map() le chiama quando ne ha bisogno

Eseguendo il codice sopra otterremo i seguenti log della console:

Metodo Filter()

Il metodo filter(), insieme al metodo map() sono entrambi metodi JavaScript piuttosto comuni. Sono molto simili al metodo map() che abbiamo appena visto. Con il metodo map() possiamo passare qualsiasi funzione, e quella funzione viene applicata a ciascuno degli elementi in un array. Con il metodo filter(), passeremo un criterio di filtro e il metodo filter itererà su tutti gli elementi in un array e restituirà un nuovo array con solo gli elementi che superano il criterio. Vediamo alcuni esempi a riguardo:

// creiamo prima un array 
// per applicare il metodo filter()
let someNumbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21];
function checkEven(num1){
    if (num1 % 2 == 0){
        return num1;
    }
}
function checkOdd(num1){
    if (num1 % 2 == 1){
        return num1;
    }
}
function over13(num1){
    if (num1 > 13){
        return num1;
    }
}
function divisibleByFive(num){
    if (num % 5 == 0){
        return num;
    }
}
console.log("Numeri pari dalla lista:");
console.log(someNumbers.filter(checkEven));
console.log("Numeri dispari dalla lista:");
console.log(someNumbers.filter(checkOdd));
console.log("Numeri superiori a 13 dall'array:");
console.log(someNumbers.filter(over13));
console.log("Numeri divisibili per 5 dall'array:");
console.log(someNumbers.filter(divisibleByFive));

Eseguendo il codice sopra otterremo i seguenti log della console:

Funzione freccia

Ricordi quando abbiamo detto che le funzioni sono estremamente comuni in JavaScript e che sono state fatte molte ottimizzazioni per renderle ancora più performanti o per avere codice più pulito? Bene, le funzioni freccia sono una di queste. Le funzioni freccia sono talvolta anche chiamate la “freccia grassa”. Forniscono essenzialmente un modo molto più breve per scrivere le tue funzioni. Sono anche molto comunemente usate con i metodi JavaScript che abbiamo appena visto. Vediamole con alcuni esempi:

// JavaScript fornisce più livelli di // accorciamento del codice con le funzioni freccia a seconda del tuo codice esatto // Essenzialmente il modo più lungo in cui possiamo scrivere una funzione è // il modo in cui le scriviamo sempre senza usare le funzioni freccia // iniziamo con un array per applicare le funzioni freccia let someNumbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21]; console.log("Array originale:"); console.log(someNumbers); // negli esempi precedenti abbiamo applicato molte funzioni // dopo averle create come funzioni nominate regolari // In questo esempio applicheremo le esatte trasformazioni // in modo che tu possa vedere i due estremi nella lunghezza del codice // raddoppia ogni numero nell’array: console.log("Raddoppia ogni numero nell’array:") console.log(someNumbers.map(num => num * 2)); // eleva al quadrato ogni numero nell’array: console.log("Eleva al quadrato ogni numero nell’array:") console.log(someNumbers.map(num => num * num)); // aggiungi 100 a ogni numero nell’array: console.log("Aggiungi 100 a ogni numero nell’array:") console.log(someNumbers.map(num => num + 100)); // Mantieni solo i numeri pari nell’array: console.log("Mantieni solo i numeri pari nell’array:") console.log(someNumbers.filter(num => num % 2 == 0)); // Mantieni solo i numeri dispari nell’array: console.log("Mantieni solo i numeri dispari nell’array:") console.log(someNumbers.filter(num => num % 2 == 1)); // Mantieni solo i numeri che sono divisibili per 5: console.log("Mantieni solo i numeri che sono divisibili per 5:") console.log(someNumbers.filter(num => num % 5 == 0)); // Mantieni solo i numeri che sono superiori a 13: console.log("Mantieni solo i numeri che sono superiori a 13:") console.log(someNumbers.filter(num => num > 13)); [/code>

Eseguendo il codice sopra otterremo i seguenti log della console:

Nel prossimo tutorial avremo una panoramica di ciò che abbiamo visto e vedremo cosa c’è dopo.