Le famose lambda functions (aka arrow functions)

Pubblicato da

  



Le lambda functions (o funzioni anonime) sono un concetto fondamentale nella programmazione funzionale e sono comunemente utilizzate in linguaggi come JavaScript. 

In JavaScript, una lambda function è semplicemente una funzione che non ha un nome specifico e viene definita inline, spesso come argomento di altre funzioni o come ritorno di una funzione. Queste funzioni sono compatte, concise e vengono usate in situazioni dove non è necessario definire una funzione completa con un nome.

🔗 Ti piace Techelopment? Dai un’occhiata al sito per tutti i dettagli!

Lambda Functions in azione

Le lambda functions sono anche note come funzioni anonime o arrow functions, nel caso di JavaScript con la sintassi => introdotta in ECMAScript 6 (ES2015). La loro sintassi compatta e potente consente di scrivere codice funzionale in modo più espressivo e leggibile.

1. Funzioni Anonime con function

In JavaScript, una funzione anonima può essere definita utilizzando la parola chiave function, senza un nome associato. Ecco un esempio:


const numbers = [1, 2, 3, 4, 5];

// Anonymous fuction passed to a map()
const results = numbers.map(function(num) {
  return num * 2;  // Multiply each number by 2
});

console.log(results);  // [2, 4, 6, 8, 10]

In questo esempio, la funzione anonima function(num) { return num * 2; } viene passata come argomento al metodo map() per moltiplicare ogni elemento dell'array per 2.

2. Arrow Functions (sintassi compatibile con le Lambda)

A partire da ECMAScript 6 (ES6), è stata introdotta la sintassi delle arrow functions (=>), che è una forma più concisa di scrivere le funzioni anonime. La sintassi è la seguente:


const numbers = [1, 2, 3, 4, 5];

// Arrow function
const results = numbers.map(num => num * 2);

console.log(results);  // [2, 4, 6, 8, 10]

In questo caso, num => num * 2 è un arrow function che esegue lo stesso compito della funzione anonima di prima, ma in modo più compatto. 

È importante notare che le arrow functions non hanno il proprio this, il che le rende particolarmente utili in alcuni scenari (di solito, quando si vogliono evitare problemi di scoping con il this).


La Sintassi delle Lambda Functions

Partiamo da esempio pratico di lambda functions per filtrare gli elementi di un array. Immagina di avere un array di numeri e di voler ottenere solo quelli pari:


const numbers = [1, 2, 3, 4, 5, 6];

// Using filter with a lambda function
const evenNumbers = numbers.filter(num => num % 2 === 0);

console.log(evenNumbers);  // [2, 4, 6]

In questo caso, la lambda function num => num % 2 === 0 viene utilizzata per filtrare i numeri pari dall'array, ma come funziona di preciso questa sintassi? Cerchiamo di capirlo meglio confrontandola con la programmazione tradizionale (imperativa).

Sintassi di base

La sintassi di una arrow function è la seguente:


const functionName = (param1, param2, ...) => {
  // function body
}

1. Funzione con due o più parametri

Con Arrow Function:


const sum = (a, b) => {
    return a + b;
};

console.log(sum(3, 5)); // 8

Senza Arrow Function (funzione tradizionale):


function sum(a, b) {
    return a + b;
}

console.log(sum(3, 5)); // 8
 

In questo caso, il comportamento è lo stesso, ma la arrow function è più concisa.

2. Funzione con un solo parametro e che restituisce un valore direttamente

Con Arrow Function:


const square = x => x * x;

console.log(square(4)); // 16

Senza Arrow Function (funzione tradizionale):


function square(x) {
  return x * x;
}

console.log(square(4)); // 16

Nel caso ci sia un solo parametro in input alla funzione (x) e una sola operazione che la funzione deve eseguire (x * x), le parentesi (sia tonde che graffe) non servono ed è possibile eliminare il return.

3. Funzione senza parametri

Con Arrow Function:


const greet = () => console.log('Hello!');

greet(); // "Hello!"

Senza Arrow Function (funzione tradizionale):


