Fonctions : déclarations, expressions et fonctions fléchées
Définissez des fonctions de trois façons, comprenez le hissage, utilisez les paramètres et les valeurs de retour, puis écrivez des fonctions fléchées concises.
Fonctions : déclarations, expressions et fonctions fléchées est une leçon Frontend Academy gratuite sur CoddyKit. Ceci est la leçon 3 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Frontend Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Frontend Academy comprend 4 leçons au total.
Que sont les fonctions ?
Les fonctions sont des blocs de code réutilisables. Elles prennent des entrées (paramètres), exécutent une logique et renvoient éventuellement une sortie. Les fonctions sont des valeurs de première classe en JavaScript : elles peuvent être affectées à des variables, transmises comme arguments et renvoyées par d’autres fonctions.
Déclarations de fonctions
Une déclaration de fonction crée une fonction nommée à l’aide du mot-clé function. Les déclarations sont remontées : vous pouvez les appeler avant leur apparition dans le code.
function greet(name) {
return `Hello, ${name}!`;
}
// Can call before declaration due to hoisting:
console.log(greet('Alice')); // 'Hello, Alice!'Expressions de fonction
Une expression de fonction affecte une fonction à une variable. Elle n’est pas remontée (la variable est remontée avec la valeur undefined). Les expressions de fonction peuvent être anonymes ou nommées.
const multiply = function(a, b) {
return a * b;
};
console.log(multiply(3, 4)); // 12
// Named function expression (name useful in stack traces):
const factorial = function fact(n) {
return n <= 1 ? 1 : n * fact(n - 1);
};Fonctions fléchées
Les fonctions fléchées sont une syntaxe concise introduite dans ES6. Elles ne possèdent pas leur propre this : elles héritent de this depuis la portée englobante. Elles sont idéales pour les fonctions de rappel et les fonctions courtes.
// Standard arrow:
const add = (a, b) => a + b;
// Single parameter (no parens needed):
const double = n => n * 2;
// No parameters:
const greet = () => 'Hello!';
// Multi-line body needs {} and return:
const process = (x) => {
const result = x * 2;
return result + 1;
};Paramètres et arguments
Les paramètres sont les noms listés dans la définition de la fonction. Les arguments sont les valeurs transmises lors de l’appel de la fonction. Les arguments supplémentaires sont ignorés ; les arguments manquants valent undefined.
function info(name, age) {
console.log(`${name} is ${age}`);
}
info('Alice', 30); // 'Alice is 30'
info('Bob'); // 'Bob is undefined'Paramètres par défaut
ES6 vous permet de définir des valeurs par défaut pour les paramètres. La valeur par défaut est utilisée lorsque l’argument vaut undefined, notamment lorsqu’il n’est pas transmis.
function greet(name = 'World') {
return `Hello, ${name}!`;
}
console.log(greet()); // 'Hello, World!'
console.log(greet('Alice')); // 'Hello, Alice!'L’instruction return
Par défaut, les fonctions renvoient undefined. Utilisez return pour renvoyer une valeur. Une fonction se termine au premier return rencontré : le code suivant n’est pas exécuté.
function divide(a, b) {
if (b === 0) return null; // early return
return a / b;
}
console.log(divide(10, 2)); // 5
console.log(divide(10, 0)); // nullParamètres restants
Le paramètre rest ...args rassemble tous les arguments restants dans un tableau. Il doit être le dernier paramètre. Il remplace l’ancien objet arguments dans le code moderne.
function sum(...numbers) {
return numbers.reduce((total, n) => total + n, 0);
}
console.log(sum(1, 2, 3, 4)); // 10Les fonctions comme valeurs (de première classe)
Les fonctions peuvent être stockées dans des variables, transmises à d’autres fonctions comme arguments (fonctions de rappel) et renvoyées par des fonctions. Cela permet des techniques puissantes, comme les méthodes de tableau et les écouteurs d’événements.
const numbers = [3, 1, 4, 1, 5];
const sorted = numbers.sort((a, b) => a - b); // callback
console.log(sorted); // [1, 1, 3, 4, 5]Fonctions pures
Une fonction pure renvoie la même sortie pour les mêmes entrées et n’a aucun effet secondaire (aucune modification du DOM, aucun appel réseau ni modification globale). Les fonctions pures sont faciles à tester, à déboguer et à comprendre.
// Pure:
const add = (a, b) => a + b;
// Impure (side effect: mutates external state):
let total = 0;
function addToTotal(n) { total += n; }Expressions de fonction immédiatement invoquées (IIFE)
Une IIFE s’exécute immédiatement au moment de sa définition. Elle était historiquement utilisée pour créer une portée privée. Elle est moins nécessaire aujourd’hui grâce aux modules et à la portée de bloc, mais elle apparaît encore dans les anciennes bases de code.
(function () {
const secret = 'hidden';
console.log('IIFE ran');
})();
// secret is not accessible hereVérification rapide
Laquelle des affirmations suivantes est vraie à propos des fonctions fléchées ?
Récapitulatif : les fonctions JavaScript
Les déclarations de fonctions sont remontées. Les expressions de fonction et les fonctions fléchées ne le sont pas. Les fonctions fléchées sont concises et ne possèdent pas leur propre this. Utilisez des paramètres par défaut pour gérer les arguments manquants. Les fonctions sont des valeurs de première classe : transmettez-les librement.
Questions Fréquemment Posées
La leçon « Fonctions : déclarations, expressions et fonctions fléchées » est-elle gratuite ?
Oui — le texte complet de « Fonctions : déclarations, expressions et fonctions fléchées » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Frontend Academy, passe à CoddyKit PRO. Le cours Frontend Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « Fonctions : déclarations, expressions et fonctions fléchées » ?
Définissez des fonctions de trois façons, comprenez le hissage, utilisez les paramètres et les valeurs de retour, puis écrivez des fonctions fléchées concises. Tu pratiques Frontend Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer Frontend Academy ?
Aucune expérience préalable n'est requise. Frontend Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 3 sur 4.
Combien de temps prend la leçon « Fonctions : déclarations, expressions et fonctions fléchées » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon Frontend Academy ?
Oui. Chaque leçon Frontend Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- Variables : let, const, var et portée
- Types de données : string, number, boolean, null, undefined
- Fonctions : déclarations, expressions et fonctions fléchées
- Flux de contrôle : if, else, switch, for, while