Lavorando con gli oggetti in JavaScript, potresti esserti imbattuto nell'output [object, object]. Potrebbe sembrare irrilevante, ma non è necessariamente un  errore.

[object, object] è la rappresentazione in formato stringa di un oggetto in JavaScript. Capirai meglio continuando a leggere questo articolo.

Ci sono due situazioni principali in cui incontrerai un output del genere:

• Provando a mostrare un oggetto usando il metodo alert() (il più comune).
• Usando il metodo toString() su un oggetto.

Diamo un'occhiata a qualche esempio.

Cosa accade se usi alert() su un oggetto in JavaScript?

In questa sezione vedrai cosa accade quando usi il metodo alert() per mostrare un oggetto in JavaScript. Ecco il codice di esempio:

const student = {
  name: "John",
  school: "freeCodeCamp",
};

alert(student)

Nel codice qui sopra, abbiamo creato un oggetto chiamato student. Dopo aver usato il metodo alert() per mostrare l'oggetto nel browser, otteniamo il seguente output:

Invece di visualizzare l'oggetto con le sue proprietà, vediamo [object, object].

Questo accade perché quando utilizzi il metodo alert() per mostrare un oggetto in JavaScript, viene visualizzato in formato stringa.

Per ovviare a questo problema puoi usare il metodo JSON.stringify(), così da trasformare l'oggetto in una stringa che può essere mostrata  nel browser con il metodo alert(). Ecco un esempio:

const student = {
  name: "John",
  school: "freeCodeCamp",
};

alert(JSON.stringify(student));

Quando esegui il codice qui sopra, dovresti visualizzare l'oggetto con le sue proprietà – come nell'immagine seguente.

Cosa accade se usi il metodo toString() su un oggetto in JavaScript?

Il metodo toString() in JavaScript restituisce la rappresentazione in formato stringa di un oggetto. Questa sezione ti aiuterà a capire cosa è accaduto dietro le quinte nella sezione precedente.

Quando usi il metodo toString() su un oggetto in JavaScript, viene restituita la rappresentazione – [object, object].

const student = {
  name: "John",
  school: "freeCodeCamp",
};

console.log(student.toString());
// [object Object]

Come puoi vedere nel codice qui sopra, abbiamo usato il metodo toString() su un oggetto chiamato student: student.toString().

Quando lo stampiamo sulla console, otteniamo [object, object].

Questo è esattamente quelle che avviene quando mostri un oggetto nel browser usando il metodo alert() (come abbiamo visto nella sezione precedente).

Conclusione

In questo articolo, abbiamo parlato dello strano output [object, object] in JavaScript.

Questo output è la rappresentazione in formato stringa di un oggetto in JavaScript.

Probabilmente ti capiterà di vedere un output del genere quando provi a mostrare un oggetto nel browser usando il metodo alert() oppure quando usi il metodo toString() su un oggetto.

Abbiamo anche analizzato alcuni esempi di codice e immagini per dimostrare come puoi vedere [object, object] in JavaScript.

Buona programmazione!

Vuoi imparare JavaScript? Scarica il mio ebook su jshandbook.com

Introduzione alle espressioni regolari

Un'espressione regolare (anche detta regex) è un modo rapido per lavorare con le stringhe di testo.

Creando un'espressione regolare con una sintassi speciale puoi:

• cercare un testo in una stringa
• sostituire del testo in una stringa
• ed estrarre informazioni da una stringa

Quasi ogni linguaggio di programmazione presenta una qualche implementazione delle espressioni regolari. Esistono piccole differenze tra ogni implementazione, ma i concetti generali si applicano quasi ovunque.

Le espressioni regolari risalgono agli anni '50 del Novecento, quando vennero formalizzate come modello di ricerca concettuale per gli algoritmi di elaborazione di stringhe.

Implementate in strumenti UNIX come grep, sed e in editor di testo comuni, le espressioni regolari crebbero in popolarità. Vennero introdotte nel linguaggio di programmazione Perl e, successivamente, anche in altri linguaggi.

JavaScript, insieme a Perl, è uno dei linguaggi di programmazione che comprende il supporto per le espressioni regolari direttamente integrato nel linguaggio.

Difficili ma utili

Se non si impiega il tempo necessario per comprenderle, le espressioni regolari possono sembrare totalmente insensate per un principiante e, molte volte, anche per uno sviluppatore professionista.

Espressioni regolari criptiche sono difficili da scrivere, difficili da leggere e difficili da modificare/manutenere.

Ma delle volte un'espressione regolare è il solo modo sensato per manipolare delle stringhe, quindi è uno strumento di grande valore in tuo possesso.

Questo tutorial mira a introdurti alle espressioni regolari in JavaScript in un modo semplice e a darti tutte le informazioni per leggere e creare espressioni regolari.

La regola generale è che più semplici sono le espressioni regolari e più è semplice leggerle e scriverle, mentre le espressioni regolari complesse possono diventare velocemente un pasticcio se non afferri appieno le basi.

Che aspetto ha un'espressione regolare?

In JavaScript, un'espressione regolare è un oggetto che può essere definito in due modi.

Il primo è istanziare un nuovo oggetto usando il costruttore RegEx:

const re1 = new RegExp('hey')

Il secondo è usare un'espressione regolare letterale:

const re1 = /hey/

Sai che JavaScript ha oggetti e array letterali? Ha anche espressioni regolari letterali.

Nell'esempio precedente, hey è detto pattern. Nella forma letterale è delimitato da barre oblique, mentre non lo è all'interno del costruttore.

Questa è la prima importante differenza tra le due forme, ma ne vedremo altre in seguito.

Come funziona?

L'espressione regolare che abbiamo precedentemente definito come re1 è molto semplice. Cerca la stringa hey, senza alcuna limitazione. La stringa può contenere molto testo e hey nel mezzo e l'espressione è soddisfatta. Può anche contenere solo hey e anche in questo caso l'espressione è soddisfatta.

Piuttosto semplice.

Puoi testare un'espressione regolare usando RegExp.test(String), che restituisce un booleano:

re1.test('hey') //✅
re1.test('blablabla hey blablabla') //✅
re1.test('he') //❌
re1.test('blablabla') //❌

Nell'esempio qui sopra, abbiamo verificato se "hey" soddisfa il pattern dell'espressione regolare memorizzata in re1.

Questo è il caso più semplice, ma adesso conosci già molti concetti sulle espressioni regolari.

Ancoraggi

/hey/

indica hey in qualsiasi posizione di una stringa.

Se vuoi trovare stringhe che iniziano con hey, usa l'operatore ^:

/^hey/.test('hey') //✅
/^hey/.test('bla hey') //❌

Se vuoi trovare stringhe che finiscono con hey, usa l'operatore $:

/hey$/.test('hey') //✅
/hey$/.test('bla hey') //✅
/hey$/.test('hey you') //❌

Se combini i due, troverai esattamente e soltanto la stringa hey:

/^hey$/.test('hey') //✅

Per trovare una stringa che inizia con una sottostringa e finisce con un'altra, puoi usare .*, che indica qualsiasi carattere ripetuto 0 o più volte:

/^hey.*joe$/.test('hey joe') //✅
/^hey.*joe$/.test('heyjoe') //✅
/^hey.*joe$/.test('hey how are you joe') //✅
/^hey.*joe$/.test('hey joe!') //❌

Intervalli

Invece di trovare una particolare stringa, puoi scegliere di trovare qualsiasi carattere in un intervallo, ad esempio:

/[a-z]/ //a, b, c, ... , x, y, z
/[A-Z]/ //A, B, C, ... , X, Y, Z
/[a-c]/ //a, b, c
/[0-9]/ //0, 1, 2, 3, ... , 8, 9

Queste espressioni regolari indicano stringhe che contengono almeno uno dei caratteri compresi negli intevalli:

/[a-z]/.test('a') //✅
/[a-z]/.test('1') //❌
/[a-z]/.test('A') //❌
/[a-c]/.test('d') //❌
/[a-c]/.test('dc') //✅

Gli intervalli possono essere combinati:

/[A-Za-z0-9]/

/[A-Za-z0-9]/.test('a') // ✅
/[A-Za-z0-9]/.test('1') // ✅
/[A-Za-z0-9]/.test('A') // ✅

Intervalli con elementi multipli

Puoi verificare se una stringa contiene uno e soltanto un carattere nell'intervallo usando il carattere -:

/^[A-Za-z0-9]$/

/^[A-Za-z0-9]$/.test('A') // ✅
/^[A-Za-z0-9]$/.test('Ab') // ❌

Pattern negati

Il carattere ^ all'inizio di un pattern lo ancora all'inizio della stringa.

Se usato in un intervallo, nega i suoi elementi:

/[^A-Za-z0-9]/.test('a') //❌
/[^A-Za-z0-9]/.test('1') //❌
/[^A-Za-z0-9]/.test('A') //❌
/[^A-Za-z0-9]/.test('@') //✅

• \d corrisponde a qualsiasi cifra, equivalente a [0-9]
• \D corrisponde a qualsiasi carattere che non è una cifra, equivalente a [^0-9]
• \w corrisponde a qualsiasi carattere alfanumerico, equivalente a [A-Za-z0-9]
• \W corrisponde a qualsiasi carattere non alfanumerico, equivalente a [^A-Za-z0-9]
• \s corrisponde a qualsiasi carattere di spazio: spazio, tab, nuova riga e spazi Unicode
• \S corrisponde a qualsiasi carattere che non è uno spazio
• \0 corrisponde a null
• \n corrisponde al carattere nuova riga
• \t corrisponde al carattere tab
• \uXXXX corrisponde al carattere Unicode con codice XXXX (richiede il flag u)
• . corrisponde a qualsiasi carattere che non è una nuova riga (e.g. \n) (a meno che non usi il flag s, spiegato in seguito)
• [^] corrisponde a qualsiasi carattere, incluso il carattere nuova riga. Utile su stringhe multi-riga.

Scelte nelle espressioni regolari

Se vuoi cercare una stringa oppure un'altra, usa l'operatore |.

/hey|ho/.test('hey') //✅
/hey|ho/.test('ho') //✅

Quantificatori

Supponiamo di avere questa espressione regolare che verifica se una stringa ha una cifra al suo interno e nient'altro:

/^\d$/

Puoi usare il quantificatore ? per renderla opzionale (presente 0 o 1 volta):

/^\d?$/

Ma se volessi trovare più cifre?

Puoi farlo in 4 modi, usando +, *, {n} e {n,m}. Vediamo queste opzioni una alla volta.

+

indica 1 o più (>=1) elementi

/^\d+$/

/^\d+$/.test('12') // ✅
/^\d+$/.test('14') // ✅
/^\d+$/.test('144343') // ✅
/^\d+$/.test('') // ❌
/^\d+$/.test('1a') // ❌

*

indica 0 o più (>= 0) elementi

/^\d+$/

/^\d*$/.test('12') // ✅
/^\d*$/.test('14') // ✅
/^\d*$/.test('144343') // ✅
/^\d*$/.test('') // ✅
/^\d*$/.test('1a') // ❌

{n}

indica esattamente n elementi

/^\d{3}$/

/^\d{3}$/.test('123') // ✅
/^\d{3}$/.test('12') // ❌
/^\d{3}$/.test('1234') // ❌
/^[A-Za-z0-9]{3}$/.test('Abc') // ✅

{n,m}

indica elementi tra n e m volte:

/^\d{3,5}$/

/^\d{3,5}$/.test('123') // ✅
/^\d{3,5}$/.test('1234') // ✅
/^\d{3,5}$/.test('12345') // ✅
/^\d{3,5}$/.test('123456') // ❌

m può essere omesso per un intervallo aperto, così da avere almeno n elementi:

/^\d{3,}$/

/^\d{3,}$/.test('12') // ❌
/^\d{3,}$/.test('123') // ✅
/^\d{3,}$/.test('12345') // ✅
/^\d{3,}$/.test('123456789') // ✅

Elementi opzionali

Apporre un ? dopo un elemento lo rende opzionale:

/^\d{3}\w?$/

/^\d{3}\w?$/.test('123') // ✅
/^\d{3}\w?$/.test('123a') // ✅
/^\d{3}\w?$/.test('123ab') // ❌

Gruppi

Usando le parentesi puoi creare gruppi di caratteri: (...)

Questo esempio indica esattamente 3 cifre seguite da uno o più caratteri alfanumerici:

/^(\d{3})(\w+)$/

/^(\d{3})(\w+)$/.test('123') // ❌
/^(\d{3})(\w+)$/.test('123s') // ✅
/^(\d{3})(\w+)$/.test('123something') // ✅
/^(\d{3})(\w+)$/.test('1234') // ✅

I caratteri di ripetizione posti dopo la parentesi di chiusura di un gruppo fanno riferimento all'intero gruppo:

/^(\d{2})+$/

/^(\d{2})+$/.test('12') //✅
/^(\d{2})+$/.test('123') //❌
/^(\d{2})+$/.test('1234') //✅

Gruppi di acquisizione

Finora, abbiamo visto come testare delle stringhe e verificare se contengono un certo pattern.

Una funzionalità molto bella delle espressioni regolari è la possibilità di acquisire parti di una stringa e inserirle in un array.

Puoi farlo usando i gruppi e in particolare i gruppi di acquisizione (capturing group).

Di default, un gruppo è un gruppo di acquisizione. Adesso, invece di usare RegExp.test(String), che restituisce un booleano se il pattern è soddisfatto, useremo String.match(RegExp) o RegExp.exec(String).

Funzionano esattamente allo stesso modo e restituiscono un array con l'intera stringa trovata come primo elemento, seguita dal contenuto dei gruppi.

Se non c'è corrispondenza, restituiscono null:

'123s'.match(/^(\d{3})(\w+)$/)
// Array [ "123s", "123", "s" ]

/^(\d{3})(\w+)$/.exec('123s')
// Array [ "123s", "123", "s" ]

'hey'.match(/(hey|ho)/)
// Array [ "hey", "hey" ]

/(hey|ho)/.exec('hey')
// Array [ "hey", "hey" ]

/(hey|ho)/.exec('ha!')
// null

Quando un gruppo viene trovato più volte, solo l'ultima corrispondenza viene inserita nell'array:

'123456789'.match(/(\d)+/) //Array [ "123456789", "9" ]

Gruppi opzionali

Un gruppo di acquisizione può essere reso opzionale usando (...)?. Se non viene trovato, la posizione corrispondente nell'array conterrà undefined:

/^(\d{3})(\s)?(\w+)$/.exec('123 s')
// Array [ "123 s", "123", " ", "s" ]

/^(\d{3})(\s)?(\w+)$/.exec('123s')
// Array [ "123s", "123", undefined, "s" ]

Riferimenti dei gruppi trovati

A ogni gruppo che viene trovato viene assegnato un numero. $1 si riferisce al primo, $2 al secondo e via dicendo. Questo sarà utile quando parleremo più avanti di sostituire parti di una stringa.

Gruppi di acquisizione con nome

Questa è una nuova funzionalità di ES2018.

A un gruppo può essere assegnato un nome piuttosto che uno slot nell'array dei risultati:

const re = /(?<year>\d{4})-(?<month>\d{2})-(?<day>\d{2})/
const result = re.exec('2015-01-02')

// result.groups.year === '2015';
// result.groups.month === '01';
// result.groups.day === '02';

Usare match ed exec senza gruppi

Esiste una differenza nell'uso di match e exec senza gruppi: il primo elemento dell'array non è l'intera stringa trovata, ma direttamente la corrispondenza:

/hey|ho/.exec('hey')
// [ "hey" ]

/(hey).(ho)/.exec('hey ho')
// [ "hey ho", "hey", "ho" ]

Gruppi non acquisiti

Dato che i gruppi sono per impostazione predefinita gruppi di acquisizione, ti serve un modo per ignorare alcuni gruppi nell'array dei risultati. Questo è possibile usando i cosiddetti non-capturing group, che iniziano con (?:...):

'123s'.match(/^(\d{3})(?:\s)(\w+)$/)
// null

'123 s'.match(/^(\d{3})(?:\s)(\w+)$/)
// Array [ "123 s", "123", "s" ]

Flag

Puoi usare i seguenti flag su qualsiasi espressione regolare:

• g: trova il pattern più volte
• i: rende la regex indifferente a maiuscole/minuscole
• m: abilita la modalità multi-riga. In questa modalità, ^ e $ indicano l'inizio e la fine dell'intera stringa. Senza questo flag con stringhe multi-riga indicano l'inizio e la fine di ogni riga.
• u: consente il supporto Unicode (introdotto in ES6/ES2015)
• s: (nuovo in ES2018) abbreviazione per single line (riga singola), fa sì che il . trovi anche il carattere nuova riga.

I flag possono essere combinati e sono aggiunti alla fine dell'espressione regolare letterale:

/hey/ig.test('HEy') //✅

o come secondo parametro nel costruttore RegEx:

new RegExp('hey', 'ig').test('HEy') //✅

Analizzare un'espressione regolare

Data un'espressione regolare, puoi consultare le seguenti proprietà:

• source è il pattern
• multiline è true con il flag m
• global è true con il flag g
• ignoreCase è true con il flag i
• lastIndex

/^(\w{3})$/i.source //"^(\\d{3})(\\w+)$" /^(\w{3})$/i.multiline //false /^(\w{3})$/i.lastIndex //0 /^(\w{3})$/i.ignoreCase //true /^(\w{3})$/i.global //false

Escaping

Questi caratteri sono speciali:

• \
• /
• [ ]
• ( )
• { }
• ?
• +
• *
• |
• .
• ^
• $

Sono speciali perché sono caratteri di controllo che hanno un significato nel pattern dell'espressione regolare. Se vuoi usarli all'interno del pattern come caratteri da ricercare, devi eseguirne l'escape anteponendo loro una barra rovesciata:

/^\\$/ /^\^$/ // /^\^$/.test('^') ✅ /^\$$/ // /^\$$/.test('$') ✅

Confini di stringa

\b e \B ti consentono di verificare se una stringa si trovi all'inizio o alla fine di una parola:

• \b indica un insieme di caratteri all'inizio o alla fine di una parola
• \B indica un insieme di caratteri che non si trovano all'inizio o alla fine di una parola

Esempio:

'I saw a bear'.match(/\bbear/) //Array ["bear"]
'I saw a beard'.match(/\bbear/) //Array ["bear"]
'I saw a beard'.match(/\bbear\b/) //null
'cool_bear'.match(/\bbear\b/) //null

Sostituire usando le espressioni regolari

Abbiamo già visto come verificare se una stringa contiene un pattern.

Abbiamo anche visto come estrarre parte di una stringa in un array, tramite la corrispondenza con un pattern.

Ora vediamo come sostituire parti di una stringa sulla base di un pattern.

L'oggetto String in JavaScript ha un metodo replace() che può essere usato senza espressioni regolari per eseguire una singola sostituzione in una stringa:

"Hello world!".replace('world', 'dog')
// Hello dog!

"My dog is a good dog!".replace('dog', 'cat')
// My cat is a good dog!

Questo metodo accetta anche un'espressione regolare come argomento:

"Hello world!".replace(/world/, 'dog') //Hello dog!

Usare il flag g è l'unico modo per sostituire più occorrenze in una stringa in JavaScript:

"My dog is a good dog!".replace(/dog/g, 'cat') //My cat is a good cat!

I gruppi ci consentono di fare cose più complesse, come muovere parti di una stringa:

"Hello, world!".replace(/(\w+), (\w+)!/, '$2: $1!!!') // "world: Hello!!!"

Invece di usare una stringa, puoi usare una funzione per fare cose ancora più complesse. Potrà ricevere diversi argomenti come quelli restituiti da String.match(RegExp) o RegExp.exec(String), con il numero di argomenti che dipende dal numero di gruppi:

"Hello, world!".replace(/(\w+), (\w+)!/, (matchedString, first, second) => { 
  console.log(first); 
  console.log(second); 
  return `${second.toUpperCase()}: ${first}!!!` 
}) 
// "WORLD: Hello!!!"

Avidità

Le espressioni regolari di default mostrano un comportamento per cui sono dette greedy.

Cosa vuol dire?

Prendiamo questa regex:

/\$(.+)\s?/

Ci aspettiamo che estragga una somma di dollari da una stringa:

/\$(.+)\s?/.exec('This costs $100')[1] //100

Ma se abbiamo altre parole dopo il numero, dà di matto:

/\$(.+)\s?/.exec('This costs $100 and it is less than $200')[1] //100 and it is less than $200

Questo accade perché l'espressione regolare, dopo il segno $, cerca qualsiasi carattere con .+ e non si fermerà finché non viene raggiunta la fine della stringa. Poi termina perché \s? rende lo spazio finale opzionale.

Per sistemare questo aspetto, dobbiamo dire alla regex di essere pigra (lazy) e trovare la minor corrispondenza possibile. Possiamo farlo usando il simbolo ? dopo il quantificatore:

/\$(.+?)\s/.exec('This costs $100 and it is less than $200')[1] //100

Ho rimosso ? dopo \s . Altrimenti avrebbe trovato soltanto la prima cifra, dato che lo spazio era opzionale.

Quindi ? ha diversi significati in base alla sua posizione, perché può essere sia un quantificatore che un indicatore della modalità lazy.

Lookahead: trovare una stringa in base a cosa c'è dopo

Usa ?= per trova una stringa che è seguita da una specifica sottostringa:

/Roger(?=Waters)/

/Roger(?= Waters)/.test('Roger is my dog') // false
/Roger(?= Waters)/.test('Roger is my dog and Roger Waters is a famous musician')
// true

?! svolge l'operazione inversa, cercando una stringa che non è seguita da una specifica sottostringa:

/Roger(?!Waters)/

/Roger(?! Waters)/.test('Roger is my dog') // true
/Roger(?! Waters)/.test('Roger Waters is a famous musician')
// false

Lookbehind: trovare una stringa in base a cosa c'è prima

Questa è una funzionalità di ES2018.

I lookahead utilizzano il simbolo ?= symbol. I lookbehind usano ?<=:

/(?<=Roger) Waters/
/(?<=Roger) Waters/.test('Pink Waters is my dog') 
// false

/(?<=Roger) Waters/.test('Roger is my dog and Roger Waters is a famous musician')
// true

Un lookbehind viene negato usando ?<!:

/(?<!Roger) Waters/

/(?<!Roger) Waters/.test('Pink Waters is my dog') 
// true

/(?<!Roger) Waters/.test('Roger is my dog and Roger Waters is a famous musician')
// false

Espressioni regolari e Unicode

Il flag u è obbligatorio per lavorare con le stringhe Unicode. Ciò è particolarmente vero quando hai bisogno di gestire caratteri non inclusi tra i primi 1600 caratteri Unicode.

Le emoji sono un buon esempio, ma non sono l'unico.

Se non aggiungi il flag, questa semplice regex che dovrebbe trovare un carattere non funzionerà perché per JavaScript quella emoji è rappresentata internamente da 2 caratteri (vedi Unicode in JavaScript):

/^.$/.test('a') // ✅
/^.$/.test('🐶') // ❌
/^.$/u.test('🐶') // ✅

Quindi usa sempre il flag u.

Unicode, proprio come i normali caratteri, accetta gli intervalli:

/[a-z]/.test('a') // ✅
/[1-9]/.test('1') // ✅
/[🐶-🦊]/u.test('🐺') // ✅
/[🐶-🦊]/u.test('🐛') // ❌

JavaScript verifica la rappresentazione interna del codice, quindi 🐶 < 🐺 < 🦊 perché \u1F436 < \u1F43A < \u1F98A. Dai un'occhiata alla lista completa delle emoji per vedere i codici e scoprire l'ordine (suggerimento: il selettore di emoji macOS ha alcune emoji in diverso ordine, quindi non farci affidamento).

Proprietà Unicode

Come abbiamo visto prima, nel pattern di un'espressione regolare puoi usare \d per indicare qualsiasi cifra, \s per indicare qualsiasi carattere di spazio, \w per indicare qualsiasi carattere alfanumerico e così via.

Le proprietà Unicode costituiscono una funzionalità di ES2018 che estende questo concetto a tutti caratteri Unicode grazie a \p{} e alla sua negazione \P{}.

Ogni carattere Unicode ha una serie di proprietà. Ad esempio Script determina la famiglia della lingua, ASCII è un booleano che è true per ogni carattere ASCII e così via. Puoi inserire una proprietà tra parentesi graffe e l'espressione regolare controllerà se è vera:

/^\p{ASCII}+$/u.test('abc') // ✅
/^\p{ASCII}+$/u.test('ABC@') // ✅
/^\p{ASCII}+$/u.test('ABC🙃') // ❌

ASCII_Hex_Digit è un'altra proprietà booleana che verifica se la stringa contiene solo cifre esadecimali valide:

/^\p{ASCII_Hex_Digit}+$/u.test('0123456789ABCDEF') // ✅
/^\p{ASCII_Hex_Digit}+$/u.test('h') // ❌

Esistono molte altre proprietà booleane che puoi controllare aggiungendone il nome tra parentesi graffe. Tra queste Uppercase, Lowercase, White_Space, Alphabetic, Emoji e altre:

/^\p{Lowercase}$/u.test('h') // ✅
/^\p{Uppercase}$/u.test('H') // ✅
/^\p{Emoji}+$/u.test('H') // ❌
/^\p{Emoji}+$/u.test('🙃🙃') // ✅

In aggiunta a queste proprietà binarie, puoi verificare se le proprietà corrispondono a un valore specifico. In questo esempio, verifico se la stringa è scritta in alfabeto greco o latino:

/^\p{Script=Greek}+$/u.test('ελληνικά') // ✅
/^\p{Script=Latin}+$/u.test('hey') // ✅

Se vuoi sapere altro sulle proprietà che puoi usare consulta direttamente la proposta.

Esempi

Supponendo che una stringa contenga solo un numero che hai bisogno di estrarre, /\d+/ dovrebbe andare bene:

'Test 123123329'.match(/\d+/) 
// Array [ "123123329" ]

Trovare un indirizzo email

Un approccio semplicistico è verificare i caratteri che non sono spazi prima e dopo il segno @, usando \S:

/(\S+)@(\S+)\.(\S+)/
/(\S+)@(\S+)\.(\S+)/.exec('copesc@gmail.com')
               
// ["copesc@gmail.com", "copesc", "gmail", "com"]

Tuttavia, questo è un esempio riduttivo, dato che molti indirizzi email non validi soddisfano comunque questa regex.

Acquisire il testo tra virgolette doppie

Supponi di avere una stringa che contiene qualcosa tra virgolette doppie e di voler estrarre quel contenuto.

Il modo migliore per farlo è usare un gruppo di acquisizione, in quanto sappiamo che la parte di interesse inizia e termina con ", e possiamo facilmente selezionarla, ma vogliamo anche rimuovere le virgolette dal risultato.

Troveremo ciò che ci serve in result[1]:

