You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
The optional chaining `?.` is a safe way to access nested object properties, even if an intermediate property doesn't exist.
6
+
Il concatenamento opzionale (optional chaining),`?.`, è un modo sicuro di accedere alle proprietà annidate di un oggetto, anche nel caso in cui una proprietà intermedia non dovesse esistere.
7
7
8
-
## The "non-existing property" problem
8
+
## Il problema della "proprietà inesistente"
9
9
10
-
If you've just started to read the tutorial and learn JavaScript, maybe the problem hasn't touched you yet, but it's quite common.
10
+
Se avete appena cominciato a leggere il tutorial e a imparare JavaScript, forse questo problema non lo avete ancora affrontato, ma è piuttosto comune.
11
11
12
-
As an example, let's say we have `user` objects that hold the information about our users.
12
+
Ad esempio, ipotizziamo di avere un oggetto `user`, in cui sono memorizzate le informazioni relative ai nostri utenti.
13
13
14
-
Most of our users have addresses in `user.address` property, with the street`user.address.street`, but some did not provide them.
14
+
La maggior parte dei nostri utenti possiedono l'indirizzo nella proprietà `user.address`, la via in`user.address.street`, ma qualcuno potrebbe non averle fornite.
15
15
16
-
In such case, when we attempt to get`user.address.street`, and the user happens to be without an address, we get an error:
16
+
In questo caso, quando proviamo ad accedere a`user.address.street`, e l'utente non possiede un indirizzo, otterremo un errore:
17
17
18
18
```js run
19
-
let user = {}; //a user without "address" property
19
+
let user = {}; //un utente senza la proprietà "address"
20
20
21
-
alert(user.address.street); //Error!
21
+
alert(user.address.street); //Errore!
22
22
```
23
23
24
-
That's the expected result. JavaScript works like this. As`user.address`is`undefined`, an attempt to get `user.address.street`fails with an error.
24
+
Questo è il risultato che ci si aspetta. JavaScript funziona in questo modo. Se`user.address`è`undefined`, un tentativo di accesso a `user.address.street`fallirà con un errore.
25
25
26
-
In many practical cases we'd prefer to get `undefined`instead of an error here (meaning "no street").
26
+
Nella maggior parte dei casi, preferiremmo avere `undefined`piuttosto di un errore (con il significato "nessuna via").
27
27
28
-
...And another example. In the web development, we can get an object that corresponds to a web page element using a special method call, such as `document.querySelector('.elem')`, and it returns `null`when there's no such element.
28
+
... Un altro esempio. Il metodo `document.querySelector('.elem')` ritorna un oggetto che corrisponde ad un elemento della pagina web, che ritorna `null`quando l'elemento non esite.
29
29
30
30
```js run
31
-
// document.querySelector('.elem') is null if there's no element
32
-
let html =document.querySelector('.elem').innerHTML; //error if it's null
31
+
// document.querySelector('.elem') è null se non esiste l'elemento
32
+
let html =document.querySelector('.elem').innerHTML; //errore se è null
33
33
```
34
34
35
-
Once again, if the element doesn't exist, we'll get an error accessing `.innerHTML`of`null`. And in some cases, when the absence of the element is normal, we'd like to avoid the error and just accept `html = null` as the result.
35
+
Di nuovo, se un elemente non esiste, otterremo un errore nel tentativo di accedere a `.innerHTML`di`null`. In alcuni casi, in cui l'assenza di un elemento è normale, vorremo evitare l'errore e accettare come risultato `html = null`.
36
36
37
-
How can we do this?
37
+
Come possiamo farlo?
38
38
39
-
The obvious solution would be to check the value using`if`or the conditional operator `?`, before accessing its property, like this:
39
+
La soluzione più ovvia sarebbe di controllare il valore utilizzando`if`o l'operatore condizionale `?`, prima di accedere alle proprietà, come nell'esempio:
It works, there's no error... But it's quite inelegant. As you can see, the `"user.address"`appears twice in the code. For more deeply nested properties, that becomes a problem as more repetitions are required.
47
+
Funziona, nessun errore... Ma è poco elegante. Come potete vedere , `"user.address"`appare due volte nel codice. Per proprietà molto più annidate, potrebbe diventare un problema, in quanto saranno necessarie molte più ripetizioni.
48
48
49
-
E.g. let's try getting`user.address.street.name`.
49
+
Ad esempio, proviamo a recuperare il valore di`user.address.street.name`.
50
50
51
-
We need to check both `user.address`and`user.address.street`:
51
+
Dobbiamo verificare sia `user.address`che`user.address.street`:
AND'ing the whole path to the property ensures that all components exist (if not, the evaluation stops), but also isn't ideal.
69
+
Concatenare con `&&` l'intero percorso verso la proprietà ci assicura che tutti i componenti esistano (in caso contrario, la valutazione si interrompe), ma non è comunque l'ideale.
70
70
71
-
As you can see, property names are still duplicated in the code. E.g. in the code above, `user.address`appears three times.
71
+
Come potete vedere, il nome della proprietà è ancora duplicato nel codice. Ad esempio, nel codice sopra, `user.address`è ripetuto tre volte.
72
72
73
-
That's why the optional chaining `?.`was added to the language. To solve this problem once and for all!
73
+
Questo è il motivo per cui la concatenazione opzionale `?.`è stata aggiunta al linguaggio. Per risolvere questo problema una volta per tutte!
74
74
75
-
## Optional chaining
75
+
## Concatenazione opzionale
76
76
77
-
The optional chaining`?.`stops the evaluation if the value before `?.`is`undefined`or`null` and returns`undefined`.
77
+
La concatenazione opzionale`?.`interrompe la valutazione se il valore prima di `?.`è`undefined`o`null`, e ritorna`undefined`.
78
78
79
-
**Further in this article, for brevity, we'll be saying that something "exists" if it's not `null`and not`undefined`.**
79
+
**D'ora in poi in questo articolo, per brevità, diremo che qualcosa "esiste" se non è ne `null`né`undefined`.**
80
80
81
-
In other words, `value?.prop`:
82
-
-works as`value.prop`, if`value`exists,
83
-
-otherwise (when`value`is`undefined/null`) it returns`undefined`.
Please note: the `?.`syntax makes optional the value before it, but not any further.
104
+
Da notare: la sintassi `?.`rende opzionale il valore che la precede, nulla di più.
105
105
106
-
E.g. in `user?.address.street.name`the `?.`allows `user`to safely be `null/undefined`(and returns`undefined` in that case), but that's only for `user`. Further properties are accessed in a regular way. If we want some of them to be optional, then we'll need to replace more `.`with`?.`.
106
+
Ad esempio in `user?.address.street.name`il costrutto `?.`permette alla proprietà `user`di essere `null/undefined`in sicurezza (e ritornare`undefined` in questo caso), ma questo vale solamente per `user`. Si accederà alle altre proprietà normalmente. Se vogliamo che anche altre proprietà siano opzionali, dobbiamo rimpiazzare `.`con`?.`.
107
107
108
-
```warn header="Don't overuse the optional chaining"
109
-
We should use `?.`only where it's ok that something doesn't exist.
108
+
```warn header="Non abusate della concatenazione opzionale"
109
+
Dovremmo utilizzare `?.`solamente quando va bene che una proprietà possa non esistere.
110
110
111
-
For example, if according to our coding logic `user`object must exist, but`address`is optional, then we should write `user.address?.street`, but not`user?.address?.street`.
111
+
Ad esempio, considerando la logica del nostro codice, l'oggetto `user` deve necessariamente esistere, mentre `address` è opzionale, quindi dovremmo scrivere `user.address?.street`, non `user?.address?.street`.
112
112
113
-
So, if`user`happens to be undefined due to a mistake, we'll see a programming error about it and fix it. Otherwise, coding errors can be silenced where not appropriate, and become more difficult to debug.
113
+
Quindi, se `user` dovesse essere `undefined` per errore, otterremo un errore e potremmo sistemarlo. Altrimenti, gli errori di programmazione potrebbero essere silenziati in modo non appropriato, rendendo il debug molto difficile.
114
114
```
115
115
116
-
````warn header="The variable before `?.` must be declared"
117
-
If there's no variable `user` at all, then`user?.anything`triggers an error:
116
+
````warn header="La variabile che precede `?.` deve essere dichiarata"
117
+
Se non esiste alcuna variabile `user`, allora `user?.anything` provocherà un errore:
118
118
119
119
```js run
120
120
// ReferenceError: user is not defined
121
121
user?.address;
122
122
```
123
-
The variable must be declared (e.g. `let/const/var user`or as a function parameter). The optional chaining works only for declared variables.
123
+
La variabile deve essere dichiarata (ad esempio come `let/const/var user` o come parametro di funzione). La concatenazione opzionale funziona solamente con le variabili dichiarate.
124
124
````
125
125
126
-
## Short-circuiting
126
+
## Corto circuito
127
127
128
-
As it was said before, the `?.` immediately stops ("short-circuits") the evaluation if the left part doesn't exist.
128
+
Come detto in precedenza, il costrutto `?.` interrompe immediatamente (manda in "corto circuito") la valutazione se la proprietà a destra non esiste.
129
129
130
-
So, if there are any further function calls or side effects, they don't occur.
130
+
Quindi, nel caso ci siano ulteriori chiamate a funzione o side-effects, questi non verranno elaborati.
131
131
132
-
For instance:
132
+
Ad esempio:
133
133
134
134
```js run
135
135
let user = null;
136
136
let x = 0;
137
137
138
-
user?.sayHi(x++); //no "sayHi", so the execution doesn't reach x++
138
+
user?.sayHi(x++); // non esiste "sayHi", quindi l'esecuzione non raggiungerà x++
139
139
140
-
alert(x); // 0, value not incremented
140
+
alert(x); // 0, valore non incrementato
141
141
```
142
142
143
-
## Other variants: ?.(), ?.[]
143
+
## Altre varianti: ?.(), ?.[]
144
144
145
-
The optional chaining `?.` is not an operator, but a special syntax construct, that also works with functions and square brackets.
145
+
La concatenazione opzionale`?.`non è un operatore, ma uno speciale costrutto sintattico, che funziona anche con le funzioni e le parentesi quadre.
146
146
147
-
For example, `?.()` is used to call a function that may not exist.
147
+
Ad esempio, `?.()`viene utilizzato per invocare una funzione che potrebbe non esistere.
148
148
149
-
In the code below, some of our users have `admin` method, and some don't:
149
+
Nel codice sotto, alcuni dei nostri utenti possiedono il metodo `admin`, mentre altri no:
150
150
151
151
```js run
152
152
let userAdmin = {
@@ -162,15 +162,15 @@ userAdmin.admin?.(); // I am admin
162
162
*/!*
163
163
164
164
*!*
165
-
userGuest.admin?.(); //nothing (no such method)
165
+
userGuest.admin?.(); //niente (il metodo non esiste)
166
166
*/!*
167
167
```
168
168
169
-
Here, in both lines we first use the dot (`user1.admin`) to get `admin` property, because the user object must exist, so it's safe read from it.
169
+
Qui, in entrambe le righe, come prima cosa abbiamo utilizzato il punto (`user1.admin`) per ottenere la proprietà `admin`, poiché l'oggetto `user` deve necessariamente esistere, quindi l'accesso è sicuro.
170
170
171
-
Then`?.()`checks the left part: if the admin function exists, then it runs (that's so for `user1`). Otherwise (for`user2`) the evaluation stops without errors.
171
+
Successivamente`?.()`controlla la parte sinistra: se la funzione `admin` esiste, allora viene eseguita (ciò che accade con `user1`). Altrimenti (con`user2`) la valutazione si interrompe senza errori.
172
172
173
-
The `?.[]` syntax also works, if we'd like to use brackets `[]`to access properties instead of dot `.`. Similar to previous cases, it allows to safely read a property from an object that may not exist.
173
+
La sintassi `?.` funziona anche con le parentesi `[]`(invece del punto `.`). Come nei casi precedenti, possiamo accedere con sicurezza ad una proprietà di un oggetto che potrebbe non esistere.
174
174
175
175
```js run
176
176
let key ="firstName";
@@ -185,36 +185,36 @@ alert( user1?.[key] ); // John
185
185
alert( user2?.[key] ); // undefined
186
186
```
187
187
188
-
Also we can use `?.`with`delete`:
188
+
Possiamo anche utilizzare `?.`con`delete`:
189
189
190
190
```js run
191
-
delete user?.name; //delete user.name if user exists
191
+
delete user?.name; //cancella user.name se l'utente esiste
192
192
```
193
193
194
-
````warn header="We can use `?.`for safe reading and deleting, but not writing"
195
-
The optional chaining`?.`has no use at the left side of an assignment.
194
+
````warn header="Possiamo utilizzare `?.`per l'accesso e la rimozione sicura, ma non per la scrittura"
195
+
La concatenazione opzionale`?.`non ha alcun significato alla sinistra di un'assegnazione.
As we can see, all of them are straightforward and simple to use. The `?.`checks the left part for `null/undefined` and allows the evaluation to proceed if it's not so.
216
+
Come possiamo vedere, le tre forme sono semplici da utilizzare. Il costrutto `?.`verifica che la parte sinistra non sia `null/undefined`; se non lo è, permette alla valutazione di proseguire, altrimenti interrompe immediatamente la valutazione.
217
217
218
-
A chain of`?.`allows to safely access nested properties.
218
+
La concatenazione di`?.`permette di accedere in sicurezza a proprietà annidate.
219
219
220
-
Still, we should apply `?.`carefully, only where it's acceptable that the left part doesn't exist. So that it won't hide programming errors from us, if they occur.
220
+
In ogni caso, dovremmo applicare `?.`con prudenza, solamente nei casi in cui è accettabile che la parte sinistra possa non esistere. In questo modo evitiamo di nascondere errori di programmazione, nel caso ce ne siano.
0 commit comments