Funzioni

3.1 Dichiarazione delle funzioni

Le funzioni sono uno dei blocchi fondamentali in JavaScript. Ti permettono di organizzare il codice, riutilizzare la logica e creare strutture più complesse. Vediamo tre metodi principali per dichiarare e utilizzare le funzioni: dichiarazione delle funzioni, espressioni di funzioni e arrow functions.

Dichiarazione di funzione — è una forma per creare una funzione con un nome che può essere chiamata successivamente. Queste funzioni "si sollevano" (hoisted) al vertice del loro ambito, permettendoti di chiamarle prima di dichiararle nel codice.

Sintassi:

    
      function name (arguments) {
        // corpo della funzione
      }
    
  

Esempio d'uso:

    
      // Dichiarazione di funzione
      function greet(name) {
        return `Hello, ${name}!`;
      }

      // Chiamata della funzione
      console.log(greet('Alice')); // Mostrerà: Hello, Alice!
    
  

3.2 Espressioni di funzioni

Le espressioni di funzioni creano funzioni anonime (funzioni senza nome) che possono essere assegnate a una variabile. Queste funzioni non "emergono", quindi possono essere chiamate solo dopo essere state dichiarate.

Sintassi:

    
      const name = function (arguments) {
        // corpo della funzione
      }
    
  

Esempio d'uso:

    
      // Espressione di funzione

      const greet = function(name) {
        return `Hello, ${name}!`;
      };

      // Chiamata della funzione
      console.log(greet('Bob')); // Mostrerà: Hello, Bob!
    
  

3.3 Arrow Functions

Arrow functions — sono un modo conciso per dichiarare funzioni che preservano anche il contesto di this dall'ambito genitore. Le arrow functions non hanno il proprio this, quindi sono particolarmente utili nei gestori eventi e nei metodi degli array.

Sintassi:

    
      const name = (arguments) => {
        // corpo della funzione
      }
    
  

Se la funzione accetta un solo parametro, puoi omettere le parentesi tonde. Se la funzione restituisce un'unica espressione, puoi omettere le parentesi graffe e la parola chiave return.

Esempio 1: Forma completa

    
      // Arrow function

      const greet = (name) => {
        return `Hello, ${name}!`;
      };

      // Chiamata della funzione
      console.log(greet('Charlie')); // Mostrerà: Hello, Charlie!
    
  

Esempio 2: Forma corta

    
      // Arrow function con un solo parametro e un'espressione
      const greet = name => `Hello, ${name}!`;

      // Chiamata della funzione
      console.log(greet('Dana')); // Mostrerà: Hello, Dana!
    
  

3.4 Confronto dei modi di dichiarare le funzioni

Sollevamento (hoisting):

• Dichiarazione di funzioni: le funzioni si sollevano, permettendo di chiamarle prima di dichiararle
• Espressioni di funzioni e Arrow functions: non si sollevano, possono essere chiamate solo dopo essere state dichiarate

Contesto this:

• Dichiarazione di funzioni e Espressioni di funzioni: hanno il proprio contesto this
• Arrow functions: non hanno il proprio this, il contesto è ereditato dall'ambito genitore

Convenienza nell'uso:

• Arrow functions: più concise e spesso usate per funzioni brevi e callback