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
Copy file name to clipboardExpand all lines: 1-js/02-first-steps/16-function-expressions/article.md
+57-52Lines changed: 57 additions & 52 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -2,29 +2,29 @@
2
2
3
3
In JavaScript, una funzione non è una "struttura magica del linguaggio", ma un valore speciale.
4
4
5
-
La sintassi che abbiamo utilizzato prima vien chiamata *Dichiarazione di Funzione*:
5
+
La sintassi che abbiamo utilizzato finora viene chiamata *Dichiarazione di Funzione*:
6
6
7
7
```js
8
8
functionsayHi() {
9
9
alert( "Hello" );
10
10
}
11
11
```
12
12
13
-
E' disponibile un'altra sintassi per creare una funzione chiamata *Espressione di Funzione*.
13
+
E' disponibile un'altra sintassi per creare una funzione, chiamata *Espressione di Funzione*.
14
14
15
-
Ed appare cosi:
15
+
La sintassi:
16
16
17
17
```js
18
18
letsayHi=function() {
19
19
alert( "Hello" );
20
20
};
21
21
```
22
22
23
-
Qui la funzione viene creata ed assegnata ad una variabile esplicitamente proprio come qualsiasi altro valore. Non ha importanza come la funzione viene definita, è solo una valor salvato nella variabile `sayHi`.
23
+
Qui la funzione viene esplicitamente creata ed assegnata ad una variabile, proprio come un qualsiasi altro valore. Non ha importanza come la funzione viene definita, è solo un valore salvato nella variabile `sayHi`.
24
24
25
-
Il significato di questo esempio è lo stesso di: "creare una funzione e metterla dentro la variabile `sayHi`".
25
+
Il significato di questo esempio è lo stesso di: "crea una funzione e mettila dentro la variabile `sayHi`".
26
26
27
-
Possiamo anche stamparne il valore usando `alert`:
27
+
Possiamo anche mostrarne il valore usando `alert`:
28
28
29
29
```js run
30
30
functionsayHi() {
@@ -36,13 +36,13 @@ alert( sayHi ); // mostra il codice della funzione
36
36
*/!*
37
37
```
38
38
39
-
Da notare che l'ultima riga di codice non esegue la funzione, perchè non ci sono parentesi dopo `sayHi`. Ci sono linguaggi di programmazione in cui la semplice menzione del nome di funzione ne causa l'esecuzione, JavaScript non si comporta cosi.
39
+
Da notare che l'ultima riga di codice non esegue la funzione, perché non ci sono parentesi dopo `sayHi`. Ci sono linguaggi di programmazione in cui la semplice menzione del nome di una funzione ne causa l'esecuzione; JavaScript non funziona così.
40
40
41
-
In JavaScript, una funzione è un valore, quindi possiamo trattarla come un valore. Il codice sopra ne mostra la sua rappresentazione in stringa, cioè il codice contenuto dentro la funzione.
41
+
In JavaScript, una funzione è un valore, quindi possiamo lavorarci come con un qualsiasi altro valore. Il codice sopra ne mostra la sua rappresentazione in stringa, cioè il codice contenuto dentro la funzione.
42
42
43
-
E' chiaramente un valore speciale, poichè possiamo richiamarla con `sayHi()`.
43
+
E' chiaramente un valore speciale, poiché possiamo richiamarla con `sayHi()`.
44
44
45
-
Ma rimane comunque un valore. Quindi possiamo trattarlo come un qualsiasi altro valore.
45
+
Ma rimane comunque un valore, e come tale possiamo trattarlo.
46
46
47
47
Possiamo copiare la funzione in un'altra variabile:
48
48
@@ -54,18 +54,18 @@ function sayHi() { // (1) creazione
54
54
let func = sayHi; // (2) copia
55
55
56
56
func(); // Hello // (3) esegue la copia (funziona)!
57
-
sayHi(); // Hello // anche questa continua a funzionare (ed è giusto che sia cosi)
57
+
sayHi(); // Hello // anche questa continua a funzionare (perché non dovrebbe?)
58
58
```
59
59
60
-
Quello che succede nel dettaglio è:
60
+
Quello che succede, nel dettaglio, è:
61
61
62
62
1. La dichiarazione di funzione `(1)` crea la funzione e la inserisce nella variabile denominata `sayHi`.
63
63
2. La linea `(2)` la copia nella variabile `func`.
64
64
65
-
Ancora una volta: non ci sono parentesi dopo `sayHi`. Se ci fossero state, allora `func = sayHi()` avrebbe scritto*il risultato della chiamata*`sayHi()` in `func`, non *la funzione*`sayHi`.
65
+
Ancora una volta: non ci sono parentesi dopo `sayHi`. Se ci fossero state, allora `func = sayHi()` avrebbe inserito*il risultato della chiamata*`sayHi()`, non *la funzione*`sayHi`.
66
66
3. Adesso la funzione può essere richiamata sia con `sayHi()` che con `func()`.
67
67
68
-
Avremmo anche potuto utilizzare un espressione di funzione per dichiarare `sayHi`, nella prima riga:
68
+
Avremmo anche potuto utilizzare, nella prima riga, un'espressione di funzione per dichiarare `sayHi`:
69
69
70
70
```js
71
71
letsayHi=function() {
@@ -79,8 +79,8 @@ let func = sayHi;
79
79
Tutto funzionerebbe ugualmente. Risulta anche più chiaro cosa sta succedendo, giusto?
80
80
81
81
82
-
````smart header="Perchè c'è un punto e virgola alla fine?"
83
-
Vi starete chiedendo perchè con l'espressione di funzione bisogna mettere `;` alla fine, mentre con la dichiarazione di funzione non serve:
82
+
````smart header="Perché c'è un punto e virgola alla fine?"
83
+
Vi starete chiedendo perché con l'espressione di funzione bisogna mettere `;` alla fine, mentre con la dichiarazione di funzione non serve:
84
84
85
85
```js
86
86
function sayHi() {
@@ -94,12 +94,12 @@ let sayHi = function() {
94
94
95
95
La risposta è semplice:
96
96
- Non c'è bisogno di `;` alla fine dei blocchi di codice che utilizzano una sintassi del tipo `if { ... }`, `for { }`, `function f { }` etc.
97
-
- Unespressione di funzione viene utilizzata all'interno di unistruzione: `let sayHi = ...;`, come valore. Non è un blocco di codice. Quindi il `;` è consigliato al termine dell'istruzione, indipendentemente dal valore. Quindi il punto e virgola non è collegato all'espressione di funzione, più semplicemente termina unistruzione.
97
+
- Un'espressione di funzione viene utilizzata all'interno di un'istruzione: `let sayHi = ...;`, come valore. Non è un blocco di codice. Quindi il `;` è consigliato al termine dell'istruzione, indipendentemente dal valore. Il punto e virgola non è collegato all'espressione di funzione; più semplicemente, termina un'istruzione.
98
98
````
99
99
100
-
## Funzioni richiamate
100
+
## Funzioni richiamate (*callback functions*)
101
101
102
-
Diamo unocchiata ad ulteriori esempi di passaggio di funzione come valore e utilizzo di espressioni di funzione.
102
+
Diamo un'occhiata ad ulteriori esempi di passaggio di funzione come valore e utilizzo di espressioni di funzione.
103
103
104
104
Scriveremo una funzione `ask(question, yes, no)` con tre parametri:
105
105
@@ -134,13 +134,13 @@ function showCancel() {
134
134
ask("Do you agree?", showOk, showCancel);
135
135
```
136
136
137
-
Prima abbiamo visto come riscrivere le funzioni in maniera più breve, da notare che nel browser (e in alcuni casi anche lato server) queste funzioni risultano molto popolari. La principale differenza tra unimplementazione realistica e gli esempi sopra è solo che le funzioni reali utilizzano modalità più complesse per interagire con l'utente, non un semplice `confirm`. In ambiente browser, queste funzioni spesso mostrano delle interrogazioni molto carine. Ma questo è un altro discorso.
137
+
Queste funzioni possono essere molto utili. La principale differenza tra un'implementazione realistica e gli esempi sopra è che le funzioni "reali" utilizzano modalità più complesse per interagire con l'utente, non un semplice `confirm`. In ambiente browser, queste funzioni mostrano spesso delle finestre molto carine per gli input dell'utente. Ma questo è un altro discorso.
138
138
139
139
**Gli argomenti `showOk` e `showCancel` della `ask` sono chiamati *funzioni di richiamo* o semplicemente *callbacks*.**
140
140
141
-
L'idea è che passiamo una funzione e ci aspettiamo di "richiamarla" più tardi se necessario. Nel nostro caso `showOk` diventa la callback per la risposta "yes", e `showCancel` per la risposta "no".
141
+
L'idea è di passare una funzione e di "richiamarla" più tardi se necessario. Nel nostro caso `showOk` diventa la callback per la risposta "yes", e `showCancel` per la risposta "no".
142
142
143
-
Possiamo utilizzare unespressione di funzione per scrivere la stessa funzione più in breve:s
143
+
Possiamo utilizzare un'espressione di funzione per scrivere la stessa funzione più concisamente:
144
144
145
145
```js run no-beautify
146
146
functionask(question, yes, no) {
@@ -158,35 +158,35 @@ ask(
158
158
```
159
159
160
160
161
-
Qui la funzione viene dichiarata dentro alla chiamata di `ask(...)`. Queste non hanno nome, e sono denominate *anonime*. Queste funzioni non sono accessibili dall'esterno di `ask` (perchè non sono assegnate a nessuna variabile), ma è proprio quello che vogliamo in questo caso.
161
+
Qui la funzione viene dichiarata dentro alla chiamata di `ask(...)`. Queste non hanno nome, e perciò sono denominate *anonime*. Queste funzioni non sono accessibili dall'esterno di `ask` (perché non sono assegnate a nessuna variabile), ma è proprio quel che vogliamo in questo caso.
162
162
163
-
Questo tipo codice apparirà nei nostri script molto naturalmente, è nello spirito del JavaScript.
163
+
Questo tipo di codice comparirà nei nostri script molto naturalmente: è nello spirito di JavaScript.
164
164
165
165
166
166
```smart header="Una funzione è un valore che rappresenta un \"azione\""
167
167
I valori regolari come le stringhe o i numeri rappresentano *dati*.
168
168
169
-
Una funzione può anche essere vista come un*azione*.
169
+
Una funzione può anche essere vista come un'*azione*.
170
170
171
171
Possiamo passarla tra le variabili ed eseguirla quando vogliamo.
172
172
```
173
173
174
174
175
175
## Espressione di Funzioni vs Dichiarazione di Funzioni
176
176
177
-
Cerchiamo di elencare le differenze chiave tra Dichiarazioni ed Espressioni di Funzione.Expressions.
177
+
Cerchiamo di elencare le differenze chiave tra Dichiarazioni ed Espressioni di Funzione.
178
178
179
-
Primo, la sintassi: come capire cosa è cosa nel codice.
179
+
Primo, la sintassi: come distinguerle nel codice.
180
180
181
-
-*Dichiarazione di funzione:* una funzione, dichiarata come unistruzione separata, nel flusso principale del programma.
181
+
-*Dichiarazione di funzione:* una funzione, dichiarata come un'istruzione separata, nel flusso principale del programma.
182
182
183
183
```js
184
184
// Dichiarazione di funzione
185
185
functionsum(a, b) {
186
186
return a + b;
187
187
}
188
188
```
189
-
-*Espressione di funzione:* una funzione, creata all'interno di unespressione o all'interno di un altro costrutto. Qui, la funzione è creata alla destra dell' "espressione di assegnazione" `=`:
189
+
-*Espressione di funzione:* una funzione, creata all'interno di un'espressione o all'interno di un altro costrutto. Qui, la funzione è creata alla destra dell'"espressione di assegnazione"`=`:
190
190
191
191
```js
192
192
// Espressione di funzione
@@ -195,23 +195,23 @@ Primo, la sintassi: come capire cosa è cosa nel codice.
195
195
};
196
196
```
197
197
198
-
La differenza più subdola è *quando* una funzione viene creata dal motore JavaScript engine.
198
+
La differenza più subdola è *quando* una funzione viene creata dal motore JavaScript.
199
199
200
-
**Unespressione di funzione viene creata quando l'esecuzione la raggiunge ed è utilizzabile da quel momento in poi.**
200
+
**Un'espressione di funzione viene creata quando l'esecuzione la raggiunge ed è utilizzabile solo da quel momento in poi.**
201
201
202
-
Quando il flusso di esecuzione passa alla destra dell'operatore di assegnazione `let sum = function…` -- , la funzione viene creata epuò essere utilizzata (assegnata, chiamata, etc...) a partire da quel momento.
202
+
Quando il flusso di esecuzione passa alla destra dell'operatore di assegnamento `let sum = function…` , la funzione viene creata e, a partire da questo momento, può essere utilizzata (assegnata, chiamata, etc...).
203
203
204
-
La dichiarazione di funzione si comporta diversamente.
204
+
Una dichiarazione di funzione funziona diversamente.
205
205
206
206
**Una dichiarazione di funzione è utilizzabile nell'intero script/blocco di codice.**
207
207
208
-
In altre parole, quando JavaScript si *prepara* ad eseguire lo script o un blocco di codice, come prima cosa guarda le dichiarazioni di funzione contenute e le crea. Possiamo pensare a questo processo come uno "stage di inizializzazione".
208
+
In altre parole, quando JavaScript si *prepara* ad eseguire lo script o un blocco di codice, come prima cosa cerca le dichiarazioni di funzione e le crea. Possiamo pensare a questo processo come a uno "stage di inizializzazione".
209
209
210
-
Edopo che tutte le dichiarazioni di funzione sono state processate, l'esecuzione potrà procedere.
210
+
E' solo dopo che tutte le dichiarazioni di funzione sono state processate che l'esecuzione potrà procedere.
211
211
212
-
Come risultato, una funzione creata come dichiarazione di funzione può essere richiamata anche prima della sua definizione.
212
+
Come risultato, una funzione creata tramite una dichiarazione di funzione può essere richiamata anche prima della sua definizione.
213
213
214
-
Ad esempio il seguente codice funziona:
214
+
Ad esempio, il seguente codice funziona:
215
215
216
216
```js run refresh untrusted
217
217
*!*
@@ -223,9 +223,9 @@ function sayHi(name) {
223
223
}
224
224
```
225
225
226
-
La dichiarazione di funzione `sayHi` viene creata quando JavaScript si sta preparando ad eseguire lo script ed è visibile in qualsiasi punto.
226
+
La dichiarazione di funzione `sayHi` viene creata quando JavaScript si sta preparando ad eseguire lo script ed è visibile inogni suo punto.
227
227
228
-
...Se fosse stata unespressione di funzione, non avrebbe funzionato:
228
+
...Se fosse stata un'espressione di funzione, non avrebbe funzionato:
Le espressioni di funzione sono create quando l'esecuzione le incontra. In questo esempio avverà solo alla riga `(*)`. Troppo tardi.
240
+
Le espressioni di funzione sono create quando l'esecuzione le incontra. In questo esempio avverrà solo alla riga `(*)`. Troppo tardi.
241
241
242
-
**Quando una dichiarazione di funzione viene fatta all'interno di un blocco di codice, sarà visibile ovunque all'interno del blocco, ma non al suo esterno.**
242
+
**In *strict mode*, quando una dichiarazione di funzione viene fatta all'interno di un blocco di codice sarà visibile ovunque all'interno del blocco, ma non al suo esterno.**
243
243
244
-
Qualche volta è comodo dichiarare funzioni locali utili in un singolo blocco. Ma questa caratteristica potrebbe causare problemi.
244
+
Qualche volta è comodo dichiarare funzioni locali, utili in un singolo blocco. Ma questa caratteristica potrebbe causare problemi.
245
245
246
-
Ad esempio, immaginiamo di aver bisogno di dichiarare una funzione `welcome()`in base ad un parametro `age` che valuteremo a runtime. E abbiamo intenzione di utilizzarlo più avanti.
246
+
Ad esempio, immaginiamo di aver bisogno di dichiarare una funzione `welcome()`(la utilizzeremo più avanti) in base ad un parametro `age` che valuteremo durante il *runtime*.
247
247
248
248
Il codice sotto non funziona:
249
249
@@ -271,7 +271,7 @@ welcome(); // Errore: welcome non è definita
271
271
*/!*
272
272
```
273
273
274
-
Questo accade perchè una dichiarazione di funzione è visibile solamente all'interno del blocco di codice in cui è scritta.
274
+
Questo accade perché una dichiarazione di funzione è visibile solamente all'interno del blocco di codice in cui è stata definitia.
275
275
276
276
Un altro esempio:
277
277
@@ -308,7 +308,7 @@ welcome(); // Errore: welcome non è definita
308
308
309
309
Cosa possiamo fare per rendere visibile `welcome` all'esterno del blocco `if`?
310
310
311
-
Il giusto approccio è quello di utilizzare unespressione di funzione ed assegnarla ad una variabile `welcome` che viene dichiarata all'esterno di `if` ed ha quindi la corretta visibilità.
311
+
Il giusto approccio è quello di utilizzare un'espressione di funzione ed assegnarla ad una variabile `welcome`, che viene dichiarata all'esterno di `if` ed ha quindi la corretta visibilità.
312
312
313
313
Ora funziona:
314
314
@@ -351,17 +351,22 @@ welcome(); // ora funziona
351
351
```
352
352
353
353
354
-
```smart header="Quando conviene scegliere un dichiarazione di funzione vs espressione di funzione?"
355
-
Come regola fondamentale, quando abbiamo la necessita di dichiarare una funzione, la prima opzione da considerare è la dichiarazione di funzione. Fornisce maggiore libertà sul come organizzare il codice, poichè possiamo utilizzare quella funzione anche prima della sua dichiarazione.
354
+
```smart header="Quando conviene scegliere una dichiarazione di funzione piuttosto di un'espressione di funzione?"
355
+
Come regola fondamentale, quando abbiamo la necessità di dichiarare una funzione, la prima opzione da considerare è la dichiarazione di funzione. Fornisce maggiore libertà per quanto riguarda l'organizzazione del codice, poiché possiamo utilizzare la funzione anche prima della sua dichiarazione.
356
356
357
-
Risulta anche più facile vedere `function f(…) {…}` nel codice, piuttosto che `let f = function(…) {…}`. La dichiarazione di funzione è più facile da "notare".
357
+
Risulta anche più facile vedere `function f(…) {…}`, nel codice, piuttosto di `let f = function(…) {…}`. La dichiarazione di funzione è più facile da individuare.
358
358
359
-
...Ma se per qualche ragione la dichiarazione di funzione non si applica bene al caso in questione (abbiamo visto degli esempi sopra), allora l'espressione di funzione può essere utilizzata.
359
+
...Ma se per qualche ragione la dichiarazione di funzione non si applica bene al caso in questione (abbiamo visto degli esempi, sopra), allora l'espressione di funzione può essere un'alternativa.
360
360
```
361
361
362
-
## Summary
362
+
## Riepilogo
363
363
364
+
- Le funzioni sono valori. Possono essere assegnate, copiate o dichiarate in qualsiasi punto del codice.
365
+
- Se la funzione viene dichiarata come un blocco "separato" dal flusso d'esecuzione principale del codice, tale definizione viene chiamata "dichiarazione di funzione".
366
+
- Se la funzione viene definita tramite un'espressione, viene chiamata "espressione di funzione".
367
+
- Le dichiarazioni di funzione vengono processate prima che il bloco di codice dove sono state definitie sia raggiunto.
368
+
- Le espressioni di funzione vengono processate quando il flusso d'esecuzione del codice principale le raggiunge.
364
369
365
-
Nella maggior parte dei casi quando abbiamo bisogno di dichiarare una funzione, una dichiarazione di funzione è preferibile, poichè è visibile anche prima della riga di dichiarazione. Questo ci fornisce più flessibilità nell'organizzazione del codice, e solitamente risulta più leggibile.
370
+
Nella maggior parte dei casi, quando abbiamo bisogno di dichiarare una funzione una dichiarazione di funzione è preferibile poiché è visibile anche prima della sua dichiarazione. Questo ci fornisce più flessibilità nell'organizzazione del codice, e solitamente risulta più leggibile.
366
371
367
-
Quindi dovremmo utilizzare unespressione di funzione solo quando una dichiarazione di funzione non è adatta al caso specifico. Abbiamo visto un paio di esempi in questo capitolo, e ne vederemo altri in futuro.
372
+
Dovremmo, quindi, utilizzare un'espressione di funzione solo quando una dichiarazione di funzione non è adatta a un caso specifico. Abbiamo visto un paio di esempi in questo capitolo, e ne vederemo altri in futuro.
0 commit comments