Sketchnote par Tomomi Imura
journey
title Votre aventure avec les fonctions JavaScript
section Fondations
Syntaxe des fonctions: 5: You
Appel de fonctions: 4: You
Paramètres & Arguments: 5: You
section Concepts avancés
Valeurs de retour: 4: You
Paramètres par défaut: 5: You
Composition de fonctions: 4: You
section JavaScript moderne
Fonctions fléchées: 5: You
Fonctions anonymes: 4: You
Fonctions d'ordre supérieur: 5: You
Répéter le même code plusieurs fois est l'une des frustrations les plus courantes en programmation. Les fonctions résolvent ce problème en vous permettant d'encapsuler du code dans des blocs réutilisables. Pensez aux fonctions comme aux pièces standardisées qui ont rendu la chaîne de montage de Henry Ford révolutionnaire – une fois que vous créez un composant fiable, vous pouvez l’utiliser partout où c’est nécessaire sans le reconstruire de zéro.
Les fonctions vous permettent de regrouper des morceaux de code afin de pouvoir les réutiliser tout au long de votre programme. Plutôt que de copier-coller la même logique partout, vous pouvez créer une fonction une fois et l’appeler quand vous en avez besoin. Cette approche garde votre code organisé et facilite grandement les mises à jour.
Dans cette leçon, vous apprendrez à créer vos propres fonctions, à leur transmettre des informations, et à récupérer des résultats utiles. Vous découvrirez la différence entre fonctions et méthodes, apprendrez des syntaxes modernes, et verrez comment les fonctions peuvent collaborer entre elles. Nous construirons ces concepts étape par étape.
🎥 Cliquez sur l’image ci-dessus pour une vidéo sur les méthodes et fonctions.
Vous pouvez suivre cette leçon sur Microsoft Learn !
mindmap
root((Fonctions JavaScript))
Concepts de base
Déclaration
Syntaxe traditionnelle
Syntaxe fonction fléchée
Appel
Utilisation de parenthèses
Parenthèses requises
Paramètres
Valeurs d'entrée
Plusieurs paramètres
Valeurs par défaut
Arguments
Valeurs passées
Peut être de n'importe quel type
Valeurs de retour
Données de sortie
instruction return
Sortie de fonction
Utiliser les résultats
Stocker dans des variables
Chaîner les fonctions
Modèles avancés
Fonctions d’ordre supérieur
Fonctions en paramètres
Callbacks
Anonymes
Pas de nom nécessaire
Définition inline
Une fonction est un bloc de code autonome qui réalise une tâche spécifique. Elle encapsule une logique que vous pouvez exécuter quand vous le souhaitez.
Au lieu d’écrire plusieurs fois le même code dans votre programme, vous pouvez l’encapsuler dans une fonction et appeler cette fonction chaque fois que vous en avez besoin. Cette approche maintient votre code propre et facilite grandement les mises à jour. Imaginez la difficulté de maintenance si vous deviez modifier une logique éparpillée dans 20 endroits différents de votre base de code.
Nommer vos fonctions de façon descriptive est essentiel. Une fonction bien nommée communique clairement son but – quand vous voyez cancelTimer(), vous comprenez immédiatement ce qu’elle fait, tout comme un bouton clairement étiqueté vous indique exactement ce qui se passera lorsque vous cliquez dessus.
Examinons comment créer une fonction. La syntaxe suit un modèle cohérent :
function nameOfFunction() { // définition de fonction
// définition/corps de fonction
}Décomposons cela :
- Le mot-clé
functionindique à JavaScript « Hé, je crée une fonction ! » nameOfFunctionest l’endroit où vous donnez un nom descriptif à votre fonction- Les parenthèses
()sont là où vous pouvez ajouter des paramètres (nous y reviendrons bientôt) - Les accolades
{}contiennent le code qui s’exécute quand vous appelez la fonction
Créons une fonction simple de salutation pour voir cela en action :
function displayGreeting() {
console.log('Hello, world!');
}Cette fonction affiche « Hello, world! » dans la console. Une fois définie, vous pouvez l’utiliser autant de fois que nécessaire.
Pour exécuter (ou « appeler ») votre fonction, écrivez son nom suivi de parenthèses. JavaScript vous permet de définir votre fonction avant ou après son appel – le moteur JavaScript gérera l’ordre d’exécution.
// appel de notre fonction
displayGreeting();Lorsque vous exécutez cette ligne, tout le code à l’intérieur de la fonction displayGreeting s’exécute, affichant « Hello, world! » dans la console de votre navigateur. Vous pouvez appeler cette fonction autant de fois que vous le souhaitez.
Voyons comment vous comprenez les fonctions de base :
- Pouvez-vous expliquer pourquoi on utilise les accolades
{}dans la définition des fonctions ? - Que se passe-t-il si vous écrivez
displayGreetingsans les parenthèses ? - Pourquoi voudriez-vous appeler la même fonction plusieurs fois ?
flowchart TD
A["✏️ Définir la fonction"] --> B["📦 Emballer le code"]
B --> C["🏷️ Lui donner un nom"]
C --> D["📞 Appeler quand nécessaire"]
D --> E["🔄 Réutiliser partout"]
F["💡 Avantages"] --> F1["Pas de répétition de code"]
F --> F2["Facile à maintenir"]
F --> F3["Organisation claire"]
F --> F4["Tests facilités"]
style A fill:#e3f2fd
style E fill:#e8f5e8
style F fill:#fff3e0
Note : Vous avez utilisé des méthodes tout au long de ces leçons.
console.log()est une méthode – essentiellement une fonction qui appartient à l’objetconsole. La principale différence est que les méthodes sont attachées à des objets, tandis que les fonctions sont indépendantes. Beaucoup de développeurs utilisent ces termes indifféremment dans la conversation courante.
Voici quelques conseils pour vous aider à écrire de bonnes fonctions :
- Donnez à vos fonctions des noms clairs et descriptifs – votre futur vous vous en remerciera !
- Utilisez le camelCase pour les noms composés (comme
calculateTotalplutôt quecalculate_total) - Gardez chaque fonction concentrée sur une seule tâche
Notre fonction displayGreeting est limitée – elle ne peut afficher que « Hello, world! » pour tout le monde. Les paramètres nous permettent de rendre les fonctions plus flexibles et utiles.
Les paramètres agissent comme des espaces réservés dans lesquels vous insérez des valeurs différentes à chaque appel de la fonction. De cette manière, la même fonction peut fonctionner avec des informations différentes à chaque utilisation.
Vous listez les paramètres à l’intérieur des parenthèses lors de la définition de votre fonction, en séparant plusieurs paramètres par des virgules :
function name(param, param2, param3) {
}Chaque paramètre agit comme un espace réservé – lorsque quelqu’un appelle votre fonction, il fournit des valeurs réelles qui remplacent ces espaces.
Modifions notre fonction de salutation pour qu’elle accepte le nom de quelqu’un :
function displayGreeting(name) {
const message = `Hello, ${name}!`;
console.log(message);
}Remarquez comment nous utilisons les backticks (`) et ${} pour insérer le nom directement dans le message – cela s’appelle un template literal, et c’est un moyen très pratique de construire des chaînes de caractères avec des variables intégrées.
Maintenant, lorsque nous appelons notre fonction, nous pouvons passer n’importe quel nom :
displayGreeting('Christopher');
// displays "Hello, Christopher!" when runJavaScript prend la chaîne 'Christopher', l’affecte au paramètre name, et crée le message personnalisé « Hello, Christopher! »
flowchart LR
A["🎯 Appel de fonction"] --> B["📥 Paramètres"]
B --> C["⚙️ Corps de la fonction"]
C --> D["📤 Résultat"]
A1["displayGreeting('Alice')"] --> A
B1["nom = 'Alice'"] --> B
C1["Littéral de gabarit\n\`Bonjour, \${nom}!\`"] --> C
D1["'Bonjour, Alice!'"] --> D
E["🔄 Types de paramètres"] --> E1["Chaînes"]
E --> E2["Nombres"]
E --> E3["Booléens"]
E --> E4["Objets"]
E --> E5["Fonctions"]
style A fill:#e3f2fd
style C fill:#e8f5e8
style D fill:#fff3e0
style E fill:#f3e5f5
Que se passe-t-il si on veut rendre certains paramètres optionnels ? C’est là qu’interviennent les valeurs par défaut !
Disons que l’on veut que les gens puissent personnaliser le mot de salutation, mais si aucun n’est donné, on utilisera simplement « Hello » par défaut. Vous pouvez définir des valeurs par défaut en utilisant le signe égal, comme pour la définition d’une variable :
function displayGreeting(name, salutation='Hello') {
console.log(`${salutation}, ${name}`);
}Ici, name est toujours requis, mais salutation a une valeur de secours 'Hello' si personne ne fournit une salutation différente.
Nous pouvons maintenant appeler cette fonction de deux manières différentes :
displayGreeting('Christopher');
// affiche "Bonjour, Christopher"
displayGreeting('Christopher', 'Hi');
// affiche "Salut, Christopher"Au premier appel, JavaScript utilise la valeur par défaut « Hello » puisque nous n’avons pas spécifié de salutation. Au second appel, il utilise notre salutation personnalisée « Hi ». Cette flexibilité rend les fonctions adaptables à différents cas d’usage.
Testez votre compréhension des paramètres :
- Quelle est la différence entre un paramètre et un argument ?
- Pourquoi les valeurs par défaut sont-elles utiles en programmation réelle ?
- Pouvez-vous prédire ce qui se passe si vous passez plus d’arguments que de paramètres ?
stateDiagram-v2
[*] --> NoParams: fonction greet() {}
[*] --> WithParams: fonction greet(name) {}
[*] --> WithDefaults: fonction greet(name, greeting='Salut') {}
NoParams --> Static: Même sortie toujours
WithParams --> Dynamic: Change avec l'entrée
WithDefaults --> Flexible: Personnalisation optionnelle
Static --> [*]
Dynamic --> [*]
Flexible --> [*]
note right of WithDefaults
Approche la plus flexible
Compatible rétroactivement
end note
Astuce professionnelle : Les paramètres par défaut rendent vos fonctions plus conviviales. Les utilisateurs peuvent commencer rapidement avec des valeurs par défaut sensées, mais personnalisent quand c’est nécessaire !
Jusqu’à présent, nos fonctions se contentaient d’afficher des messages dans la console, mais que faire si vous voulez que la fonction calcule quelque chose et vous renvoie le résultat ?
C’est là où les valeurs de retour entrent en jeu. Au lieu de simplement afficher quelque chose, une fonction peut vous rendre une valeur que vous pouvez stocker dans une variable ou utiliser dans d’autres parties de votre code.
Pour retourner une valeur, vous utilisez le mot-clé return suivi de ce que vous souhaitez renvoyer :
return myVariable;Voici un point important : quand une fonction rencontre une instruction return, elle s’arrête immédiatement et renvoie cette valeur à l’appelant.
Modifions notre fonction de salutation pour qu’elle retourne le message au lieu de l’afficher :
function createGreetingMessage(name) {
const message = `Hello, ${name}`;
return message;
}Maintenant au lieu d’afficher la salutation, cette fonction crée le message et nous le renvoie.
Pour utiliser la valeur retournée, on peut la stocker dans une variable comme n’importe quelle autre valeur :
const greetingMessage = createGreetingMessage('Christopher');Désormais, greetingMessage contient « Hello, Christopher » et nous pouvons l’utiliser partout dans notre code – l’afficher sur une page web, l’inclure dans un mail, ou la passer à une autre fonction.
flowchart TD
A["🔧 Traitement de fonction"] --> B{"instruction return ?"}
B -->|Oui| C["📤 Valeur de retour"]
B -->|Non| D["📭 Retour undefined"]
C --> E["💾 Stocker dans une variable"]
C --> F["🔗 Utiliser dans une expression"]
C --> G["📞 Passer à une fonction"]
D --> H["⚠️ En général pas utile"]
I["📋 Utilisations de la valeur de retour"] --> I1["Calculer les résultats"]
I --> I2["Valider l'entrée"]
I --> I3["Transformer les données"]
I --> I4["Créer des objets"]
style C fill:#e8f5e8
style D fill:#ffebee
style I fill:#e3f2fd
Évaluez votre compréhension des valeurs de retour :
- Que se passe-t-il avec le code placé après une instruction
returndans une fonction ? - Pourquoi retourner une valeur est souvent meilleur qu’afficher directement dans la console ?
- Une fonction peut-elle retourner différents types de valeurs (chaîne, nombre, booléen) ?
pie title "Types de valeurs de retour courants"
"Chaînes" : 30
"Nombres" : 25
"Objets" : 20
"Booléens" : 15
"Tableaux" : 10
Insight clé : Les fonctions qui retournent des valeurs sont plus polyvalentes parce que l’appelant décide quoi faire du résultat. Cela rend votre code plus modulaire et réutilisable !
Les fonctions peuvent être passées comme paramètres à d’autres fonctions. Bien que ce concept puisse sembler compliqué au début, c’est une fonctionnalité puissante qui permet des schémas de programmation flexibles.
Ce pattern est très courant quand vous voulez dire « quand quelque chose se produit, fais cette autre chose ». Par exemple, « quand le minuteur se termine, exécute ce code » ou « quand l’utilisateur clique sur le bouton, appelle cette fonction ».
Regardons setTimeout, une fonction intégrée qui attend un certain temps puis exécute du code. Il faut lui dire quel code exécuter – parfait pour passer une fonction !
Essayez ce code – après 3 secondes, vous verrez un message :
function displayDone() {
console.log('3 seconds has elapsed');
}
// la valeur du minuteur est en millisecondes
setTimeout(displayDone, 3000);Remarquez comment nous passons displayDone (sans parenthèses) à setTimeout. Nous n’appelons pas la fonction nous-mêmes – nous la remettons à setTimeout en disant « appelle ceci dans 3 secondes ».
Parfois, vous avez besoin d’une fonction pour une seule chose et ne voulez pas lui donner un nom. Réfléchissez : si vous utilisez une fonction une seule fois, pourquoi encombrer votre code avec un nom supplémentaire ?
JavaScript vous permet de créer des fonctions anonymes – fonctions sans nom que vous définissez directement là où elles sont nécessaires.
Voici comment réécrire notre exemple de minuterie avec une fonction anonyme :
setTimeout(function() {
console.log('3 seconds has elapsed');
}, 3000);Cela donne le même résultat, mais la fonction est définie directement dans l’appel à setTimeout, éliminant le besoin d’une déclaration de fonction séparée.
JavaScript moderne offre un moyen encore plus court d’écrire des fonctions appelé fonctions fléchées. Elles utilisent => (qui ressemble à une flèche – vous voyez ?) et sont très populaires chez les développeurs.
Les fonctions fléchées vous permettent d’éviter le mot-clé function et d’écrire un code plus concis.
Voici notre exemple de minuterie avec une fonction fléchée :
setTimeout(() => {
console.log('3 seconds has elapsed');
}, 3000);Les () représentent l’endroit des paramètres (vide ici), puis vient la flèche =>, et enfin le corps de la fonction entre accolades. Cela fournit la même fonctionnalité avec une syntaxe plus concise.
flowchart LR
A["📝 Styles de Fonction"] --> B["Traditionnel"]
A --> C["Flèche"]
A --> D["Anonyme"]
B --> B1["function name() {}"]
B --> B2["Portée levée"]
B --> B3["Nommé"]
C --> C1["const name = () => {}"]
C --> C2["Syntaxe concise"]
C --> C3["Style moderne"]
D --> D1["function() {}"]
D --> D2["Sans nom"]
D --> D3["Usage unique"]
E["⏰ Quand utiliser"] --> E1["Traditionnel : Fonctions réutilisables"]
E --> E2["Flèche : Rappels courts"]
E --> E3["Anonyme : Gestionnaires d'événements"]
style A fill:#e3f2fd
style B fill:#e8f5e8
style C fill:#fff3e0
style D fill:#f3e5f5
style E fill:#e0f2f1
Quand faut-il utiliser chaque approche ? Une bonne règle pratique : si vous allez utiliser la fonction plusieurs fois, donnez-lui un nom et définissez-la séparément. Si c’est pour un usage spécifique unique, considérez une fonction anonyme. Les fonctions fléchées et la syntaxe traditionnelle sont valides, bien que les fonctions fléchées soient très répandues dans les bases de code JavaScript modernes.
Testez votre compréhension de la syntaxe :
- Quand pourriez-vous préférer les fonctions fléchées à la syntaxe traditionnelle des fonctions ?
- Quel est le principal avantage des fonctions anonymes ?
- Pouvez-vous imaginer une situation où une fonction nommée est meilleure qu’une anonyme ?
quadrantChart
title Matrice de décision du choix de fonction
x-axis Simple --> Complexe
y-axis Usage unique --> Réutilisable
quadrant-1 Fonctions fléchées
quadrant-2 Fonctions nommées
quadrant-3 Fonctions anonymes
quadrant-4 Fonctions traditionnelles
Gestionnaires d'événements: [0.3, 0.2]
Fonctions utilitaires: [0.7, 0.8]
Rappels: [0.2, 0.3]
Méthodes de classe: [0.8, 0.7]
Opérations mathématiques: [0.4, 0.6]
Tendance moderne : Les fonctions fléchées deviennent le choix par défaut pour beaucoup de développeurs grâce à leur syntaxe concise, mais les fonctions traditionnelles ont encore leur place !
Pouvez-vous formuler en une phrase la différence entre fonctions et méthodes ? Essayez !
Utilisez le mode Agent pour relever le défi suivant :
Description : Créez une bibliothèque utilitaire de fonctions mathématiques qui illustre différents concepts de fonctions vus dans cette leçon, y compris paramètres, valeurs par défaut, valeurs de retour, et fonctions fléchées.
Consigne : Créez un fichier JavaScript appelé mathUtils.js contenant les fonctions suivantes :
- Une fonction
addqui prend deux paramètres et retourne leur somme - Une fonction
multiplyavec des valeurs par défaut pour les paramètres (le second paramètre par défaut vaut 1) - Une fonction fléchée
squarequi prend un nombre et retourne son carré - Une fonction
calculatequi accepte une autre fonction en paramètre et deux nombres, puis applique cette fonction à ces nombres - Montrez l’appel de chaque fonction avec des cas tests appropriés
Pour en savoir plus sur le mode agent.
Il vaut la peine de se documenter un peu plus sur les fonctions fléchées, car elles sont de plus en plus utilisées dans les bases de code. Entraînez-vous à écrire une fonction puis à la réécrire avec cette syntaxe.
Amusez-vous avec les fonctions
graph TD
A["🎯 Fonctions JavaScript"] --> B["📋 Déclaration de fonction"]
A --> C["📥 Paramètres"]
A --> D["📤 Valeurs de retour"]
A --> E["🎨 Syntaxe moderne"]
B --> B1["function name() {}"]
B --> B2["Nommage descriptif"]
B --> B3["Blocs de code réutilisables"]
C --> C1["Données d'entrée"]
C --> C2["Valeurs par défaut"]
C --> C3["Paramètres multiples"]
D --> D1["instruction return"]
D --> D2["Sortie de la fonction"]
D --> D3["Retourner des données"]
E --> E1["Fonctions fléchées : () =>"]
E --> E2["Fonctions anonymes"]
E --> E3["Fonctions d'ordre supérieur"]
F["⚡ Avantages clés"] --> F1["Réutilisabilité du code"]
F --> F2["Meilleure organisation"]
F --> F3["Tests facilités"]
F --> F4["Conception modulaire"]
style A fill:#e3f2fd
style B fill:#e8f5e8
style C fill:#fff3e0
style D fill:#f3e5f5
style E fill:#e0f2f1
style F fill:#fce4ec
- Écrire une fonction simple qui retourne votre nombre préféré
- Créer une fonction avec deux paramètres qui les additionne
- Essayez de convertir une fonction traditionnelle en syntaxe de fonction fléchée
- Entraînez-vous avec le défi : expliquez la différence entre fonctions et méthodes
- Complétez le quiz post-leçon et révisez les concepts confus
- Construisez la bibliothèque d'utilitaires mathématiques du défi GitHub Copilot
- Créez une fonction qui utilise une autre fonction comme paramètre
- Entraînez-vous à écrire des fonctions avec des paramètres par défaut
- Expérimentez avec les littéraux de gabarits dans les valeurs de retour des fonctions
- Complétez la mission "Amusez-vous avec les fonctions" avec créativité
- Refactorez du code répétitif que vous avez écrit en fonctions réutilisables
- Créez une petite calculatrice en utilisant uniquement des fonctions (sans variables globales)
- Entraînez-vous aux fonctions fléchées avec des méthodes de tableau comme
map()etfilter() - Créez une collection de fonctions utilitaires pour les tâches courantes
- Étudiez les fonctions d'ordre supérieur et les concepts de programmation fonctionnelle
- Maîtrisez des concepts avancés des fonctions comme les closures et les portées
- Créez un projet qui utilise intensivement la composition de fonctions
- Contribuez à l’open source en améliorant la documentation des fonctions
- Enseignez à quelqu’un d’autre les fonctions et les différents styles de syntaxe
- Explorez les paradigmes de la programmation fonctionnelle en JavaScript
- Créez une bibliothèque personnelle de fonctions réutilisables pour les projets futurs
Célébrez votre maîtrise des fonctions :
- Quelle est la fonction la plus utile que vous ayez créée jusqu’à présent ?
- Comment l’apprentissage des fonctions a-t-il changé votre façon de penser l’organisation du code ?
- Quelle syntaxe de fonction préférez-vous et pourquoi ?
- Quel problème réel résoudriez-vous en écrivant une fonction ?
journey
title L'évolution de votre confiance en les fonctions
section Aujourd'hui
Confus par la syntaxe: 3: You
Comprendre les bases: 4: You
Écrire des fonctions simples: 5: You
section Cette semaine
Utiliser des paramètres: 4: You
Retourner des valeurs: 5: You
Syntaxe moderne: 5: You
section Le mois prochain
Composition de fonctions: 5: You
Modèles avancés: 5: You
Enseigner aux autres: 5: You
🎉 Vous avez maîtrisé l’un des concepts les plus puissants de la programmation ! Les fonctions sont les blocs de construction des programmes plus vastes. Chaque application que vous développerez utilisera des fonctions pour organiser, réutiliser et structurer le code. Vous comprenez maintenant comment emballer la logique en composants réutilisables, ce qui fait de vous un programmeur plus efficace et performant. Bienvenue dans le monde de la programmation modulaire ! 🚀
Avertissement :
Ce document a été traduit à l’aide du service de traduction automatique Co-op Translator. Bien que nous nous efforcions d’assurer l’exactitude, veuillez noter que les traductions automatiques peuvent contenir des erreurs ou des imprécisions. Le document original dans sa langue d’origine doit être considéré comme la source faisant autorité. Pour les informations critiques, une traduction professionnelle réalisée par un humain est recommandée. Nous déclinons toute responsabilité en cas de malentendus ou d’interprétations erronées résultant de l’utilisation de cette traduction.