Les fonctions

Écris une fois function square(n) { return n * n; } : square(4) donne 16, square(9) donne 81, et ainsi de suite pour n'importe quel nombre que tu lui passes.

Donner un nom à un travail

Tu as déjà utilisé des fonctions écrites par d'autres : console.log, Math.round et toUpperCase sont toutes des fonctions. Une fonction est un bloc de code nommé qui fait une seule tâche. Tu la définis une fois, puis tu l'appelles par son nom autant de fois que tu veux. Les fonctions évitent de recopier les mêmes lignes partout, et elles permettent de penser un programme en gros morceaux : « calculer le pourboire, puis partager l'addition » au lieu d'une longue liste de calculs.

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

console.log(greet("Ana"));   // affiche Hello, Ana!
console.log(greet("Ji"));    // affiche Hello, Ji!

La définition commence par le mot-clé function, puis le nom de la fonction, puis une liste de paramètres entre parenthèses. Un paramètre est une variable qui reçoit une valeur quand la fonction est appelée ; ici, c'est name. Le corps entre accolades fait le travail. Quand tu appelles greet("Ana"), la valeur "Ana", appelée argument, est placée dans le paramètre name, et le corps s'exécute.

return renvoie une valeur

Le mot-clé return termine la fonction et renvoie une valeur à l'endroit où la fonction a été appelée. L'appel greet("Ana") est une expression, et sa valeur est ce qui a été renvoyé. C'est pourquoi il peut se trouver dans console.log, dans un calcul, ou être rangé dans une variable : const msg = greet("Ana");.

Renvoyer une valeur et l'afficher sont deux choses différentes, et les débutants les confondent souvent. Une fonction qui ne fait qu'appeler console.log montre quelque chose à l'écran mais ne renvoie rien. Son appel vaut undefined : tu ne peux donc pas utiliser le résultat dans un calcul. En règle générale, laisse les fonctions renvoyer des résultats et laisse le code qui les appelle décider s'il faut les afficher.

function addPrint(a, b) {
  console.log(a + b);
}
function add(a, b) {
  return a + b;
}

const x = add(2, 3) * 10;
console.log(x);      // affiche 50
addPrint(2, 3);      // affiche 5, mais ne renvoie rien d'utilisable

return arrête aussi la fonction immédiatement. Les lignes qui le suivent sur le même chemin ne s'exécutent pas. Cela permet de traiter les cas particuliers dès le début : if (n < 0) return "negative"; en haut d'une fonction, avec le cas normal écrit en dessous.

Plusieurs paramètres et valeurs par défaut

Une fonction peut prendre plusieurs paramètres, séparés par des virgules, et les arguments leur sont associés dans l'ordre : dans add(2, 3), a vaut 2 et b vaut 3. Si un appel oublie un argument, ce paramètre vaut undefined. Tu peux donner à un paramètre une valeur par défaut, utilisée quand rien n'est passé : function tip(bill, rate = 0.15) utilise 0.15 sauf si l'appelant fournit un autre taux.

Les fonctions fléchées

Le JavaScript moderne a aussi une façon plus courte d'écrire les petites fonctions : la fonction fléchée. const square = (n) => n * n; signifie la même chose que la fonction square du début. Quand le corps est une seule expression, sa valeur est renvoyée automatiquement, sans accolades ni mot-clé return. Tu verras des fonctions fléchées partout dans le code moderne.

Ce qui est à l'intérieur reste à l'intérieur

Les paramètres et les variables déclarés dans une fonction n'existent qu'à l'intérieur de celle-ci. C'est ce qu'on appelle la portée. Deux fonctions différentes peuvent chacune avoir une variable appelée total sans se gêner, et le code situé hors d'une fonction ne peut pas voir ses variables privées. Une fonction peut lire des variables déclarées à l'extérieur, mais les fonctions les plus propres reçoivent tout ce dont elles ont besoin par leurs paramètres et rendent tout par return : on peut ainsi les comprendre isolément.

function nom(paramètre) { return résultat; } const nom = (paramètre) => résultat;

fonction	Un bloc de code nommé qui fait une seule tâche
appel	Exécuter une fonction : nom(arguments)
paramètre	Une variable de la définition qui reçoit une valeur
argument	La valeur passée lors d'un appel
return	Termine la fonction et renvoie une valeur
paramètre par défaut	rate = 0.15 : utilisé quand aucun argument n'est donné
fonction fléchée	(n) => n * n
portée	Là où une variable est visible ; ce qui est dans une fonction y reste

Qu'affiche ce code ?

function double(n) {
  return n * 2;
}
console.log(double(7));

Qu'affiche ce code ?

function add(a, b) {
  return a + b;
}
console.log(add(2, 3) * add(1, 1));

Qu'affiche ce code ?

function minus(a, b) {
  return a - b;
}
console.log(minus(3, 10));

Qu'affiche ce code ?

function f(x) {
  return x + 1;
  console.log("hi");
}
console.log(f(1));

2
hi, then 2
2, then hi

Qu'affiche ce code ?

function show(n) {
  console.log(n);
}
const r = show(5);
console.log(typeof r);

5, then number
5, then undefined
Only undefined

Qu'affiche ce code ?

const triple = (n) => n * 3;
console.log(triple(4));

Qu'affiche ce code ?

function tip(bill, rate = 0.1) {
  return bill * rate;
}
console.log(tip(50));

Qu'affiche ce code ?

function tip(bill, rate = 0.1) {
  return bill * rate;
}
console.log(tip(50, 0.2));

Qu'affiche ce code ?

function sign(n) {
  if (n < 0) return "neg";
  if (n === 0) return "zero";
  return "pos";
}
console.log(sign(0));

Dans function area(w, h) appelée avec area(3, 5), comment appelle-t-on w et h, et comment appelle-t-on 3 et 5 ?
- w et h sont des paramètres ; 3 et 5 sont des arguments
- w et h sont des arguments ; 3 et 5 sont des paramètres
- Les quatre sont des valeurs de retour

L'essentiel

function nom(params) { ... } définit ; nom(args) appelle.
Les arguments sont associés aux paramètres dans l'ordre.
return termine la fonction et renvoie une valeur ; afficher n'est pas renvoyer.
Les paramètres par défaut remplacent les arguments manquants.
Fonctions fléchées : (n) => n * n.
Les variables déclarées dans une fonction y restent (portée).

Sources de ce cours (2)

MDN Web Docs, JavaScript Guide (developer.mozilla.org/en-US/docs/Web/JavaScript/Guide, chapters Introduction, Grammar and types, Control flow, Loops and iteration, Functions, Expressions and operators, Numbers and strings, Indexed collections, Working with objects; checked 2026-10-17)
Ecma International, ECMA-262 ECMAScript 2026 Language Specification, 17th edition, June 2026 (tc39.es/ecma262 and ecma-international.org/publications-and-standards/standards/ecma-262, checked 2026-10-17)

Consulté le: 2026-10-17