Les Fonctions en JavaScript

Bienvenue dans ce chapitre sur les fonctions ! Tu vas apprendre à créer des fonctions réutilisables et puissantes.

1. Introduction aux fonctions

Les fonctions sont des blocs de code réutilisables qui effectuent une tâche spécifique. Elles sont essentielles en programmation !

Pourquoi utiliser des fonctions ?

Les fonctions permettent de :

Réutiliser du code
Organiser ton programme
Éviter les répétitions
Faciliter la maintenance

Définition et syntaxe de base

Voici comment créer une fonction simple :

ma-fonction.js

function saluer(nom) {
  return "Bonjour " + nom + " !";
}

// Utilisation
const message = saluer("Marie");
console.log(message); // "Bonjour Marie !"

Le mot-clé return permet de renvoyer une valeur depuis la fonction. Sans return, la fonction renvoie undefined.

Paramètres et valeurs de retour

Les fonctions peuvent accepter plusieurs paramètres et retourner différents types de valeurs :

calculatrice.js

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

function multiplier(x, y) {
  return x * y;
}

console.log(additionner(5, 3));    // 8
console.log(multiplier(4, 7));      // 28

Quiz

Que retourne cette fonction : `function test() { 5 + 5; }` ?

2. Arrow Functions

Les arrow functions sont une syntaxe moderne et concise pour déclarer des fonctions en JavaScript.

Syntaxe moderne

Les arrow functions sont apparues avec ES6 (2015) et sont maintenant la norme en JavaScript moderne.

Syntaxe de base

arrow-functions.js

// Fonction classique
function saluer(nom) {
  return "Salut " + nom;
}

// Arrow function équivalente
const saluerArrow = (nom) => {
  return "Salut " + nom;
}

// Version encore plus courte (return implicite)
const saluerCourt = nom => "Salut " + nom;

console.log(saluerCourt("Alex")); // "Salut Alex"

Quand utiliser les arrow functions ?

exemples-arrow.js

const nombres = [1, 2, 3, 4];
const doubles = nombres.map(n => n * 2);
// [2, 4, 6, 8]

// Avec filter()
const pairs = nombres.filter(n => n % 2 === 0);
// [2, 4]

// Avec reduce()
const somme = nombres.reduce((acc, n) => acc + n, 0);
// 10

Attention au contexte !

Les arrow functions ne créent pas leur propre this. Elles héritent du this de leur contexte parent. Cela peut être un avantage ou un inconvénient selon la situation !

Quiz

Quelle est la syntaxe correcte pour une arrow function qui retourne directement une valeur ?

3. Closures et Scope

Les closures sont l'un des concepts les plus puissants de JavaScript. Une closure permet à une fonction d'accéder aux variables de son scope parent.

Concept avancé

Les closures peuvent sembler complexes au début, mais elles sont incroyablement utiles pour créer des fonctions privées et gérer l'état !

Comprendre le scope

scope-exemple.js

function externe() {
  const message = "Je suis dans externe";

  function interne() {
    // La fonction interne a accès aux variables de externe
    console.log(message);
  }

  return interne;
}

const maFonction = externe();
maFonction(); // "Je suis dans externe"

Créer et utiliser des closures

Un exemple pratique avec un compteur :

compteur.js

function creerCompteur() {
  let count = 0; // Variable privée !

  return {
    incrementer: () => ++count,
    decrementer: () => --count,
    valeur: () => count
  };
}

const compteur = creerCompteur();
console.log(compteur.incrementer()); // 1
console.log(compteur.incrementer()); // 2
console.log(compteur.decrementer()); // 1
console.log(compteur.valeur());      // 1

// count n'est pas accessible directement !
// console.log(compteur.count); // undefined

Bravo ! Les closures te permettent d'encapsuler des données et de créer des variables vraiment privées en JavaScript.

Quiz

Que va afficher ce code ?\n```js\nfunction creerMultiplicateur(x) {\n return (y) => x * y;\n}\nconst double = creerMultiplicateur(2);\nconsole.log(double(5));\n```

Récapitulatif

Dans ce chapitre, tu as appris :

✅ Comment créer et utiliser des fonctions classiques
✅ La syntaxe moderne des arrow functions
✅ Les différences entre fonction classique et arrow function
✅ Le concept de scope et de closures
✅ Comment créer des variables privées avec les closures

Prochaine étape

Continue vers le chapitre suivant pour découvrir les objets et les classes en JavaScript !

Révise et apprendsefficacement

Voici comment nos cours sont structurés