El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència

HOME

En aquest tema, explorarem les expressions de funció i les funcions fletxa en JavaScript. Aquestes són eines poderoses que permeten una major flexibilitat i concisió en la definició de funcions.

Expressions de Funció

Què és una Expressió de Funció?

Una expressió de funció és una funció que es defineix dins d'una expressió. A diferència de les declaracions de funció, les expressions de funció no tenen nom (funcions anònimes) o poden tenir un nom opcional.

Sintaxi

const myFunction = function() {
    console.log("Això és una expressió de funció.");
};

Exemple Pràctic

// Declaració de funció
function greet() {
    console.log("Hola!");
}

// Expressió de funció
const greetExpression = function() {
    console.log("Hola des d'una expressió de funció!");
};

// Crida a les funcions
greet(); // Sortida: Hola!
greetExpression(); // Sortida: Hola des d'una expressió de funció!

Diferències Clau entre Declaracions i Expressions de Funció

Característica	Declaració de Funció	Expressió de Funció
Nom	Obligatori	Opcional
Hoisting	Sí	No
Definició	Fora de qualsevol expressió	Dins d'una expressió

Funcions Fletxa

Què és una Funció Fletxa?

Les funcions fletxa són una sintaxi més curta per escriure expressions de funció. A més de ser més concises, les funcions fletxa no tenen el seu propi this, arguments, super, o new.target.

Sintaxi

const myArrowFunction = () => {
    console.log("Això és una funció fletxa.");
};

Exemple Pràctic

// Expressió de funció
const add = function(a, b) {
    return a + b;
};

// Funció fletxa
const addArrow = (a, b) => a + b;

// Crida a les funcions
console.log(add(2, 3)); // Sortida: 5
console.log(addArrow(2, 3)); // Sortida: 5

Avantatges de les Funcions Fletxa

Sintaxi Concisa: Les funcions fletxa són més curtes i fàcils de llegir.
No Binding de this: Les funcions fletxa no tenen el seu propi this, el que pot evitar problemes comuns amb el context.

Exemple amb `this`

function Person() {
    this.age = 0;

    setInterval(() => {
        this.age++;
        console.log(this.age);
    }, 1000);
}

const p = new Person();
// Això incrementarà `age` cada segon, perquè `this` en la funció fletxa es refereix a l'objecte `Person`.

Exercicis Pràctics

Convertir Expressió de Funció a Funció Fletxa

Converteix la següent expressió de funció a una funció fletxa:
```
const multiply = function(x, y) {
    return x * y;
};
```
Solució:
```
const multiply = (x, y) => x * y;
```

Utilitzar Funcions Fletxa amb map

Utilitza una funció fletxa per transformar una llista de números multiplicant-los per 2:

const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map(function(num) {
    return num * 2;
});
console.log(doubled); // [2, 4, 6, 8, 10]

Solució:

const doubled = numbers.map(num => num * 2);
console.log(doubled); // [2, 4, 6, 8, 10]

Errors Comuns i Consells

No Binding de this: Recorda que les funcions fletxa no tenen el seu propi this. Això pot ser avantatjós o desavantatjós depenent del context.
No arguments Object: Les funcions fletxa no tenen l'objecte arguments. Si necessites accedir als arguments, utilitza una funció tradicional.

Resum

En aquesta secció, hem après sobre les expressions de funció i les funcions fletxa. Les expressions de funció permeten definir funcions dins d'expressions, mentre que les funcions fletxa ofereixen una sintaxi més concisa i un comportament diferent respecte a this. Hem vist exemples pràctics i exercicis per reforçar aquests conceptes. En el proper tema, explorarem els paràmetres i els valors de retorn en les funcions.

Expressions de Funció i Funcions Fletxa