const hello = 'Hello "nice flower"'
const result = /"([^']*)"/.exec(hello)
// Array [ "\"nice flower\"", "nice flower" ]

Ottenere il contenuto di un tag HTML

Per esempio, possiamo ottenere il contenuto di un tag span, consentendo qualsiasi numero di argomenti nel tag:

/<span\b[^>]*>(.*?)<\/span>/

/<span\b[^>]*>(.*?)<\/span>/.exec('test')
// null

/<span\b[^>]*>(.*?)<\/span>/.exec('<span>test</span>')
// ["<span>test</span>", "test"]

/<span\b[^>]*>(.*?)<\/span>/.exec('<span class="x">test</span>')
// ["<span class="x">test</span>", "test"]

Vuoi imparare JavaScript? Scarica il mio JavaScript Handbook.

Gli oggetti costituiscono il tipo di dato più utilizzato nella programmazione. Un oggetto è un insieme di dati correlati memorizzati come coppie chiave-valore. Ad esempio:

let userDetails = {
  name: "John Doe",
  username: "jonnydoe",
  age: 14,
}

Quando lavori con gli oggetti, potresti dover verificare se un oggetto è vuoto prima di svolgere un'operazione.

In JavaScript esistono vari modi per controllare se un oggetto è vuoto. In questo articolo, imparerai le varie strategie utilizzabili, quali sono le opzioni che puoi applicare e perché.

Nota: un oggetto è considerato vuoto se non ha coppie chiave-valore.

Se sei di fretta, ecco un esempio molto semplice::

const myEmptyObj = {};

// Funziona meglio con i browser nuovi
Object.keys(myEmptyObj).length === 0 && myEmptyObj.constructor === Object

// Funziona con tutti i browser
_.isEmpty(myEmptyObj)

Entrambi i metodi restituiranno true. Adesso cerchiamo di capire questo codice e le altre opzioni che puoi usare per verificare se un oggetto è vuoto in JavaScript.

Come controllare se un oggetto è vuoto con Object.keys()

Il metodo Object.keys() è un metodo statico per oggetti introdotto con ECMAScript6 (ES6) e supportato da tutti i browser moderni. Questo metodo restituisce un array con le chiavi di un oggetto. Ad esempio:

let userDetails = {
  name: "John Doe",
  username: "jonnydoe",
  age: 14
};

console.log(Object.keys(userDetails)); // ["name","username","age"]

A questo, puoi applicare la proprietà .length. Se restituisce zero, l'oggetto è vuoto.

let userDetails = {
  name: "John Doe",
  username: "jonnydoe",
  age: 14
};

let myEmptyObj = {};

console.log(Object.keys(userDetails).length); // 3
console.log(Object.keys(myEmptyObj).length); // 0

Puoi usare questo metodo per controllare se un oggetto è vuoto con un'istruzione if oppure creando una funzione apposita.

const isObjectEmpty = (objectName) => {
  return Object.keys(objectName).length === 0
}

Restituirà true o false. Se l'oggetto è vuoto, restituirà true, altrimenti restituirà false.

let userDetails = {
  name: "John Doe",
  username: "jonnydoe",
  age: 14
};

let myEmptyObj = {};

const isObjectEmpty = (objectName) => {
  return Object.keys(objectName).length === 0
}

console.log(isObjectEmpty(userDetails)); // false
console.log(isObjectEmpty(myEmptyObj)); // true

Nota: controllare soltanto la lunghezza non è l'opzione migliore quando vuoi verificare che un oggetto o qualsiasi altro tipo di dato sia vuoto. È sempre meglio avere conferma che il tipo di dato sia corretto.

A questo scopo puoi controllare il costruttore:

const isObjectEmpty = (objectName) => {
  return Object.keys(objectName).length === 0 && objectName.constructor === Object;
}

In tal modo, puoi eseguire una verifica più approfondita.

Finora è andato tutto bene, ma potresti voler evitare di ottenere un TypeError quando una variabile è undefined o un valore null viene passato invece di {}. Per risolvere questo problema puoi aggiungere un controllo extra:

const isObjectEmpty = (objectName) => {
  return (
    objectName &&
    Object.keys(objectName).length === 0 &&
    objectName.constructor === Object
  );
};

Nel codice qui sopra, è stato aggiunto un ulteriore controllo. Questo vuol dire che verrà restituito null o undefined se non si tratta di un oggetto vuoto, come mostrato nell'esempio seguente:

let userDetails = {
  name: "John Doe",
  username: "jonnydoe",
  age: 14
};

let myEmptyObj = {};
let nullObj = null;
let undefinedObj;

const isObjectEmpty = (objectName) => {
  return (
    objectName &&
    Object.keys(objectName).length === 0 &&
    objectName.constructor === Object
  );
};

console.log(isObjectEmpty(userDetails)); // false
console.log(isObjectEmpty(myEmptyObj)); // true
console.log(isObjectEmpty(undefinedObj)); // undefined
console.log(isObjectEmpty(nullObj)); // null

Nota: ciò vale anche per altri metodi statici per oggetti, ovvero puoi usare Object.entries() o Object.values() invece di Object.keys().

Come verificare se un oggetto è vuoto con un loop for…in

Un altro metodo che puoi usare è il loop for…in introdotto con ES6. Puoi usare questo loop insieme al metodo hasOwnProperty().

const isObjectEmpty = (objectName) => {
  for (let prop in objectName) {
    if (objectName.hasOwnProperty(prop)) {
      return false;
    }
  }
  return true;
};

Il codice qui sopra itererà su ogni proprietà dell'oggetto. Se avviene una singola iterazione, l'oggetto non è vuoto. Inoltre, hasOwnProperty() restituirà un booleano che indica se l'oggetto possiede la proprietà specificata.

let userDetails = {
  name: "John Doe",
  username: "jonnydoe",
  age: 14
};

let myEmptyObj = {};

const isObjectEmpty = (objectName) => {
  for (let prop in objectName) {
    if (objectName.hasOwnProperty(prop)) {
      return false;
    }
  }
  return true;
};

console.log(isObjectEmpty(userDetails)); // false
console.log(isObjectEmpty(myEmptyObj)); // true

Come verificare se un oggetto è vuoto con JSON.stringify()

Puoi anche utilizzare il metodo JSON.stingify(), che serve per convertire un valore JavaScript in una stringa JSON. Questo vuol dire che convertirà i valori del tuo oggetto in una stringa. Ad esempio:

let userDetails = {
  name: "John Doe",
  username: "jonnydoe",
  age: 14
};

console.log(JSON.stringify(userDetails)); 

Output:
"{'name':'John Doe','username':'jonnydoe','age':14}"

Quando l'oggetto è vuoto, restituisce "{}". Puoi usare questo valore per controllare se l'oggetto è vuoto.

const isObjectEmpty = (objectName) => {
  return JSON.stringify(objectName) === "{}";
};

Restituirà true se l'oggetto è vuoto, oppure false:

let userDetails = {
  name: "John Doe",
  username: "jonnydoe",
  age: 14
};

let myEmptyObj = {};

const isObjectEmpty = (objectName) => {
  return JSON.stringify(objectName) === "{}";
};

console.log(isObjectEmpty(userDetails)); // false
console.log(isObjectEmpty(myEmptyObj)); // true

Come verificare se un oggetto è vuoto con Lodash

Alcuni dei metodi che ho spiegato potrebbero andare bene per i browser più vecchi, ma potrebbero non funzionare con altri. Se ti interessa trovare una soluzione che funzioni sia per le versioni vecchie che per quelle moderne, puoi usare Lodash.

Lodash è una libreria di utilità JavaScript moderna che può svolgere svariate funzionalità con una sintassi molto semplice.

Ad esempio, se vuoi controllare che un oggetto sia vuoto, devi soltanto usare il metodo "isEmpty".

_.isEmpty(objectName);

Installare Lodash nei tuoi progetti è piuttosto facile. Tutto ciò che devi fare è usare questo comando:

$ npm install lodash

Adesso puoi inizializzare il metodo con il trattino basso e utilizzarlo.

const _ = require('lodash');

let userDetails = {
  name: "John Doe",
  username: "jonnydoe",
  age: 14
};

let myEmptyObj = {};

const isObjectEmpty = (objectName) => {
  return _.isEmpty(objectName);
};

console.log(isObjectEmpty(userDetails)); // false
console.log(isObjectEmpty(myEmptyObj)); // true

Ecco fatto! 💪

Mi sono divertito molto a esplorare i diversi modi con cui puoi verificare che un oggetto sia vuoto. Usa il metodo che si presta meglio alle tue necessità.

Buona programmazione!

Un URL – o Uniform Resource Locator – è un testo usato per identificare risorse come pagine web, immagini e video su internet.

Gli URL sono chiamati comunemente indirizzi dei siti web e vengono usati per trasferire file, per le email e altre applicazioni.

Gli URL consistono di più parti – protocollo, nome di dominio e via dicendo – che dicono al browser come e dove recuperare la risorsa.

In JavaScript, potresti usare un URL in un tag di ancoraggio o un pulsante per rimandare l'utente a un'altra pagina web. In una situazione del genere, questa stringa URL deve essere verificata per assicurarsi che sia valida.

Questo tutorial ti mostrerà alcuni modi per verificare se una stringa JavaScript è un URL valido.

Per imparare come ottenere l'URL corrente in JavaScript, puoi leggere questo articolo (risorsa in inglese).

Come verificare se una stringa è un URL valido usando un'espressione regolare

Le espressioni regolari (regex) sono dei pattern (modelli) che indicano combinazioni di caratteri in una stringa. In JavaScript, le espressioni regolari sono degli oggetti che offrono diversi metodi per svolgere operazioni varie.

Puoi costruire un'espressione regolare in due modi:

• Usando un'espressione regolare letterale
• Usando il costruttore RegEx

Nota: è consigliabile usare il metodo letterale quando vuoi soltanto verificare se una stringa è un URL valido senza creare alcun oggetto aggiuntivo.

Vediamo come funzionano questi due metodi.

Come usare le espressioni regolari letterali

In un'espressione regolare letterale, il pattern è racchiuso tra barre oblique, come puoi vedere di seguito.

Il pattern include la validazione delle parti necessarie per l'URL. Ad esempio, un protocollo, https, le barre, //, e via dicendo.

