Fonctions & Closures

Comprendre la portée et les fermetures lexicales

Section 1

Les différentes syntaxes

Step 1

Function declaration vs expression vs arrow

JavaScript a 3 façons de définir des fonctions. Chacune a des comportements différents sur le this et le hoisting.

snippet.javascript

javascript

1// Function declaration — hoistée (accessible avant sa définition)
2function add(a, b) { return a + b; }
3
4// Function expression — non hoistée
5const multiply = function(a, b) { return a * b; };
6
7// Arrow function — pas de this propre, non hoistée
8const divide = (a, b) => a / b;
9
10// Arrow function multi-lignes
11const process = (items) => {
12  const filtered = items.filter(Boolean);
13  return filtered.length;
14};
15
16// Arrow function avec déstructuration
17const getFullName = ({ firstName, lastName }) =>
18  `${firstName} ${lastName}`;

Step 2

Paramètres avancés

ES6+ a introduit des fonctionnalités puissantes pour les paramètres : valeurs par défaut, rest params, déstructuration.

snippet.javascript

javascript

1// Function declaration — hoistée (accessible avant sa définition)
2function add(a, b) { return a + b; }
3
4// Function expression — non hoistée
5const multiply = function(a, b) { return a * b; };
6
7// Arrow function — pas de this propre, non hoistée
8const divide = (a, b) => a / b;
9
10// Arrow function multi-lignes
11const process = (items) => {
12  const filtered = items.filter(Boolean);
13  return filtered.length;
14};
15
16// Arrow function avec déstructuration
17const getFullName = ({ firstName, lastName }) =>
18  `${firstName} ${lastName}`;

Section 2

Closures

Step 3

Qu'est-ce qu'une closure ?

Une closure est une fonction qui se souvient de son environnement lexical — les variables définies dans sa portée parente — même après que la fonction parente a terminé.

Step 4

Closure pour mémoriser

Pattern memoize — une closure qui cache les résultats de calculs coûteux.

snippet.javascript

javascript

1// Function declaration — hoistée (accessible avant sa définition)
2function add(a, b) { return a + b; }
3
4// Function expression — non hoistée
5const multiply = function(a, b) { return a * b; };
6
7// Arrow function — pas de this propre, non hoistée
8const divide = (a, b) => a / b;
9
10// Arrow function multi-lignes
11const process = (items) => {
12  const filtered = items.filter(Boolean);
13  return filtered.length;
14};
15
16// Arrow function avec déstructuration
17const getFullName = ({ firstName, lastName }) =>
18  `${firstName} ${lastName}`;

Topics and skills covered

JavaScript
Fonctions
Closures
Scope

Variables et types de données

Ch.1

Promises, async/await — maîtriser l'asynchrone

Ch.2