function greet() {
  console.log('Hello!');
}

greet(); // "Hello!"

Nel caso non ci siano parametri in input, è necessario utilizzare le parentesi ().

4. Funzione con più righe di codice

Con Arrow Function:


const operation = (a, b) => {
  const sum = a + b;
  const product = a * b;
  return sum + product;
};

console.log(operation(2, 3)); // 11 (5 + 6)

Senza Arrow Function (funzione tradizionale):


function operation(a, b) {
  const sum = a + b;
  const product = a * b;
  return sum + product;
}

console.log(operation(2, 3)); // 11 (5 + 6)

Anche in questo caso, la arrow function non cambia la logica, ma è leggermente più compatta nella scrittura.

5. Funzione che ritorna un oggetto

Con Arrow Function:


const createObject = (name, age) => ({
  name: name,
  age: age
});

console.log(createObject("Francesco", 30)); // { name: "Francesco", age: 30 }

Senza Arrow Function (funzione tradizionale):


function createObject(name, age) {
  return {
    name: name,
    age: age
  };
}

console.log(createObject("Francesco", 30)); // { name: "Francesco", age: 30 }

In questo caso, la arrow function permette di omettere la parola chiave return e le parentesi graffe, rendendo il codice più compatto.

6. Contesto di this

Una delle principali differenze tra le arrow functions e le funzioni tradizionali è come gestiscono il contesto di this.

Senza Arrow Function (funzione tradizionale):


const person = {
  name: "Francesco",
  greet: function() {
    setTimeout(function() {
      console.log("Hello, I am " + this.name);  // `this` does not refer to the `person` object
    }, 1000);
  }
};

person.greet(); // "Hello, I am undefined"

Nel caso della funzione tradizionale, quando la funzione è passata a setTimeout, il contesto di this cambia e non fa più riferimento all'oggetto person.

Con Arrow Function:


const person = {
  name: "Francesco",
  greet: function() {
    setTimeout(() => {
      console.log("Hello, I am " + this.name);  // `this` correctly refers to the `person` object
    }, 1000);
  }
};

person.greet(); // "Hello, I am Francesco"

Con l'arrow function, this mantiene il contesto dell'oggetto person, evitando il problema della perdita del contesto.

8. Impossibilità di usare new con le arrow functions

Le arrow functions non possono essere utilizzate come costruttori di oggetti, quindi non è possibile chiamarle con new.

Senza Arrow Function (funzione tradizionale):


function Person(name) {
  this.name = name;
}

const p = new Person('Francesco');
console.log(p.name); // Francesco

Con Arrow Function:


const Person = (name) => {
  this.name = name; // non funziona come previsto
};

const p = new Person('Francesco'); // TypeError: Person is not a constructor

Le arrow functions non hanno il proprio this, quindi non possono essere usate come costruttori, causando un errore se provi a utilizzarle con new.


Conclusioni

Le lambda functions (o arrow functions) sono uno degli strumenti principali della programmazione funzionale in JavaScript:

  • Sintassi più concisa: Le arrow functions sono generalmente più brevi e leggibili, in particolare quando si ha a che fare con funzioni di callback o quando si restituiscono valori in modo diretto.
  • Contesto di this: Le arrow functions non cambiano il contesto di this, quindi sono molto utili quando vuoi mantenere il valore di this dal contesto in cui la funzione è definita.
  • Non utilizzabili come costruttori: Le arrow functions non possono essere usate con new, mentre le funzioni tradizionali possono.

In JavaScript, l'adozione delle lambda functions consente di scrivere codice più elegante, ridurre il numero di righe di codice e migliorare la comprensione del flusso di esecuzione. Essendo un concetto chiave nella programmazione moderna, le lambda functions sono un'abilità essenziale per ogni sviluppatore che lavora con linguaggi funzionali o con JavaScript.


Follow me #techelopment

Official site: www.techelopment.it
facebook: Techelopment
instagram: @techelopment
X: techelopment
Bluesky: @techelopment
telegram: @techelopment_channel
whatsapp: Techelopment
youtube: @techelopment