const urlPattern = /(?:https?):\/\/(\w+:?\w*)?(\S+)(:\d+)?(\/|\/([\w#!:.?+=&%!\-\/]))?/;

Come usare il costruttore di espressioni regolari

Per creare un'espressione regolare usando l'approccio del costruttore, usa il costruttore RegExp() e passa il pattern come parametro.

const urlPattern = new RegExp('(?:https?):\/\/(\w+:?\w*)?(\S+)(:\d+)?(\/|\/([\w#!:.?+=&%!\-\/]))?');

Per dimostrare come verificare se una stringa è un URL, creiamo un metodo che validerà la stringa JavaScript usando il costruttore di espressioni regolari, restituendo vero o falso in base al riscontro.

	const isValidUrl = urlString=> {
	  	var urlPattern = new RegExp('^(https?:\\/\\/)?'+ // protocollo
	    '((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.)+[a-z]{2,}|'+ // nome dominio
	    '((\\d{1,3}\\.){3}\\d{1,3}))'+ // o indirizzo ip (v4)
	    '(\\:\\d+)?(\\/[-a-z\\d%_.~+]*)*'+ // porta e percorso
	    '(\\?[;&a-z\\d%_.~+=-]*)?'+ // query string
	    '(\\#[-a-z\\d_]*)?$','i'); // fragment locator
	  return !!urlPattern.test(urlString);
	}

Come usare un'espressione regolare per validare un URL

Il seguente codice mostra come validare diverse stringhe URL usando il metodo appena creato:

	var url = "invalidURL";
	console.log(isValidUrl(url));      //false
	 
	var url = "htt//jsowl";            //false
	console.log(isValidUrl(url));
	
    var url = "www.jsowl.com";         //true
    console.log(isValidUrl(url));
    
    var url = "https://www.jsowl.com"; //true
    console.log(isValidUrl(url));
    
    var url = "https://www.jsowl.com/remove-an-item-from-an-array-in-javascript/";
    console.log(isValidUrl(url));      //true

Come verificare se una stringa è un URL valido usando il costruttore URL

Puoi usare il costruttore URL per verificare se una stringa è un URL valido.

Il costruttore URL (new URL(url)) restituisce un oggetto URL definito dai parametri URL.

Se l'URL dato non è valido, JavaScript dà un'eccezione TypeError.

Nota: è indicato usare questo approccio quando vuoi costruire un oggetto URL nel tuo programma per ulteriori utilizzi.

Sintassi del costruttore URL

La seguente sintassi spiega come creare un oggetto URL con una stringa JavaScript.

new URL(url);
new URL(url, base);

Dove,

• url è una stringa o qualsiasi oggetto dotato di uno stringifier che rappresenta un URL assoluto o relativo. Se l'URL è assoluto, base va ignorato. Se l'URL è relativo, è richiesto anche base.
• base (opzionale) è una stringa che rappresenta l'URL base. Deve essere passato quando l'URL è relativo. Risulta undefined quando ignorato.

Esempio del metodo costruttore URL

Per dimostrare come funziona il costruttore URL, creiamo una funzione lambda per costruire un nuovo URL con la stringa passata.

• Se la stringa è un URL valido, viene creato un oggetto URL e viene restituito true
• Se la stringa non è un URL valido, si verifica un TypeError e viene restituito false

const isValidUrl = urlString=> {
      try { 
      	return Boolean(new URL(urlString)); 
      }
      catch(e){ 
      	return false; 
      }
  }

Come usare il metodo isValidURL()

Invochiamo il metodo isValidURL() per diversi tipi di stringhe e vediamo i risultati.

  var url = "invalidURL";
  console.log(isValidUrl(url));     //false
  
  var url = "htt//jsowl";
  console.log(isValidUrl(url));     //false
  
  var url = "www.jsowl.com";
  console.log(isValidUrl(url));     //false
  
  var url = "tcp://www.jsowl.com";
  console.log(isValidUrl(url));     //true
  
  var url = "https://www.jsowl.com/remove-an-item-from-an-array-in-javascript/";
  console.log(isValidUrl(url));     //true

Nei primi tre casi, puoi vedere che è stata passata una stringa che non è un URL valido. Come risultato, la creazione dell'oggetto URL fallisce con un TypeError e viene restituito false.

Negli ultimi due casi, è stato passato un URL valido. Quindi viene creato un oggetto URL e viene restituito true, confermando che l'URL è corretto.

Vediamo un altro esempio per validare una parte specifica di un URL.

In questo esempio, valideremo un protocollo specifico nell'URL, che dovrà contenere il protocollo http o https.

	const isValidUrl = urlString=> {
		let url;
		try { 
	      	url =new URL(urlString); 
	    }
	    catch(e){ 
	      return false; 
	    }
	    return url.protocol === "http:" || url.protocol === "https:";
	}

Esempio di come validare una parte di un URL

Invochiamo il metodo isValidURL() per diversi tipi di stringhe e protocolli e vediamo i risultati.

var url = "tcp://www.jsowl.com";
console.log(isValidUrl(url));      //false

var url = "https://www.jsowl.com";
console.log(isValidUrl(url));      //true

Nel primo caso, la stringa (tcp://www.jsowl.com) è un URL valido, ma non contiene un protocollo specifico (HTTP/HTTPS). Quindi viene restituito false.

Nel secondo caso, la stringa https://www.jsowl.com è un URL valido e contiene il protocollo specifico, quindi viene restituito true.

Come verificare se una stringa è un URL valido con un elemento input

L'HTML supporta gli elementi input di tipo url, per rappresentare in modo specifico gli URL.

L'attributo value di un elemento <input> contenente la stringa viene validato automaticamente dal confronto con la sintassi URL (come un URL vuoto o formato in modo appropriato) prima che il modulo sia inviato.

Il metodo HTMLInputElement.checkValidity() viene usato per controllare se l'attributo value di un elemento <input> è un URL. Il metodo checkvalidity() restituisce true se il valore è un URL corretto e false se l'input non è un URL corretto.

Creiamo un metodo che genera un elemento input di tipo URL e lo valida usando il metodo checkValidity().

    const isValidUrl = urlString =>{
      var inputElement = document.createElement('input');
      inputElement.type = 'url';
      inputElement.value = urlString;

      if (!inputElement.checkValidity()) {
        return false;
      } else {
        return true;
      }
    } 

Adesso usiamo questo metodo per validare diverse stringhe e vedere se sono URL validi.

    var url = "invalidURL";
    console.log(isValidUrl(url));     //false
    
    var url = "htt//jsowl";
    console.log(isValidUrl(url));     //false
    
    var url = "www.jsowl.com";
    console.log(isValidUrl(url));     //false
    
    var url = "https://www.jsowl.com";
    console.log(isValidUrl(url));     //true
    
    var url = "https://www.jsowl.com/remove-an-item-from-an-array-in-javascript/";
    console.log(isValidUrl(url));     //true

Ed ecco come puoi usare l'approccio input type per verificare se una stringa è un URL valido.

Come verificare se una stringa è un URL valido con il metodo del tag di ancoraggio

Questa sezione ti mostra come usare un HTMLAnchorElement per controllare se una stringa JavaScript è un URL.

Nota: è consigliabile usare questo metodo quando vuoi assegnare un URL a un tag di ancoraggio e assicurarti che la stringa sia un URL valido.

L'interfaccia HTMLAnchorElement rappresenta degli elementi hyperlink. Fornisce proprietà e metodi speciali per manipolare il layout e la presentazione di tali elementi. Viene anche chiamata tag di ancoraggio.

Puoi assegnare un URL a un tag di ancoraggio usando l'attributo href. Nell'assegnazione,

• Se la stringa passata è un URL valido, viene assegnata al tag di ancoraggio
• Se la stringa passata non è un URL valido, la posizione attuale del browser viene assegnata al tag
• Di default, il tag di ancoraggio avrà un URL vuoto (“”)

Una volta che l'URL è assegnato, puoi estrarre una parte specifica dell'URL usando gli attributi spiegati di seguito.

Adesso vediamo come controllare se la stringa assegnata è un URL corretto.

Se lo è, viene assegnata al tag di ancoraggio. Altrimenti, gli sarà assegnata la posizione attuale del browser.

Quindi per vedere se l'URL è corretto, puoi controllare se l'host del tag di ancoraggio NON è uguale a quello della posizione attuale usando l'istruzione a.host != window.location.host.

Vediamo il codice.

Creiamo un funzione lambda e la assegniamo alla costante isValidUrl.

La funzione crea un tag di ancoraggio e gli assegna la stringa con l'URL. Dopodiché, verifica se l'attributo host dell'elemento è null o non definito.

Se non è null, verifica se l'attributo host NON è uguale alla posizione attuale del browser e restituisce true se non è uguale.

Questo perché se l'URL passato è valido, il tag di ancoraggio avrà un valore URL. Ma se l'URL non è valido, il tag di ancoraggio avrà la posizione attuale del browser. In questo caso, la funzione lambda restituisce false.

const isValidUrl = urlString =>{	
  	var a  = document.createElement('a');
   	a.href = urlString;
   	return (a.host && a.host != window.location.host);
  }

Il codice seguente invoca la funzione lambda isValidUrl() con input differenti e stampa l'output sulla console.

  var url = "invalidURL";
  console.log("1.AnchorTag:  " +isValidUrl(url));    //false
  
  var url = "htt//jsowl";
  console.log("22.AnchorTag:  "+isValidUrl(url));    //false
  
  var url = "www.jsowl.com";  
  console.log("3.AnchorTag:  " +isValidUrl(url));    //false  
  
  var url = "https://www.jsowl.com";  
  console.log("4.AnchorTag:  " +isValidUrl(url));    //true 
  
  var url = "https://www.jsowl.com/remove-an-item-from-an-array-in-javascript/";
  console.log("5.AnchorTag:  " +isValidUrl(url));    //true 

Questo tutorial è disponibile in questo JSFiddle.

Conclusione

In questo articolo hai imparato come verificare se una stringa JavaScript è un URL usando diversi metodi e quando usare ogni metodo.

Se ti è piaciuto questo articolo, condividilo.

Puoi vedere i miei altri tutorial sul mio blog, JS Owl.

Due anni fa, ho iniziato a imparare e a usare React, e oggi continuo a usarlo per il mio lavoro di sviluppatore software e per progetti personali.

In questo tempo ho incontrato un sacco ti problemi "tipici". Così ho cercato in giro e ho trovato alcune buone pratiche che ho integrato nel mio flusso di lavoro e che hanno reso più semplice la mia vita e quella dei miei colleghi.

Durante questo percorso ho anche affrontato sfide che all'inizio non ho risolto al meglio e a cui voglio approcciarmi in un modo migliore in futuro.

Questa è la ragione per cui ho scritto questa guida. A cui penso come a una raccolta di suggerimenti che avrei voluto dare a me stesso due anni fa, quando ho iniziato.

Indice:

• Le tre sfide che ogni sviluppatore React affronta
• Imparare gli elementi fondamentali di React
• Come realizzare dei componenti React puliti, prestanti e manutenibili
• Suggerimenti per scrivere del codice React migliore – La ciliegina sulla torta
• Conclusione

Innanzitutto, conoscerai le tre sfide principali che ogni sviluppatore React deve affrontare. Questo è importante perché quando sei cosciente delle potenziali sfide, capirai le ragioni alla base di queste buone pratiche in modo più profondo. Avere questa mentalità dall'inizio può essere d'aiuto anche quando stai progettando dei componenti o organizzando un progetto.

Dopo questo primo importante passo, ti parlerò di tre buone pratiche. Sono un mix di suggerimenti teorici e pratici con esempi di codice. Proverò a minimizzare i problemi in stile hello world e arrivare a ciò che ho visto nel mondo reale.

Le tre sfide che ogni sviluppatore React affronta

Durante i miei due anni di uso quotidiano di React, ho individuato tre sfide principali che uno sviluppatore React deve affrontare per realizzare le proprie app. Ignorare queste difficoltà potrebbe portare a momenti difficili che nuocciono alla crescita dell'app.

Quindi, tieni a mente questi problemi quando orchestri la tua app, perché ti risparmieranno tempo ed energie.

⚙️ Manutenibilità

Questo va a braccetto con la riusabilità. All'inizio, quando l'applicazione e i componenti sono molto leggeri, è semplice fare manutenzione. Ma una volta che le esigenze iniziano a crescere, i componenti tendono a diventare molto complessi e perciò più difficili da gestire.

Spesso ho visto un componente con molti casi diversi, ognuno che rappresenta un risultato diverso. Il JSX è inondato da rendering condizionale (operatori ternari e semplici operatori &&), classname applicati in modo condizionale o componenti che usano un'istruzione switch enorme. Ci sono molti possibili valori di prop e stati, ognuno responsabile di un risultato diverso.

Secondo me, non c'è niente di sbagliato in queste tecniche in quanto tali. Ma credo che tutti dovrebbero pensare a cosa fare quando un componente inizia a diventare poco manutenibile e quando queste tecniche vengono usate eccessivamente. Impareremo come controllare questo aspetto più avanti in questo articolo.

Il problema (e ne sono colpevole anch'io) è che maggiori sono la complessità e i diversi risultati di un componente (polimorfismo), più questo risulta difficile da gestire.

A essere onesto, la causa principale è spesso la pigrizia, esperienza insufficiente o mancanza di tempo per fare il refactoring di un componente in modo adeguato, così da renderlo più gestibile e pulito.

Un altro fattore chiave che ho visto è l'insufficienza o la mancanza di test. Lo so, non è un tipo di lavoro che molti sviluppatori amano, ma può davvero essere d'aiuto sul lungo termine.

🧠 Solida conoscenza di React

Un'altra causa principale dei problemi degli sviluppatori React è una scarsa comprensione del funzionamento di base di React. Ci sono passato anch'io.

Ho visto molte persone saltare troppo velocemente in concetti intermedi o avanzati senza avere basi solide. Ma questo non è specifico di React, bensì è un problema generale nella programmazione.

Non avere delle conoscenze solide di React può anche causare problemi a te come sviluppatore. Ricordo i mal di testa avuti quando volevo usare diversi cicli di vita di componenti senza sapere effettivamente come farlo. Quindi ho dovuto fare qualche passo indietro e poi approfondire l'argomento.

Dato che ritengo che sia uno degli aspetti più importanti, gli ho dedicato un intero capitolo all'interno di questo articolo.

📈 Scalabilità

Questa sfida va a braccetto con la manutenibilità. Non è specifica per React, ma si applica in genere ai software.

Ho imparato che per realizzare dei software eccellenti non contano solo esperienza utente, schemi di codice puliti o un'architettura ingegnosa. Per me, la qualità di un software aumenta o diminuisce in base alla possibilità di essere scalato.

Molte cose entrano in gioco nell'aumentare la scalabilità di un software. In questo articolo troverai dei suggerimenti utili a questo riguardo.

Credo che tenendo a mente la manutenibilità e la scalabilità quando orchestri i tuoi componenti e organizzi la struttura del progetto, sia meno probabile che tu finisca per avere un codice sorgente incasinato che ha bisogno di un refactoring.

Come imparare React

Bene, adesso affrontiamo approfonditamente delle buone pratiche per imparare a usare React.

Imparare gli elementi fondamentali di React

Come abbiamo già discusso brevemente, conoscere gli elementi fondamentali non è importante soltanto per React, ma anche per qualsiasi altra tecnologia o linguaggio di programmazione. Non puoi costruire un grattacielo su delle fondazioni di sabbia e aspettarti che sia stabile.

Potrebbe sembrare ovvio per molti di voi, ma ho visto sviluppatori saltare direttamente a concetti di React intermedi o avanzati senza comprenderne davvero le basi.

Questo è vero anche per JavaScript in generale. Credo fortemente che imparare React non ha senso se non hai delle solide basi di JavaScript vanilla (JS senza framework o librerie aggiuntive).

Se ti sembra qualcosa di familiare e stai pensando di imparare a usare React ma non ti senti ancora a tuo agio con JavaScript, dedica prima del tempo a rafforzare le tue conoscenze di JavaScript. In futuro, ti risparmierà un sacco di mal di testa e di tempo.

Ecco una guida utile per i concetti di JavaScript più importanti che devi conoscere prima di passare a React.

Ma, secondo me, conoscere soltanto le basi non è sufficiente. È in qualche modo obbligatorio conoscere il funzionamento di React dietro le quinte. Se vuoi diventare un bravo sviluppatore React (e immagino sia così, visto che stai leggendo questo articolo), devi conoscere gli strumenti che stai utilizzando. È un bene per te in quanto sviluppatore e per i tuoi clienti.

Da un lato può salvarti da un sacco di tempo dedicato al debugging della tua app. Inoltre ti rende più efficiente perché non devi fare dei passi indietro e imparare di nuovo le basi, ancora e ancora. In pratica, sai quello di cui stai parlando.

Naturalmente, non puoi sapere tutto e non dovresti stressarti per questo. Imparerai sempre di più quando ti troverai ad affrontare problemi pratici e costruire altri progetti, ma con delle conoscenze solide parti ben equipaggiato.

Direi che ha senso, ma potresti chiederti cosa hai bisogno di sapere esattamente per avere delle basi solide di React.

Lo stretto indispensabile è costituito da tutti gli argomenti presenti nei Concetti Chiave della documentazione sul sito ufficiale di React.

Un altro argomento con cui dovresti avere familiarità è quello sugli Hooks perché sono diventati una convenzione e sono usati ovunque, specialmente in pacchetti React di terze parti.

Di certo potresti usare più di frequente useState e useEffect, ma è essenziale anche conoscerne altri come useMemo, useCallback o useRef.

C'è anche un altro capitolo chiamato Guide Avanzate che non considererei obbligatorio all'inizio, ma di cui raccomanderei vivamente di apprendere i concetti durante il tuo viaggio in React.

Come sempre, è spesso più semplice comprendere argomenti avanzati quando possiedi già un po' di esperienza pratica. Ma più cose apprendi da subito, meglio è.

Naturalmente non devi limitarti a seguire soltanto la documentazione di React. Anche seguire corsi online che trattano gli elementi essenziali, guardare tutorial o leggere blog fa parte della costruzione di solide basi. Prova quello che funziona meglio per te.

Se dovessi indicare quali sono i concetti più importanti da conoscere indispensabilmente, sceglierei questi:

• cos'è uno "stato"?
• up e down di classe e componenti funzionali
• cosa i ri-rendering dei componenti e come funzionano?
• come attivare i ri-rendering
• differenti cicli di vita dei componenti e come interagire con essi
• DOM virtuale
• Benefici di CSR (Client Side Rendering) e SSR (Server Side Rendering) in generale e in React
• Componenti controllati vs non controllati
• Spostamento di stato
• almeno una tecnologia di gestione dello stato globale (Context API, Redux/Toolkit, Recoil)
• Pattern di componenti (soprattutto come scegliere il giusto pattern)

Come realizzare dei componenti React puliti, prestanti e manutenibili

Lo so – questo è il sogno di ogni programmatore (o almeno spero sia così). E per me, questa abilità distingue un buon programmatore da un ottimo programmatore. La parte divertente è che non è mai tutto completo perché c'è sempre qualcosa di nuovo da imparare e migliorare.

Seguire le buone pratiche non renderà le cose più semplici solo a te, ma anche ai tuoi colleghi. Ho visto team di sviluppo che hanno creato una guida di stile in cui hanno definito dei capisaldi su come scrivere il codice. Un'idea che apprezzo molto.

Alcuni di essi sono:

• usare componenti funzionali (come le funzioni freccia)
• non usare stili inline
• mantenere una struttura di importazione appropriata (prima import di terze parti --> poi import interni)
• formattare il codice prima di un commit

E via dicendo.

Naturalmente è possibile essere molti dettagliati a questo riguardo. Questo dipende dal tuo team. Personalmente, non amo le guide estremamente dettagliate perché penso che uno sviluppatore esperto dovrebbe avere una certa libertà e non dovrebbe essere troppo vincolato.

In ogni caso, una guida di stile è un buon modo per definire e mantenere delle buone pratiche e assicurarsi che il team sia allineato per quanto riguarda le questioni importanti. Credo che questo favorisca incredibilmente il lavoro di squadra e i risultati.

Diamo un'occhiata alle buone pratiche che riguardano la creazione di componenti puliti, prestanti e manutenibili. Mettiti comodo, tieni a portata qualcosa per prendere appunti e buon divertimento!

📁 Creare una buona struttura di cartelle

Organizzare i tuoi file e cartelle all'interno di un'app React è obbligatorio per la manutenibilità e la scalabilità.

Una buona struttura di cartella dipende dalla dimensione dell'applicazione e del team, quindi non esiste una soluzione generale per questo. Soprattutto perché si tratta di un argomento molto discusso e dipende anche dalle preferenze personali.

Col tempo, però, si sono sviluppate alcune buone pratiche per le varie dimensioni di un'applicazione.

Questo ottimo post (risorsa in inglese) passa in rassegna cinque diverse dimensioni di un'app e introduce buone idee su come organizzare file e cartelle. Avere queste cose in mente quando pianifichi o avvii la tua applicazione può fare una differenza enorme sul lungo termine.

Non sovra-ingegnerizzarla, ma fai del tuo meglio per mantenere una strutturata appropriata che si adatti alla dimensione dell'applicazione e del team.

👇 Mantenere un ordine di import strutturato

Se hai già un po' di esperienza con React, potresti aver visto file rigonfi di istruzioni import. Potrebbero anche essere mescolati a import esterni da pacchetti di terze parti e import interni come altri componenti, funzioni di utilità, stili e molto altro.

Un esempio reale (tagliato):

import React, { useState, useEffect, useCallback } from "react";
import Typography from "@material-ui/core/Typography";
import Divider from "@material-ui/core/Divider";
import Title from "../components/Title";
import Navigation from "../components/Navigation";
import DialogActions from "@material-ui/core/DialogActions"
import { getServiceURL } from '../../utils/getServiceURL";
import Grid from "@material-ui/core/Grid";
import Paragraph from "../components/Paragprah";
import { sectionTitleEnum } from "../../constants";
import { useSelector, useDispatch } from "react-redux";
import Box from "@material-ui/core/Box";
import axios from 'axios';
import { DatePicker } from "@material-ui/pickers";
import { Formik } from "formik";
import CustomButton from "../components/CustomButton";
...

Probabilmente ti sei accorto del problema qui. È difficile distinguere quali sono gli import di terze parti e quelli locali (interni). Non sono raggruppati e sembrano essere ovunque.

Una versione migliore:

import React, { useState, useEffect, useCallback } from "react";
import { useSelector, useDispatch } from "react-redux";
import { Formik } from "formik";
import axios from 'axios';
import Typography from "@material-ui/core/Typography";
import Divider from "@material-ui/core/Divider";
import Box from "@material-ui/core/Box";
import DialogActions from "@material-ui/core/DialogActions";
import Grid from "@material-ui/core/Grid";
import { DatePicker } from "@material-ui/pickers";

import { getServiceURL } from '../../utils/getServiceURL";
import { sectionTitleEnum } from "../../constants";
import CustomButton from "../components/CustomButton";
import Title from "../components/Title";
import Navigation from "../components/Navigation";
import Paragraph from "../components/Paragraph";
...

La struttura è più chiara ed è molto semplice distinguere dove si trovano gli import esterni e interni. Certamente è possibile ottimizzare questa disposizione se stai usando più import (nel caso sia possibile :) ). Questo ti permette di importare tutti i componenti derivanti da material-ui tutti in una sola riga.

Ho visto altri sviluppatori a cui piace dividere la struttura degli import in tre parti:

Integrati (come 'react') --> Esterni (moduli di node di terze parti) --> Interni.

Puoi gestire tutto da solo oppure lasciar fare il lavoro a un linter.

📔 Imparare diversi schemi di componenti

Per fare in modo di non finire con del codice ingestibile e non scalabile, è essenziale imparare diversi pattern di componenti man mano che acquisisci esperienza con React.

Ma non è tutto. Conoscere i diversi pattern è un buon punto di partenza, ma l'aspetto più importante è sapere quando usare ognuno di essi per uno specifico problema.

Ogni pattern ha il suo scopo. Ad esempio, il compound component pattern evita il prop-drilling non necessario di molti livelli di componenti. Quindi, la prossima volta che inizi a passare delle prop attraverso 5 livelli di componenti per raggiungere alla fine il componente interessato dalla prop, comincerai a dirigere i componenti diversamente.

Una breve nota sul prop-drilling, visto che ho avuto molte discussioni in passato. Ci sono molte opinioni sul fatto che sia una cosa positiva o no. A me piace provare a pensare a un modo/pattern diverso se inizio a passare prop attraverso più di due livelli di componenti.

Ciò ti rende più efficiente come sviluppatore e fa sì che i componenti che scrivi siano più manutenibili e scalabili. Avere questi pattern nel tuo arsenale ti distingue dagli altri sviluppatori React. Ti consiglio vivamente di fare le tue ricerche, ma questo corso su Udemy mi ha aiutato molto.

🔒Usa un linter e segui le sue regole

Un linter non ti aiuta soltanto a mantenere un ordire di import delle dipendenze distinguibile, ti aiuta a scrivere un codice migliore in generale.

Quando utilizzi create-react-app, ESLint è già configurato, ma puoi anche impostarlo completamente da solo o estendere un set di regole preconfigurato.

In pratica, un linter osserva il codice JavaScript che stai scrivendo e ti fa notare gli errori di cui ti accorgeresti probabilmente eseguendo il codice. Ci ho messo un po' per apprezzare davvero l'utilità di un linter, ma oggi non posso immaginare di lavorare senza.

Avere un linter è una cosa, ma seguire le sue regole è un'altra. Naturalmente puoi disabilitarlo, sia per una specifica riga di codice che per un intero file. Potrebbero esserci casi in cui ha senso farlo, ma per esperienza sono piuttosto rari.

Un altro grande vantaggio è che puoi anche regolare il controllo dello stile. È particolarmente utile per il lavoro in gruppo. Una volta che si è d'accordo su certe convenzioni su come scrivere e formattare il codice, è facile combinare ESLint con qualcosa simile a JSPrettify.

🧪 Testare il codice

Lo so, i test non sono la tua attività da sviluppatore preferita. Per me era così. All'inizio sembra un compito non necessario e fastidioso, e sul breve termine può essere vero. Ma sul lungo periodo – e quando un'applicazione cresce – è vitale.

Per me, i test sono diventati una pratica che mi assicura che sto facendo il mio lavoro in modo più professionale, creando software di migliore qualità.

In pratica, non c'è nulla di sbagliato con i test manuali effettuati da una persona, che non dovrebbero essere evitati completamente. Ma immagina di star integrando una nuova funzionalità e di voler essere sicuro che tutto funzioni a dovere. È un'attività che richiede tempo e favorisce l'errore umano.

Mentre stai scrivendo i test ti trovi già nel processo mentale di organizzare il codice in modo che passi i test. Per me è molto utile perché mi aiuta a capire quali insidie possono sorgere e a tenere un occhio su di esse.

Non ti tuffi direttamente a scrivere il tuo codice (cosa che non raccomando mai), ma pensi prima all'obiettivo.

Ad esempio, "Cosa dovrebbe fare uno specifico componente? Quali sono i casi limite rilevanti che devo testare? Posso rendere il componente più semplice in modo che abbia un solo scopo? ..."

Avere una visione del codice che stai per scrivere ti aiuta anche a mantenere alta l'attenzione per soddisfarla.

I test possono anche fungere da documentazione, perché per un nuovo sviluppatore non avvezzo al codebase può essere molto d'aiuto a capire le diverse parti del software e come ci si aspetta che funzionino.

Quindi non evitare i test perché sembrano un lavoro extra. La verità è che puoi risparmiare del tempo in futuro se li imposti appropriatamente.

Dai un'occhiata al capitolo sui test della documentazione di React, segui qualche tutorial sui test in React e inizia a scrivere una piccola applicazione TDD (test-driven development) o implementa dei test in una app su cui stai lavorando al momento.

🧰 Integrare Typescript (o usare almeno le prop di default e prop type)

Ricordo il mio primo progetto in React come sviluppatore software in cui il nostro gruppo ricevette un progetto in pratica già scritto da un'altra azienda. Abbiamo dovuto creare il progetto del client su di esso e Typescript era già integrato.

Fino a quel momento, io e i miei colleghi non avevamo molta esperienza con Typescript, dato che avevamo tutti un background in JavaScript vanilla.

Dopo poche settimane passate a lavorare sul progetto, abbiamo sentito che TypeScript non era un beneficio, ma un ostacolo che bloccava il nostro lavoro. Non stavamo proprio sfruttando i suoi vantaggi, perché avevamo definito tutto con tipo any per bloccare gli avvertimenti di Typescript.

Questo ci portò a decidere di rimuovere Typescript dal progetto e lavorare sul nostro terreno con JavaScript. All'inizio andò bene, ma man mano che il progetto diventava più complesso, iniziarono a venir fuori errori di tipo. Ciò ci fece dubitare della nostra decisione di sbarazzarci completamente di Typescript. Ma queste cose possono accadere e danno una preziosa esperienza per il futuro.

Queste circostanze mi hanno portato a dare a Typescript un'altra opportunità, così l'ho imparato nel mio tempo libero. Dopo avervi costruito alcuni progetti secondari, non potevo immaginare più la vita senza Typescript.

Usare Typescript ha molti lati positivi, come il controllo statico dei tipi, un migliore completamento del codice nel tuo IDE (intellisense), un'esperienza di sviluppo migliorata e l'individuazione di errori di tipo mentre scrivi il codice – tanto per nominarne alcuni.

D'altra parte, ci sono anche delle sfide, perché se non vieni da un background con linguaggi fortemente tipizzati (come Java o C#) potrebbe essere più difficile da afferrare all'inizio.

Ma posso dire che vale davvero la pena di impararlo e integrarlo. Ecco un bell'articolo (risorsa in inglese) che può aiutarti ad avere una panoramica dei pro e dei contro dell'uso di Typescript in una applicazione React. E qui c'è un tutorial (risorsa in inglese) su come programmare le tue app React in Typescript.

Ci potrebbero essere ragioni per cui non vuoi usare Typescript nella tua app React, va bene. Ma consiglio almeno di usare i prop-type e le default-prop per i tuoi componenti per essere sicuro di non fare confusione con le prop.

💎 Usare lazy-loading / code splitting

Se hai passato un po' di tempo nell'universo JavaScript e React, sei probabilmente incappato nell'"impacchettamento" (bundling). Per quelli che stanno sentendo questo termine per la prima volta, vediamo cosa dice la documentazione ufficiale di React:

Molte applicazioni React hanno i loro file “impacchettati” usando strumenti come Webpack, Rollup oppure Browserify. Il processo di “impacchettamento” avviene prendendo tutti i file importati e unendoli tutti in un unico file, chiamato “bundle”. Questo file può essere poi incluso all’interno della pagina web per caricare l’intera applicazione tutta in una volta.

In pratica, si tratta di un'ottima tecnica, ma con la crescita di una app si presenta una sfida. Il bundle inizia a crescere a sua volta. Soprattutto quando stai usando delle grandi librerie di terze parti come three.js.

L'insidia è che questo bundle ha bisogno di essere sempre caricato completamente, anche quando l'utente ha bisogno solo di una frazione del codice. Questo porta a problemi di prestazione perché può volerci un tempo eccessivamente lungo per caricare l'app.

Per evitarlo, esiste una tecnica chiamata code splitting in cui dividi i bundle nelle porzioni di codice di cui ha bisogno l'utente. Questa tecnica è supportata dalla maggior parte degli strumenti comuni come Webpack, Rollup, e Browserify. Il grande beneficio è che puoi creare più bundle e caricarli dinamicamente.

Dividere i bundle ti aiuta a caricare tramite lazy loading solo le cose necessarie all'utente.

Immagina di andare in un negozio di alimentari e di voler comprare solo delle banane, delle mele e del pane. In questo caso, non stai comprando tutta la merce a disposizione nel negozio, sei interessato solo a una porzione della merce a disposizione. Quindi? Compreresti tutto? Ci vorrebbe molto più tempo e sarebbe parecchio più costoso.

Credo sia importante essere consapevoli delle potenziali sfide che possono sorgere man mano che una app cresce e ci sono alcune tecniche a disposizione per liberarsene. Per approfondire, dai un'occhiata alla documentazione di React.

🗄️ Estrarre logica riutilizzabile in hook personalizzati

Secondo la documentazione di React:

Gli hook ci consentono di riutilizzare la logica stateful senza dover cambiare la gerarchia dei componenti.

In pratica, si tratta di una soluzione migliore alle tecniche che erano usate precedentemente in combinazione con i componenti di classe. Se ti interessi di programmazione da un po', potresti ricordarti l'utilizzo di componenti di ordine superiore o render prop.

Ogni volta che ti trovi in una situazione in cui devi riutilizzare la stessa logica stateful già utilizzata in un altro componente funzionale, è un ottimo momento per creare un hook personalizzato. Al suo interno puoi incapsulare la logica e poi ti basterà chiamare l'hook come una funzione all'interno dei componenti.

Diamo un'occhiata a un esempio veloce in cui dobbiamo aggiornare la nostra interfaccia utente in base alla dimensione dello schermo e vogliamo tenere traccia della dimensione attuale della finestra ridimensionando manualmente la finestra del browser.

const ScreenDimensions = () => {
  const [windowSize, setWindowSize] = useState({
    width: undefined,
    height: undefined,
  });
  
  useEffect(() => {
    function handleResize() {
      setWindowSize({
        width: window.innerWidth,
        height: window.innerHeight,
      });
    }
    window.addEventListener('resize', handleResize);
    handleResize();
    return () => window.removeEventListener('resize', handleResize);
  }, []);
  
  return (
  	<>
    	<p>Current screen width: {windowSize.width}</p>
        <p>Current screen height: {windowSize.height}</p>
    </>
  )
}

Come puoi vedere, la soluzione è piuttosto diretta e non c'è nulla di sbagliato a definirlo così.

Adesso arriva la parte complessa. Immagina di voler usare la stessa logica in un altro componente, in cui renderizzare un'interfaccia utente diversa (una per smartphone e una per desktop) in base alla dimensione dello schermo.

Naturalmente, potremmo copiare la logica, incollarla, e il gioco è fatto. Ma questa non è una buona pratica, come potresti sapere dal principio DRY (Don't Repeat Yourself, ovvero "non ripeterti").

Se volessimo regolare la logica, dovremmo farlo in entrambi i componenti. E quando incolliamo la logica in ancora più componenti, diventa meno manutenibile e più favorevole agli errori.

Quindi, che faresti normalmente in un progetto JavaScript? Probabilmente definiresti una funzione che incapsula la logica e che può essere usata in molti posti diversi. È esattamente ciò che otteniamo con gli hook. Non sono nulla di più che funzioni JavaScript con alcune specialità di React perché stanno usando gli hook di React.

Vediamo come sarà il nostro hook personalizzato:

const useWindowSize = () => {
  const [windowSize, setWindowSize] = useState({
    width: undefined,
    height: undefined,
  });
  
  useEffect(() => {
    function handleResize() {
      setWindowSize({
        width: window.innerWidth,
        height: window.innerHeight,
      });
    }
    window.addEventListener('resize', handleResize);
    handleResize();
    return () => window.removeEventListener('resize', handleResize);
  }, []);
  
  return windowSize;
}

Adesso chiamiamolo semplicemente all'interno del componente ScreenDimensions:

const ScreenDimensions = () => {
  const windowSize = useWindowSize()
  
  return (
  	<>
    	<p>Current screen width: {windowSize.width}</p>
        <p>Current screen height: {windowSize.height}</p>
    </>
  )
}

Ciò ci consente di chiamare semplicemente l'hook personalizzato in qualsiasi altro componente e salvare il valore di ritorno (che è la dimensione attuale della finestra) in una variabile che possiamo usare all'interno del componente.

const ResponsiveView = () => {
  const windowSize = useWindowSize()
  
  return (
  	<>
    	{windowSize.width <= 960 ? (
          <SmartphoneView />
        ) : (
          <DesktopView />	
        )}
    </>
  )
}

🖥️ Gestire efficacemente gli errori

La gestione efficace degli errori è spesso trascurata e sottovalutata da molti sviluppatori. Come altre buone pratiche, sembra essere un aspetto secondario all'inizio. Vuoi far funzionare il codice e non vuoi "sprecare" tempo pensando agli errori.

Ma una volta che sei diventato più esperto e sei stato in situazioni spiacevoli in cui una gestione migliore degli errori ti avrebbe risparmiato molte energie (e del tempo prezioso, naturalmente), realizzi che sul lungo termine è obbligatorio avere una valida strategia di gestione degli errori nella tua applicazione. Soprattutto quando l'applicazione è distribuita in produzione.

Ma cosa significa esattamente gestione degli errori nel mondo di React? Ci sono diverse parti che hanno un ruolo. Una per individuare gli errori, un'altra per gestire l'interfaccia utente di conseguenza e l'ultima per registrarli appropriatamente.

React Error Boundary

Questo è un componente di classe personalizzato usato come wrapper per l'intera applicazione. Naturalmente, puoi avvolgere il componente ErrorBoundary anche attorno a componenti più in profondità nell'albero dei componenti per renderizzare UI più specifiche, ad esempio. Fondamentalmente, è una buona pratica usare ErrorBoundary per incapsulare un componente che favorisce l'insorgenza di errori.

Con il metodo di ciclo di vita componentDidCatch() sei in grado di individuare errori durante la fase di rendering o in qualsiasi altro ciclo di vita dei componenti figli. Quindi, quando un errore si verifica in questa fase, arriva in superficie e viene colto dal componente ErrorBoundary.

Se stai usando un servizio di registrazione (che consiglio vivamente), è un ottimo posto da collegare.

La funzione statica getDerivedStateFromError() viene chiamata durante la fase di rendering e viene usata per aggiornare lo stato del componente ErrorBoundary. A seconda dello stato, puoi renderizzare condizionalmente un errore nell'interfaccia.

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {
    return { hasError: true };
  }

  componentDidCatch(error, errorInfo) {
    //registra l'errore con un ERS
    errorService.log({ error, errorInfo });
  }

  render() {
    if (this.state.hasError) {
      return <h1>Oops, something went wrong.</h1>;
    }
    return this.props.children; 
  }
}

Il grande svantaggio di questo approccio è che non gestisce gli errori in callback asincroni, nel rendering lato server e nei gestori di eventi perché sono al di fuori dei confini.

Usare try-catch per gestire gli errori oltre i confini

Questa tecnica è efficace per individuare errori che possono verificarsi all'interno di callback asincroni. Immagina di star recuperando i dati del profilo di un utente da una API a di volerli visualizzare all'interno di un componente Profile.

const UserProfile = ({ userId }) => {
	const [isLoading, setIsLoading] = useState(true)
	const [profileData, setProfileData] = useState({})
    
    useEffect(() => {
    	// Separate function to make of use of async
        const getUserDataAsync = async () => {
        	try {
            	// Recupera i dati dalla API
            	const userData = await axios.get(`/users/${userId}`)
                // Restituisci un errore se il dato dell'utente è falsy (sarà intercettato da catch)
                if (!userData) {
                	throw new Error("No user data found")
                }
                // Se il dato dell'utente è truthy aggiorna lo stato
                setProfileData(userData.profile)
            } catch(error) {
            	// Registra ogni errore nel servizio di logging
            	errorService.log({ error })
                // Aggiorna stato 
                setProfileData(null)
            } finally {
            	// Resetta il carimento dello stato in ogni caso
                setIsLoading(false)
            }
        }
        
        getUserDataAsync()
    }, [])
    
    if (isLoading) {
    	return <div>Loading ...</div>
    }
    
    if (!profileData) {
    	return <ErrorUI />
    }
    
    return (
    	<div>
        	...User Profile
        </div>
    )
}

Quando il componente viene montato, avvia una richiesta GET alla nostra API per ricevere i dati dell'utente per il corrispondente userId che otterremo dalle prop.

Usare try-catch ci aiuta a individuare qualsiasi errore che può capitare durante la chiamata dell'API. Ad esempio, potrebbe essere una risposta 404 o 500 dall'API.

Una volta che un errore viene individuato, siamo all'interno del blocco catch e riceviamo l'errore come parametro. Adesso siamo in grado di accedere al servizio di logging e aggiornare lo stato di conseguenza per mostrare un errore personalizzato nell'interfaccia utente.

Usare la libreria react-error-boundary library (raccomandazione personale)

In pratica, questa libreria fonde le due tecniche precedenti. Semplifica la gestione degli errori in React e rimedia alle limitazioni del componente ErrorBoundary che abbiamo visto.

import { ErrorBoundary } from 'react-error-boundary'

const ErrorComponent = ({ error, resetErrorBoundary }) => {
  
  return (
    <div role="alert">
      <p>Something went wrong:</p>
      <pre>{error.message}</pre>
    </div>
  )
}

const App = () => {
  const logError = (error, errorInfo) => {
  	errorService.log({ error, errorInfo })
  }
  

  return (
    <ErrorBoundary 
       FallbackComponent={ErrorComponent}
       onError={logError}
    >
       <MyErrorProneComponent />
    </ErrorBoundary>
  );
}

La libreria esporta un componente costituito dalle funzionalità ErrorBoundary che abbiamo già conosciuto e vi aggiunge alcune sfumature. Consente di passare un FallbackComponent come prop che dovrebbe essere renderizzato una volta individuato l'errore.

Espone anche una prop onError che fornisce una funzione callback quando si verifica un errore. È ottima da usare per registrare l'errore in un servizio di logging.

Ci sono alcune altre prop che sono piuttosto utili. Se vuoi saperne di più, dai pure un'occhiata alla documentazione.

Questa libreria fornisce un hook chiamato useErrorHandler() il cui scopo è individuare ogni errore oltre i confini come i gestori di eventi, nel codice asincrono e nel rendering lato server.

Registrare gli errori

Individuare e gestire efficacemente gli errori è una parte, registrarli in modo appropriato è un'altra. Una volta che hai impostato la gestione degli errori nella tua applicazione, devi registrarli in modo persistente.

Il modo usato più di frequente è il caro vecchio console.log. Potrebbe andare bene durante lo sviluppo, quando vuoi un log rapido. Ma una volta che l'applicazione viene distribuita in produzione, diventa inutile. Questo perché l'errore è visibile soltanto all'interno del browser dell'utente, il che è assolutamente inefficace.

Per registrare gli errori in produzione, in quanto sviluppatore, vuoi vedere gli errori in un posto dedicato per poterli sistemare.

Per questa ragione abbiamo bisogno di un servizio di logging, creato da noi o da terze parti.

Quando usiamo servizi di logging di terze parti, il mio suggerimento personale è senza dubbio Sentry. Quindi ti consiglio vivamente di dargli un'occhiata.

☝️ Mantenere una chiave unica in tutta la tua app

Mappando un array per renderizzare i suoi dati, devi sempre definire una proprietà chiave per ogni elemento. Una pratica comune che ho visto e usato in prima persona è utilizzare semplicemente l'indice di ogni elemento come chiave.

Usare la prop chiave è importante perché aiuta React a identificare l'esatto elemento che viene cambiato, aggiunto o rimosso. Immagina che lo stato del tuo componente cambi e che l'interfaccia utente debba essere ri-renderizzata con il nuovo stato. React ha bisogno di capire la differenza tra l'interfaccia precedente e quella nuova per poterla aggiornare.

"Quali elementi sono stati aggiunti/rimossi o sono cambiati?"

Per questo la chiave deve essere unica. Usare l'indice dell'elemento corrente assicura che sia unica solo in questa particolare funzione di mappatura.

Potrebbe avere questo aspetto, se avessimo deciso di mostrare i punteggi di una squadra di football di questa stagione:

const SeasonScores = ({ seasonScoresData }) => {
	
    return (
    	<>
        	<h3>Our scores in this season:<h3>
        	{seasonScoresData.map((score, index) => (
    			<div key={index}>
        			<p>{score.oponennt}</p>
        			<p>{score.value}</p>
        		</div>
    		))}
        </>
    )
}

Mentre è unica solamente all'interno di questa funzione di mappatura, ciò può portare a potenziali problemi. È molto comune avere più di una funzione di mappatura all'interno di un'applicazione React o anche in un componente.

Assumiamo di avere un'altra funzione di mappatura nel nostro componente per visualizzare l'elenco attuale:

const SeasonScores = ({ seasonScoresData, currentRoster }) => {
	
    return (
    	<>
        	<h3>Our scores in this season:<h3>
        	{seasonScoresData.map((score, index) => (
    			<div key={index}>
        			<p>{score.oponennt}</p>
        			<p>{score.value}</p>
        		</div>
    		))}
            </br>
			<h3>Our current roster:<h3>
        	{currentRoster.map((player, index) => (
            	<div key={index}>
                	<p>{player.name}</p>
                    <p>{player.position}</p>
                    <p>{player.jerseyNumber}</p>
                    <p>{player.totalGoals}</p>
                </div>
    		))}
        </>
    )
}

Ci ritroviamo nella situazione in cui usiamo molte chiavi due volte all'interno del nostro componente. Consideriamo di avere 14 elementi all'interno di seasonScoresData e 30 in currentRoaster. Abbiamo usato i numeri da 0 a 13 due volte come chiave. Ora non ci stiamo più attenendo allo scopo di avere chiavi uniche.

Ciò può portare a potenziali problemi perché React potrebbe ri-renderizzare soltanto un elemento e omettere l'altro. Oppure può portare a inefficienza nell'aggiornamento dell'albero dell'interfaccia. Dai un'occhiata ai post consigliati alla fine di questa sezione per avere degli esempi più dettagliati.

Per evitare questo comportamento indesiderato, assicurati di usare sempre chiavi uniche in tutta l'applicazione. Idealmente ogni elemento nell'array dovrebbe avere il proprio id univoco da utilizzare. Ma questo non è sempre il caso, quindi puoi usare una libreria esterna come uuidv4 per generare id univoci.

Con questo in mente e con l'assunzione che ogni elemento in entrambi gli array ha una proprietà id, il componente dovrebbe avere questo aspetto:

const SeasonScores = ({ seasonScoresData, currentRoster }) => {
	
    return (
    	<>
        	<h3>Our scores in this season:<h3>
        	{seasonScoresData.map((score, index) => (
    			<div key={score.id}>
        			<p>{score.oponennt}</p>
        			<p>{score.value}</p>
        		</div>
    		))}
            </br>
			<h3>Our current roster:<h3>
        	{currentRoster.map((player, index) => (
            	<div key={player.id}>
                	<p>{player.name}</p>
                    <p>{player.position}</p>
                    <p>{player.jerseyNumber}</p>
                    <p>{player.totalGoals}</p>
                </div>
    		))}
        </>
    )
}

Se vuoi andare più a fondo, puoi leggere questo post (risorsa in inglese) sull'argomento.

Suggerimenti per scrivere del codice React migliore – La ciliegina sulla torta

Vorrei paragonare questa guida al processo di costruzione di una casa. La prima parte, Imparare gli elementi fondamentali di React, corrisponde alle solide fondamenta su cui costruisci la tua applicazione. La seconda, Come realizzare dei componenti React puliti, prestanti e manutenibili, è per costruire i muri.

Questa sezioni è sostanzialmente il tetto che va a completare la casa. Ecco perché l'ho chiamata La ciliegina sulla torta. Contiene suggerimenti più dettagliati.

La maggior parte di queste pratiche sono più opzionali delle precedenti, ma possono fare la differenza se le utilizzi nel modo appropriato.

🪄 Implementare prima l'hook useReducer

Probabilmente uno degli hook usati più di frequente in React è useState. Nel tempo, ho creato e visto componenti con un sacco di stati differenti. Quindi è naturale che siano inondati da hook useState.

const CustomersMap = () => {
  const [isDataLoading, setIsDataLoading] = useState(false)
  const [customersData, setCustomersData] = useState([])
  const [hasError, setHasError] = useState(false)
  const [isHovered, setIsHovered] = useState(false)
  const [hasMapLoaded, setHasMapLoaded] = useState(false)
  const [mapData, setMapData] = useState({})
  const [formData, setFormData] = useState({})
  const [isBtnDisabled, setIsBtnDisabled] = useState(false)
  
  ...
  
  return ( ... )
}

Avere molti hook useState diversi è sempre un segno importante che la dimensione e quindi la complessità di un componente sta crescendo.

Se puoi creare dei sotto-componenti più piccoli in cui trasferire alcuni stati e del JSX, si tratta di un'ottima idea, così da ripulire gli hook useState e il JSX in un colpo.

Nell'esempio qui sopra, potremmo mettere gli ultimi due stati in un componente separato che gestisce tutti gli stati e il JSX che riguardano un modulo.

Ma ci sono situazioni in cui ciò non ha senso e devi mantenere tutti questi stati differenti in un solo componente. Per migliorare la leggibilità del componente, esiste l'hook useReducer.

La documentazione ufficiale di React riporta:

useReducer è solitamente da preferire a useState quando si ha una logica di stato complessa che coinvolge sotto-valori multipli o quando lo stato successivo dipende dal precedente. useReducer consente anche di ottimizzare le prestazioni per i componenti che attivano aggiornamenti profondi perché è possibile passare dei messaggi invece di callback.

Avendo questo in mente, il componente potrebbe avere questo aspetto usando useReducer:

// STATO INIZIALE
const initialState = {
  isDataLoading: false,
  customerData: [],
  hasError: false,
  isHovered: false,
  hasMapLoaded: false,
  mapData: {},
  formdata: {},
  isBtnDisabled: false
}

// REDUCER
const reducer = (state, action) => {
  switch (action.type) {
    case 'POPULATE_CUSTOMER_DATA':
      return {
        ...state,
        customerData: action.payload
      }
    case 'LOAD_MAP':
      return {
        ...state,
        hasMapLoaded: true
      }
    ...
    ...
    ...
    default: {
      return state
    }	
  }
}

// COMPONENTE
const CustomersMap = () => {
  const [state, dispatch] = useReducer(reducer, initialState)
  
  ...
  
  return ( ... )
}

Il componente stesso ha un aspetto più pulito e possiede anche alcuni vantaggi come puoi vedere nella documentazione. Se sei abituato a Redux, il concetto di reducer e di come viene costruito non ti è nuovo.

La mia regola personale è di implementare l'hook useReducer se un componente supera i quattro hook useState oppure se lo stato stesso è più complesso di un semplice booleano, ad esempio. Potrebbe trattarsi di un oggetto per un modulo con dei livelli più profondi all'interno.

🔌 Usare scorciatoie per prop booleane

Ci sono spesso situazioni in cui si passa una prop booleana a un componente. Ho visto molti sviluppatori fare così:

<RegistrationForm hasPadding={true} withError={true} />

Ma non è necessario farlo necessariamente così perché la ricorrenza di una prop stessa è truthy (se la prop viene passata) o falsy (se è mancante).

Ecco un approccio più chiaro:

<RegistrationForm hasPadding withError />

👎 Evitare le parentesi graffe per le prop stringhe

Un caso di utilizzo simile a quello visto nel suggerimento precedente è l'utilizzo di prop stringhe:

<Paragraph variant={"h5"} heading={"A new book"} />

Non occorre usare le parentesi graffe in questo caso perché puoi usare direttamente delle stringhe all'interno delle prop. Quando vuoi attribuire un className a un elemento JSX è più probabile che tu lo faccia direttamente come una stringa.

Quando vuoi usare un'espressione JavaScript diversa da una stringa, ti servono le parentesi graffe. Ad esempio, se vuoi usare un numero o un oggetto. Questo è vero anche per le stringhe template (non restarci invischiato come ho fatto molte volte, haha).

Con delle normali stringhe, come nell'esempio, diventerebbe così:

<Paragraph variant="h5" heading="A new book" />

🧹 Cancellare attributi non-html distribuendo le prop

Vediamo un esempio rapido:

const MainTitle = ({ isBold, children, ...restProps }) => {
	
  return (
    <h1 
      style={{ fontWeight: isBold ? 600 : 400 }}
      {...restProps}
    >
      {children}
    </h1>
  )
}

Abbiamo appena creato un componente che renderizza un tag h1, estratto delle prop e distribuito tutte le altre potenziali prop nel tag h1. Per ora tutto ok.

Adesso siamo in grado di usarlo in altri componenti e possiamo attivare manualmente se l'h1 dovrebbe essere in grassetto o no:

// CON TITOLO IN GRASSETTO
const IndexPage = () => {
	
  return (
    <>
      <MainTitle isBold>
        Welcome to our new site!
      </MainTitle>
      ...
    </>
  )
}

// SENZA TITOLO IN GRASSETTO
const AboutPage = () => {
	
  return (
    <>
      <MainTitle>
      	Some quick lines about us!
      </MainTitle>
      ...
    </>
  )
}

Finora, tutto funziona perfettamente senza errori o avvisi. La parte interessante inizia adesso, quando usiamo altre prop che sono direttamente distribuite al tag h1.

Quando usiamo degli attributi HTML validi come id o class, tutto funziona senza errori (ricorda --> "className" diventa "class"):

const IndexPage = () => {
	
  return (
    <>
      <MainTitle isBold id="index-main-title" className="align-left">
        Welcome to our new site!
      </MainTitle>
      ...
    </>
  )
}

Quindi tutte le prop qui sopra saranno aggiunte come attributo per l'h1 perché stiamo usando {...restProps}. Le prop che aggiungiamo e NON estraiamo saranno aggiunte al tag h1.

Questo è ottimo per molti casi ma può essere un problema allo stesso tempo:

// Page Component
const IndexPage = () => {
	
  return (
    <>
      <MainTitle isBold hasPadding>
        Welcome to our new site!
      </MainTitle>
      ...
    </>
  )
}

// MainTitle Component
const MainTitle = ({ isBold, children, ...restProps }) => {
	
  return (
    <h1 
      style={{ 
        fontWeight: isBold ? 600 : 400,
        padding: restProps.hasPadding ? 16 : 0
      }}
      {...restProps}
    >
      {children}
    </h1>
  )
}

Nel codice qui sopra abbiamo aggiunto una nuova prop chiamata hasPadding al componente MainTitle, che è opzionale. All'interno del componente non la estraiamo dalle prop e la chiamiamo tramite restProps.hasPadding.

Il codice funziona, ma aprendo il tuo browser riceverai un avviso che hasPadding non è un attributo HTML che stai tentando di applicare al tag h1. Questo per via di {...restProps} sul tag h1 e perché non stiamo estraendo hasPadding come isBold, ad esempio.

Per evitare tutto ciò, estrai sempre tutti gli attributi non-HTML dalle prop, così da assicurarti che ci siano solo attributi HTML validi in restProps che stai distribuendo a un elemento JSX.

Nel nostro esempio sarebbe così:

// Page Component
const IndexPage = () => {
	
  return (
    <>
      <MainTitle isBold hasPadding>
        Welcome to our new site!
      </MainTitle>
      ...
    </>
  )
}

// MainTitle Component
const MainTitle = ({ isBold, children, hasPadding, ...restProps }) => {
	
  return (
    <h1 
      style={{ 
        fontWeight: isBold ? 600 : 400,
        padding: hasPadding ? 16 : 0
      }}
      {...restProps}
    >
      {children}
    </h1>
  )
}

Molti di questi avvisi possono intasare la console nel browser senza che siano necessari, il che può essere sgradevole. Specialmente se stai facendo debugging.

Per ottenere più informazioni su questo argomento e altri modi per risolvere il problema, consulta questa sezione della documentazione.

🔥 Usare le estensioni snippet

In Visual Studio Code, ad esempio, sono disponibili alcune estensioni che migliorano la tua produttività. Tra queste ci sono le estensioni snippet.

Il loro grande vantaggio è che non devi scrivere tutto il codice boilerplate di nuovo. Immagina di star creando molti nuovi componenti a di dover digitare tutto ancora e ancora:

import React from 'react'

const GoogleMap = () => {

}

export default GoogleMap

Con questi snippet devi soltanto digitare rafce, ad esempio, premere tab ed ecco che hai lo stesso codice boilerplate. È davvero un salva tempo e accelera lo sviluppo.

Ma usali con attenzione! Non consiglio di usare snippet a tutti gli sviluppatori. Secondo me, i principianti non dovrebbero usare alcuno snippet e dovrebbero scrivere il boilerplate a mano. Quando lo fai, ottieni una memoria muscolare che esprime tutto ciò che hai imparato.

Se lo hai fatto così spesso da poterlo scrivere nel sonno e diventa noioso, allora è il momento giusto di usare gli snippet.

Ecco i miei consigli:

❌ Scrivere un frammento quando non è necessario un div

Un componente React può renderizzare un solo tag HTML alla volta nella sua radice. Quindi volendo renderizzare due elementi adiacenti, otterrai il famoso errore Adjacent JSX elements must be wrapped in an enclosing tag (gli elementi JSX adiacenti devono essere racchiusi in un tag).

const InfoText = () => {
	
  // Darà un errore
  return (
    <h1>Welcome!</h1>
    <p>This our new page, we're glad you're are here!</p>
  )
}

Quindi, cosa puoi fare? Racchiudi semplicemente l'output in un frammento, che soddisfa React e non aggiunge nessun elemento extra nel browser.

const InfoText = () => {
	
  return (
  	<>
      <h1>Welcome!</h1>
      <p>This our new page, we're glad you're are here!</p>
    </>
  )
}

Naturalmente è possibile risolvere tutto ciò anche con un tag div. Ma usare un div dopo l'altro crea una cosa chiamata inferno dei div nel browser, in cui ci sono un sacco di tag div annidati senza senso.

Quindi ogni volta che devi usare un tag per racchiudere qualcosa in React ma non ti serve necessariamente un tag HTML, allora usa semplicemente un frammento.

👈 Integrare i tag a chiusura automatica quando i figli non sono necessari

Dalla mia esperienza posso dire che questo suggerimento è spesso trascurato, ma rende del codice molto più pulito con uno sforzo minimo.

In React, hai la possibilità di passare elementi figli a un componente, che poi sono disponibili al componente tramite la sua proprietà figlia. Questi componenti sono spesso chiamati componenti compositi.

In questo caso, devi utilizzare un tag di apertura e un tag di chiusura, naturalmente:

<NavigationBar>
  <p>Home</p>
  <p>About</p>
  <p>Projects</p>
  <p>Contact</p>
</NavigationBar>

Ma quando non sono necessari dei figli, non ha senso usare un tag di apertura e un tag di chiusura, vero?

<NavigationBar></NavigationBar>

Invece di fare così, consiglio di usare il componente come un elemento a chiusura automatica come il tag HTML input, che allo stesso modo non accetta figli.

<NavigationBar />

Ha un aspetto molto più pulito, vero?

✅ Seguire le convenzioni di nomenclatura più comuni

Il senso alla base delle convenzioni di nomenclatura è che è più semplice riconoscere il tipo di elemento con cui hai a che fare, oltre ad avere qualcosa nel tuo codice in comune con la comunità.

Da questo punto di vista, ci sono due principali convenzioni di nomenclatura che coinvolgono React e JavaScript che dovresti seguire:

Usare PascalCase in componenti, interfacce o alias di tipo

// Componente React
const LeftGridPanel = () => {
  ...
}

// Interfaccia Typescript
interface AdminUser {
  name: string;
  id: number;
  email: string;
}

// Alias di tipo Typescript
type TodoList = {
	todos: string[];
    id: number;
    name: string;
}

Usare camelCase per tipi di dati JavaScript come variabili, array, oggetti, funzioni e così via

const getLastDigit = () => { ... }

const userTypes = [ ... ]

Dare nomi ai componenti React in PascalCase è molto importante, perché se hai un linter configurato per React, ma i nomi dei tuoi componenti sono in camelCase e stai usando degli hook al loro interno, otterrai un messaggio di avvertimento tutte le volte che gli hook sono consentiti solo nei componenti. Questo perché il linter riconosce un componente React se è scritto in PascalCase oppure no.

Può essere spiacevole, ma si sistema rapidamente adottando le convenzioni stabilite.

🧨 Ripulire il codice per prevenire attacchi XSS

Magari ti sei trovato in una situazione in cui occorre usare la proprietà dangerouslySetInnerHTML su un elemento in React. Sostanzialmente è l'equivalente di React di innerHTML che potresti conoscere da JavaScript.

Quindi usandola puoi impostare direttamente l'HTML da React.

Consideriamo il seguente esempio, in cui vogliamo renderizzare una stringa HTML all'interno di un div. La stringa può venir fuori da un bell'editor di testo in cui c'è già dell'HTML formattato.

const Markup = () => {
  const htmlString = "<p>This is set via dangerouslySetInnerHTML</p>"
  
  return (
    <div dangerouslySetInnerHTML={{ __html: htmlString }} />
  )
}

Il termine dangerously è scelto intenzionalmente. Usare questa proprietà può permettere attacchi di cross-site-scripting (XSS). Quindi è obbligatorio che il codice venga prima ripulito.

Un'ottima libreria che può aiutarti in questo è dompurify.

Conclusione

Wow, è stato divertente, vero? Ho cercato di fare del mio meglio per far uscire tutto quello che avevo accatastato nella mia testa in passato. Quello che mi ha spinto a scrivere questa guida è condividere la mia esperienza con te in modo da farti evitare dei momenti difficili durante lo studio e lo sviluppo con React.

Naturalmente potrebbero esserci delle buone pratiche che consideri più importanti e che potrei aver tralasciato. Ottimo. Mi piacerebbe sentire da te quali sono per poterle aggiungere a questa guida.

Ricorda, si tratta sempre di adattarsi a ciò che utile. Quindi non dare tutto per scontato e pensa a cosa potrebbe esserti utile nella situazione in cui ti trovi. Poi puoi aggiungerlo al tuo elenco di buone pratiche.

Puoi seguire il mio percorso di sviluppo e ottenere molti altri utili consigli sulla vita da sviluppatore sul mio profilo Instagram. Sono sempre disponibili ad aiutare e sono felice di ricevere feedback. Sentiti libero di contattarmi.

Quando gestisci della logica con JavaScript, potresti aver bisogno di confrontare due array per vedere se sono uguali oppure no.

In pratica, non dovrebbe essere difficile e potresti pensare di utilizzare sia l'operatore di uguaglianza (doppio uguale, ==) che di uguaglianza stretta (triplo uguale, ===). Ma sfortunatamente non puoi farne uso in questo caso.

let array1 = [11, 22, 33];
let array2 = [11, 22, 33];

console.log(array1 == array2); //false
console.log(array1 === array2); //false

Questo accade perché gli array JavaScript sono di tipo Object (oggetto):

let arrayType = typeof(array1);
console.log(arrayType); //"Object"

Gli oggetti non vengono confrontati in base ai loro valori ma secondo i riferimenti alle variabili:

console.log(array1[0] == array1[0]); //true
console.log(array1[1] === array1[1]); //true

Ma questo non è ciò che desideri. Invece, vuoi essere in grado di confrontare i due array direttamente e restituire un solo valore booleano senza dover verificare ogni elemento uno alla volta.

In questo articolo, imparerai i vari modi con cui puoi confrontare due array in JavaScript per vedere se sono uguali oppure no.

Come confrontare due array convertendoli in stringhe

Un approccio comune e piuttosto diretto che puoi usare per confrontare due array è convertirli in forma di stringa.

Esistono due metodi diversi che puoi usare: puoi decidere di convertire gli array in testo JSON usando il metodo JSON.stringify(), oppure puoi usare il metodo .toString() per restituire gli array come una stringa.

Nota: questi metodi sono diversi, come puoi vedere di seguito:

let array = [11, 22, 33];
console.log(JSON.stringify(array)); //"[11,22,33]"
console.log(array.toString()); //"11,22,33"

Metodo 1: come usare JSON.stringify()

Questo metodo consente di serializzare ogni array convertendolo in una stringa JSON. In seguito, puoi confrontare le due stringhe JSON.

let array1 = [11, 22, 33];
let array2 = [11, 22, 33];

console.log(JSON.stringify(array1) === JSON.stringify(array2)); //true

Possiamo anche decidere di creare una funzione riutilizzabile che ci aiuta a confrontare due array che le passiamo:

const compareArrays = (a, b) => {
  return JSON.stringify(a) === JSON.stringify(b);
};

let array1 = [11, 22, 33];
let array2 = [21, 22, 23];
let array3 = [11, 22, 33];

console.log(compareArrays(array1, array2)); //false
console.log(compareArrays(array1, array3)); //true

Metodo 2: come usare .toString()

Simile a JSON.stringify(), questo metodo converte ogni tipo di dato in una stringa e dunque anche gli oggetti in stringhe.

let array1 = [11, 22, 33];
let array2 = [11, 22, 33];

console.log(array1.toString() === array2.toString()); //true

Possiamo anche decidere di creare una funzione riutilizzabile che ci aiuta a confrontare due array che le passiamo:

const compareArrays = (a, b) => {
  return a.toString() === b.toString();
};

let array1 = [11, 22, 33];
let array2 = [21, 22, 23];
let array3 = [11, 22, 33];

console.log(compareArrays(array1, array2)); //false
console.log(compareArrays(array1, array3)); //true

Nota: dovresti utilizzare il metodo JSON.stringify(), dato che serializza soltanto l'array JavaScript. L'array mantiene ancora la forma di un array, ma viene elaborato in modo da diventare la versione stringa di un array.

Come confrontare due array iterando sui loro valori

I metodi appena visti falliscono in alcuni casi. Ad esempio, quando un array ha un valore null e un altro ha un valore undefined, e utilizziamo l'uguaglianza stretta, otteniamo false di default – che è corretto:

console.log(null === undefined); //false

Ma quando usiamo i metodi JSON.Strigify() o .toString() otteniamo true, anche se non dovremmo:

let array1 = [11, null, 33];
let array2 = [11, undefined, 33];

console.log(JSON.stringify(array1) === JSON.stringify(array2)); //true
console.log(array1.toString() === array2.toString()); //true

Un approccio migliore potrebbe essere confrontare la lunghezza degli array e poi iterare sui valori e confrontare ogni elemento.

Metodo 1: usare every()

Il metodo every() consente di eseguire una funzione su ogni elemento di un array. Questa funzione viene detta funzione callback. Ha accesso ad alcuni parametri di base come elemento, indice e altro ancora, che possono essere usati al suo interno:

// Sintassi
array.every((valoreCorrente, indice, array)=> { ... })

In questo metodo, testeremo prima se la lunghezza dei due array è comparabile. Poi itereremo su uno degli array usando gli indici per confrontare i suoi elementi con quelli del secondo array:

const compareArrays = (a, b) =>
  a.length === b.length &&
  a.every((element, index) => element === b[index]);

let array1 = [11, 22, 33];
let array2 = [21, 22, 23];
let array3 = [11, 22, 33];

console.log(compareArrays(array1, array2)); //false
console.log(compareArrays(array1, array3)); //true

E quando abbiamo null e undefined come elementi degli array, sarà possibile individuare che non sono lo stesso valore:

const compareArrays = (a, b) =>
  a.length === b.length && a.every((element, index) => element === b[index]);

let array1 = [11, null, 33];
let array2 = [21, 22, 23];
let array3 = [11, undefined, 33];

console.log(compareArrays(array1, array2)); //false
console.log(compareArrays(array1, array3)); //false

Metodo 2: usare un loop for

Il metodo every() ha una sintassi migliore. Tuttavia, un altro modo in cui possiamo implementare questo approccio è usare un altro metodo di iterazione come un loop for, forEach() o map() insieme a delle istruzioni if. Potrebbero risultato più facili da afferrare per un principiante.

const compareArrays = (a, b) => {
  if (a.length !== b.length) return false;
  else {
    // Confrontiamo ogni elemento dell'array
    for (var i = 0; i < a.length; i++) {
      if (a[i] !== b[i]) {
        return false;
      }
    }
    return true;
  }
};

let array1 = [21, null, 33];
let array2 = [21, 22, 23];
let array3 = [21, undefined, 33];
let array4 = [21, 22, 23];

console.log(compareArrays(array1, array2)); //false
console.log(compareArrays(array1, array3)); //false
console.log(compareArrays(array2, array4)); //true

In entrambi i metodi precedenti, occorre prima confrontare le lunghezze, visto che se non sono uguali, vuol dire automaticamente che gli array non sono uguali e possiamo restituire false.

Se le lunghezze sono uguali, allora iniziamo a verificare ogni elemento. Viene restituito false non appena due elementi allo stesso indice nei due array sono diversi.

Conclusione

In questo articolo hai imparato a confrontare due array in JavaScript usando due approccio diversi.

Si tratta di convertire gli array in forma di stringa prima di confrontarli oppure di iterare sugli elementi per confrontarne i valori per avere un confronto più dettagliato.

Nota: il doppio uguale verifica se i valori sono uguali, mentre il triplo uguale verifica se i valori e il loro tipo di dato sono uguali. Qui puoi leggere altro sui due tipi di uguaglianza.

Divertiti a programmare!

Probabilmente, in JavaScript hai visto dei segni di uguale doppi e tripli. Ma che cosa significano?

In breve: == effettua implicitamente una conversione di tipo e === non converte il tipo.

Il doppio uguale (==) verifica soltanto l'uguaglianza dei valori. Effettua implicitamente una conversione di tipo (type coercion). Questo vuol dire che prima di confrontare i valori, converte i tipi delle variabili in modo che corrispondano.

Al contrario, il triplo uguale (===) non effettua conversioni di tipo. Verifica se le variabili confrontate hanno lo stesso valore e sono dello stesso tipo.

Ok – proviamo a comprendere meglio la differenza con alcuni esempi. Cerca di capire quale sarà l'output di ognuno.

Esempio 1:

const foo = "test" 
const bar = "test"  

console.log(foo == bar) //true
console.log(foo === bar) //true                            

Il valore e il tipo di foo e bar sono uguali. Di conseguenza il risultato è true per entrambi.

Esempio 2:‌

const number = 1234 
const stringNumber = '1234'  

console.log(number == stringNumber) //true
console.log(number === stringNumber)  //false                                   

Il valore di number e di stringNumber sembra lo stesso. Tuttavia, il tipo di number è number e il tipo di stringNumber è string. Anche se i valori sono gli stessi, non lo è il tipo. Dunque il confronto tramite == restituisce true, ma quando il confronto avviene per il valore e il tipo, il risultato è false.

Esempio 3:

console.log(0 == false) //true
console.log(0 === false) //false                  

Spiegazione: stesso valore, tipo diverso. Conversione di tipo.

Questo è un caso interessante. Il valore 0 se confrontato con false risulta uguale. Ciò avviene perché 0 e false hanno lo stesso valore per JavaScript, ma se confrontati per valore e tipo, il risultato è falso perché 0 è di tipo number e false è di tipo boolean.

Esempio 4:

const str = ""

console.log(str == false) //true
console.log(str === false) //false

Il valore di una stringa vuota e false sono uguali in JavaScript. Quindi, == restituisce true. Tuttavia il loro tipo è diverso e quindi === restituisce false.

Quando dovresti usare == e quando ===?

Se hai dubbi, utilizza ===. Ti eviterà un sacco di potenziali bug.

Se ti trovi in un caso di utilizzo in cui puoi essere tollerante riguardo al tipo di dato in entrata, allora usa ==. Ad esempio, se una API accetta sia "true" che true dal client, usa ==. In breve, non usare == a meno che non ci sia una ragione per farlo.

Ecco un'utile tabella della verità come riferimento, in cui puoi vedere quanto è complicata l'uguaglianza in JavaScript:

Se ti è piaciuto questo articolo, seguimi su twitter per altri contenuti.

In questo articolo spiegherò come usare i nuovi metodi per array – flat() e flatMap() – introdotti con ES2019 (EcmaScript 2019). Puoi usare questi metodi per "appiattire" degli array.

Si tratta di metodi molto utili e semplici da usare. Sarà davvero molto bello utilizzare questi metodi nel tuo prossimo progetto. Prendi una tazza di tè e partiamo.

Prerequisiti

Per seguire questo tutorial dovresti avere familiarità con il concetto di array in JavaScript.

Cos'è un array?

Un oggetto array è una struttura di dati usata in diversi linguaggi di programmazione per contenere insiemi di dati.

Esempio di un array in JavaScript

const array = [1, 2, 3, true, null, undefined];

console.log(array);

// output atteso
1, 2, 3, true, null, undefined

Nel codice soprastante, abbiamo assegnato una variabile chiamata arr, memorizzando al suo interno diversi elementi/dati di vario tipo.

Il primo elemento, che è 1, si trova all'indice 0. L'ultimo elemento, undefined, si trova all'indice 5.

Non dimenticare che l'indicizzazione degli array parte da zero, quindi l'indice del primo elemento è zero.

Caratteristiche degli array in JavaScript

• Gli array sono indicizzati in base zero: questo vuol dire semplicemente che il primo elemento di un array si trova all'indice zero. L'indice corrisponde alla posizione. In JavaScript e in altri linguaggi di programmazione simili, il termine corretto da usare è indice e non posizione.
• Gli array in JavaScript possono contenere diversi tipi di dati: gli array JavaScript possono contenere un miscuglio di valori come numeri, stringhe, booleani, null e via dicendo.
• JavaScript crea copie superficiali: ciò significa che l'array e la sua copia puntano agli stessi valori – e modificando la copia puoi alterare anche l'array originale.

Nuovi metodi per array in JavaScript

Gli array sono una delle strutture di dati più comuni in JavaScript.

Esistono diversi metodi per array che puoi usare per facilitare delle operazioni e renderti la vita più semplice. Alcuni metodi sono reduce(), filter(), map(), flat(), flatMap(), ma ce ne sono molti altri.

In questo articolo non parleremo di tutti i metodi per array usati in JavaScript. Invece, esamineremo i nuovi metodi flat() e flatMap() che puoi usare per convertire un array in un nuovo array.

Come usare il metodo flat in JavaScript

Puoi usare il metodo flat per convertire un array in un nuovo array. Questo avviene prendendo i sotto-array contenuti e concatenandoli in un singolo array.

Un aspetto importante di questo metodo è che puoi trasformare l'array originale in un altro array in base alla sua profondità. Questo metodo è davvero utile perché rende il calcolo di questa operazione molto più semplice.

Esempi del metodo flat()

Come impostare il parametro di profondità

array.flat(profondità);

Il valore del parametro profondità è 1 di default e puoi non esplicitarlo. Il parametro prende un numero come tipo di dato.

Esempio 1 del metodo flat()

array.flat(1) è uguale a array.flat().

array.flat(2);

Qui sopra, la profondità è 2.

const arr = ["mon", "tues", ["wed", "thurs", ["fri", "sat"]], "sun"] ;

console.log(arr.flat());

// output atteso 
["mon", "tues", "wed", "thurs", Array ["fri", "sat"], "sun"];

Cosa sta succedendo in questo codice?

L'array contiene due sotto-array, che sono ["wed", "thurs", ["fri", "sat"]].

Utilizziamo il metodo flat() sull'array chiamato arr per concatenare il primo sotto-array, dato che non abbiamo specificato alcun valore di profondità all'interno del metodo. Ricorda che il valore predefinito di profondità è 1.

Riesci a indovinare quale sarebbe l'array se il valore della profondità fosse 2?

Esempio 2 del metodo flat()

const arr = [1, 2, [3, 4, 5], 6, 7];

console.log(arr.flat());

// output atteso 
[1, 2, 3, 4, 5, 6, 7]

Nel codice qui sopra, l'array contiene il sotto-array [3, 4, 5].

Utilizziamo il metodo flat() sull'array chiamato arr per concatenare i due array insieme in un singolo array.

Esempio 3 del metodo flat()

//esempio con profondità 2 
const arr2 = [[[1, 2], 3, 4, 5]] ;

console.log(arr2.flat(2));

// output atteso
[1, 2, 3, 4, 5]

Nel codice qui sopra, l'array chiamato arr2 contiene due sotto-array.

Possiamo usare il metodo flat() su arr2 per concatenare i due array in un singolo array perché utilizziamo il valore di profondità 2 all'interno del metodo flat(2). Dai un'occhiata qui sopra e vedi cosa fa il valore della profondità.‌

Questo è un ottimo metodo per concatenare gli elementi di array ricorsivamente.

Come usare il metodo flatMap in JavaScript

Il metodo flatMap() usa una combinazione dei metodi map() e flat() per svolgere le sue operazioni.

flatMap() itera sugli elementi di un array e li concatena in un solo livello. flatMap() accetta una funzione callback che prende come parametro l'elemento corrente dell'array originale.

Esempio del metodo flatMap()

const arr3 = [1, 2, [4, 5], 6, 7, [8]] ;

console.log(arr3.flatMap((element) => element)); 

// output atteso
[1, 2, 4, 5, 6, 7, 8]

Nel codice qui sopra, l'array chiamato arr3 contiene due sotto-array distinti.

Abbiamo usato il metodo flatMap() sull'array passando una funzione callback, (element) => element, che itera sugli elementi dell'array e li concatena in un singolo array.

A volte ti troverai in una situazione in cui l'array ha una profondità maggiore e vuoi cambiare l'array in un solo livello di base. In questo caso, dovrai usare il metodo flat() subito dopo il metodo flatMap().

Ecco un esempio:

const arr4 = [1, 2, [3, [4, 5, [6, 7]]]] ;

console.log(arr4.flatMap((element) => element).flat(2)) ;

// output atteso 
[1, 2, 3, 4, 5, 6, 7]

Nel codice qui sopra, l'array chiamato arr4 contiene tre sotto-array.

Abbiamo usato il metodo flatMap() sull'array passando una funzione callback, (element) => element, che itera sugli elementi dell'array e li concatena.

Poi abbiamo usato il metodo flat(2) per concatenare ulteriormente l'array in un singolo array passando una profondità di 2.

Fai pratica con questo esempio senza usare il metodo flat(2) e vedi la differenza.

Questo è tutto quello che ti serve per iniziare a usare questo due nuovi metodi per array.

Conclusione

In questo articolo ho parlato brevemente di cosa sono gli array e di come sono utili in JavaScript. Poi abbiamo imparato due nuovi importanti metodi per array, introdotti con ECMAScript 2019, che ti consentono di cambiare l'array originale in un nuovo array.

Si tratta dei metodi flat() e flatMap().

Puoi usare il metodo flat() per concatenare ricorsivamente dei sotto-array in un singolo array. Il metodo flat() prende un valore di profondità come suo parametro, che è opzionale a seconda della profondità dell'array che vuoi "appiattire" (concatenare). Il valore di profondità predefinito del metodo flat() è 1.

flatMap() invece funziona come una combinazione dei metodi map() e flat(). flatMap() itera sugli elementi di un array e li concatena.

Questi due nuovi metodi sono utili se vuoi cambiare un array in un nuovo array. Vale la pena di provarli in uno dei tuoi prossimi progetti, grandi o piccoli che siano.

Altre risorse utili:

• MDN – flatMap()
• MDN – flat()

Quando lavori sul front-end di una pagina web, a volte hai bisogno di centrare un'immagine all'interno di un div (contenitore).

Delle volte può risultare complesso e, a seconda di certe condizioni, a un certo punto un particolare metodo potrebbe non funzionare, lasciandoti in cerca di alternative.

In questo articolo, imparerai come centrare un'immagine in un div con CSS.

Come centrare un div con CSS

Puoi centrare un'immagine in un div in due modi: orizzontalmente e verticalmente. Quando combini questi due metodi, ottieni un'immagine completamente centrata:

Come impostazione predefinita, il contenuto web parte sempre dall'angolo dello schermo in alto a sinistra e procede da sinistra a destra – eccetto per alcune lingue come l'arabo che vanno da destra a sinistra.

Iniziamo vedendo come centrare orizzontalmente un'immagine all'interno di un div. Poi vedremo come centrarla verticalmente. Infine, vedremo come fare entrambe le cose insieme.

Come centrare orizzontalmente un'immagine in un div con text-align

Supponi di avere un div in cui hai posizionato un'immagine in questo modo:

<div class="container">
    <img src="./fcc-logo.png" alt="FCC Logo" />
</div>

E di applicare dei semplici stili CSS in modo che l'immagine sia visibile:

.container {
    width: 200px;
    height: 200px;
    background-color: #0a0a23;
}
.container img {
    width: 100px;
}

Il metodo text-align non funzionerà in tutti i casi, dato che è usato tipicamente per centrare il testo. Ma quando hai un'immagine all'interno di un contenitore al livello di blocco come un div, allora questo metodo funziona:

.container {
    width: 200px;
    height: 200px;
    background-color: #0a0a23;
    text-align: center;
}

.container img {
    width: 100px;
}

A questo scopo, devi aggiungere la proprietà text-align assieme al suo valore center al contenitore e non all'immagine stessa.

Come centrare orizzontalmente un'immagine in un div con margin: auto

Un altro metodo che puoi usare per centrare orizzontalmente un'immagine all'interno di un div (contenitore) è la proprietà margin con il valore auto.

L'elemento prenderà una larghezza (width) specificata, e lo spazio restante sarà diviso equamente tra i margini destro e sinistro.

Di solito questo metodo si applica all'immagine stessa e non al contenitore. Sfortunatamente, questa proprietà da sola non funziona. Per prima cosa, occorre specificare la larghezza che l'immagine dovrà assumere. In questo modo, la larghezza rimanente è nota e può essere divisa equamente.

In secondo luogo, img è un elemento inline e la proprietà margin: auto non influisce sugli elementi inline. Ciò significa che devi prima convertirlo in un elemento al livello di blocco con la proprietà display impostata su block.

.container {
    width: 200px;
    height: 200px;
    background-color: #0a0a23;
}

.container img {
    width: 100px;
    margin: auto;
    display: block;
}

Come centrare orizzontalmente un'immagine in un div con le proprietà position e transform

Un altro metodo che puoi usare per posizionare un'immagine orizzontalmente è la proprietà position insieme alla proprietà transform.

Questo metodo può essere complicato, ma funziona. Devi prima impostare la proprietà position del contenitore su relative e poi quella dell'immagine su absolute.

Una volta fatto ciò, puoi muovere l'immagine in qualsiasi posizione desideri usando le proprietà left, top, bottom o right sull'immagine.

In questo caso, vuoi spostare l'immagine solo per centrarla orizzontalmente. Ciò vuol dire che devi spostare l'immagine con left al 50% o right a -50%:

.container {
    width: 200px;
    height: 200px;
    background-color: #0a0a23;
    position: relative;
}

.container img {
    width: 100px;
    height: 100px;
    position: absolute;
    left: 50%;
}

Ma controllando l'immagine, noterai che non è ancora perfettamente posizionata al centro. Questo perché parte dal 50%, che è la posizione centrale.

In questo caso, devi usare la proprietà transform-translateX per regolarla e centrarla orizzontalmente alla perfezione:

.container {
    width: 200px;
    height: 200px;
    background-color: #0a0a23;
    position: relative;
}

.container img {
    width: 100px;
    height: 100px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

Come centrare orizzontalmente un'immagine in un div con display: flex

Flexbox rende semplice la progettazione di layout strutturali flessibili e responsivi senza usare float o il posizionamento. Possiamo anche usarlo per posizionare un'immagine al centro di un contenitore orizzontalmente tramite la proprietà display impostata sul valore flex.

Ma solo questo non è sufficiente. Occorre anche definire la posizione in cui mettere l'immagine. Ad esempio center, left o magari right:

.container {
    width: 200px;
    height: 200px;
    background-color: #0a0a23;
    display: flex;
    justify-content: center;
}

.container img {
    width: 100px;
    height: 100px;
}

Nota: la proprietà display: flex non è supportata nelle vecchie versioni dei browser. Puoi leggere di più qui. Noterai anche che l'altezza e la larghezza dell'immagine sono definite per assicurare che l'immagine non rimpicciolisca.

E adesso impariamo come centrare un'immagine verticalmente in un div. In seguito vedremo come centrare un'immagine in un div orizzontalmente e verticalmente allo stesso tempo, ottenendo una centratura perfetta.

Come centrare verticalmente un'immagine in un div con display: flex

Allo stesso modo in cui sei stato in grado di centrare orizzontalmente un'immagine con il metodo display: flex, puoi fare lo stesso verticalmente.

Ma questa volta, non dovrai usare la proprietà justify-content. Invece userai la proprietà align-items:

.container {
    width: 200px;
    height: 200px;
    background-color: #0a0a23;
    display: flex;
    align-items: center;
}

.container img {
    width: 100px;
    height: 100px;
}

Affinché il metodo funzioni, il contenitore deve avere un'altezza (height) specificata, che verrà usata per calcolare esattamente dove si trova il centro.

Come centrare verticalmente un'immagine in un div con le proprietà position e transform

In modo simile a come hai usato le proprietà position e transform precedentemente per centrare l'immagine orizzontalmente, puoi fare lo stesso verticalmente.

Stavolta, non userai left o right,. Invece userai top o bottom insieme a translateY piuttosto che translateX:

.container {
    width: 200px;
    height: 200px;
    background-color: #0a0a23;
    position: relative;
}

.container img {
    width: 100px;
    height: 100px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

Hai imparato come centrare un'immagine in un div orizzontalmente o verticalmente usando tutti i metodi possibili. Adesso impariamo come centrarla orizzontalmente e verticalmente allo stesso tempo.

Come centrare orizzontalmente e verticalmente un'immagine in un div con display: flex

La proprietà display: flex in combinazione con altre due proprietà consente di centrare l'immagine verticalmente e orizzontalmente.

Per questo metodo dovrai usare le proprietà justify-content e align-items impostate su center:

.container {
    width: 200px;
    height: 200px;
    background-color: #0a0a23;
    display: flex;
    justify-content: center;
    align-items: center;
}

.container img {
    width: 100px;
    height: 100px;
}

Come centrare orizzontalmente e verticalmente un'immagine in un div con le proprietà position e transform

Anche questo è molto simile, in quanto tutto ciò che devi fare è combinare la centratura verticale e orizzontale:

.container {
    width: 200px;
    height: 200px;
    background-color: #0a0a23;
    position: relative;
}

.container img {
    width: 100px;
    height: 100px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
}

Puoi anche combinare translateX e translateY usando translate(x,y):

.container {
    width: 200px;
    height: 200px;
    background-color: #0a0a23;
    position: relative;
}

.container img {
    width: 100px;
    height: 100px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

Conclusione

In questo articolo, hai imparato come centrare un'immagine in un div verticalmente, orizzontalmente oppure verticalmente e orizzontalmente in contemporanea.

Userai spesso il metodo Flexbox per postare un'immagine al centro, dato che il metodo position può distorcere la pagina web e ha un funzionamento ingannevole.

Puoi imparare altro sui metodi di posizionamento CSS qui e sul metodo flexbox qui.

Buona programmazione!

Le espressioni regolari (regex) sono un utile strumento di programmazione. Sono fondamentali per elaborare del testo in modo efficiente. A uno sviluppatore può tornare molto utile sapere come risolvere problemi usando le espressioni regolari, inoltre migliora la produttività.

In questo articolo, imparerai i fondamenti delle espressioni regolari, la loro notazione, come interpretare un semplice pattern regex e come scrivere dei pattern regex tu stesso. Iniziamo!

Cosa sono le espressioni regolari?

Le espressioni regolari sono dei pattern (dei motivi o modelli che corrispondono a specifiche sequenze di testo) che consentono di descrivere, trovare delle corrispondenze o analizzare un testo. Con le espressioni regolari puoi fare cose come trovare e sostituire del testo, verificare che un input di dati corrisponda al formato richiesto e altre cose simili.

Ecco un possibile utilizzo: vuoi verificare che il numero di telefono inserito in un modulo da un utente corrisponda a un formato, diciamo ###-###-#### (dove # rappresenta un numero). Un modo per risolvere questa situazione potrebbe essere:

function isPattern(userInput) {
  if (typeof userInput !== 'string' || userInput.length !== 12) {
    return false;
  }
  for (let i = 0; i < userInput.length; i++) {
    let c = userInput[i];
    switch (i) {
      case 0:
      case 1:
      case 2:
      case 4:
      case 5:
      case 6:
      case 8:
      case 9:
      case 10:
      case 11:
        if (c < 0 || c > 9) return false;
        break;
      case 3:
      case 7:
        if (c !== '-') return false;
        break;
    }
  }
  return true;
}

Alternativamente, possiamo usare un'espressione regolare come questa:

function isPattern(userInput) {
  return /^\d{3}-\d{3}-\d{4}$/.test(userInput);
}

Abbiamo eseguito il refactoring del codice usando regex. Fantastico, vero? Tutto grazie al potere delle espressioni regolari.

Come creare un'espressione regolare

In JavaScript, puoi creare un'espressione regolare in due modi:

• Metodo #1: usando un'espressione regolare letterale, che consiste di un pattern racchiuso tra barre oblique. Puoi scriverla con o senza flag (vedremo a breve cosa vuol dire flag). La sintassi è la seguente:

const regExpLiteral = /pattern/;          // Senza flag

const regExpLiteralWithFlags = /pattern/flag; // Con flag

Le barre oblique /…/ indicano che stiamo creando il pattern di un'espressione regolare, allo stesso modo in cui usiamo le virgolette “ ” per creare una stringa.

• Metodo #2: usando la funzione constructor RegExp. La sintassi è la seguente:

new RegExp(pattern [, flag])

In questo caso il pattern è racchiuso tra virgolette, così come il parametro flag, che è opzionale.

Dunque quando utilizziamo questi due metodi?

Dovresti utilizzare un'espressione regolare letterale quando conosci il pattern al momento della scrittura del codice

D'altro canto, dovresti utilizzare il costruttore Regex se il pattern deve essere creato dinamicamente. Il costruttore regex ti permette di scrivere un pattern usando un template literal, cosa che non è possibile con la sintassi regex letterale.

Cosa sono i flag nelle espressioni regolari?

I flag o modificatori sono caratteri che abilitano funzionalità di ricerca avanzata come la ricerca globale o case-insensitive (che non tiene conto di maiuscole e minuscole). Puoi usarli da soli o congiuntamente. Alcuni di quelli usati comunemente sono:

• g: usato per la ricerca globale – la ricerca non si fermerà dopo la prima corrispondenza.
• i: usato per la ricerca case-insensitive – la corrispondenza può avvenire indipendentemente da maiuscole e minuscole.
• m: usato per la ricerca multi-riga.
• u: usato per la ricerca Unicode.

Diamo un'occhiata ad alcuni pattern di espressioni regolari usando entrambe le sintassi.

Come usare le espressioni regolari letterali:

// Sintassi: /pattern/flag

const regExpStr = 'Hello world! hello there';

const regExpLiteral = /Hello/gi;

console.log(regExpStr.match(regExpLiteral));

// Output: ['Hello', 'hello']

Senza utilizzare il flag i, sarebbe stato restituito solo Hello.

/Hello/ è un esempio di pattern semplice, che consiste di caratteri che devono apparire letteramente nel testo bersaglio. Affinché ci sia corrispondenza, il testo bersaglio deve contenere la stessa sequenza del pattern.

Ad esempio, se riscrivi il testo dell'esempio precedente e provi a effettuare un riscontro:

const regExpLiteral = /Hello/gi;

const regExpStr = 'oHell world, ohell there!';

console.log(regExpStr.match(regExpLiteral));

// Output: null

Ottieni null perché i caratteri nella stringa non appaiono come specificato nel pattern. Quindi un pattern letterale come /hello/ vuol dire esattamente h, seguita da e, seguita da l, seguita da l, seguita da o.

Come usare il costruttore RegExp:

// Sintassi: RegExp(pattern [, flag])

const regExpConstructor = new RegExp('xyz', 'g'); // Con flag -g

const str = 'xyz xyz';

console.log(str.match(regExpConstructor));

// Output: ['xyz', 'xyz']

Qui il pattern xyz viene passato come una stringa, così come il flag. La presenza di xyz viene riscontrata due volte per via del flag -g. Senza di esso avremmo ottenuto solo il primo riscontro.

Possiamo anche passare dei pattern creati dinamicamente come template literal, usando la funzione costruttore. Ad esempio:

const pattern = prompt('Inserisci un pattern');
// Ipotizziamo di aver inserito 'xyz'

const regExpConst = new RegExp(`${pattern}`, 'gi');

const str = 'xyz XYZ';

console.log(str.match(regExpConst)); // Output: ['xyz', 'XYZ']

Come usare i caratteri speciali delle espressioni regolari

Un carattere speciale in un'espressione regolare è un carattere con un significato riservato. Usando i caratteri speciali, puoi fare ben altro che trovare semplicemente una corrispondenza diretta.

Ad esempio, se vuoi trovare un carattere che può o non può apparire una o più volte in una stringa, puoi farlo con dei caratteri speciali. Questi caratteri rientrano in diversi sottogruppi che svolgono funzioni simili.

Diamo un'occhiata a ogni sottogruppo e ai caratteri al loro interno.

Ancoraggi e confini:

Gli ancoraggi (anchor) sono metacaratteri che indicano l'inizio e la fine di una riga del testo in esame. Si utilizzano per imporre la posizione di un confine.

I due caratteri usati sono ^ e $.

• ^ trova la corrispondenza all'inizio di una riga e ancora il pattern letterale al suo inizio. Ad esempio:

const regexPattern1 = /^cat/;

console.log(regexPattern1.test('cat and mouse')); // Output: true

console.log(regexPattern1.test('The cat and mouse')); // Output: false
//perché la riga non inizia con cat

// Senza ^ nel pattern, l'output restituirà true
// perché non abbiamo imposto un confine.

const regexPattern2 = /cat/;

console.log(regexPattern2.test('The cat and mouse')); // Output: true

• $ trova la corrispondenza alla fine di una riga e ancora il pattern letterale alla sua fine. Ad esempio:

const regexPattern = /cat$/;

console.log(regexPattern.test('The mouse and the cat')); // Output: true

console.log(regexPattern.test('The cat and mouse')); // Output: false

I caratteri di ancoraggio ^ e $ trovano la corrispondenza in base alla posizione dei caratteri del pattern e non all'effettiva presenza dei caratteri stessi.

I confini di parole (word boundary) sono metacaratteri che trovano la corrispondenza all'inizio e alla fine di una parola – una sequenza di caratteri alfanumerici. Puoi immaginarli come una versione basata sulle parole di ^ e $.  Puoi usare i metacaratteri b e B per imporre un confine di parola.

• \b trova la corrispondenza all'inizio o alla fine di una parola, a seconda della posizione del metacarattere. Ecco un esempio:

// Sintassi 1: /\b.../ dove ... rappresenta una parola.

// Indica una parola che inizia con il pattern ward
const regexPattern1 = /\bward/gi;

const text1 = 'backward Wardrobe Ward';

console.log(text1.match(regexPattern1)); // Output: ['Ward', 'Ward']

// Sintassi 2: /...\b/

// Indica una parola che finisce con il pattern ward
const regexPattern2 = /ward\b/gi;

const text2 = 'backward Wardrobe Ward';

console.log(text2.match(regexPattern2)); // Output: ['ward', 'Ward']

// Sintassi 3: /\b....\b/

// Indica una parola a sé stante costituita dal pattern ward
const regexPattern3 = /\bward\b/gi;

const text3 = 'backward Wardrobe Ward';

console.log(text3.match(regexPattern3)); // Output: ['Ward']

• \B è l'opposto di \b . Trova corrispondenza in ogni posizione in cui \b non la trova.

Codici per altri metacaratteri:

In aggiunta ai metacaratteri che abbiamo visto, ecco alcuni di quelli usati più di frequente:

• \d – corrisponde a ogni cifra decimale ed è una scorciatoia per [0-9].
• \w – corrisponde a ogni carattere alfanumerico che può essere una lettera, una cifra o un trattino basso. \w è una scorciatoia per [A-Za-z0-9_].
• \s – corrisponde allo spazio vuoto.
• \D – corrisponde a qualsiasi "non numero" ed è equivalente a [^0-9.]
• \W – corrisponde a qualsiasi carattere non alfanumerico è una una scorciatoia per [^A-Za-z0-9_].
• \S – corrisponde a ogni carattere che non è spazio vuoto.
• . – corrisponde a ogni carattere.

Cos'è la classe di caratteri?

Una classe di caratteri viene usata per trovare corrispondenza con un insieme di caratteri in una particolare posizione. Per indicare una classe di caratteri si utilizzano le parentesi quadre [] contenenti la lista dei caratteri desiderati.

Guardiamo l'esempio:

// Indica una parola con due alternative di spelling

const regexPattern = /ambi[ea]nce/;

console.log(regexPattern.test('ambience')); // Output: true

console.log(regexPattern.test('ambiance')); // Output: true

// Il pattern regex si interpreta come:  indica a seguita da m, poi b,
// poi i, poi e o a, poi n, poi c e poi e.

Cos'è una classe di caratteri negati?

Se aggiungi un accento circonflesso all'interno di una classe di caratteri, [^...], la corrispondenza avverrà con ogni carattere che non è elencato nelle parentesi quadre. Ad esempio:

const regexPattern = /[^bc]at/;

console.log(regexPattern.test('bat')); // Output: false

console.log(regexPattern.test('cat')); // Output: false

console.log(regexPattern.test('mat')); // Output: true

Cos'è un intervallo?

Un trattino - indica un intervallo, se usato all'interno di una classe di caratteri. Supponi di voler trovare una serie di numeri, diciamo [0123456789], o un insieme di caratteri come [abcdefg]. Puoi scriverli in forma di intervallo, rispettivamente come [0-9] e [a-g].

Cos'è l'alternanza?

L'alternanza è un altro modo per specificare un insieme di opzioni. Occorre usare una barra verticale | per trovare corrispondenza con una qualsiasi sotto-espressione. Ciascuna delle sotto-espressioni è detta alternativa.

La barra verticale significa ‘o’, quindi trova corrispondenza tra una serie di opzioni. Consente di combinare sotto-espressioni come alternative.

Ad esempio, (x|y|z)a troverà xa o ya, oppure za.  Per limitare la portata dell'alternanza puoi usare le parentesi e raggruppare insieme le alternative.

Senza parentesi, x|y|za vorrebbe dire x o y o za. Ad esempio:

const regexPattern = /(Bob|George)\sClan/;

console.log(regexPattern.test('Bob Clan')); // Output: true

console.log(regexPattern.test('George Clan')); // Output: true

Cosa sono i quantificatori e l'avidità?

I quantificatori indicano quante volte un carattere, una classe di caratteri o un gruppo dovrebbe apparire nel testo bersaglio affinché ci sia una corrispondenza. Eccone alcuni particolari:

• + trova ogni carattere a cui viene apposto se questo è presente almeno una volta. Ad esempio:

const regexPattern = /hel+o/;

console.log(regexPattern.test('helo'));          // Output: true

console.log(regexPattern.test('hellllllllllo')); // Output: true

console.log(regexPattern.test('heo'));           // Output: false

• * è simile al precedente ma con una leggera differenza. Trova ogni carattere a cui viene apposto se questo è presente zero o più volte. Ad esempio:

const regexPattern = /hel*o/;

console.log(regexPattern.test('helo'));    // Output: true

console.log(regexPattern.test('hellllo')); // Output: true

console.log(regexPattern.test('heo'));     // Output: true

// * trova 0 o qualsiasi numero di 'l'

• ? significa "opzionale". Quando apposto a un carattere, vuol dire che questo può o non può essere presente. Ad esempio:

const regexPattern = /colou?r/;

console.log(regexPattern.test('color'));  // Output: true

console.log(regexPattern.test('colour')); // Output: true

// Il ? dopo il carattere u lo rende opzionale

• {N}, quando apposto a un carattere o a una classe di caratteri, specifica il numero di caratteri desiderato. Ad esempio /\d{3}/ corrisponde a tre cifre consecutive.
• {N,M} è detto quantificatore di intervallo ed è usato per specificare un intervallo tra possibile corrispondenza minima e massima. Ad esempio /\d{3, 6}/ trova un minimo di 3 e un massimo di 6 cifre consecutive.
• {N, } indica un intervallo aperto. Ad esempio /\d{3, }/ trova tre o più cifre consecutive.

Cos'è l'avidità in regex?

Tutti i quantificatori sono greedy (avidi) di default. Ciò vuol dire che provano a trovare una corrispondenza di tutti i caratteri possibili.

Per rimuovere questo stato predefinito e renderli non-greedy, aggiungi un ? agli operatori, come +?, *?, {N}?, {N,M}? e così via.

Cosa sono raggruppamenti e backreference?

Precedentemente abbiamo visto come limitare la portata dell'alternanza usando le parentesi.

E se volessi usato un quantificatore come + o * su più di un carattere alla volta – diciamo una classe di caratteri o un gruppo? Puoi raggrupparli insieme usando le parentesi prima di aggiungere il quantificatore, proprio come in questo esempio:

const regExp = /abc+(xyz+)+/i;

console.log(regExp.test('abcxyzzzzXYZ')); // Output: true

Ecco cosa vuol dire il pattern: il primo + si riferisce alla c in abc, il secondo + alla z in xyz, e il terzo + alla sotto-espressione xyz (ci sarà corrispondenza anche nel caso la sequenza si ripeta).

Il backreference consente di trovare un nuovo pattern uguale a uno trovato precedentemente in un'espressione regolare. Anche in questo caso si usano le parentesi, per racchiudere una sotto-espressione trovata precedentemente (ovvero un gruppo di acquisizione).

Tuttavia, è possibile avere più di un gruppo di acquisizione in un'espressione regolare. Quindi per fare riferimento a un gruppo di acquisizione si utilizza un numero che identifica le parentesi.

Supponi di avere 3 gruppi di acquisizione in un'espressione regolare e di volervi fare riferimento. Puoi usare \1, \2 o \3, per riferirti alla prima, seconda o terza parentesi. Per numerare le parentesi si inizia a contare le parentesi aperte da sinistra.

Vediamo alcuni esempi:

(x) trova x e memorizza la corrispondenza.

const regExp = /(abc)bar\1/i;

// abc sfrutta il backreference ed è ancorata alla posizione \1
console.log(regExp.test('abcbarAbc')); // Output: true

console.log(regExp.test('abcbar')); // Output: false

(?:x) trova x ma non memorizza la corrispondenza. In questo caso, \n (dove n è un numero) non fa riferimento a un gruppo di acquisizione precedente e la corrispondenza avverrà se letterale. Usando un esempio:

const regExp = /(?:abc)bar\1/i;

console.log(regExp.test('abcbarabc')); // Output: false

console.log(regExp.test('abcbar\1')); // Output: true

La regola di escape

Per apparire letteralmente in un'espressione regolare, un metacarattere necessita di escape tramite barra rovesciata. In questo modo, il metacarattere perde il suo significato speciale all'interno della regex.

Metodi di espressioni regolari

Il metodo test()

Abbiamo usato questo metodo parecchie volte in questo articolo. Il metodo test() confronta il testo bersaglio con l'espressione regolare e restituisce un valore booleano. Se c'è corrispondenza restituisce true (vero), altrimenti false (falso).

const regExp = /abc/i;

console.log(regExp.test('abcdef')); // Output: true

console.log(regExp.test('bcadef')); // Output: false

Il metodo exec()

Il metodo exec() confronta il testo bersaglio con il pattern regex. Se c'è corrispondenza, restituisce un array con gli elementi trovati – altrimenti restituisce null. Ad esempio:

const regExp = /abc/i;

console.log(regExp.exec('abcdef'));
// Output: ['abc', index: 0, input: 'abcdef', groups: undefined]

console.log(regExp.exec('bcadef'));
// Output: null

Esistono anche metodi di stringhe che accettano espressioni regolari come parametro, come match(), replace(), replaceAll(), matchAll(), search() e split().

Esempi di regex

Ecco alcuni esempi per consolidare i concetti che hai imparato in questo articolo.

Primo esempio: come usare un pattern regex per trovare un indirizzo email:

const regexPattern = /^[(\w\d\W)+]+@[\w+]+\.[\w+]+$/i;

console.log(regexPattern.test('abcdef123@gmailcom'));
// Output: false
//Punto mancante

console.log(regexPattern.test('abcdef123gmail.'));
// Output: false
//'com' mancante

console.log(regexPattern.test('abcdef123@gmail.com'));
// Output: true
//L'input corrisponde al pattern

Interpretiamo il pattern. Ecco cosa sta accadendo:

• / rappresenta l'inizio del pattern dell'espressione regolare.
• ^ identifica l'inizio della riga con i caratteri nella classe di caratteri.
• [(\w\d\W)+ ]+ corrisponde a qualsiasi parola, cifra o carattere non alfanumerico nella classe di caratteri presente almeno una volta. Nota come le parentesi sono state usate per raggruppare i caratteri prima di aggiungere il quantificatore. È equivalente a [\w+\d+\W+]+ .
• @ identifica la @ (letterale) all'interno dell'email.
• [\w+]+ corrisponde a qualsiasi lettera nella classe di caratteri presente almeno una volta.
• \. corrisponde al punto, di cui è stato eseguito l'escape per farlo apparire come carattere letterale.
• [\w+]+$ corrisponde a qualsiasi lettera nella classe. Inoltre, la classe di caratteri è ancorata alla fine della riga.
• / - fine del pattern

Prossimo esempio: come trovare un URL con formato http://example.com o https://www.example.com:

const pattern = /^[https?]+:\/\/((w{3}\.)?[\w+]+)\.[\w+]+$/i;

console.log(pattern.test('https://www.example.com'));
// Output: true

console.log(pattern.test('http://example.com'));
// Output: true

console.log(pattern.test('https://example'));
// Output: false

Interpretiamo il pattern. Ecco cosa sta accadendo:

• /...../ rappresenta l'inizio e la fine dell'espressione regolare
• ^ identifica l'inizio della riga
• [https?]+ corrisponde ai caratteri elencati almeno uno volta, tuttavia ? rende la 's' opzionale.
• : corrisponde ai due punti.
• \/\/ esegue l'escape delle due barre oblique.
• (w{3}\.)? corrisponde al carattere 'w' 3 volte e al punto che segue immediatamente. Il gruppo è opzionale.
• [\w+]+ corrisponde ai caratteri nella classe, almeno una volta.
• \. esegue l'escape del punto
• [\w+]+$ corrisponde a qualsiasi carattere nella classe. La classe di caratteri è ancorata alla fine della riga.

Conclusione

In questo articolo, abbiamo esaminato i fondamenti delle espressioni regolari. Abbiamo anche spiegato alcuni pattern di espressioni regolari e fatto pratica con degli esempi.

C'è molto altro sulle espressioni regolari oltre questo articolo. Per aiutarti a imparare, ecco alcune risorse (in inglese) che puoi consultare:

• Regular Expression
• Learn Regex crash course
• Regular Expression Tutorial
• Regular Expression Cheatsheet

È tutto per questo tutorial. Buona programmazione :)

In JavaScript, è possibile raggruppare insieme dei dati in una singola struttura di dati usando un oggetto, in questo modo:

const desk = {
   height: "4 feet",
   weight: "30 pounds",
   color: "brown",
   material: "wood",
 };

Un oggetto contiene proprietà, o coppie chiave-valore. L'oggetto desk qui sopra ha quattro proprietà. Ognuna di esse ha un nome, anche detto chiave, e un valore corrispondente.

Ad esempio, la chiave height ha il valore "4 feet". Insieme, la chiave e il valore costituiscono una singola proprietà.

height: "4 feet",

L'oggetto desk contiene dei dati riguardo a una scrivania. Questa è una ragione per utilizzare un oggetto JavaScript: conservare dati. È anche semplice recuperare i dati archiviati in un oggetto. Questo aspetto rende gli oggetti molto utili.

In questo articolo sugli oggetti JavaScript imparerai:

• come creare un oggetto
• come salvare dei dati in un oggetto
• e come recuperare i dati inseriti.

Iniziamo creando un oggetto!

Come creare un oggetto in JavaScript

Di seguito, ho creato un oggetto chiamato pizza, a cui ho aggiunto delle coppie chiave-valore.

const pizza = {
   topping: "cheese",
   sauce: "marinara",
   size: "small"
};

Le chiavi sono a sinistra dei due punti : e i valori sono sulla destra. Ogni coppia chiave-valore è una proprietà. In questo esempio ci sono tre proprietà:

• La chiave topping ha il valore “cheese”.
• La chiave sauce ha il valore “marinara”.
• La chiave size ha il valore “small”.

Ogni proprietà è separata da una virgola. Nel complesso, tutte le proprietà sono racchiuse tra parentesi graffe.

Questa è la sintassi di base degli oggetti. Ma ci sono alcune regole da tenere a mente quando si creano degli oggetti in JavaScript.

Chiavi degli oggetti JavaScript

Ogni chiave di un oggetto JavaScript deve essere una stringa, un simbolo o un numero.

Guarda con attenzione il seguente esempio. I nomi delle chiavi 1 e 2 in realtà vengono "convertiti" (tramite coercizione) in stringhe.

const shoppingCart = {
   1: "apple",
   2: "oranges"
};

La differenza risulta chiara stampando l'oggetto sulla console.

console.log(shoppingCart);
//Risultato: { '1': 'apple', '2': 'oranges' }

Esiste un'altra regola da tenere a mente riguardo ai nomi delle chiavi: se il nome contiene degli spazi occorre racchiuderlo tra virgolette.

Dai un'occhiata all'oggetto programmer qui sotto. Nota il nome dell'ultima chiave, "current project name". Contiene degli spazi, quindi va racchiuso tra virgolette.

const programmer = {
   firstname: "Phil",
   age: 21,
   backendDeveloper: true,
   languages: ["Python", "JavaScript", "Java", "C++"],
   "current project name": "The Amazing App"
};

Valori degli oggetti JavaScript

Un valore, d'altro canto, può essere un qualsiasi tipo di dato, compresi array, numeri o booleani. L'esempio qui sopra contiene valori di tipo stringa, intero, booleano e array.

Puoi anche usare una funzione come valore. In tal caso viene detta metodo. Un esempio è sounds(), nel seguente oggetto.

const animal = {
   type: "cat",
   name: "kitty",
   sounds() { console.log("meow meow") }
};

Ora diciamo che vuoi aggiungere o eliminare una coppia chiave-valore, o semplicemente recuperare il valore di un oggetto.

Puoi farlo usando la notazione con punto (dot notation) o con parentesi (bracket notation), di cui ci occuperemo adesso.

Come funzionano le notazioni con punto e parentesi in JavaScript

La notazione con punto e quella con parentesi sono due modi per accedere e utilizzare le proprietà di un oggetto. Probabilmente ti troverai a usare più spesso la notazione con punto, quindi partiamo da questa.

Come aggiungere una coppia chiave-valore con la notazione con punto in JavaScript

Qui sotto ho creato un oggetto book vuoto.

const book = {};

Per aggiungere una coppia chiave-valore usando la notazione con punto, usa la sintassi:

nomeOggetto.nomeChiave = valore

Questo è il codice per aggiungere la chiave (author) e il valore ("Jane Smith") all'oggetto book:

book.author = "Jane Smith";

Ecco un'analisi del codice qui sopra:

• book è il nome dell'oggetto
• . (punto)
• author è il nome della chiave
• = (uguale)
• "Jane Smith" è il valore

Quando stampiamo l'oggetto vedremo la coppia chiave-valore appena aggiunta.

console.log(book);
//Risultato: { author: 'Jane Smith' }

Aggiungiamo un'altra coppia chiave-valore all'oggetto book.

book.publicationYear = 2006;

Ora l'oggetto book ha due proprietà.

console.log(book);
//Risultato: { author: 'Jane Smith', publicationYear: 2006 }

Come accedere ai dati di un oggetto JavaScript usando la notazione con punto

Puoi usare la notazione con punto su una chiave per accedere al relativo valore.

Considera l'oggetto basketballPlayer.

const basketballPlayer = {
   name: "James",
   averagePointsPerGame: 20,
   height: "6 feet, 2 inches",
   position: "shooting guard"
};

Diciamo che vuoi recuperare il valore “shooting guard”. Questa è la sintassi da usare:

nomeOggetto.nomeChiave

Usiamo questa sintassi per ottenere e stampare il valore "shooting guard".

console.log(basketballPlayer.position);
//Risultato: shooting guard

Ecco un'analisi del codice qui sopra:

• basketballPlayer è il nome dell'oggetto
• . (punto)
• position è il nome della chiave

Ecco un altro esempio.

console.log(basketballPlayer.name);
//Risultato: James

Come eliminare una coppia chiave-valore in JavaScript

Per eliminare una coppia chiave-valore utilizza l'operatore delete con la seguente sintassi:

delete nomeOggetto.nomeChiave

Quindi per cancellare la chiave height e il suo valore dall'oggetto basketballPlayer dovrai scrivere il seguente codice:

delete basketballPlayer.height;

Di conseguenza, l'oggetto basketballPlayer adesso ha tre coppie chiave-valore.

console.log(basketballPlayer);
//Risultato: { name: 'James', averagePointsPerGame: 20, position: 'shooting guard' }

Probabilmente ti troverai a usare frequentemente la notazione con punto, anche se ci sono alcuni requisiti a cui prestare attenzione.

Quando utilizzi la notazione con punto, i nomi delle chiavi non possono contenere spazi, trattini o iniziare con un numero.

Ad esempio, se proviamo ad aggiungere una chiave che contiene spazi con la notazione con punto, otteniamo un errore.

basketballPlayer.shooting percentage = "75%";
//Errore

Quindi questa notazione non funziona in ogni situazione. Ecco perché c'è un'altra opzione: la notazione con parentesi.

Come aggiungere una coppia chiave-valore usando la notazione con parentesi in JavaScript

Puoi usare anche la notazione con parentesi per aggiungere una coppia chiave-valore a un oggetto.

La notazione con parentesi offre più flessibilità, visto che i nomi delle chiavi possono includere spazi e trattini e possono iniziare con numeri.

Qui sotto ho creato un oggetto employee.

const employee = {};

Adesso aggiungo una coppia chiave-valore usando la notazione con parentesi. Ecco la sintassi:

nomeOggetto[“nomeChiave”] = valore

Ed ecco come aggiungere la chiave occupation e il valore "sales" all'oggetto employee:

employee["occupation"] = "sales";

Di seguito, un'analisi del codice qui sopra:

• employee è il nome dell'oggetto
• "occupation" è il nome della chiave
• = (uguale)
• "sales" è il valore

Qui sotto ci sono altri esempi della flessibilità della notazione con parentesi per aggiungere una serie di coppie chiave-valore.

//Aggiungere chiavi composte da più parole
employee["travels frequently"] = true;
 
//Aggiungere chiavi che iniziano con un numero e contengono trattini
employee["1st-territory"] = "Chicago";
 
//Aggiungere chiavi che iniziano con un numero
employee["25"] = "total customers";

Quando stampiamo l'oggetto employee, otteniamo:

{
  '25': 'total customers',
  occupation: 'sales',
  'travels frequently': true,
  '1st-territory': 'Chicago'
}

Sapendo questo possiamo aggiungere la chiave “shooting percentage” all'oggetto basketballPlayer precedente.

const basketballPlayer = {
   name: "James",
   averagePointsPerGame: 20,
   height: "6 feet, 2 inches",
   position: "shooting guard"
};

Se ricordi, la notazione con punto ci ha lasciati con un errore quando abbiamo provato ad aggiungere una chiave che include spazi.

basketballPlayer.shooting percentage = "75%";
//Errore

Ma la notazione con parentesi non ci dà alcun errore, come puoi vedere qui:

basketballPlayer["shooting percentage"] = "75%";

Questo è il risultato che otteniamo stampando l'oggetto:

{
  name: 'James',
  averagePointsPerGame: 20,
  height: '6 feet, 2 inches',
  position: 'shooting guard',
  'shooting percentage': '75%'
}

Come accedere ai dati di un oggetto JavaScript usando la notazione con parentesi

Puoi usare anche la notazione con parentesi su una chiave per accedere al valore relativo.

Recuperiamo l'oggetto animal dall'inizio dell'articolo.

const animal = {
   type: "cat",
   name: "kitty",
   sounds() { console.log("meow meow") }
};

Otteniamo il valore associato alla chiave name. Per farlo racchiudiamo il nome della chiave tra virgolette e lo inseriamo tra parentesi quadre. Ecco la sintassi:

nomeOggetto[“nomeChiave”]

Questo è il codice che dovresti scrivere in notazione con parentesi: animal["name"];.

Ecco un'analisi del codice qui sopra:

• animal è il nome dell'oggetto
• ["name"] è il nome della chiave tra parentesi quadre

Vediamo un altro esempio.

console.log(animal["sounds"]());

//Risultato: 
meow meow
undefined

sounds() è un metodo, per questo alla fine ho aggiunto le parentesi per invocarlo.

Ed ecco come invocare il metodo usando la notazione con punto.

console.log(animal.sounds());

//Risultato: 
meow meow
undefined

Metodi di oggetti JavaScript

Ora sai come accedere a specifiche proprietà. Ma se volessi tutte le chiavi o tutti i valori di un oggetto?

Esistono due metodi che ti daranno le informazioni che ti servono.

const runner = {
   name: "Jessica",
   age: 20,
   milesPerWeek: 40,
   race: "marathon"
};

Puoi usare il metodo Object.keys() per recuperare i nomi di tutti le chiavi di un oggetto.

Ecco la sintassi:

Object.keys(nomeOggetto)

Possiamo usare questo metodo sull'oggetto runner usato in precedenza.

Object.keys(runner);

Stampando il risultato, otteniamo un array con le chiavi dell'oggetto.

console.log(Object.keys(runner));
//Risultato: [ 'name', 'age', 'milesPerWeek', 'race' ]

Allo stesso modo possiamo usare il metodo Object.values() per ottenere tutti i valori di un oggetto. Questa è la sintassi:

Object.values(nomeOggetto)

Ora otterremo tutti i valori dell'oggetto runner.

console.log(Object.values(runner));
//Risultato: [ 'Jessica', 20, 40, 'marathon' ]

Abbiamo fatto un sacco di strada. Ecco i concetti fondamentali che abbiamo affrontato:

Oggetti:

• Puoi usare gli oggetti per archiviare dati come proprietà (coppie chiave-valore).
• I nomi delle chiavi possono essere stringhe, simboli o numeri.
• I valori possono essere di qualsiasi tipo.

Accedere alle proprietà di un oggetto:

• Notazione con punto: nomeOggetto.nomeChiave
• Notazione con parentesi: nomeOggetto[“nomeChiave”]

Eliminare una proprietà:

• delete nomeOggetto.nomeChiave

Ci sono un sacco di cose che puoi fare con gli oggetti. E adesso hai alcune delle basi per poter trarre vantaggio di questo utile tipo di dato JavaScript.

Scrivo riguardo allo studio della programmazione e dei modi migliori per affrontarlo su amymhaddad.com. Condivido anche tweet sulla programmazione, l'apprendimento e la produttività: @amymhaddad.

In questo articolo imparerai come trovare l'indice di un elemento contenuto in una lista nel linguaggio di programmazione Python.

Esistono diversi modi per poterlo fare e in questo articolo imparerai tre differenti tecniche usate per trovare l'indice di un elemento in una lista in Python.

Le tre tecniche sono:

• trovare l'indice usando il metodo per lista index(),
• usando un loop for,
• e infine, usando una comprensione di lista e la funzione enumerate().

In modo specifico, ecco quello che tratteremo nel dettaglio:

1. Una panoramica sulle liste in Python
   1.1 Come funzionano gli indici
2. Usare il metodo index() pre trovare l'indice di un elemento
   2.1 Usare i parametri opzionali con il metodo index()
3. Ottenere gli indici di tutte le ripetizioni di un elemento in una lista
   3.1 Usare un loop forper ottenere tutti gli indici di un elemento ripetuto
   3.2 Usare una comprensione di lista e la funzione enumerate() per ottenere tutti gli indici di un elemento ripetuto

Cosa sono le liste in Python?

Le liste sono dei tipi di dato integrati in Python e delle strutture di dati tra le più versatili.

Agiscono come contenitori e contengono valori multipli, generalmente correlati; elementi sotto lo stesso nome di variabile.

Gli elementi sono racchiusi all'interno di parentesi quadre, []. Ogni elemento all'interno delle parentesi quadre è separato da una virgola, ,.

# una lista chiamata 'my_information' che contiene stringhe e numeri
my_information = ["John Doe", 34, "London", 1.76]

Dall'esempio qui sopra puoi vedere che le liste possono contenere elementi di qualsiasi tipo di dato, ovvero gli elementi di una lista possono essere eterogenei.

A differenza degli array che possono contenere solo elementi dello stesso tipo, le liste consentono più flessibilità.

Inoltre, le liste sono mutabili, che vuol dire che sono modificabili e dinamiche. Gli elementi di una lista possono essere aggiornati, nuovi elementi possono essere aggiunti e ogni elemento può essere rimosso in qualsiasi momento durante la vita del programma.

Una panoramica sugli indici in Python

Come menzionato, le liste sono insiemi di elementi. In modo specifico, sono insiemi ordinati di elementi che generalmente mantengono l'ordine definito.

Ogni elemento all'interno di una lista ha una posizione univoca che lo identifica.

Questa posizione è chiamata indice.

In Python e nei linguaggi di programmazione in generale, gli indici partono da 0 e non da 1.

Diamo un'occhiata alla lista usata nella sezione precedente:

my_information = ["John Doe", 34, "London", 1.76]

Come detto, gli elementi della lista partono dall'indice 0.

Il primo elemento della lista, "John Doe", ha l'indice 0.
Il secondo elemento della lista, 34, ha l'indice 1.
Il terzo elemento della lista, "London", ha l'indice 2.
Il quarto elemento della lista, 1.76, ha l'indice 3.

Gli indici sono utili per accedere a specifici elementi di una lista la cui posizione (indice) è nota.

Dunque, puoi fare riferimento all'elemento che desideri in una lista usando il suo indice.

Per accedere a un elemento, occorre usare il nome della lista, includendo tra parentesi quadre l'intero che corrisponde all'indice dell'elemento in questione.

Ecco come accedere a ogni elemento usando l'indice corrispondente:

my_information = ["John Doe", 34, "London", 1.76]

print(my_information[0])
print(my_information[1])
print(my_information[2])
print(my_information[3])

#output

#John Doe
#34
#London
#1.76

E se invece volessimo trovare l'indice di un elemento in una lista in Python?

Nelle seguenti sezioni vedrai alcuni modi in cui puoi trovare l'indice degli elementi di una lista.

Trovare l'indice di un elemento usando il metodo per liste index() in Python

Finora abbiamo visto come accedere a un valore facendo riferimento al suo indice numerico.

Cosa accade quando non conosci l'indice numerico e stai lavorando con una lista molto estesa?

Puoi fornire un valore e trovare il suo indice, trovando in questo modo la posizione che occupa nella lista.

A questo scopo, puoi usare il metodo integrato di Python index() come strumento di ricerca.

La sintassi del metodo index() è la seguente:

lista.index(elemento, inizio, fine)

Analizziamola nel dettaglio:

• lista è il nome della lista in cui cercare.
• .index() è il metodo di ricerca che accetta tre parametri. Un parametro è obbligatorio e gli altri due sono opzionali.
• elemento è il parametro obbligatorio. È l'elemento di cui trovare l'indice.
• inizio è il primo parametro opzionale. È l'indice da cui avviare la ricerca.
• fine è il secondo parametro opzionale. È l'indice in cui terminare la ricerca.

Vediamo un esempio usando solo il parametro obbligatorio:

programming_languages = ["JavaScript","Python","Java","C++"]

print(programming_languages.index("Python"))

#output
#1

Nell'esempio qui sopra, il metodo index() prende solo un argomento, che è l'elemento di cui stiamo cercando l'indice.

Tieni a mente che l'argomento passato è case-sensitive. Ciò vuol dire che se scrivi "python" e non "Python", otterrai un errore, dato che "python" con la "p" minuscola non fa parte della lista.

Il valore restituito è un intero, corrispondente all'indice numerico dell'elemento di lista passato al metodo come argomento.

Ecco un altro esempio:

programming_languages = ["JavaScript","Python","Java","C++"]

print(programming_languages.index("React"))

#output
#line 3, in <module>
#    print(programming_languages.index("React"))
#ValueError: 'React' is not in list

Se provi a cercare un elemento per cui non c'è corrispondenza nella lista, Python darà un errore come valore di ritorno – in modo specifico, restituirà ValueError.

Questo vuol dire che l'elemento che stai cercando non è presente nella lista.

Un modo per evitare che questo accada è racchiudere la chiamata del metodo index() in un blocco try/except.

Se il valore non esiste, ci sarà un messaggio sulla console che dice che il valore non è memorizzato nella lista e quindi non esiste.

programming_languages = ["JavaScript","Python","Java","Python","C++","Python"]

try:
    print(programming_languages.index("React"))
except ValueError:
    print("That item does not exist")
    
#output
#That item does not exist

Un altro modo è verificare prima se l'elemento è nella lista e poi cercare il suo indice. L'output sarà un valore booleano – True o False.

programming_languages = ["JavaScript","Python","Java","Python","C++","Python"]

print("React" in programming_languages)

#output
#False

Come usare i parametri opzionali con il metodo index()

Diamo un'occhiata al seguente esempio:

programming_languages = ["JavaScript","Python","Java","Python","C++","Python"]

print(programming_languages.index("Python"))

#output
#1

Nella lista programming_languages ci sono tre istanze della stringa "Python", che sta venendo cercata.

Come prova, dato che la lista è piccola, in questo caso potresti lavorare a ritroso.

Potresti contare e trovare gli indici numerici e poi farvi riferimento come abbiamo visto nelle sezioni precedenti:

programming_languages = ["JavaScript","Python","Java","Python","C++","Python"]

print(programming_languages[1])
print(programming_languages[3])
print(programming_languages[5])

#output
#Python
#Python
#Python

C'è n'è una in posizione 1, un'altra in posizine 3 e l'ultima in posizione 5.

Perché non vengono mostrate quando viene usato il metodo index()?

Questo avviene perché il valore restituito dal metodo index() corrisponde alla prima presenza di un elemento nella lista. I valori successivi non vengono considerati.

Il metodo index() restituisce soltanto l'indice corrispondente alla posizione in cui l'elemento appare la prima volta.

Puoi provare a passare i parametri opzionali inizio e fine al metodo index().

Sai già che la stringa è presente la prima volta all'indice 1, quindi questo potrebbe essere il valore del parametro inizio.

Per il parametro fine puoi iniziare con la lunghezza della lista.

Per trovare la lunghezza, usa la funzione len():

print(len(programming_languages)) 

#output is 6

Il valore del parametro fine dovrà essere il valore della lunghezza della lista meno 1. L'indice dell'ultimo elemento di una lista è sempre minore di uno rispetto alla lunghezza della lista.

Mettendo tutto insieme, ecco come puoi provare a ottenere tutte e tre le istanze dell'elemento:

programming_languages = ["JavaScript","Python","Java","Python","C++","Python"]

print(programming_languages.index("Python",1,5))

#output
#1

L'output è ancora la prima istanza!

I parametri inizio e fine definiscono un intervallo di posizioni per la ricerca e il valore restituito dal metodo index() corrisponde alla prima volta che l'elemento è presente nella lista all'interno dell'intervallo indicato.

Come ottenere gli indici di tutte le ripetizioni di un elemento in una lista

Usare un loop for per ottenere tutte le ripetizioni di un elemento in una lista

Prendiamo lo stesso esempio che abbiamo usato finora, in cui la stringa "Python" è presente tre volte nella lista.

programming_languages = ["JavaScript","Python","Java","Python","C++","Python"]

Iniziamo creando una nuova lista vuota.

Questa sarà la lista in cui saranno conservati tutti gli indici di "Python".

programming_languages = ["JavaScript","Python","Java","Python","C++","Python"]

python_indices = []

Poi usiamo un loop for per iterare sulla lista e ottenere ogni elemento della lista originale. In modo specifico, iteriamo sull'indice di ogni elemento.

programming_languages = ["JavaScript","Python","Java","Python","C++","Python"]

python_indices = []

for programming_language in range(len(programming_languages)):

Occorre usare la  parola chiave for.

E poi creare una variabile, in questo caso programming_language, che agirà come segnaposto per la posizione di ogni elemento della lista originale durante il processo di iterazione.

In seguito, bisogna specificare le iterazioni che il loop for dovrà eseguire.

In questo caso, il loop itererà su tutte la lunghezza della lista, dall'inizio alle fine. La sintassi range(len(programming_languages)) è un modo per accedere a tutti gli elementi della lista programming_languages.

La funzione range() accetta una sequenza di numeri che specificano il numero dal quale iniziare e quello a cui finire il conteggio.

La funzione len() calcola la lunghezza della lista, quindi in questo caso il conteggio parte da 0 e termina a 6 (non incluso), che è la fine della lista.

Infine, occorre impostare una condizione logica.

Essenzialmente, quello che vogliamo fare è: "se durante l'iterazione il valore a una data posizione è uguale a 'Python', aggiungi la posizione nella nuova lista creata precedentemente".

Per aggiungere un elemento alla lista usiamo il metodo append().

programming_languages = ["JavaScript","Python","Java","Python","C++","Python"]

python_indices = []

for programming_language in range(len(programming_languages)):
    if programming_languages[programming_language] == "Python":
      python_indices.append(programming_language)

print(python_indices)

#output

#[1, 3, 5]

Usare una comprensione di lista e la funzione enumerate() per ottenere tutte le ripetizioni di un elemento in una lista

Un altro modo per trovare gli indici di tutte le ripetizioni di un particolare elemento è usare una comprensione di lista.

La comprensione di lista è un modo per creare una nuova lista in base a una esistente.

Ecco come puoi ottenere tutti gli indici della stringa "Python", usando una comprensione di lista:

programming_languages = ["JavaScript","Python","Java","Python","C++","Python"]

python_indices  = [indice for (indice, elemento) in enumerate(programming_languages) if elemento == "Python"]

print(python_indices)

#[1, 3, 5]

Con la funzione enumerate() puoi salvare gli indici degli elementi che soddisfano la condizione definita.

Occorre prima fornire una coppia (indice, elemento) per ogni elemento nella lista (programming_languages) come argomento della funzione.

indice è l'indice numerico dell'elemento della lista e elemento è l'elemento stesso.

Agisce come contatore, partendo da 0 e incrementando ogni volta che la condizione stabilita viene soddisfatta, selezionando e spostando gli indici degli elementi che corrispondono al criterio.

Accoppiata alla comprensione di lista, consente di creare una nuova lista con tutti gli indici della stringa "Python".

Conclusione

Ed ecco fatto! Adesso conosci alcuni modi per trovare l'indice di un elemento, anche nel caso sia presente più volte in una lista in Python.

Spero tu abbia trovato utile questo articolo.

Se vuoi saperne di più su Python, dai un'occhiata alla certificazione di freeCodeCamp Calcolo Scientifico con Python.

Partirai dalle basi e imparerai in un modo interattivo e adatto ai principianti. Alla fine dovrai anche creare cinque progetti per mettere in pratica e consolidare quello che hai imparato.

Grazie per aver letto e buona programmazione!

In JavaScript, l'hoisting consente di utilizzare funzioni e variabili prima che siano dichiarate. In questo articolo impareremo cos'è l'hoisting e come funziona.

Cos'è l'hoisting?

Dai un'occhiata al codice qui sotto e indovina cosa accade quando viene eseguito:

console.log(foo);
var foo = 'foo';

Potrebbe sorprenderti che l'output di questo codice è undefined e che non genera un errore – anche se foo viene assegnata dopo il console.log!

Questo perché l'interprete JavaScript divide dichiarazione e assegnazione di funzioni e variabili: "innalza" le dichiarazioni in cima all'ambito in cui sono contenute prima dell'esecuzione.

Questo processo è chiamato hoisting (dall'inglese hoist: sollevare, issare) e, nell'esempio precedente, consente di utilizzare foo prima che sia dichiarata.

Diamo un'occhiata più approfondita all'hoisting di variabili e funzioni per capire cosa vuol dire e come funziona.

Hoisting di variabili in JavaScript

Tanto per rinfrescarci la memoria: dichiariamo una variabile con le parole chiave var, let e const. Ad esempio:

var foo;
let bar;

E assegniamo un valore a una variabile con l'operatore di assegnazione:

// Dichiarazione
var foo;
let bar;

// Assegnazione
foo = 'foo';
bar = 'bar';

In molti casi, possiamo combinare dichiarazione e assegnazione in un solo passaggio:

var foo = 'foo';
let bar = 'bar';
const baz = 'baz';

L'hoisting delle variabili funziona differentemente a seconda di come la variabile viene dichiarata. Partiamo con le variabili dichiarate con var.

Hoisting di variabili con var

Quando l'interprete effettua l'hoisting di una variabile dichiarata con var, ne inizializza il valore come undefined. L'output della prima riga di codice qui sotto è undefined:

console.log(foo); // undefined

var foo = 'bar';

console.log(foo); // "bar"

Come abbiamo già detto, l'hoisting deriva dall'interprete che divide la dichiarazione e l'assegnazione di una variabile. Possiamo ottenere lo stesso comportamento dividendo manualmente la dichiarazione e l'assegnazione in due passaggi:

var foo;

console.log(foo); // undefined

foo = 'foo';

console.log(foo); // "foo"

Ricorda che l'output del primo console.log(foo) è undefined perché foo è soggetto a hoisting e gli viene dato un valore predefinito (non perché la variabile non viene mai dichiarata). Usare una variabile non dichiarata genererebbe un errore ReferenceError:

console.log(foo); // Uncaught ReferenceError: foo is not defined

Anche usare una variabile non dichiarata prima prima della sua assegnazione causerebbe un errore ReferenceError poiché non è avvenuto l'hoisting di alcuna dichiarazione:

console.log(foo); // Uncaught ReferenceError: foo is not defined
foo = 'foo';      // Assegnare una variabile non dichiarata è valido

Ora potresti pensare "È piuttosto strano che JavaScript ci faccia accedere a variabili prima che siano dichiarate". Questo comportamento è una parte inusuale di JavaScript e può portare a errori. Usare una variabile prima della sua dichiarazione è solitamente non desiderabile.

Fortunatamente le variabili dichiarate con let e const, introdotte con ECMAScript 2015, si comportano in modo diverso.

Hoisting di variabili con let e const

Le variabili dichiarate con let e const subiscono l'hoisting ma non vengono inizializzate con un valore predefinito. Accedere a una variabile dichiarata con let o const prima della dichiarazione comporta un ReferenceError:

console.log(foo); // Uncaught ReferenceError: Cannot access 'foo' before initialization

let foo = 'bar';  // Lo stesso vale per le variabili dichiarate con const

L'interprete effettua l'hoisting di foo: il messaggio di errore ci dice che la variabile è inizializzata da qualche parte.

Temporal Dead Zone

La ragione per cui otteniamo un errore quando proviamo ad accedere a una variabile dichiarata con let o const prima della sua dichiarazione è la temporal dead zone (TDZ, letteralmente zona temporale morta).

La TDZ parte all'inizio dell'ambito che racchiude la variabile e termina quando viene dichiarata. Accedere alla variabile durante la TDZ causa un ReferenceError.

Ecco un esempio con un blocco esplicito che mostra l'inizio e la fine del TDZ di foo:

{
 	// Inizio della TDZ di foo
  	let bar = 'bar';
	console.log(bar); // "bar"

	console.log(foo); // ReferenceError perché siamo nella TDZ

	let foo = 'foo';  // Fine della TDZ di foo
}

La TDZ è presente anche nei parametri di default delle funzioni, che vengono valutati da sinistra a destra. Nel seguente esempio, bar è nella TDZ finché non viene definito il suo valore di default:

function foobar(foo = bar, bar = 'bar') {
  console.log(foo);
}
foobar(); // Uncaught ReferenceError: Cannot access 'bar' before initialization

Ma il seguente codice funziona perché stiamo accedendo a foo fuori dalla sua TDZ:

function foobar(foo = 'foo', bar = foo) {
  console.log(bar);
}
foobar(); // "foo"

typeof nella temporal dead zone

Usare delle variabili dichiarate con let o const come operandi di un operatore typeof nella TDZ causerà un errore:

console.log(typeof foo); // Uncaught ReferenceError: Cannot access 'foo' before initialization
let foo = 'foo';

Questo comportamento è coerente con gli altri casi con let e const nel TDZ che abbiamo visto. La ragione per cui otteniamo ReferenceError è che foo è dichiarata ma non inizializzata – dovremmo essere consapevoli che la stiamo usando prima dell'inizializzazione (fonte: Axel Rauschmayer).

Tuttavia, ciò non avviene con var prima della dichiarazione perché l'inizializzazione avviene con undefined durante l'hoisting:

console.log(typeof foo); // "undefined"
var foo = 'foo';

Oltretutto, ciò è sorprendente perché possiamo verificare il tipo di una variabile che non esiste senza ottenere un errore. typeof restituisce una stringa:

console.log(typeof foo); // "undefined"

Infatti, l'introduzione di let e const ha interrotto la garanzia che typeof restituisca come valore sempre una stringa per ogni operando.

Hoisting di funzioni in JavaScript

Anche per le dichiarazioni di funzioni avviene l'hoisting. Ciò consente di chiamare una funzione prima che sia definita. Ad esempio, il seguente codice viene eseguito con successo e dà "foo" come output:

foo(); // "foo"

function foo() {
	console.log('foo');
}

Nota che l'hoisting avviene solo per le dichiarazioni di funzioni e non per le funzioni espressioni (function expression). Perfettamente sensato se pensiamo che abbiamo appena imparato che l'hoisting non avviene per l'assegnazione di variabili.

Se proviamo a chiamare una variabile assegnata a una funzione espressione, otterremo TypeError o ReferenceError, a seconda dell'ambito della variabile:

foo(); // Uncaught TypeError: foo is not a function
var foo = function () { }

bar(); // Uncaught ReferenceError: Cannot access 'bar' before initialization
let bar = function () { }

baz(); // Uncaught ReferenceError: Cannot access 'baz' before initialization
const baz = function () { }

Questo è diverso dal chiamare una funzione che è mai dichiarata, che genera un ReferenceError diverso:

foo(); // Uncaught ReferenceError: baz is not defined

Come usare l'hoisting in JavaScript

Hoisting di variabili

Per via della confusione che può creare l'hoisting di variabili dichiarate con var, è meglio evitare di usare delle variabili prima che siano dichiarate. Se stai scrivendo il codice di un progetto greenfield, dovresti usare let e const.

Se stai lavorando su un vecchio codebase o devi usare var per un'altra ragione, MDN raccomanda di scrivere le dichiarazioni con var più vicino possibile alla cima del loro ambito. In questo modo la visibilità delle variabili sarà più chiara.

Puoi anche considerare di usare la regola di ESLint no-use-before-define (non usare prima di definire), che ti assicura di non usare una variabile prima della sua dichiarazione.

Hoisting di funzioni

L'hoisting di funzioni è utile perché possiamo nascondere l'implementazione nella parte inferiore di un file e lasciare che chi legge si possa concentrare su quello che sta facendo il codice. In altre parole, possiamo aprire un file e vedere cosa fa il codice senza prima capire come è implementato.

Prendi questo esempio:

resetPunteggio();
disegnaTabellone();
popolaTabellone();
avviaGioco();

function resetPunteggio() {
	console.log("Sto resettando il punteggio");
}

function disegnaTabellone() {
	console.log("Sto disegnando il tabellone");
}

function popolaTabellone() {
	console.log("Sto popolando il tabellone");
}

function avviaGioco() {
	console.log("Sto avviando il gioco");
}

Abbiamo immediatamente un'idea di cosa fa il codice senza dover leggere tutte le dichiarazioni di funzione.

Comunque, usare le funzioni prima della dichiarazione è una questione di preferenza personale. Alcuni sviluppatori, come Wes Bos, preferiscono evitarlo e mettono le funzioni in moduli che possono essere importati al bisogno (fonte: Wes Bos).

La guida di stile di Airbnb va un passo oltre e incoraggia l'uso di function expression con nome rispetto alle dichiarazioni per evitare i riferimenti prima della dichiarazione:

Le dichiarazioni di funzione sono soggette a hoisting, il che vuol dire che è facile – troppo facile – fare riferimento a una funzione prima che sia definita in un file. Ciò inficia la leggibilità e la manutenibilità.

Se trovi che una definizione di funzione è abbastanza lunga o complessa, tanto da interferire con la comprensione del resto del file, allora potrebbe essere il momento di inserirla in un suo modulo! (fonte: Airbnb JavaScript Style Guide)

Conclusione

Grazie per aver letto, spero che questo articolo ti abbia aiutato a imparare qualcosa sull'hoisting in JavaScript. Contattami pure su LinkedIn se vuoi connetterti o se hai delle domande!

All'inizio del tuo viaggio come sviluppatore JavaScript, credo sia importante dedicarsi a progetti interessanti. In questo modo sarai sicuro di divertirti mentre impari, e magari troverai un'area di specializzazione che apprezzi.

Come si dice, "Fai quello che ami e non lavorerai neanche un giorno in tutta la tua vita".

In questo articolo ti inizierò alla visualizzazione dati front-end, che è la mia passione. Magari un giorno diventerà anche la tua!

Per me i momenti più gratificanti come sviluppatore sono quelli in cui posso vedere o provare i risultati di ciò che ho fatto. È molto soddisfacente creare un grafico che rivela informazioni interessanti sui suoi dati o fornisce un'esperienza interattiva che aiuta a esplorare i dettagli di un insieme di dati unico. Quanto più significativo è il risultato, tanto più l'esperienza è appagante.

Tuttavia, ho realizzato che la quantità di energie che spendi per un progetto non è necessariamente correlata con il senso di realizzazione – talvolta è fantastico anche quando è tutto relativamente semplice.

Col tempo troverai gli strumenti che ti aiutano ad essere più efficiente e, a volte, sposterai montagne con un dito. Nel campo della visualizzazione dati ci sono molte librerie e strumenti disponibili per realizzare grafici. Con gli strumenti giusti, sarai in grado di creare grafici con uno sforzo minimo, indipendentemente dal loro tipo. Personalmente credo la visualizzazione dati ricompensi ampiamente tutto il tempo e le energie investiti.

In questo tutorial utilizzerai vari strumenti per ottenere dati da internet, processarli e realizzare un bellissimo grafico visualizzabile in qualsiasi moderno browser. Puoi cliccare sui link qui sotto per scaricare il codice di esempio per ogni singolo passaggio, vedere tutto su GitHub o scaricare tutti i passaggi in un colpo qui: all-steps.zip.

Il risultato

Al termine di questo tutorial creerai questo grafico interattivo. Imparerai come ottenere i dati da internet, elaborarli e realizzare un grafico con quei dati. Sarai anche in grado di creare il tuo grafico da zero.

Dopo aver processato e graficato i dati, imparerai anche come fare degli aggiustamenti al grafico, come modificare la legenda predefinita, abilitare l'indicatore di posizione sull'asse x con descrizione e applicare annotazioni di testo per aggiungere contesto e altre informazioni al grafico.

Gli strumenti

Per iniziare ti occorrerà un browser web probabilmente come quello che stai utilizzando per leggere questo articolo. Consiglio Chrome, dato che offre un'ottima esperienza e strumenti per sviluppatori integrati.

Poi avrai bisogno di un editor di testo. Andrà bene anche qualcosa di semplice come notepad, ma suggerisco un editor di codice più avanzato come VS Code, visto che si tratta di un ambiente in cui passerai un sacco di tempo. Offre un'esperienza di programmazione più piacevole e conveniente e facilita la scrittura di HTML5, CSS e JavaScript. E cosa più importante, se dimentichi una virgoletta o una virgola da qualche parte, un editor di codice può aiutarti a trovare l'errore.

Quest'articolo può aiutarti a scegliere il miglior editor di codice per lo sviluppo web con JavaScript.

Utilizzerai la libreria JSCharting per disegnare automaticamente il grafico e aggiungere delle funzionalità interattive. Non sarà necessaria nessuna altra libreria JavaScript come jQuery o piattaforma front-end come React e Angular (comunemente usati per i progetti di siti web).

Perché JSCharting?

JSCharting è una libreria JavaScript per grafici che può creare molti tipi diversi di grafici usando SVG. È di facile approccio e utilizzo, quindi è adatta a questo tutorial. La API (Application Programming Interface, ovvero le opzioni e le impostazioni necessarie per creare i grafici) rende semplici cose complesse ed è una buona opzione per sperimentare con la visualizzazione dei dati.

Puoi utilizzare JSCharting gratuitamente per uso personale e commerciale con il brand incluso.

Con JSCharting puoi creare grafici responsivi in un paio di semplici passaggi:

• Definisci un tag <div> nel file HTML con un id univoco.
• Fornisci l'id, i dati e qualsiasi altra opzione chiamando la funzione JSC.Chart() nel file JavaScript.

Ecco tutto. JSC realizzerà un grafico dall'aspetto professionale popolando il tag div con elementi visivi SVG. Il grafico sarà responsivo e interattivo senza alcuno sforzo aggiuntivo.

I dati

Userai un file di dati forniti dal National Center for Health Statistics (NCHS) che comprende l'aspettativa di vita di uomini e donne negli Stati Uniti.

Puoi trovarlo qui: https://data.cdc.gov/resource/w9j2-ggv5.csv.

Questo file CSV contiene dati che dividono l'aspettativa di vita per anno, razza e sesso. Userai alcuni di questi dati per disegnare una semplice linea di tendenza per uomini/donne negli ultimi 100 anni.

Il formato CSV (Comma Separated Values) è ottimo per trasmettere dati sul web. È compatto, leggibile e puoi aprirlo direttamente in Excel, il che non è male.

Senza ulteriore indugio, iniziamo!

Step 1 - Aggiungi un grafico vuoto

Il primo file zip contiene il nostro punto di partenza, che potrai riempire man mano che proseguiamo. Se ti senti perso o confuso oppure vuoi andare avanti, il file zip alla fine o quello in ogni sezione ti rimetteranno al passo.

Se invece vuoi scaricare tutti i file in un colpo usa questo link: all-steps.zip.

step1-a.zip

Questo file zip contiene i seguenti file.

• index.html
• js/index.js

Il file .html è vuoto eccetto per del codice standard che lo rende un file valido e il file .js è completamente vuoto.

Il primo passaggio è aggiungere alcuni script al file della pagina HTML. Normalmente le persone suggeriscono di aggiungere i tag <script> all'interno dei tag <head>. Tuttavia, spesso è meglio aggiungere gli script che influiscono sul contenuto dell'HTML dopo il tag di chiusura </body>.

Questa tecnica fa sì che tutto l'HTML sia caricato nel DOM prima di eseguire qualsiasi codice JavaScript. Prima di poter essere creato, il grafico necessita che l'HTML sia caricato. Il DOM (Document Object Model) è una rappresentazione del codice HTML nella memoria del browser. Una volta che l'HTML viene caricato nel DOM il browser può mostrarlo e JavaScript può interagirvi.

Inizia aggiungendo la libreria JSCharting al file HTML. Apri il file index.html nell'editor che preferisci. Poi aggiungi un tag script per includere JSCharting dopo il tag di chiusura </body>. Il codice risultante alla fine del file dovrebbe essere il seguente:

</body>
<script src="https://code.jscharting.com/2.9.0/jscharting.js"></script>
</html>

L'URL di questa libreria punta a un CDN (Content Delivery Network). Ospita il codice del grafico e rende conveniente e rapido aggiungere la libreria a qualsiasi pagina HTML per la prototipazione e sperimentare con i grafici. Puoi anche scaricare e usare la libreria localmente o usare il pacchetto npm nel tuo progetto, ma il CDN non richiede nessun passaggio extra.

Poi, usando la stessa tecnica, aggiungi un altro tag script facendo riferimento al file JavaScript vuoto. Aggiungi questo script dopo lo script jscharting.js, in questo modo:

</body>
<script src="https://code.jscharting.com/2.9.0/jscharting.js"></script>
<script src="js/index.js"></script>
</html>

Ottimo, siamo quasi pronti per creare il grafico vuoto. L'ultima cosa che occorre fare è aggiungere un <div> segnaposto all'interno del file HTML per definire il posto in cui vogliamo disegnare il grafico.

Aggiungi questo codice HTML tra i tag <body>.

<body>
    <div id="chartDiv" style="width:50%; height:300px; margin:0 auto;"></div>
</body>

Il div deve avere un id in modo da poter essere individuato specificamente. In questo caso l'id è chartDiv.

Potresti aver notato l'attributo style del tag <div>. Rende il div il 50% dell'ampiezza della finestra e alto 300 pixel. Lo stile dei margini margin:0 auto; centra il div nella pagina. Il grafico riempirà il div, qualsiasi sia la sua dimensione, quindi cambiare la dimensione del div è un buon modo per controllare la dimensione del grafico.

Con il file HTML è tutto posto. Apri il file index.js e aggiungi un grafico vuoto alla pagina scrivendo il seguente codice, che include il div con l'id chartDiv:

JSC.Chart('chartDiv', {});

Apri il file index.html nel browser (seleziona e trascina il file in un browser come Chrome).

Non c'è molto da vedere, ma potresti notare un piccolo logo JSC sulla pagina. Indica che un grafico è stato collegato e creato.

step1-b.zip

Step 2 - Giocare un po' con il grafico

Va bene, come test, aggiungiamo un paio di valori al grafico per poter vedere come funziona.

Tornando al file index.js, sostituisci il contenuto con il seguente codice che aggiunge più opzioni al grafico.

JSC.Chart('chartDiv', {
   type: 'horizontal column',
   series: [
      {
         points: [
            {x: 'Apples', y: 50},
            {x: 'Oranges', y: 42}
         ]
      }
   ]
});

Adesso aggiorna (F5) la finestra del browser in cui hai caricato la pagina index.html.

Bene! Hai appena creato il tuo primo grafico usando JavaScript.

Hai realizzato un grafico a barre definendo l'opzione type come 'horizontal column'. Se preferisci delle colonne verticali, imposta il valore su 'column'. Hai anche aggiunto una serie con due punti al grafico per Apples (mele) e Oranges (arance).

Tutti i dati del grafico sono fatti di una serie di punti. Una serie è semplicemente un gruppo di punti di dati. I grafici possono contenere una o più serie di dati. I punti consistono in valori che corrispondono agli assi x e y. I punti possono includere molte altre variabili e valori descrittivi.

L'esempio qui sopra contiene solo una serie di dati. Adesso diamo un'occhiata alle opzioni per un grafico con due serie. Sostituisci il contenuto del file JavaScript con questo codice.

JSC.Chart('chartDiv', {
   type: 'horizontal column',
   series: [
      {
         name:'Andy',
         points: [
            {x: 'Apples', y: 50},
            {x: 'Oranges', y: 32}
         ]
      },{
         name:'Anna',
         points: [
            {x: 'Apples', y: 30},
            {x: 'Oranges', y: 22}
         ]
      }
   ]
});

Ricaricando la finestra del browser apparirà questo grafico.

Le opzioni del grafico sembrano familiari. È ancora un grafico a barre ma stavolta c'è un altro oggetto nell'array series. Abbiamo aggiunto anche delle proprietà name per ogni serie in modo da poter identificarle nella legenda.

Se sei interessato a creare grafici differenti, come grafici radar, areogrammi, grafici a torta, diagrammi di Gannt o anche mappe di calore, dai un'occhiata alla galleria di esempio di JSCharting e al codice sorgente (opzioni dei grafici) usato per creare i grafici. Puoi imparare rapidamente come usare le altre funzionalità copiando gli esempi disponibili.

step2.zip

Step 3 - Preparare i dati

Il formato CSV è costituito da dati separati da virgole. Il file contiene righe, ognuna delle quali rappresenta un record o un'entrata. Normalmente la prima riga di valori contiene i nomi di ogni valore separato da virgola (colonna). Le righe successive contengono i valori veri e propri.

name,age
chris,26
mike,34

Il CSV è leggibile, ma ci sono variazioni di questo formato. A volte se i valori contengono virgole (come gli indirizzi di posta), il formato non funziona così com'è, quindi ogni valore va racchiuso tra virgolette. In questo modo le virgole all'interno delle virgolette vengono ignorate e il formato può ancora funzionare usando solo le virgole fuori dalle virgolette per separare i valori.

"name","age","parents"
"Chris","26","Gregory, Mary"
"Mike","34","David, Sarah"

I valori possono essere separati usando un carattere diverso come un carattere di tabulazione al posto delle virgole.

Ma non restiamo impantanati in questi cavilli. JSCharting fornisce vari strumenti che aiutano con questo processo e ne useremo uno per smettere di preoccuparci del formato CSV e convertirlo in JSON (JavaScript Object Notation). Il risultato sarà un array di oggetti. Ogni oggetto rappresenta una riga con proprietà che hanno un nome. La prima riga nel file CSV viene usata per definire i nomi di queste proprietà.

Questo è l'URL dei dati che ci interessano: https://data.cdc.gov/resource/w9j2-ggv5.csv.

Puoi cliccarci su per scaricarlo e aprirlo in Excel.

In ogni caso, scaricherai e accederai a questi dati CSV in tempo reale usando del codice JavaScript. Il codice qui sotto potrebbe essere leggermente disorientante all'inizio, ma è breve e puoi riusarlo per ottenere programmaticamente qualsiasi file CSV, di testo o JSON da internet. È simile alla vecchia tecnologia AJAX ma più semplice da usare.

Di nuovo, sostituisci il contenuto del file index.js con il seguente codice:

fetch('https://data.cdc.gov/resource/w9j2-ggv5.csv')
   .then(function (response) {
      return response.text();
   })
   .then(function (text) {
	csvToSeries(text);
   })
   .catch(function (error) {
      //Qualcosa è andato storto
      console.log(error);
   });

function csvToSeries(text) {
   console.log(text);
}

Perché è così complicato? Perché quando richiedi un file, non diventa immediatamente disponibile. C'è un ritardo e devi aspettare che il file arrivi. Quindi prima richiedi il file da un altro sito usando fetch().

fetch('https://data.cdc.gov/resource/w9j2-ggv5.csv')

Poi il codice all'interno della funzione argomento di then(...) viene chiamato con la risposta quando questa arriva. Questa funzione converte la risposta in testo e la restituisce, passando il risultato alla funzione argomento del then() successivo.

.then(function (response) {
	return response.text();
})

La funzione argomento del then(...) successivo chiama la funzione csvToSeries() e le passa il testo come argomento.

.then(function (text) {
	csvToSeries(text);
})

Nella funzione catch() puoi specificare cosa fare se qualcosa va storto. Ad esempio, la connessione si interrompe o l'URL non è corretto.

.catch(function (error) {
	//Qualcosa è andato storto
	console.log(error);
});

In questo caso l'errore viene inviato alla console.

Nella funzione csvToSeries() passiamo il testo alla console come verifica.

function csvToSeries(text) {
   console.log(text);
}

Nota: la funzione nativa fetch() non è supportata da Internet Explorer 11. Se vuoi supportare questo browser puoi usare la funzione JSC.fetch() in dotazione con JSCharting. Fornisce la stessa funzionalità ma aggiungi supporto aggiuntivo per IE11.

Trascina il file index.html nella finestra del browser (o ricarica la pagina se è ancora aperta) e premi F12. In questo modo aprirai la finestra degli strumenti per sviluppatori del browser Chrome. Di default, la metà inferiore della finestra dei DevTools mostrerà l'output nella console. È qui che viene inviato il testo quando esegui del codice come:

console.log(text);

Puoi anche incollare o scrivere del codice nella finestra di questa console ed eseguirlo. Prova a incollare l'intero snippet di codice precedente nella finestra della console (dopo il carattere >) e premi invio. Otterrai lo stesso risultato come output. Può essere molto utile per testare una riga di codice e sperimentare.

step3-a.zip

A questo punto hai recuperato il testo del file CSV da internet e lo hai inviato alla console per verificare che funziona. Adesso possiamo iniziare a lavorarci su.

Diamo un'occhiata a questo file di dati per farci un'idea di cosa c'è dentro: https://data.cdc.gov/resource/w9j2-ggv5.csv

Ho usato Excel per ordinare le righe in base alla colonna dell'anno, per poter analizzare le righe di dati per ogni anno.

Ogni anno contiene 9 righe con dati basati su razza e sesso. Siamo interessati soltanto ai valori evidenziati per maschi (male) e femmine (female) di tutte le razze (All races) per ogni anno. Creerai due serie di dati basate sulle righe evidenziate. Una serie per i valori delle femmine e una per i valori dei maschi.

Ora che hai un'idea di cosa dobbiamo fare, procediamo.

Utilizziamo la funzione JSC.csv2Json() per convertire il testo in formato JSON e passarlo alla console per vedere cosa fa.

Aggiorna la funzione csvToSeries() con il seguente codice:

function csvToSeries(text) {
   let dataAsJson = JSC.csv2Json(text);
   console.log(dataAsJson)
}

Ricarica il browser per vedere l'output aggiornato nella console.

La console mostra un array di 1062 entrate. Ecco una di queste entrate:

{year: 1900, race: "All Races", sex: "Both Sexes", average_life_expectancy: 47.3, mortality: 2518}

Nota: la console può mostrare array e oggetti per un controllo, e puoi espandere o comprimere le sezioni nella console per esplorare i dettagli.

Il nome della proprietà average_life_expectancy è un po' lungo, ma ti servirà. Per evitare di scriverlo più di una volta, definiamo una variabile per conservarne il nome. Quando dobbiamo usare questa proprietà, possiamo scrivere semplicemente il nome della variabile lifeExp. Sarà row[lifeExp] invece di row.average_life_expectancy.

Aggiungi questa riga in cima alla funzione csvToSeries().

function csvToSeries(text) {
	const lifeExp = 'average_life_expectancy';
	...

Puoi elaborare i dati usando del semplice JavaScript. Il risultato finale che desideriamo è costituito da due serie di punti che includono un anno e un'aspettativa di vita per ogni punto.

Aggiorna la funzione csvToSeries() con il seguente codice:

function csvToSeries(text) {
	const lifeExp = 'average_life_expectancy';
	let dataAsJson = JSC.csv2Json(text);
	let male = [], female = [];
	dataAsJson.forEach(function (row) {
		 //add either to male, female, or discard.
		console.log(row);
	});
}

Definisce degli array per i dati relativi a maschi (male) e femmine (female). Poi chiama la funzione dataAsJson.forEach() passando la funzione callback function(row){...} come argomento. La funzione forEach() eseguirà la funzione callback per ogni elemento nell'array dataAsJson. Per ora chiameremo console.log(row) su ogni riga che incontra la funzione callback.

Ricarica il browser e controlla l'output sulla console.

Aggiungiamo un po' logica per filtrare i dati che vogliamo e mostrare il risultato nella console. Sostituisci la funzione csvToSeries() con questo codice.

function csvToSeries(text) {
	const lifeExp = 'average_life_expectancy';
	let dataAsJson = JSC.csv2Json(text);
	let male = [], female = [];
	dataAsJson.forEach(function (row) {
		 //add either to male, female, or discard.
		if (row.race === 'All Races') {
			if (row.sex === 'Male') {
				male.push({x: row.year, y: row[lifeExp]});
			} else if (row.sex === 'Female') {
				female.push({x: row.year, y: row[lifeExp]});
			}
		}
	});
    console.log([male, female]);
}

All'interno della funzione callback decidiamo se la riga è di nostro interesse oppure se scartarla.

if (row.race === 'All Races') {
	if (row.sex === 'Male') {
		//add data to male array
		male.push({x: row.year, y: row[lifeExp]});
	} else if (row.sex === 'Female') {
		//add data to female array
		female.push({x: row.year, y: row[lifeExp]});
	}
}

La logica verifica se il valore row.race sia uguale a 'All Races'. In tal caso, verifica se la proprietà row.sex sia uguale a 'Male' o 'Female'. Se la riga corrisponde a uno dei due, aggiunge i dati all'array male o female come un oggetto di punti {x, y}. Nota come l'uso della variabile lifeExp definita precedentemente aiuta ad accorciare il codice.

Alla fine, hai usato console.log([male, female]) per passare le variabili male e female alla console per poter verificare che tutto è andato come previsto.

Dopo aver aggiornato il browser, la console mostra il risultato composto da due array, ognuno di 118 punti che vanno dal 1900 al 2017

Infine, invece di passare il risultato alla console, racchiudi questi punti all'interno di un array di due serie che il grafico può usare direttamente e restituiscilo.

Aggiungi questo codice alla fine della funzione csvToSeries():

return [
   {name: 'Male', points: male},
   {name: 'Female', points: female}
];

Se i valori restituiti sono stati inviati alla console, dovrebbero produrre questo risultato.

Come puoi vedere, la logica per filtrare le righe è piuttosto semplice e puoi adattarla per ottenere altri dettagli dall'insieme di dati.

Per imparare di più sulla gestione dei file CSV usando le utilità di JSCharting, guarda questo tutorial. Quando sarai pronto per una gestione di dati più complessi, l'utilità JSC.nest() può essere usata per creare serie e punti da dati JSON con pochissimo codice.

step3-b.zip

Step 4 - Mettere tutto insieme

La sezione della gestione dei dati costituisce il passaggio più difficile, ma è necessaria per manipolare ed estrarre i dati di interesse da qualsiasi file CSV. È adesso che si mette insieme tutto e poi arriverà quel fantastico senso di realizzazione.

Inizia aggiungendo una funzione renderChart() alla fine del file index.js. Passeremo le serie di dati a questa funzione come argomento.

function renderChart(series){
   JSC.Chart('chartDiv', {
      series: series
   });
}

Nella funzione argomento di then() che chiama csvToSeries(), passa il risultato series alla funzione renderChart() per vedere cosa accade nel browser.

.then(function (text) {
	let series = csvToSeries(text);
	renderChart(series);
})

step4-a.zip

Adesso ricarica il browser. Dovresti vedere questo grafico che utilizza i dati CSV elaborati nella sezione precedente. Bello, vero?

Wow, cos'è successo nel 1918? L'aspettativa di vita si è ridotta un sacco. Secondo Wikipedia c'è stata una pandemia influenzale dovuta al virus H1N1 che ha sterminato una porzione della popolazione mondiale. Questo sfortunato evento ci mostra come visualizzare i dati possa dare informazioni che sarebbero meno evidenti guardando solo ai numeri.

Hai creato un grafico usando il tipo di serie lineare di default e sembra andare bene, ma puoi fare alcuni aggiustamenti e ritocchi per migliorarlo.

Per prima cosa, aggiungi un titolo in cima per spiegare il contenuto del grafico e un'annotazione in basso per citare la fonte dei dati. Aggiorna la funzione constructor JSC.Chart() in modo da passare le seguenti opzioni:

function renderChart(series){
	JSC.Chart('chartDiv', {
		title_label_text: 'Life Expectancy in the United States',
		annotations: [{
			label_text: 'Source: National Center for Health Statistics',
			position: 'bottom left'
		}],
		series: series
	});
}

Una volta ricaricata la pagina dovresti vedere il grafico aggiornato.

Hai aggiunto un'annotazione con label_text (testo etichetta) e un'impostazione position (posizione). Possiamo usare un'altra annotazione anche per il titolo, ma in questo caso era più semplice usare title_label_text.

È facile controllare la posizione delle annotazioni usando valori come 'top right' (in alto a destra) o 'inside bottom right' (all'interno in basso a destra). Il valore 'inside' vuol dire che l'annotazione viene posizionata all'interno dell'area del grafico in cui ci sono i dati. Questo esempio mostra le varie impostazioni di posizionamento.

La legenda mostra la somma dei valori dei punti per ogni serie, ma la somma non è importante per questo set di dati. Puoi ridurre le colonne della legenda in modo che mostrino l'icona della serie e il nome usando:

legend_template: '%icon,%name'

Ma non è affatto necessario che utilizzi una legenda. Sarà più pulito etichettare le linee stesse. Con queste opzioni puoi disabilitare la legenda e fare in modo di mostrare il nome delle serie in corrispondenza dell'ultimo punto:

legend_visible: false,
defaultSeries_lastPoint_label_text: '<b>%seriesName</b>',

Il token '%seriesname' è uno dei tanti che possono essere usati in qualsiasi testo di etichetta per mostrare dettagli puntuali e calcoli.

Infine, abilitiamo l'indicatore sull'asse x con descrizione per mostrare l'aspettativa di vita maschile e femminile per ogni anno. Su dispositivi mobili puoi toccare lo schermo per vedere l'indicatore. Usando un PC, la descrizione viene visualizzata passando con il puntatore del mouse sul grafico.

xAxis_crosshair_enabled: true,

Potresti chiederti il perché di tutti quei trattini bassi nel nome della proprietà. Questo non è il vero nome, ma un modo abbreviato per scrivere:

xAxis: {crosshair: {enabled: true}},

Potresti trovare più conveniente specificare un'impostazione con i trattini bassi e JSCharting sarà in grado di capire ciò che intendi.

Il testo predefinito è chiaro, ma personalizziamolo un po'.

Dato che vengono mostrate informazioni su ogni punto che l'indicatore incontra, il testo è definito all'interno delle opzioni del punto. La proprietà defaultPoint definisce le opzioni dei punti che verranno ereditate automaticamente da tutti i punti.

defaultPoint_tooltip: '%seriesName <b>%yValue</b> years',

Per più informazioni su questa funzionalità dai un'occhiata a questo tutorial.

Applicando tutte queste opzioni il tuo codice dovrebbe essere come il seguente. Sostituisci l'intera funzione renderChart() con questo codice.

function renderChart(series){
	JSC.Chart('chartDiv', {
		title_label_text: 'Life Expectancy in the United States',
		annotations: [{
			label_text: 'Source: National Center for Health Statistics',
			position: 'bottom left'
		}],
        legend_visible: false,
		defaultSeries_lastPoint_label_text: '<b>%seriesName</b>',
		defaultPoint_tooltip: '%seriesName <b>%yValue</b> years',
		xAxis_crosshair_enabled: true,
		series: series
	});
}

Ricarica ancora la finestra del browser.

Ce l'hai fatta!

Hai recuperato i dati in CSV usando JavaScript. Poi li hai convertiti in formato JSON e li hai filtrati in due serie. Con queste serie hai creato un fantastico grafico interattivo usando JSCharting e lo hai configurato per dargli un aspetto professionale.

Puoi personalizzare e modificare ulteriormente il grafico per soddisfare requisiti specifici. Visita la sezione tutorial di JSCharting per imparare di più su argomenti specifici o trovare grafici simili a quelli che vuoi realizzare nella galleria di esempio e prendere ispirazione da essi per continuare il tuo viaggio nella visualizzazione dei dati.

Se ti imbatti in qualche problema con JSCharting, contatta il team di supporto. Saranno felici di aiutarti a risolvere qualsiasi problema potresti incontrare.

step4-b.zip

Sfida bonus

Non abbiamo usato tutti i dati disponibili nel file CSV. Prova a sperimentare per fare pratica e divertirti.

Crea questo grafico usando ciò che hai imparato.

Questo file zip contiene la risposta:

step5-bonus.zip

Riesci a immaginare che altri grafici potresti realizzare con questi dati? Continua a fare esperimenti e assapora ogni minuto!

JavaScript non è un linguaggio orientato agli oggetti o basato su classi. Nonostante ciò ci sono dei modi per utilizzare la programmazione orientata agli oggetti (object oriented programming, OOP).

In questo tutorial, spiegherò la OOP e ti mostrerò come farne uso.

Secondo Wikipedia, la programmazione basata su classi è

uno stile di programmazione orientata agli oggetti (OOP) in cui l'ereditarietà avviene tramite la definizione di classi di oggetti, invece che tramite i soli oggetti.

Il modello più popolare di OOP è quello basato su classi.

Ma come ho menzionato, JavaScript non è un linguaggio basato su classi – è un linguaggio basato sul prototype.

Secondo la documentazione di Mozilla:

Un linguaggio basato sul prototype possiede il concetto di oggetto prototipico, un oggetto usato come stampo dal quale ottenere le proprietà iniziali per un nuovo oggetto.

Dai un'occhiata a questo codice:

let names = {
    fname: "Dillion",
    lname: "Megida"
}
console.log(names.fname);
console.log(names.hasOwnProperty("mname"));
// Output atteso
// Dillion
// false

La variabile oggetto names ha solo due proprietà – fname e lname. Nessun metodo.

Quindi da dove salta fuori hasOwnProperty?

Viene fuori dal prototype di Object.

Prova a vedere sulla console il contenuto della variabile:

console.log(names);

Espandendo il risultato sulla console otterrai questo:

Nota l'ultima proprietà – __proto__ – e prova ad espanderla:

Vedrai una serie di proprietà sotto il costruttore Object. Tutte queste proprietà derivano dal prototype globale di Object. Guardando con attenzione noterai anche la nostra proprietà nascosta hasOwnProperty.

In altre parole, tutti gli oggetti hanno accesso al prototype di Object. Non possiedono queste proprietà, ma è garantito loro l'accesso alle proprietà nel prototype.

La proprietà __proto__

Questa proprietà punta all'oggetto usato come prototype.

Si tratta di una proprietà di ogni oggetto che gli dà accesso alla proprietà prototype di Object.

Ogni oggetto ha questa proprietà come impostazione predefinita, che fa riferimento al prototype di Object, tranne se configurata diversamente (ovvero se __proto__ per quell'oggetto viene puntata su un altro prototype).

Modificare la proprietà __proto__

Questa proprietà può essere modificata definendo esplicitamente che dovrebbe far riferimento a un altro prototype. I seguenti metodi vengono usati a questo scopo:

Object.create()

function DogObject(name, age) {
    let dog = Object.create(constructorObject);
    dog.name = name;
    dog.age = age;
    return dog;
}
let constructorObject = {
    speak: function(){
        return "I am a dog"
    }
}
let bingo = DogObject("Bingo", 54);
console.log(bingo);

Ecco come si presenta la console:

Hai notato la proprietà __proto__ e il metodo speak?

Object.create fa sì che l'argomento passatole diventi il prototype.

Parola chiave new

function DogObject(name, age) {
    this.name = name;
    this.age = age;
}
DogObject.prototype.speak = function() {
    return "I am a dog";
}
let john = new DogObject("John", 45);

La proprietà __proto__ di john è diretta verso il prototype di DogObject. Ma ricorda che il prototype di DogObject è un oggetto (coppie chiave-valore), dunque possiede anch'esso una proprietà __proto__ che fa riferimento al prototype globale di Object.

Questa tecnica viene chiamata PROTOTYPE CHAINING (concatenamento di prototype).

Nota che l'approccio con la parola chiave new fa la stessa cosa di Object.create(), ma lo rende l'operazione più semplice dato che fa alcune cose automaticamente per te.

Quindi...

Ogni oggetto in JavaScript ha accesso al prototype di Object di default. Se configurato per fare uso di un altro prototype, diciamo prototype2, allora prototype2 avrà comunque accesso al prototype di Object di default e così via.

Combinazione oggetto + funzione

Probabilmente sei confuso dal fatto che DogObject sia una funzione (function DogObject(){}) e che abbia delle proprietà accessibili con la notazione a punto. Ciò viene chiamata combinazione funzione oggetto.

Quando le funzioni vengono dichiarate, vengono date loro molte proprietà di default. Ricorda che anche le funzioni sono degli oggetti in JavaScript.

E ora, le classi

La parola chiave class è stata introdotta in JavaScript con ECMAScript 2015. Rende JavaScript simile a un linguaggio OOP. Ma si tratta solo dello zucchero sintattico sulla base della tecnica di prototyping esistente, la quale continua in background, mentre dall'esterno il tutto sembra avere l'aspetto di una OOP. Adesso cercheremo di capire come sia possibile.

Il seguente esempio è un generico utilizzo di class in JavaScript:

class Animals {
    constructor(name, specie) {
        this.name = name;
        this.specie = specie;
    }
    sing() {
        return `${this.name} can sing`;
    }
    dance() {
        return `${this.name} can dance`;
    }
}
let bingo = new Animals("Bingo", "Hairy");
console.log(bingo);

Questo è il risultato sulla console:

__proto__ fa riferimento al prototype di Animals (che a sua volta fa riferimento al prototype di Object).

Da qui, possiamo vedere che il costruttore definisce le caratteristiche principali, mentre tutto ciò che è al di fuori del costruttore (sing() e dance()) costituisce delle funzionalità aggiuntive (prototype).

In background, usando l'approccio con la parola chiave new, quanto sopra si traduce in:

function Animals(name, specie) {
    this.name = name;
    this.specie = specie;
}
Animals.prototype.sing = function(){
    return `${this.name} can sing`;
}
Animals.prototype.dance = function() {
    return `${this.name} can dance`;
}
let Bingo = new Animals("Bingo", "Hairy");

Sottoclassi

Questa è una caratteristica della OOP, per cui una classe eredita caratteristiche dalla sua classe genitore ma possiede anche caratteristiche extra che il genitore non ha.

Ad esempio, diciamo di voler creare una classe Cats. Invece di creare la classe da zero – definendo proprietà come name, age e specie ex novo – possiamo far ereditare delle proprietà dalla classe genitore Animals.

La classe Cats può anche avere proprietà extra come wiskerColor, in questo caso.

Vediamo come ottenere una sottoclasse tramite class.

Abbiamo bisogno di un genitore da cui la sottoclasse erediterà delle caratteristiche. Esaminiamo il seguente codice:

class Animals {
    constructor(name, age) {
        this.name = name;
        this.age = age;
    }
    sing() {
        return `${this.name} can sing`;
    }
    dance() {
        return `${this.name} can dance`;
    }
} 
class Cats extends Animals {
    constructor(name, age, whiskerColor) {
        super(name, age);
        this.whiskerColor = whiskerColor;
    }
    whiskers() {
        return `I have ${this.whiskerColor} whiskers`;
    }
}
let clara = new Cats("Clara", 33, "indigo");

Con il codice qui sopra, otteniamo il seguente output:

console.log(clara.sing());
console.log(clara.whiskers());
// Output atteso
// "Clara can sing"
// "I have indigo whiskers"

Osservando il contenuto di clara nella console, vedremo:

Puoi notare che clara ha una proprietà __proto__ che fa riferimento al costruttore Cats e ha accesso al metodo whiskers(). La proprietà __proto__ ha a sua volta una proprietà __proto__ che fa riferimento al costruttore Animals avendo così accesso a sing() e dance(). name e age sono proprietà che esistono in ogni oggetto creato così.

Usando l'approccio del metodo Object.create, quanto sopra diventa:

function Animals(name, age) {
    let newAnimal = Object.create(animalConstructor);
    newAnimal.name = name;
    newAnimal.age = age;
    return newAnimal;
}
let animalConstructor = {
    sing: function() {
        return `${this.name} can sing`;
    },
    dance: function() {
        return `${this.name} can dance`;
    }
}
function Cats(name, age, whiskerColor) {
    let newCat = Animals(name, age);
    Object.setPrototypeOf(newCat, catConstructor);
    newCat.whiskerColor = whiskerColor;
    return newCat;
}
let catConstructor = {
    whiskers() {
        return `I have ${this.whiskerColor} whiskers`;
    }
}
Object.setPrototypeOf(catConstructor, animalConstructor);
const clara = Cats("Clara", 33, "purple");
clara.sing();
clara.whiskers();
// Output atteso
// "Clara can sing"
// "I have purple whiskers"

Object.setPrototypeOf è un metodo che accetta due argomenti – l'oggetto (primo argomento) e il prototype desiderato (secondo argomento).

Nel codice qui sopra, la funzione Animals restituisce un oggetto con animalConstructor come prototype. La funzione Cats restituisce un oggetto con catConstructor come prototype. catConstructor, d'altro canto, ha il prototype di animalConstructor.

Dunque, animali comuni hanno accesso solo a animalConstructor ma i gatti (cat) hanno accesso a catConstructor e animalConstructor.

In conclusione

JavaScript sfrutta la sua natura basata sul prototype per accogliere gli sviluppatori OOP nel suo ecosistema. Fornisce anche dei modi semplici per creare prototype e organizzare dati correlati.

I veri linguaggi OOP non eseguono prototyping in background – ricordalo.

Un sentito ringraziamento a Will Sentance. Tutto ciò che vedi in questo articolo (eccetto qualche cosuccia extra) l'ho imparato grazie al suo corso "JavaScript: The Hard Parts of Object Oriented JavaScript". Dovresti dargli un'occhiata.

Contattami su Twitter per domande o contributi.

Grazie per aver letto : )

Risorse utili (in inglese)

• Object-oriented JavaScript for beginners
• Introduction to Object Oriented Programming in JavaScript