Chapitre 2 : Fonctions

Arrow Functions

Les arrow functions sont une syntaxe raccourcie pour les fonctions. Elles sont omniprésentes en React.

Syntaxe de base

// Fonction traditionnelle
function add(a, b) {
    return a + b;
}

// Arrow function équivalente
const add = (a, b) => {
    return a + b;
};

// Syntaxe courte (return implicite)
const add = (a, b) => a + b;

Règles de syntaxe

// Un seul paramètre : parenthèses optionnelles
const double = x => x * 2;
const double = (x) => x * 2; // équivalent

// Zéro paramètre : parenthèses obligatoires
const sayHello = () => "Hello";

// Plusieurs paramètres : parenthèses obligatoires
const add = (a, b) => a + b;

// Corps multi-lignes : accolades + return explicite
const calculate = (a, b) => {
    const sum = a + b;
    const product = a * b;
    return { sum, product };
};

// Retourner un objet directement : parenthèses autour
const createUser = (name) => ({ name, createdAt: new Date() });
// Sans parenthèses, JS pense que {} est le corps de la fonction!

Comparaison avec PHP

// PHP - fonction anonyme
$add = function($a, $b) {
    return $a + $b;
};

// PHP 7.4+ - arrow function (expression unique)
$add = fn($a, $b) => $a + $b;

// JavaScript - arrow function
const add = (a, b) => a + b;

Différence avec les fonctions traditionnelles

Les arrow functions ont une différence majeure : elles n'ont pas leur propre this.

// Problème avec fonction traditionnelle
const obj = {
    name: "Jean",
    greet: function() {
        setTimeout(function() {
            console.log(this.name); // undefined! 'this' a changé
        }, 1000);
    }
};

// Solution avec arrow function
const obj = {
    name: "Jean",
    greet: function() {
        setTimeout(() => {
            console.log(this.name); // "Jean" - arrow conserve le 'this'
        }, 1000);
    }
};

En React, cela simplifie beaucoup de choses (nous y reviendrons).

Paramètres par défaut

// Valeur par défaut si le paramètre n'est pas fourni
function greet(name = "Visiteur") {
    return `Bonjour ${name}`;
}

greet();        // "Bonjour Visiteur"
greet("Jean");  // "Bonjour Jean"

// Avec arrow function
const greet = (name = "Visiteur") => `Bonjour ${name}`;

// Paramètre par défaut utilisant un autre paramètre
const createUser = (name, role = "user", id = Date.now()) => ({
    name,
    role,
    id
});

Comparaison avec PHP

// PHP
function greet($name = "Visiteur") {
    return "Bonjour $name";
}

Fonctions de premier ordre (Callbacks)

En JavaScript, les fonctions sont des valeurs. On peut les :

Stocker dans des variables
Passer en argument à d'autres fonctions
Retourner depuis des fonctions

Passer une fonction en argument

// Fonction qui prend une autre fonction en paramètre
function executeWithLogging(fn, value) {
    console.log(`Exécution avec: ${value}`);
    const result = fn(value);
    console.log(`Résultat: ${result}`);
    return result;
}

const double = x => x * 2;
executeWithLogging(double, 5);
// "Exécution avec: 5"
// "Résultat: 10"

Méthodes de tableau avec callbacks

Ces méthodes sont essentielles en React :

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

// map - transformer chaque élément
const doubled = numbers.map(n => n * 2);
// [2, 4, 6, 8, 10]

// filter - garder les éléments qui passent le test
const evens = numbers.filter(n => n % 2 === 0);
// [2, 4]

// find - trouver le premier élément
const firstBig = numbers.find(n => n > 3);
// 4

// some - au moins un élément passe le test
const hasEven = numbers.some(n => n % 2 === 0);
// true

// every - tous les éléments passent le test
const allPositive = numbers.every(n => n > 0);
// true

// reduce - réduire à une seule valeur
const sum = numbers.reduce((acc, n) => acc + n, 0);
// 15

Usage en React

// Afficher une liste
const users = [
    { id: 1, name: "Jean" },
    { id: 2, name: "Marie" }
];

// Dans un composant React
return (
    <ul>
        {users.map(user => (
            <li key={user.id}>{user.name}</li>
        ))}
    </ul>
);

// Filtrer et afficher
const activeUsers = users.filter(u => u.active);
return (
    <ul>
        {activeUsers.map(user => (
            <li key={user.id}>{user.name}</li>
        ))}
    </ul>
);

Comparaison avec PHP

// PHP
$doubled = array_map(fn($n) => $n * 2, $numbers);
$evens = array_filter($numbers, fn($n) => $n % 2 === 0);
$sum = array_reduce($numbers, fn($acc, $n) => $acc + $n, 0);

// JavaScript - méthodes chaînables
const result = numbers
    .filter(n => n > 2)
    .map(n => n * 2)
    .reduce((acc, n) => acc + n, 0);

Shorthand Property Names

Quand le nom de la propriété est le même que le nom de la variable :

const name = "Jean";
const age = 30;

// SANS shorthand
const user = {
    name: name,
    age: age
};

// AVEC shorthand
const user = { name, age };
// { name: "Jean", age: 30 }

// Mélange
const user = {
    name,
    age,
    city: "Paris" // pas de shorthand ici
};

Shorthand Method Names

// SANS shorthand
const obj = {
    greet: function() {
        return "Hello";
    }
};

// AVEC shorthand
const obj = {
    greet() {
        return "Hello";
    }
};

Exercices

Exercice 1 : Arrow functions

Convertir en arrow functions :

function multiply(a, b) {
    return a * b;
}

function isEven(n) {
    return n % 2 === 0;
}

function createGreeting(name) {
    return {
        message: `Bonjour ${name}`,
        timestamp: Date.now()
    };
}

Solution :

const multiply = (a, b) => a * b;

const isEven = n => n % 2 === 0;

const createGreeting = name => ({
    message: `Bonjour ${name}`,
    timestamp: Date.now()
});

Exercice 2 : Méthodes de tableau

Avec ce tableau d'utilisateurs :

const users = [
    { id: 1, name: "Jean", age: 25, active: true },
    { id: 2, name: "Marie", age: 30, active: false },
    { id: 3, name: "Pierre", age: 35, active: true },
    { id: 4, name: "Sophie", age: 28, active: true }
];

Obtenir un tableau des noms uniquement
Filtrer les utilisateurs actifs de plus de 26 ans
Calculer la somme des âges

Solution :

// 1. Noms
const names = users.map(u => u.name);
// ["Jean", "Marie", "Pierre", "Sophie"]

// 2. Actifs > 26 ans
const filtered = users.filter(u => u.active && u.age > 26);
// [{ id: 3, ... }, { id: 4, ... }]

// 3. Somme des âges
const totalAge = users.reduce((sum, u) => sum + u.age, 0);
// 118

Points clés à retenir

Arrow functions : (params) => expression ou (params) => { statements }
Return implicite : sans accolades, la valeur est retournée automatiquement
Retourner un objet : () => ({ key: value }) (parenthèses obligatoires)
Callbacks : les fonctions peuvent être passées en argument
map, filter, reduce : méthodes essentielles pour manipuler des tableaux
Shorthand : { name } équivaut à { name: name }

← Chapitre précédent | Retour au module | Chapitre suivant : Asynchrone ->