# Fondamenti di JavaScript: Metodi e Funzioni  > Sketchnote di [Tomomi Imura](https://twitter.com/girlie_mac) ```mermaid journey title Your JavaScript Functions Adventure section Foundation Function Syntax: 5: You Calling Functions: 4: You Parameters & Arguments: 5: You section Advanced Concepts Return Values: 4: You Default Parameters: 5: You Function Composition: 4: You section Modern JavaScript Arrow Functions: 5: You Anonymous Functions: 4: You Higher-Order Functions: 5: You ``` ## Quiz Pre-Lettura [Quiz pre-lettura](https://ff-quizzes.netlify.app) Scrivere lo stesso codice ripetutamente è una delle frustrazioni più comuni nella programmazione. Le funzioni risolvono questo problema permettendoti di racchiudere il codice in blocchi riutilizzabili. Pensa alle funzioni come ai componenti standardizzati che hanno reso rivoluzionaria la catena di montaggio di Henry Ford: una volta creato un componente affidabile, puoi usarlo ovunque sia necessario senza doverlo ricostruire da zero. Le funzioni ti consentono di raggruppare pezzi di codice per riutilizzarli in tutto il programma. Invece di copiare e incollare la stessa logica ovunque, puoi creare una funzione una volta e chiamarla ogni volta che serve. Questo approccio mantiene il codice organizzato e rende gli aggiornamenti molto più semplici. In questa lezione, imparerai a creare le tue funzioni, a passare informazioni a esse e a ottenere risultati utili. Scoprirai la differenza tra funzioni e metodi, apprenderai approcci sintattici moderni e vedrai come le funzioni possono lavorare con altre funzioni. Costruiremo questi concetti passo dopo passo. [](https://youtube.com/watch?v=XgKsD6Zwvlc "Metodi e Funzioni") > 🎥 Clicca sull'immagine sopra per un video sui metodi e le funzioni. > Puoi seguire questa lezione su [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101-functions/?WT.mc_id=academic-77807-sagibbon)! ```mermaid mindmap root((JavaScript Functions)) Basic Concepts Declaration Traditional syntax Arrow function syntax Calling Using parentheses Parentheses required Parameters Input Values Multiple parameters Default values Arguments Values passed in Can be any type Return Values Output Data return statement Exit function Use Results Store in variables Chain functions Advanced Patterns Higher-Order Functions as parameters Callbacks Anonymous No name needed Inline definition ``` ## Funzioni Una funzione è un blocco di codice autonomo che svolge un compito specifico. Incapsula la logica che puoi eseguire ogni volta che ne hai bisogno. Invece di scrivere lo stesso codice più volte nel tuo programma, puoi racchiuderlo in una funzione e chiamare quella funzione ogni volta che ti serve. Questo approccio mantiene il codice pulito e rende gli aggiornamenti molto più semplici. Pensa alla sfida di manutenzione se dovessi cambiare una logica sparsa in 20 posizioni diverse nel tuo codice. Dare nomi descrittivi alle tue funzioni è essenziale. Una funzione ben nominata comunica chiaramente il suo scopo – quando vedi `cancelTimer()`, capisci immediatamente cosa fa, proprio come un pulsante chiaramente etichettato ti dice esattamente cosa accadrà quando lo clicchi. ## Creare e chiamare una funzione Esaminiamo come creare una funzione. La sintassi segue uno schema coerente: ```javascript function nameOfFunction() { // function definition // function definition/body } ``` Analizziamo questo codice: - La parola chiave `function` dice a JavaScript "Ehi, sto creando una funzione!" - `nameOfFunction` è dove dai alla tua funzione un nome descrittivo - Le parentesi `()` sono dove puoi aggiungere parametri (ci arriveremo presto) - Le parentesi graffe `{}` contengono il codice effettivo che viene eseguito quando chiami la funzione Creiamo una semplice funzione di saluto per vedere come funziona: ```javascript function displayGreeting() { console.log('Hello, world!'); } ``` Questa funzione stampa "Hello, world!" nella console. Una volta definita, puoi usarla tutte le volte che vuoi. Per eseguire (o "chiamare") la tua funzione, scrivi il suo nome seguito da parentesi. JavaScript ti permette di definire la tua funzione prima o dopo averla chiamata – il motore JavaScript gestirà l'ordine di esecuzione. ```javascript // calling our function displayGreeting(); ``` Quando esegui questa riga, esegue tutto il codice all'interno della tua funzione `displayGreeting`, mostrando "Hello, world!" nella console del browser. Puoi chiamare questa funzione ripetutamente. ### 🧠 **Verifica Fondamenti delle Funzioni: Costruire le Tue Prime Funzioni** **Vediamo come ti senti riguardo alle funzioni di base:** - Puoi spiegare perché usiamo le parentesi graffe `{}` nelle definizioni di funzione? - Cosa succede se scrivi `displayGreeting` senza le parentesi? - Perché potresti voler chiamare la stessa funzione più volte? ```mermaid flowchart TD A["✏️ Define Function"] --> B["📦 Package Code"] B --> C["🏷️ Give it a Name"] C --> D["📞 Call When Needed"] D --> E["🔄 Reuse Anywhere"] F["💡 Benefits"] --> F1["No code repetition"] F --> F2["Easy to maintain"] F --> F3["Clear organization"] F --> F4["Easier testing"] style A fill:#e3f2fd style E fill:#e8f5e8 style F fill:#fff3e0 ``` > **Nota:** Hai usato **metodi** durante queste lezioni. `console.log()` è un metodo – essenzialmente una funzione che appartiene all'oggetto `console`. La differenza principale è che i metodi sono collegati agli oggetti, mentre le funzioni sono indipendenti. Molti sviluppatori usano questi termini in modo intercambiabile nelle conversazioni informali. ### Buone pratiche per le funzioni Ecco alcuni consigli per scrivere ottime funzioni: - Dai alle tue funzioni nomi chiari e descrittivi – il tuo futuro te stesso ti ringrazierà! - Usa **camelCasing** per i nomi composti (come `calculateTotal` invece di `calculate_total`) - Mantieni ogni funzione focalizzata su un unico compito ## Passare informazioni a una funzione La nostra funzione `displayGreeting` è limitata – può solo mostrare "Hello, world!" per tutti. I parametri ci permettono di rendere le funzioni più flessibili e utili. I **parametri** agiscono come segnaposto dove puoi inserire valori diversi ogni volta che usi la funzione. In questo modo, la stessa funzione può lavorare con informazioni diverse a ogni chiamata. Elenca i parametri all'interno delle parentesi quando definisci la funzione, separando più parametri con delle virgole: ```javascript function name(param, param2, param3) { } ``` Ogni parametro agisce come un segnaposto – quando qualcuno chiama la tua funzione, fornirà valori reali che verranno inseriti in questi spazi. Aggiorniamo la nostra funzione di saluto per accettare il nome di qualcuno: ```javascript function displayGreeting(name) { const message = `Hello, ${name}!`; console.log(message); } ``` Nota come stiamo usando gli apici inversi (`` ` ``) e `${}` per inserire direttamente il nome nel messaggio – questo si chiama template literal, ed è un modo davvero utile per costruire stringhe con variabili mescolate. Ora, quando chiamiamo la nostra funzione, possiamo passare qualsiasi nome: ```javascript displayGreeting('Christopher'); // displays "Hello, Christopher!" when run ``` JavaScript prende la stringa `'Christopher'`, la assegna al parametro `name` e crea il messaggio personalizzato "Hello, Christopher!" ```mermaid flowchart LR A["🎯 Function Call"] --> B["📥 Parameters"] B --> C["⚙️ Function Body"] C --> D["📤 Result"] A1["displayGreeting('Alice')"] --> A B1["name = 'Alice'"] --> B C1["Template literal\n\`Hello, \${name}!\`"] --> C D1["'Hello, Alice!'"] --> D E["🔄 Parameter Types"] --> E1["Strings"] E --> E2["Numbers"] E --> E3["Booleans"] E --> E4["Objects"] E --> E5["Functions"] style A fill:#e3f2fd style C fill:#e8f5e8 style D fill:#fff3e0 style E fill:#f3e5f5 ``` ## Valori predefiniti E se volessimo rendere alcuni parametri opzionali? È qui che i valori predefiniti tornano utili! Supponiamo di voler permettere alle persone di personalizzare la parola di saluto, ma se non ne specificano una, useremo semplicemente "Hello" come valore predefinito. Puoi impostare valori predefiniti usando il segno di uguale, proprio come si fa con una variabile: ```javascript function displayGreeting(name, salutation='Hello') { console.log(`${salutation}, ${name}`); } ``` Qui, `name` è ancora obbligatorio, ma `salutation` ha un valore di riserva di `'Hello'` se nessuno fornisce un saluto diverso. Ora possiamo chiamare questa funzione in due modi diversi: ```javascript displayGreeting('Christopher'); // displays "Hello, Christopher" displayGreeting('Christopher', 'Hi'); // displays "Hi, Christopher" ``` Nella prima chiamata, JavaScript usa il valore predefinito "Hello" poiché non abbiamo specificato un saluto. Nella seconda chiamata, usa il nostro "Hi" personalizzato. Questa flessibilità rende le funzioni adattabili a diversi scenari. ### 🎛️ **Verifica Parametri: Rendere le Funzioni Flessibili** **Metti alla prova la tua comprensione dei parametri:** - Qual è la differenza tra un parametro e un argomento? - Perché i valori predefiniti sono utili nella programmazione reale? - Riesci a prevedere cosa succede se passi più argomenti rispetto ai parametri? ```mermaid stateDiagram-v2 [*] --> NoParams: function greet() {} [*] --> WithParams: function greet(name) {} [*] --> WithDefaults: function greet(name, greeting='Hi') {} NoParams --> Static: Same output always WithParams --> Dynamic: Changes with input WithDefaults --> Flexible: Optional customization Static --> [*] Dynamic --> [*] Flexible --> [*] note right of WithDefaults Most flexible approach Backwards compatible end note ``` > **Suggerimento utile**: I parametri predefiniti rendono le tue funzioni più user-friendly. Gli utenti possono iniziare rapidamente con valori predefiniti sensati, ma possono comunque personalizzare quando necessario! ## Valori di ritorno Le nostre funzioni finora hanno solo stampato messaggi nella console, ma cosa succede se vuoi che una funzione calcoli qualcosa e ti restituisca il risultato? È qui che entrano in gioco i **valori di ritorno**. Invece di limitarsi a mostrare qualcosa, una funzione può restituire un valore che puoi memorizzare in una variabile o utilizzare in altre parti del tuo codice. Per inviare un valore indietro, usi la parola chiave `return` seguita da ciò che vuoi restituire: ```javascript return myVariable; ``` Ecco qualcosa di importante: quando una funzione raggiunge un'istruzione `return`, smette immediatamente di funzionare e invia quel valore a chi l'ha chiamata. Modifichiamo la nostra funzione di saluto per restituire il messaggio invece di stamparlo: ```javascript function createGreetingMessage(name) { const message = `Hello, ${name}`; return message; } ``` Ora, invece di stampare il saluto, questa funzione crea il messaggio e ce lo restituisce. Per utilizzare il valore restituito, possiamo memorizzarlo in una variabile proprio come qualsiasi altro valore: ```javascript const greetingMessage = createGreetingMessage('Christopher'); ``` Ora `greetingMessage` contiene "Hello, Christopher" e possiamo usarlo ovunque nel nostro codice – per mostrarlo su una pagina web, includerlo in un'email o passarlo a un'altra funzione. ```mermaid flowchart TD A["🔧 Function Processing"] --> B{"return statement?"} B -->|Yes| C["📤 Return Value"] B -->|No| D["📭 Return undefined"] C --> E["💾 Store in Variable"] C --> F["🔗 Use in Expression"] C --> G["📞 Pass to Function"] D --> H["⚠️ Usually not useful"] I["📋 Return Value Uses"] --> I1["Calculate results"] I --> I2["Validate input"] I --> I3["Transform data"] I --> I4["Create objects"] style C fill:#e8f5e8 style D fill:#ffebee style I fill:#e3f2fd ``` ### 🔄 **Verifica Valori di Ritorno: Ottenere Risultati** **Valuta la tua comprensione dei valori di ritorno:** - Cosa succede al codice dopo un'istruzione `return` in una funzione? - Perché restituire valori è spesso meglio che limitarsi a stampare nella console? - Una funzione può restituire tipi di valori diversi (stringa, numero, booleano)? ```mermaid pie title "Common Return Value Types" "Strings" : 30 "Numbers" : 25 "Objects" : 20 "Booleans" : 15 "Arrays" : 10 ``` > **Insight chiave**: Le funzioni che restituiscono valori sono più versatili perché chi le chiama decide cosa fare con il risultato. Questo rende il tuo codice più modulare e riutilizzabile! ## Funzioni come parametri per altre funzioni Le funzioni possono essere passate come parametri ad altre funzioni. Sebbene questo concetto possa sembrare complesso inizialmente, è una caratteristica potente che consente modelli di programmazione flessibili. Questo schema è molto comune quando vuoi dire "quando succede qualcosa, fai quest'altra cosa". Ad esempio, "quando il timer finisce, esegui questo codice" o "quando l'utente clicca il pulsante, chiama questa funzione." Vediamo `setTimeout`, che è una funzione integrata che aspetta un certo periodo di tempo e poi esegue del codice. Dobbiamo dirle quale codice eseguire – caso perfetto per passare una funzione! Prova questo codice – dopo 3 secondi, vedrai un messaggio: ```javascript function displayDone() { console.log('3 seconds has elapsed'); } // timer value is in milliseconds setTimeout(displayDone, 3000); ``` Nota come passiamo `displayDone` (senza parentesi) a `setTimeout`. Non stiamo chiamando la funzione noi stessi – la stiamo passando a `setTimeout` dicendo "chiamala tra 3 secondi." ### Funzioni anonime A volte hai bisogno di una funzione per una sola cosa e non vuoi darle un nome. Pensaci – se usi una funzione solo una volta, perché appesantire il tuo codice con un nome extra? JavaScript ti permette di creare **funzioni anonime** – funzioni senza nome che puoi definire direttamente dove ti servono. Ecco come possiamo riscrivere il nostro esempio del timer usando una funzione anonima: ```javascript setTimeout(function() { console.log('3 seconds has elapsed'); }, 3000); ``` Questo ottiene lo stesso risultato, ma la funzione è definita direttamente all'interno della chiamata `setTimeout`, eliminando la necessità di una dichiarazione di funzione separata. ### Funzioni freccia Il JavaScript moderno ha un modo ancora più breve per scrivere funzioni chiamato **funzioni freccia**. Usano `=>` (che sembra una freccia – capito?) e sono molto popolari tra gli sviluppatori. Le funzioni freccia ti permettono di saltare la parola chiave `function` e scrivere codice più conciso. Ecco il nostro esempio del timer usando una funzione freccia: ```javascript setTimeout(() => { console.log('3 seconds has elapsed'); }, 3000); ``` Le `()` sono dove andrebbero i parametri (vuote in questo caso), poi arriva la freccia `=>`, e infine il corpo della funzione tra parentesi graffe. Questo fornisce la stessa funzionalità con una sintassi più concisa. ```mermaid flowchart LR A["📝 Function Styles"] --> B["Traditional"] A --> C["Arrow"] A --> D["Anonymous"] B --> B1["function name() {}"] B --> B2["Hoisted"] B --> B3["Named"] C --> C1["const name = () => {}"] C --> C2["Concise syntax"] C --> C3["Modern style"] D --> D1["function() {}"] D --> D2["No name"] D --> D3["One-time use"] E["⏰ When to Use"] --> E1["Traditional: Reusable functions"] E --> E2["Arrow: Short callbacks"] E --> E3["Anonymous: Event handlers"] style A fill:#e3f2fd style B fill:#e8f5e8 style C fill:#fff3e0 style D fill:#f3e5f5 style E fill:#e0f2f1 ``` ### Quando usare ogni strategia Quando dovresti usare ciascun approccio? Una linea guida pratica: se utilizzerai la funzione più volte, dagli un nome e definiscila separatamente. Se è per un uso specifico, considera una funzione anonima. Sia le funzioni freccia che la sintassi tradizionale sono scelte valide, anche se le funzioni freccia sono prevalenti nei moderni codici JavaScript. ### 🎨 **Verifica Stili di Funzione: Scegliere la Sintassi Giusta** **Metti alla prova la tua comprensione della sintassi:** - Quando potresti preferire le funzioni freccia rispetto alla sintassi tradizionale? - Qual è il principale vantaggio delle funzioni anonime? - Riesci a pensare a una situazione in cui una funzione con nome è migliore di una anonima? ```mermaid quadrantChart title Function Choice Decision Matrix x-axis Simple --> Complex y-axis One-time use --> Reusable quadrant-1 Arrow Functions quadrant-2 Named Functions quadrant-3 Anonymous Functions quadrant-4 Traditional Functions Event Handlers: [0.3, 0.2] Utility Functions: [0.7, 0.8] Callbacks: [0.2, 0.3] Class Methods: [0.8, 0.7] Mathematical Operations: [0.4, 0.6] ``` > **Tendenza moderna**: Le funzioni freccia stanno diventando la scelta predefinita per molti sviluppatori grazie alla loro sintassi concisa, ma le funzioni tradizionali hanno ancora il loro posto! --- ## 🚀 Sfida Riesci a spiegare in una frase la differenza tra funzioni e metodi? Prova! ## Sfida GitHub Copilot Agent 🚀 Usa la modalità Agent per completare la seguente sfida: **Descrizione:** Crea una libreria di utilità matematica che dimostri i diversi concetti di funzione trattati in questa lezione, inclusi parametri, valori predefiniti, valori di ritorno e funzioni freccia. **Prompt:** Crea un file JavaScript chiamato `mathUtils.js` che contenga le seguenti funzioni: 1. Una funzione `add` che prende due parametri e restituisce la loro somma 2. Una funzione `multiply` con valori predefiniti per i parametri (il secondo parametro predefinito è 1) 3. Una funzione freccia `square` che prende un numero e restituisce il suo quadrato 4. Una funzione `calculate` che accetta un'altra funzione come parametro e due numeri, quindi applica la funzione a quei numeri 5. Dimostra la chiamata di ciascuna funzione con casi di test appropriati Scopri di più sulla [modalità agent](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) qui. ## Quiz Post-Lettura [Quiz post-lettura](https://ff-quizzes.netlify.app) ## Revisione e Studio Autonomo Vale la pena [approfondire un po' di più le funzioni freccia](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Functions/Arrow_functions), poiché sono sempre più utilizzate nei codici. Prova a scrivere una funzione e poi a riscriverla con questa sintassi. ## Compito [Divertiti con le Funzioni](assignment.md) --- ## 🧰 **Riepilogo degli Strumenti per le Funzioni JavaScript** ```mermaid graph TD A["🎯 JavaScript Functions"] --> B["📋 Function Declaration"] A --> C["📥 Parameters"] A --> D["📤 Return Values"] A --> E["🎨 Modern Syntax"] B --> B1["function name() {}"] B --> B2["Descriptive naming"] B --> B3["Reusable code blocks"] C --> C1["Input data"] C --> C2["Default values"] C --> C3["Multiple parameters"] D --> D1["return statement"] D --> D2["Exit function"] D --> D3["Pass data back"] E --> E1["Arrow functions: () =>"] E --> E2["Anonymous functions"] E --> E3["Higher-order functions"] F["⚡ Key Benefits"] --> F1["Code reusability"] F --> F2["Better organization"] F --> F3["Easier testing"] F --> F4["Modular design"] style A fill:#e3f2fd style B fill:#e8f5e8 style C fill:#fff3e0 style D fill:#f3e5f5 style E fill:#e0f2f1 style F fill:#fce4ec ``` --- ## 🚀 Cronologia di Padronanza delle Funzioni JavaScript ### ⚡ **Cosa Puoi Fare nei Prossimi 5 Minuti** - [ ] Scrivi una semplice funzione che restituisca il tuo numero preferito - [ ] Crea una funzione con due parametri che li sommi insieme - [ ] Prova a convertire una funzione tradizionale in sintassi a freccia - [ ] Esercitati con la sfida: spiega la differenza tra funzioni e metodi ### 🎯 **Cosa Puoi Realizzare in Quest'ora** - [ ] Completa il quiz post-lezione e rivedi i concetti che ti risultano poco chiari - [ ] Crea la libreria di utilità matematiche dalla sfida di GitHub Copilot - [ ] Scrivi una funzione che utilizza un'altra funzione come parametro - [ ] Esercitati a scrivere funzioni con parametri di default - [ ] Sperimenta con i template literals nei valori di ritorno delle funzioni ### 📅 **La Tua Padronanza delle Funzioni per la Settimana** - [ ] Completa l'assegnazione "Divertiti con le Funzioni" con creatività - [ ] Refattorizza del codice ripetitivo che hai scritto trasformandolo in funzioni riutilizzabili - [ ] Crea un piccolo calcolatore utilizzando solo funzioni (senza variabili globali) - [ ] Esercitati con le funzioni a freccia usando metodi di array come `map()` e `filter()` - [ ] Crea una raccolta di funzioni utili per compiti comuni - [ ] Studia le funzioni di ordine superiore e i concetti di programmazione funzionale ### 🌟 **La Tua Trasformazione Mensile** - [ ] Padroneggia concetti avanzati sulle funzioni come chiusure e ambiti - [ ] Crea un progetto che utilizza ampiamente la composizione di funzioni - [ ] Contribuisci al codice open source migliorando la documentazione delle funzioni - [ ] Insegna a qualcun altro le funzioni e i diversi stili di sintassi - [ ] Esplora i paradigmi di programmazione funzionale in JavaScript - [ ] Crea una libreria personale di funzioni riutilizzabili per progetti futuri ### 🏆 **Check-in Finale del Campione delle Funzioni** **Festeggia la tua padronanza delle funzioni:** - Qual è la funzione più utile che hai creato finora? - In che modo imparare sulle funzioni ha cambiato il tuo modo di pensare all'organizzazione del codice? - Quale sintassi delle funzioni preferisci e perché? - Quale problema reale risolveresti scrivendo una funzione? ```mermaid journey title Your Function Confidence Evolution section Today Confused by Syntax: 3: You Understanding Basics: 4: You Writing Simple Functions: 5: You section This Week Using Parameters: 4: You Returning Values: 5: You Modern Syntax: 5: You section Next Month Function Composition: 5: You Advanced Patterns: 5: You Teaching Others: 5: You ``` > 🎉 **Hai padroneggiato uno dei concetti più potenti della programmazione!** Le funzioni sono i mattoni fondamentali dei programmi più grandi. Ogni applicazione che costruirai utilizzerà le funzioni per organizzare, riutilizzare e strutturare il codice. Ora comprendi come confezionare la logica in componenti riutilizzabili, diventando un programmatore più efficiente ed efficace. Benvenuto nel mondo della programmazione modulare! 🚀 --- **Disclaimer**: Questo documento è stato tradotto utilizzando il servizio di traduzione AI [Co-op Translator](https://github.com/Azure/co-op-translator). Sebbene ci impegniamo per garantire l'accuratezza, si prega di notare che le traduzioni automatiche potrebbero contenere errori o imprecisioni. Il documento originale nella sua lingua nativa dovrebbe essere considerato la fonte autorevole. Per informazioni critiche, si consiglia una traduzione professionale umana. Non siamo responsabili per eventuali incomprensioni o interpretazioni errate derivanti dall'uso di questa traduzione.