Lesson 3/9 7 min

Functions

Create reusable code blocks with functions, arrow functions, parameters and scope.

FR EN

Déclarer une fonction

Une fonction est un bloc de code réutilisable. Au lieu de réécrire le même code dix fois, vous le mettez dans une fonction et vous l'appelez quand vous en avez besoin.

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

saluer("Alice");  // "Bonjour Alice !"
saluer("Bob");    // "Bonjour Bob !"
  • function : le mot-clé pour déclarer
  • prenom : le paramètre (l'entrée)
  • return : la valeur de retour (la sortie)

Arrow functions

La syntaxe moderne pour écrire des fonctions plus courtes :

// Fonction classique
function doubler(n) {
  return n * 2;
}

// Arrow function
const doubler = (n) => {
  return n * 2;
};

// Version ultra-courte (une seule expression)
const doubler = (n) => n * 2;

Les arrow functions sont très utilisées avec les méthodes de tableaux comme map, filter, forEach.

Paramètres par défaut

Vous pouvez donner une valeur par défaut à un paramètre :

function saluer(prenom, langue = "fr") {
  if (langue === "en") {
    return "Hello " + prenom + "!";
  }
  return "Bonjour " + prenom + " !";
}

saluer("Alice");       // "Bonjour Alice !" (langue = "fr" par défaut)
saluer("Alice", "en"); // "Hello Alice!"

Scope : la portée des variables

Les variables déclarées dans une fonction n'existent qu'à l'intérieur de cette fonction :

function maFonction() {
  let secret = "abc123";
  console.log(secret); // OK
}

// console.log(secret); // ERREUR : secret n'existe pas ici

C'est le scope local. Les variables déclarées en dehors de toute fonction ont un scope global : elles sont accessibles partout. Préférez le scope local pour éviter les conflits.

Et le typage, dans tout ça ?

Tu l'as peut-être remarqué : rien n'empêche d'appeler doubler("bonjour") au lieu de doubler(5). JavaScript accepte n'importe quelle valeur, et si elle ne convient pas, tu ne le découvres qu'à l'exécution, parfois bien trop tard.

Le typage, c'est dire à l'avance quel type de valeur chaque paramètre attend (un nombre, un texte, un tableau...) et ce que la fonction renvoie. L'intérêt est triple : ton éditeur te prévient avant même de lancer le code si tu te trompes de type, il te propose l'autocomplétion, et le code se documente tout seul. Sur un projet qui grossit, ça t'évite une montagne de bugs bêtes.

JavaScript, lui, est typé dynamiquement : le langage n'a aucune syntaxe de typage native. Pour typer, on pense d'abord à TypeScript (un sur-ensemble de JavaScript qui ajoute les types, puis se recompile en JS). Mais tu n'es pas obligé d'y passer tout de suite.

Tu peux typer du JavaScript pur, sans TypeScript, grâce aux commentaires JSDoc et à la ligne // @ts-check. Ton éditeur (VS Code par exemple) lit ces commentaires et vérifie les types, sans aucune étape de compilation :

// @ts-check

/**
 * @param {number} n   nombre à doubler
 * @returns {number}
 */
const doubler = (n) => n * 2;

doubler(5);         // OK
doubler("bonjour"); // l'éditeur souligne l'erreur, avant même d'exécuter

En résumé : pour un confort de typage complet sur un gros projet, on passe à TypeScript ; pour typer légèrement sans changer d'outils, JSDoc couvre déjà l'essentiel.

Declaring a function

A function is a reusable block of code. Instead of rewriting the same code ten times, you put it in a function and call it when you need it.

function greet(name) {
  return "Hello " + name + "!";
}

greet("Alice");  // "Hello Alice!"
greet("Bob");    // "Hello Bob!"
  • function — the keyword to declare
  • name — the parameter (input)
  • return — the return value (output)

Arrow functions

The modern syntax for writing shorter functions:

// Classic function
function double(n) {
  return n * 2;
}

// Arrow function
const double = (n) => {
  return n * 2;
};

// Ultra-short version (single expression)
const double = (n) => n * 2;

Arrow functions are widely used with array methods like map, filter, forEach.

Default parameters

You can give a parameter a default value:

function greet(name, lang = "en") {
  if (lang === "fr") {
    return "Bonjour " + name + " !";
  }
  return "Hello " + name + "!";
}

greet("Alice");       // "Hello Alice!" (lang = "en" by default)
greet("Alice", "fr"); // "Bonjour Alice !"

Scope — variable reach

Variables declared inside a function only exist within that function:

function myFunction() {
  let secret = "abc123";
  console.log(secret); // OK
}

// console.log(secret); // ERROR: secret doesn't exist here

This is local scope. Variables declared outside any function have global scope — they're accessible everywhere. Prefer local scope to avoid conflicts.

And what about typing?

You may have noticed: nothing stops you from calling double("hello") instead of double(5). JavaScript accepts any value, and if it doesn't fit, you only find out at runtime, sometimes far too late.

Typing means saying in advance what type of value each parameter expects (a number, a string, an array...) and what the function returns. The benefit is threefold: your editor warns you before you even run the code if you use the wrong type, it offers autocompletion, and the code documents itself. On a growing project, it saves you a mountain of silly bugs.

JavaScript itself is dynamically typed: the language has no native type syntax. To add types, people first think of TypeScript (a superset of JavaScript that adds types, then compiles back to JS). But you don't have to switch right away.

You can type plain JavaScript, without TypeScript, thanks to JSDoc comments and the // @ts-check line. Your editor (VS Code for instance) reads those comments and checks the types, with no compilation step:

// @ts-check

/**
 * @param {number} n   number to double
 * @returns {number}
 */
const double = (n) => n * 2;

double(5);        // OK
double("hello");  // the editor underlines the error, before you even run it

In short: for full typing comfort on a large project, switch to TypeScript; to type lightly without changing tools, JSDoc already covers the essentials.

Essayez vous-même
Avec l'IA

Copiez ce prompt dans Claude ou ChatGPT :

Crée une fonction JavaScript qui prend un tableau de nombres et retourne un objet avec le min, le max et la moyenne. Explique chaque ligne.
Ré-explique sans regarder

Sans relire la réponse de l'IA : pourquoi sa fonction return un seul objet { min, max, moyenne } au lieu de trois valeurs séparées, et comment lit-on ce résultat à l'appel ?

Une bonne explication dit : return ne renvoie qu'une seule valeur, donc pour rendre plusieurs résultats d'un coup on les emballe dans un objet. À l'appel, on récupère cet objet (ex. const stats = analyser(nombres);) puis on lit chaque champ par sa clé : stats.min, stats.max, stats.moyenne. Bonus : nommer les clés rend le code plus lisible qu'un tableau [min, max, moyenne] où l'ordre se devine.
Exercice : Corrigez le code de l'IA

L'IA a généré une fonction mais a oublié le return. La fonction ne retourne rien. Ajoutez le return manquant.

Corrigez le code
Accepter ou rejeter le code de l'IA

Tu demandes à l'IA une fonction qui calcule un total TTC. Elle te rend ça. Ton rôle de relecteur : l'accepter telle quelle ou la rejeter, et dire pourquoi.

let total = 0;

function calculerTTC(prixHT) {
  total = prixHT * 1.2;
}

calculerTTC(100);
console.log(total); // 120
À rejeter. Le code tourne, mais la fonction ne return rien : elle écrit dans une variable total du scope global. C'est un effet de bord. Résultat : la fonction n'est pas réutilisable (deux calculs s'écrasent), intestable isolément, et la variable globale peut être modifiée par n'importe quel autre bout de code. Le réflexe pro : return prixHT * 1.2; et laisser l'appelant décider quoi faire du résultat (const ttc = calculerTTC(100);).
Rappel libre

Sans remonter dans la leçon : quelle différence y a-t-il entre un paramètre et la valeur de return d'une fonction, et pourquoi préfère-t-on le scope local au scope global ?

Le paramètre est l'entrée : une valeur qu'on passe à la fonction au moment de l'appel. Le return est la sortie : la valeur que la fonction renvoie à l'appelant (et qui stoppe son exécution). On préfère le scope local parce qu'une variable déclarée dans une fonction n'existe qu'à l'intérieur : elle ne risque pas d'entrer en conflit avec une autre variable du même nom ailleurs, contrairement à une variable globale accessible et modifiable de partout.
Que fait le mot-clé return dans une fonction ?
Quelle est la version arrow function de function(x) { return x * 2; } ?
Une variable déclarée dans une fonction est accessible...
Next step

Your functions can compute and return results. But for now they always follow the same path. The next lesson gives them the power to decide and repeat: conditions to pick a branch, loops to process a whole list without repeating yourself.

Lesson 4: Conditions and loops →
Besoin d'un développeur pour votre projet ?

Réponse sous 24h · Sans engagement