Funzioni in JavaScript
Questo articolo spiega le funzioni in JavaScript.
YouTube Video
Funzioni in JavaScript
Funzioni in JavaScript sono blocchi di codice riutilizzabile utilizzati per eseguire compiti specifici. L'uso delle funzioni migliora la leggibilità del codice e rende più semplice la manutenzione. Le funzioni possono essere definite in diversi modi e manipolate in modo flessibile utilizzando argomenti e valori di ritorno.
Modi per Definire Funzioni
Dichiarazione di Funzione
Le funzioni possono essere definite usando la parola chiave function. Le dichiarazioni di funzione vengono sollevate (hoisted) prima che il codice venga eseguito, quindi possono essere richiamate prima di essere definite.
1console.log(greet("Everyone")); // Hello, Everyone
2
3function greet(name) {
4 return "Hello, " + name;
5}
6
7console.log(greet("Alice")); // Hello, Alice
In questo esempio, poiché la funzione greet viene richiamata prima della sua dichiarazione, vengono visualizzati Hello, Everyone e Hello, Alice.
Espressione di Funzione
Le funzioni possono essere definite anche assegnandole a una variabile. In questo caso, la funzione non viene sollevata (hoisted) e può essere richiamata solo dopo essere stata definita.
1const greet = function(name) {
2 return "Hello, " + name;
3};
4
5console.log(greet("Bob")); // Hello, Bob
In questo esempio, verrà mostrato Hello, Bob.
Funzione Freccia
Le funzioni freccia sono un modo per definire funzioni con una sintassi più breve. Sono particolarmente utili quando si utilizzano funzioni anonime (funzioni senza nome). Le funzioni freccia hanno anche un comportamento diverso riguardo alla parola chiave this.
1const greet = (name) => {
2 return "Hello, " + name;
3};
4
5// When it can be expressed in a single line,
6// `return` and curly braces can be omitted
7const greetShort = name => "Hello, " + name;
8
9console.log(greet("Charlie")); // Hello, Charlie
10console.log(greetShort("Dave")); // Hello, Dave
Le funzioni possono essere dichiarate come greet e greetShort in questo esempio. Se la funzione è su una sola riga, è possibile omettere le {} (parentesi graffe) come in greetShort.
Elementi di una Funzione
Argomenti
I valori passati a una funzione vengono chiamati argomenti. Specificando gli argomenti durante la definizione di una funzione, è possibile passare dei valori al momento della chiamata della funzione.
1function add(a, b) {
2 return a + b;
3}
4
5console.log(add(2, 3)); // 5
Argomenti Predefiniti
Puoi specificare un valore predefinito se agli argomenti non viene passato alcun valore.
1function greet(name = "Guest") {
2 return "Hello, " + name;
3}
4
5console.log(greet()); // Hello, Guest
6console.log(greet("Alice")); // Hello, Alice
In questo esempio, se viene chiamato greet(), viene utilizzato il valore predefinito Guest.
Valore Restituito
Puoi restituire un valore restituito da una funzione utilizzando l'istruzione return. Se non c'è istruzione return, la funzione restituisce undefined.
1function greet(name) {
2 console.log('Hello, ' + name + '!');
3}
4function square(num) {
5 return num * num;
6}
7
8console.log(square(4)); // 16
9console.log(greet('Alice')); // undefined
In questo esempio, poiché greet non restituisce un valore, il valore restituito è undefined.
Funzione Anonima
Una funzione senza nome viene chiamata funzione anonima. Sono spesso usate come espressioni di funzione o funzioni freccia.
1const double = function(num) {
2 return num * 2;
3};
4
5console.log(double(5)); // 10
Espressione di Funzione Subito Invocata (IIFE)
Una Espressione di Funzione Subito Invocata (IIFE) è una funzione che viene eseguita non appena viene definita. Di solito viene usata per controllare l'ambito.
1/* Example of IIFE: Immediately Invoked Function Expression */
2(function() {
3 console.log("This is an IIFE");
4})(); // This is an IIFE
Viene eseguita non appena viene dichiarata.
Funzione Callback
Passare una funzione come argomento ad un'altra funzione, per esecuzione successiva, viene chiamato funzione callback. Viene frequentemente utilizzata nell'elaborazione asincrona e nella gestione degli eventi.
1function processData(callback) {
2 let data = "Processed Data";
3 callback(data);
4}
5
6processData(function(result) {
7 console.log(result); // Processed Data
8});In questo esempio, una funzione che scrive un valore nella console viene passata come funzione callback.
Funzione Ricorsiva
Chiamare una funzione sé stessa è chiamato ricorsione, e una funzione che esegue elaborazioni ripetitive in questo modo è chiamata funzione ricorsiva. Ad esempio, una funzione per calcolare un fattoriale può essere implementata mediante ricorsione come segue.
1function factorial(n) {
2 if (n === 0) {
3 return 1;
4 } else {
5 return n * factorial(n - 1);
6 }
7}
8
9console.log(factorial(5));
10// Output : 120
11// (5 * 4 * 3 * 2 * 1 = 120)
In questo esempio verrà mostrato il fattoriale di 5, che è 120.
Parola Chiave this
Il this usato all'interno di una funzione indica a quale oggetto la funzione si riferisce. In una funzione normale, si riferisce all'oggetto che la chiama, ma nelle funzioni freccia, conserva il this dell'ambito in cui è stata definita.
1const obj = {
2 name: "Alice",
3 greet: function() {
4 console.log(this.name); // Refers to "Alice"
5 }
6};
7
8obj.greet(); // Alice
9
10const obj2 = {
11 name: "Bob",
12 greet: () => {
13 // Arrow function refers to the outer scope (undefined here)
14 console.log(this.name);
15 }
16};
17
18obj2.greet(); // undefined
Il greet della variabile obj viene dichiarato utilizzando la parola chiave function. Pertanto, la parola chiave this si riferisce all'oggetto della variabile obj. D'altra parte, il greet della variabile obj2 viene dichiarato utilizzando una funzione freccia. Pertanto, la parola chiave this si riferisce all'oggetto nello scope esterno ed è undefined in questo esempio.
Scope delle Funzioni e Closures
Le variabili definite all'interno di una funzione non possono essere accessibili dall'esterno della funzione. Questo viene chiamato scope della funzione. C'è anche una caratteristica chiamata closure che conserva lo scope al momento in cui la funzione viene definita.
1function outer() {
2 let outerVar = "I am outer!";
3
4 function inner() {
5 console.log(outerVar); // Can access outerVar
6 }
7
8 return inner;
9}
10
11const innerFunc = outer();
12innerFunc(); // I am outer!
In questo esempio, la funzione inner può accedere alla variabile outerVar perché conserva lo scope in cui è stata definita.
Riepilogo
- Ci sono vari modi per definire funzioni, incluse le dichiarazioni di funzione, le espressioni di funzione, e le funzioni freccia.
- Le funzioni possono accettare argomenti e restituire valori.
- Ci sono utilizzi speciali come le funzioni callback e le funzioni ricorsive.
- Bisogna prestare attenzione alla gestione di
this, poiché le funzioni freccia e le funzioni normali si comportano diversamente. - Le closures possono essere utilizzate per accedere a variabili interne dall'esterno dello scope.
Le funzioni sono uno dei concetti importanti in JavaScript, sfruttando la sua struttura flessibile.
Puoi seguire l'articolo sopra utilizzando Visual Studio Code sul nostro canale YouTube. Controlla anche il nostro canale YouTube.