FUNZIONI JAVASCRIPT
Nello sviluppo di siti web complessi e software in generale un aspetto fondamentale è l’organizzazione del codice. Supponiamo di avere un’applicazione costituita da dieci mila righe di codice non strutturato scritte una di seguito all’altra. Un codice simile nel caso funzioni sarebbe impossibile da gestire e mantenere, ampliare e modificare. Tramite le funzioni javascript possiamo suddividere il codice in blocchi separati, ciascuno dei quali esegue una certa funzione. Questi blocchi di codice li possiamo richiamare (invocare) ogni qualvolta ne abbiamo la necessità. Le funzioni sono definite in modo tale che possano ricevere dei dati in input e restituire dei dati in output.
In questo esempio numero_1 e numero_2 sono i dati in input, mentre con l’istruzione return restituiamo la variabile somma (dato in output) che viene memorizzata dalla variabile somma che si trova al di fuori del blocco di codice. Le “funzioni JavaScript” sono progettate per svolgere un’attività particolare, vengono eseguite quando “qualcosa” le invoca (le chiama).
function myFunction(p1, p2) {
return p1 + p2; // La funzione restituisce la somma di p1 e p2
}
Una funzione è definita con la parola chiave function, seguita da un nome, seguito da parentesi (). I nomi delle funzioni possono contenere lettere, cifre, trattini bassi e segni di dollaro (stesse regole delle variabili). Le parentesi possono includere i nomi dei parametri separati da virgole: (parametro1, parametro2, …). Il codice da eseguire è racchiuso tra parentesi graffe: {}
function name(parameter1, parameter2, parameter3) {
// code to be executed
}
I parametri della funzione sono elencati tra parentesi () nella sua definizione. Gli argomenti della funzione sono i valori ricevuti dalla funzione quando viene richiamata (dati passati in input). All’interno della funzione, i parametri si comportano come variabili locali.
INVOCAZIONE DI UNA FUNZIONE
Il codice all’interno delle “funzioni javascript” verrà eseguito quando “qualcosa” invoca (chiama) la funzione:
- Quando si verifica un evento (quando un utente fa clic su un pulsante)
- Quando viene invocato (chiamato) dal codice JavaScript
- Automaticamente (auto-invocato)
Imparerai molto di più sull’invocazione delle funzioni più avanti.
FUNZIONI JAVASCRIPT I VALORI DI RITORNO
Quando JavaScript raggiunge un’istruzione return, la funzione interrompe l’esecuzione. Se la funzione è stata invocata da un’istruzione, JavaScript “ritornerà” per eseguire la riga di codice immediatamente dopo la chiamata alla funzione. Le “funzioni javascript” spesso calcolano un valore, che viene “restituito” al “chiamante”:
let x = myFunction(4, 3); // La funzione viene chiamata, il valore restituito finirà in x (7)
function myFunction(a, b) {
return a + b; // La funzione restituisce la somma di a e b
}
Puoi riutilizzare il codice: definisci il codice una volta e usalo più volte. È possibile utilizzare lo stesso codice più volte con argomenti diversi, per produrre risultati diversi.
function toCelsius(fahrenheit) {
return (5/9) * (fahrenheit-32);
}
document.getElementById(“demo”).innerHTML = toCelsius(77);
L’operatore () richiama la funzione.
Utilizzando l’esempio precedente, toCelsius si riferisce all’oggetto funzione e toCelsius() si riferisce al risultato della funzione. L’accesso a una funzione senza () restituirà l’oggetto funzione invece del risultato.
function toCelsius(fahrenheit) {
return (5/9) * (fahrenheit-32);
}
document.getElementById(“demo”).innerHTML = toCelsius;
FUNZIONI USATE CON NOMI DI VARIABILE
Le funzioni possono essere utilizzate allo stesso modo delle variabili, in tutti i tipi di formule, assegnazioni e calcoli.
let x = toCelsius(77);
let text = “The temperature is ” + x + ” Celsius”;
Puoi usare la funzione direttamente, come valore di variabile:
let text = “The temperature is ” + toCelsius(77) + ” Celsius”;
FUNZIONI JAVASCRIPT LE VARIABILI LOCALI
Le variabili dichiarate all’interno di una funzione JavaScript diventano LOCALI per la funzione. È possibile accedere alle variabili locali solo dall’interno della funzione.
// il codice qui NON può usare carName
function myFunction() {
let carName = “Volvo“;
// il codice qui può usare carName
}
// il codice qui NON può usare carName
Poiché le variabili locali vengono riconosciute solo all’interno delle loro funzioni, le variabili con lo stesso nome possono essere utilizzate in funzioni diverse. Le variabili locali vengono create quando si invoca una funzione ed eliminate al completamento della stessa.
VARIABILI ESTERNE
Una funzione può accedere ad una variabile esterna, ad esempio:
let userName = ‘John‘;
function showMessage() {
let message = ‘Hello, ‘ + userName;
alert(message);
}
showMessage(); // Hello, John
La funzione ha pieno accesso alla variabile esterna. Può anche modificarla.
Un esempio:
let userName = ‘John‘;
function showMessage() {
userName = “Bob”; // (1) cambiata la variabile esterna
let message = ‘Hello, ‘ + userName;
alert(message);
}
alert( userName ); // John prima della chiamata di funzione
showMessage();
alert( userName ); // Bob, il valore è stato modificato dalla funzione
La variabile esterna viene utilizzata solo se non ce n’è una locale. Se una variabile con lo stesso nome viene dichiarata all’interno di una funzione, questa oscurerà quella esterna. Ad esempio, nel codice sotto la funzione usa la variabile locale userName. Quella esterna viene ignorata:
let userName = ‘John‘;
function showMessage() {
let userName = “Bob“; // dichiara una variabile locale
let message = ‘Hello, ‘ + userName; // Bob
alert(message);
}
// la funzione creerà è utilizzerà un suo ‘personale’ userName
showMessage();
alert( userName ); // John, intaccato, la funzione non può accedere alla variabile esterna perché oscurata
VARIABILI GLOBALI
Le variabili dichiarate all’esterno di qualsiasi funzione, come userName nel codice sopra, vengono chiamate globali. Le variabili globali sono visibili a qualsiasi funzione (se non sono oscurate da quelle locali). Solitamente, una funzione dichiara internamente tutte le variabili necessarie per svolgere il suo compito. Le variabili locali vengono utilizzate per memorizzare dati relativi alla funzione stessa. E’ bene evitare le variabili globali, sebbene qualche volta possano essere utili.
APPROFONDIMENTO AI
In JavaScript, le funzioni sono blocchi di codice progettati per eseguire un’operazione specifica. Queste sono fondamentali per strutturare e riutilizzare il codice in modo efficiente. Ecco una descrizione dettagliata delle funzioni in JavaScript, comprese le loro caratteristiche e tipologie:
1. Dichiarazione di una funzione
La sintassi di base per dichiarare una funzione in JavaScript è la seguente:
function nomeFunzione(parametro1, parametro2, …) {
// Corpo della funzione
// Azioni da eseguire
}
•function: È la parola chiave che definisce una nuova funzione.
•nomeFunzione: È il nome assegnato alla funzione, che dovrebbe riflettere lo scopo della funzione.
•parametro1, parametro2, …: Sono i parametri (facoltativi) che la funzione può ricevere come input. Possono essere utilizzati per passare informazioni alla funzione.
•Corpo della funzione: Contiene il codice che viene eseguito quando la funzione è invocata.
2. Chiamata di una funzione
Una volta dichiarata, una funzione può essere invocata (chiamata) in questo modo:
nomeFunzione(valore1, valore2, …);
3. Valore di ritorno
Le funzioni possono restituire un valore usando la parola chiave return. Se non è specificato, la funzione restituirà undefined.
Esempio di una funzione che restituisce un valore:
function somma(a, b) {
return a + b;
}
let risultato = somma(3, 4); // risultato sarà 7
4. Funzioni anonime
Una funzione anonima è una funzione che non ha un nome. Solitamente viene usata come valore di variabile o passata come argomento ad altre funzioni.
Esempio:
let saluto = function() {
console.log(“Ciao!“);
};
saluto(); // Invoca la funzione anonima
5. Funzioni freccia (Arrow Functions)
Le funzioni freccia sono una sintassi compatta introdotta con ES6 (ECMAScript 2015). Hanno un aspetto più conciso e non legano automaticamente il contesto this come le funzioni normali.
Sintassi di base:
(parametro1, parametro2, …) => {
// Corpo della funzione
return risultato;
}
const moltiplica = (a, b) => a * b;
let risultato = moltiplica(3, 4); // risultato sarà 12
6. Funzioni con parametri predefiniti
In JavaScript, è possibile specificare valori predefiniti per i parametri di una funzione. Se un valore non viene passato al momento della chiamata, verrà utilizzato il valore predefinito.
Esempio:
function saluta(nome = “Amico“) {
console.log(“Ciao, ” + nome);
}
saluta(); // “Ciao, Amico”
saluta(“Giulia“); // “Ciao, Giulia”
7. Funzioni come argomenti (Callback)
Le funzioni possono essere passate come argomenti ad altre funzioni. Questo è utile quando si lavora con funzioni asincrone, come operazioni che richiedono tempo (ad esempio, fetch di dati o setTimeout).
Esempio:
function eseguiFunzione(callback) {
callback();
}
eseguiFunzione(function() {
console.log(“Funzione eseguita!“);
});
8. Funzioni pure
Le funzioni pure sono quelle che, dato lo stesso input, restituiscono sempre lo stesso output e non causano effetti collaterali, come modificare variabili esterne.
Esempio di funzione pura:
function somma(a, b) {
return a + b;
}
9. Funzioni ricorsive
Le funzioni ricorsive sono funzioni che si chiamano da sole. Sono utili per risolvere problemi che possono essere suddivisi in sottoproblemi simili.
Esempio di funzione ricorsiva che calcola il fattoriale di un numero:
function fattoriale(n) {
if (n === 0) {
return 1;
}
return n * fattoriale(n – 1);
}
console.log(fattoriale(5)); // 120
10. Funzioni IIFE (Immediately Invoked Function Expression)
Un IIFE è una funzione che viene definita e invocata immediatamente.
Esempio:
(function() {
console.log(“Questa funzione viene eseguita subito!“);
})();
Conclusione
Le funzioni in JavaScript sono potenti strumenti che permettono di strutturare il codice in modo modulare, riutilizzabile e mantenibile.
Scrivi un commento