3 Usi pratici di distruzione degli oggetti in JavaScript

Scrivi codice più pulito usando questi schemi di destrutturazione

Ormai probabilmente hai familiarità con la destrutturazione in JavaScript! Ci è venuto in mente nel 2015 nella specifica ES6, ma se hai bisogno di ripassarlo, Mozilla ha un ottimo articolo approfondito su come funziona.

Sapere come funziona la destrutturazione non equivale a saperlo usare, comunque. Ecco tre schemi di destrutturazione che puoi usare per rendere il tuo codice più pulito, più robusto e più leggibile!

1. Argomenti delle funzioni con nome

Gli argomenti con nome sono un modo alternativo per gestire i parametri della funzione piuttosto che per posizione. Invece di ordinare i tuoi argomenti nello stesso ordine della firma della funzione, devi semplicemente specificare l'argomento per nome. Ad esempio, in Python:

Come puoi vedere, l'ordine degli argomenti non ha importanza: basta specificarli per nome. I vantaggi degli argomenti denominati rispetto alla posizione sono:

  1. È possibile tralasciare uno o più parametri quando si chiama la funzione
  2. L'ordine non ha importanza quando si passa agli argomenti.
  3. Codice più leggibile quando si chiama una funzione che potrebbe esistere altrove

Sebbene in JavaScript non esistano veri argomenti con nome, possiamo usare un modello destrutturante per ottenere tutti e 3 gli stessi vantaggi. Ecco lo stesso codice sopra, ma in JavaScript:

Questo modello raggiunge tutti i nostri obiettivi per argomenti con nome. Siamo riusciti a tralasciare l'argomento c, l'ordine non ha importanza e assegniamo il nostro argomento facendo riferimento a loro per nome. Tutto ciò è reso possibile dalla distruzione dell'oggetto.

2. Analizzare in modo chiaro una risposta del server

Spesso ci interessa solo il blocco dati o anche un valore specifico nel blocco dati di una risposta del server. In tal caso, è possibile utilizzare la destrutturazione per acquisire quel valore solo ignorando molte altre cose che un server in genere restituisce. Ecco un esempio:

Questo modello consente di estrarre i valori da un oggetto mentre vengono analizzati gli argomenti. Puoi anche impostare le impostazioni predefinite gratuitamente! Il che ci porta al terzo modello ...

3. Impostazione dei valori predefiniti durante l'assegnazione

Un caso comune quando si assegnano variabili o costanti è avere un valore predefinito se qualche altro valore non esiste attualmente nell'ambito.

Prima di distruggere, potresti fare qualcosa del genere per ottenere quel comportamento desiderato:

// vecchio modo di impostare i valori predefiniti
var nightMode = userSettings.nightMode || falso

Ma ciò richiede una singola riga di codice per ogni assegnazione. Con la destrutturazione, puoi occuparti di tutti i tuoi compiti e le loro impostazioni predefinite in una sola volta:

Questo modello di destrutturazione può essere applicato per impostare lo stato nei componenti di React!

Spero che tu sia in grado di applicare alcuni di questi schemi al tuo codice! Dai un'occhiata ai link qui sotto per saperne di più sulla destrutturazione.

Per saperne di più!