Javascript fondamentaux
Thème :
Intermédiaire
1 vues ·5/19 leçons

JAVASCRIPT - LES FONCTIONS (GUIDE COMPLET POUR DÉBUTANTS)

PLAN DÉTAILLÉ

  1. Concepts Fondamentaux
  2. Fonctions Globales
  3. Fonctions Fléchées
  4. Return Implicite
  5. Cas Pratiques
  6. Pièges Courants

📖 SECTION 1 : CONCEPTS FONDAMENTAUX

1.1 Qu’est-ce qu’une Fonction ?

Définition Simple

Une fonction est un bloc de code réutilisable qui effectue une tâche spécifique.

Analogie du Monde Réel

🏭 Usine de Chocolat
├─ Entrée : Cacao brut
├─ Fonction : Transformer le cacao
└─ Sortie : Chocolat fini

💻 Fonction JavaScript
├─ Entrée : Paramètres
├─ Fonction : Code à exécuter
└─ Sortie : Résultat (return)

Pourquoi les Fonctions ?

Avantage Explication
Réutilisabilité Écrire une fois, utiliser partout
Clarté Code plus lisible et organisé
Maintenance Modifier au même endroit
Modularité Diviser le code en petites parties

1.2 Les Trois Composantes d’une Fonction

1️⃣ Paramètres (Entrées)

// Les paramètres sont les ENTRÉES de la fonction
//        ↓ Paramètres
function additionner(a, b) {
    return a + b;
}

// Appel avec des ARGUMENTS (valeurs réelles)
//                ↓ Arguments
additionner(5, 3); // 8

2️⃣ Code (Logique)

function additionner(a, b) {
    // ↓ Le code à exécuter
    const resultat = a + b;
    console.log(`${a} + ${b} = ${resultat}`);
    // ↑ Logique de la fonction
    return resultat;
}

3️⃣ Return (Sortie)

function additionner(a, b) {
    return a + b; // ← La SORTIE (résultat)
}

const resultat = additionner(5, 3);
console.log(resultat); // 8

1.3 Flux d’Exécution d’une Fonction

// Étape 1 : Définition (préparation)
function saluer(nom) {
    console.log(`Bonjour ${nom}`);
    return `Salutation envoyée à ${nom}`;
}

// Étape 2 : Appel (exécution)
const message = saluer('myra');

// Flux :
// 1. saluer('myra') est appelée
// 2. nom = 'myra'
// 3. console.log exécuté → "Bonjour myra"
// 4. return exécuté → message = "Salutation envoyée à myra"
// 5. Fonction terminée

console.log(message); // "Salutation envoyée à myra"

📖 SECTION 2 : FONCTIONS GLOBALES (DÉCLARATION CLASSIQUE)

2.1 Syntaxe de Base

Structure Complète

function nomDeLaFonction(parametre1, parametre2) {
    // Code à exécuter
    return resultat;
}

Exemple Simple

// Fonction qui additionne deux nombres
function additionner(a, b) {
    const resultat = a + b;
    return resultat;
}

// Appel
console.log(additionner(5, 3)); // 8
console.log(additionner(10, 20)); // 30

2.2 Fonctions sans Paramètres

Syntaxe

function nomFonction() {
    // Code sans paramètres
    return resultat;
}

Exemples

// ✅ Fonction simple sans paramètres
function obtenirDate() {
    return new Date().toLocaleDateString('fr-FR');
}

console.log(obtenirDate()); // "25/01/2026"

// ✅ Fonction qui affiche un message
function afficherBienvenue() {
    console.log('Bienvenue sur notre site !');
    return true;
}

afficherBienvenue(); // "Bienvenue sur notre site !"

// ✅ Fonction qui génère un nombre aléatoire
function nombreAleatoire() {
    return Math.floor(Math.random() * 100);
}

console.log(nombreAleatoire()); // 42 (par exemple)

2.3 Fonctions avec Paramètres

Un Paramètre

function doubler(nombre) {
    return nombre * 2;
}

console.log(doubler(5)); // 10
console.log(doubler(10)); // 20

Plusieurs Paramètres

function calculerRectangle(largeur, hauteur) {
    const aire = largeur * hauteur;
    return aire;
}

console.log(calculerRectangle(5, 3)); // 15
console.log(calculerRectangle(10, 4)); // 40

Paramètres avec Valeurs par Défaut

// Si l'utilisateur ne fournit pas de paramètre, utiliser la valeur par défaut
function saluer(nom = 'Visiteur') {
    return `Bonjour ${nom}`;
}

console.log(saluer('myra')); // "Bonjour myra"
console.log(saluer()); // "Bonjour Visiteur"

2.4 Fonctions avec Multiple Return

Un Seul Return

// ✅ BON : Un seul return
function obtenirStatut(age) {
    if (age >= 18) {
        return 'Adulte';
    } else {
        return 'Mineur';
    }
}

console.log(obtenirStatut(20)); // "Adulte"
console.log(obtenirStatut(15)); // "Mineur"

Return Précoce (Early Return)

// ✅ BON : Retourner dès que possible
function validerEmail(email) {
    // Vérifier si vide
    if (!email) {
        return false; // Sortir immédiatement
    }

    // Vérifier si contient @
    if (!email.includes('@')) {
        return false; // Sortir immédiatement
    }

    // Si tout est bon
    return true;
}

console.log(validerEmail('')); // false
console.log(validerEmail('myra')); // false
console.log(validerEmail('myra@example.com')); // true

2.5 Fonctions sans Return

Fonctions qui Effectuent une Action

// ✅ Fonction sans return (effectue une action)
function afficherMessage(message) {
    console.log(message);
    // Pas de return = return undefined
}


### **Return Implicite (undefined)**

```javascript
function test() {
    console.log('Test');
    // Pas de return explicite
}

const resultat = test(); // "Test"
console.log(resultat);   // undefined

2.6 Cas Pratiques - Fonctions Globales

Cas 1 : Calculatrice Simple

function additionner(a, b) {
    return a + b;
}

function soustraire(a, b) {
    return a - b;
}

function multiplier(a, b) {
    return a * b;
}

function diviser(a, b) {
    if (b === 0) {
        return 'Erreur : division par zéro';
    }
    return a / b;
}

// Utilisation
console.log(additionner(10, 5)); // 15
console.log(soustraire(10, 5)); // 5
console.log(multiplier(10, 5)); // 50
console.log(diviser(10, 5)); // 2
console.log(diviser(10, 0)); // "Erreur : division par zéro"

Cas 2 : Validation de Formulaire

function validerNom(nom) {
    if (nom.length < 3) {
        return 'Le nom doit avoir au moins 3 caractères';
    }
    return true;
}

function validerAge(age) {
    if (age < 18) {
        return 'Vous devez être majeur';
    }
    return true;
}

function validerFormulaire(nom, age) {
    const valNom = validerNom(nom);
    const valAge = validerAge(age);

    if (valNom !== true) return valNom;
    if (valAge !== true) return valAge;

    return 'Formulaire valide !';
}

// Utilisation
console.log(validerFormulaire('Al', 20)); // "Le nom doit avoir au moins 3 caractères"
console.log(validerFormulaire('myra', 15)); // "Vous devez être majeur"
console.log(validerFormulaire('myra', 25)); // "Formulaire valide !"

📖 SECTION 3 : FONCTIONS FLÉCHÉES (ARROW FUNCTIONS)

3.1 Qu’est-ce qu’une Fonction Fléchée ?

Définition

Une fonction fléchée est une syntaxe courte pour écrire des fonctions en JavaScript, introduite en ES6 (2015).

Syntaxe de Base

// Fonction classique
function additionner(a, b) {
    return a + b;
}

// Fonction fléchée (équivalente)
const additionner = (a, b) => {
    return a + b;
};

// Les deux font exactement la même chose !

3.2 Syntaxes des Fonctions Fléchées

Syntaxe 1 : Avec Accolades et Return

// Structure complète
const nomFonction = (param1, param2) => {
    // Code
    return resultat;
};

// Exemple
const additionner = (a, b) => {
    const resultat = a + b;
    return resultat;
};

console.log(additionner(5, 3)); // 8

Syntaxe 2 : Sans Accolades (Return Implicite)

// Syntaxe courte (return implicite)
const nomFonction = (param1, param2) => resultat;

// Exemple
const additionner = (a, b) => a + b;

console.log(additionner(5, 3)); // 8

Syntaxe 3 : Un Seul Paramètre

// Avec un paramètre, les parenthèses sont optionnelles
const doubler = (nombre) => nombre * 2;
const doubler = (nombre) => nombre * 2; // Parenthèses optionnelles

console.log(doubler(5)); // 10

Syntaxe 4 : Pas de Paramètres

// Sans paramètres, les parenthèses sont obligatoires
const obtenirDate = () => new Date().toLocaleDateString('fr-FR');

console.log(obtenirDate()); // "25/01/2026"

3.3 Tableau Comparatif

Cas Fonction Classique Fonction Fléchée
Deux paramètres function add(a, b) { return a + b; } const add = (a, b) => a + b;
Un paramètre function double(n) { return n * 2; } const double = n => n * 2;
Pas de paramètre function getDate() { return new Date(); } const getDate = () => new Date();
Code complexe function calc(a, b) { const r = a + b; return r * 2; } const calc = (a, b) => { const r = a + b; return r * 2; };

📖 SECTION 4 : RETURN IMPLICITE

4.1 Qu’est-ce que le Return Implicite ?

Définition

Le return implicite signifie que la fonction retourne automatiquement le résultat sans écrire return.

Condition

Le return implicite fonctionne SEULEMENT avec les fonctions fléchées SANS accolades.

// ✅ Return implicite (pas d'accolades)
const additionner = (a, b) => a + b;

// ❌ Pas de return implicite (avec accolades)
const additionner = (a, b) => {
    return a + b;
};

4.2 Exemples de Return Implicite

Exemple 1 : Calcul Simple

// ✅ Return implicite
const doubler = (n) => n * 2;
console.log(doubler(5)); // 10

// Équivalent à :
const doubler = (n) => {
    return n * 2;
};

Exemple 2 : Opération Mathématique

// ✅ Return implicite
const calculerAire = (largeur, hauteur) => largeur * hauteur;
console.log(calculerAire(5, 3)); // 15

// Équivalent à :
const calculerAire = (largeur, hauteur) => {
    return largeur * hauteur;
};

Exemple 3 : Chaîne de Caractères

// ✅ Return implicite
const saluer = (nom) => `Bonjour ${nom}`;
console.log(saluer('myra')); // "Bonjour myra"

// Équivalent à :
const saluer = (nom) => {
    return `Bonjour ${nom}`;
};

Exemple 4 : Comparaison

// ✅ Return implicite
const estMajeur = (age) => age >= 18;
console.log(estMajeur(25)); // true
console.log(estMajeur(15)); // false

// Équivalent à :
const estMajeur = (age) => {
    return age >= 18;
};

4.3 Return Implicite avec Objets

⚠️ Attention : Les Accolades

// ❌ ERREUR : Les accolades sont interprétées comme le bloc de code
const creerUtilisateur = nom => { nom: nom, age: 25 };
// Résultat : undefined (car pas de return)

// ✅ CORRECT : Entourer l'objet de parenthèses
const creerUtilisateur = nom => ({ nom: nom, age: 25 });
console.log(creerUtilisateur('myra')); // { nom: 'myra', age: 25 }

// ✅ CORRECT : Utiliser des accolades avec return
const creerUtilisateur = nom => {
    return { nom: nom, age: 25 };
};

Pourquoi les Parenthèses ?

// Les accolades {} sont ambiguës en JavaScript
// Elles peuvent signifier :
// 1. Un bloc de code
// 2. Un objet littéral

// Donc pour un objet, on utilise des parenthèses pour clarifier
const objet = () => ({ cle: 'valeur' }); // Clair : c'est un objet
const fonction = () => {
    return { cle: 'valeur' };
}; // Clair : c'est un bloc de code

📖 SECTION 5 : COMPARAISON COMPLÈTE

5.1 Fonction Classique vs Fonction Fléchée

Exemple 1 : Addition

// ❌ Fonction classique (long)
function additionner(a, b) {
    return a + b;
}

// ✅ Fonction fléchée avec return implicite (court)
const additionner = (a, b) => a + b;

// Utilisation (identique)
console.log(additionner(5, 3)); // 8

Exemple 2 : Validation

// ❌ Fonction classique
function validerEmail(email) {
    if (!email.includes('@')) {
        return false;
    }
    return true;
}

// ✅ Fonction fléchée avec return implicite
const validerEmail = (email) => email.includes('@');

// Utilisation
console.log(validerEmail('myra@example.com')); // true
console.log(validerEmail('myra')); // false

📖 SECTION 6 : PIÈGES COURANTS

6.1 Piège 1 : Oublier les Parenthèses pour un Objet

// ❌ ERREUR : Pas de parenthèses
const creerUtilisateur = (nom) => {
    nom: nom;
};
console.log(creerUtilisateur('myra')); // undefined

// ✅ CORRECT : Avec parenthèses
const creerUtilisateur = (nom) => ({ nom: nom });
console.log(creerUtilisateur('myra')); // { nom: 'myra' }

6.2 Piège 2 : Confondre Return Implicite et Explicite

// ❌ ERREUR : Accolades sans return
const additionner = (a, b) => {
    a + b; // Pas de return !
};
console.log(additionner(5, 3)); // undefined

// ✅ CORRECT : Avec return
const additionner = (a, b) => {
    return a + b;
};
console.log(additionner(5, 3)); // 8

// ✅ CORRECT : Sans accolades (return implicite)
const additionner = (a, b) => a + b;
console.log(additionner(5, 3)); // 8

6.3 Piège 3 : Oublier les Parenthèses pour un Paramètre

// ✅ BON : Parenthèses optionnelles pour 1 paramètre
const doubler = n => n * 2;

// ✅ BON : Parenthèses explicites
const doubler = (n) => n * 2;

// ❌ ERREUR : Pas de paramètres, parenthèses obligatoires
const obtenirDate = => new Date(); // Erreur !

// ✅ CORRECT : Parenthèses obligatoires
const obtenirDate = () => new Date();

6.4 Piège 4 : Le Contexte ‘this’

// ❌ ERREUR : Arrow function change 'this'
const utilisateur = {
    nom: 'myra',
    saluer: () => {
        console.log(`Bonjour ${this.nom}`); // this = undefined
    },
};
utilisateur.saluer(); // "Bonjour undefined"

// ✅ CORRECT : Fonction classique
const utilisateur = {
    nom: 'myra',
    saluer: function () {
        console.log(`Bonjour ${this.nom}`); // this = utilisateur
    },
};
utilisateur.saluer(); // "Bonjour myra"

📖 SECTION 7 : EXERCICES PROGRESSIFS

7.1 Niveau 1 : Débutant

Exercice 1 : Fonction Simple

// Créer une fonction qui retourne le double d'un nombre
function doubler(n) {
    return n * 2;
}

console.log(doubler(5)); // 10

// Avec fonction fléchée
const doubler = (n) => n * 2;
console.log(doubler(5)); // 10

Exercice 2 : Fonction avec Deux Paramètres

// Créer une fonction qui calcule l'aire d'un rectangle
function calculerAire(largeur, hauteur) {
    return largeur * hauteur;
}

console.log(calculerAire(5, 3)); // 15

// Avec fonction fléchée
const calculerAire = (largeur, hauteur) => largeur * hauteur;
console.log(calculerAire(5, 3)); // 15

Exercice 3 : Fonction avec Condition

// Créer une fonction qui vérifie si un nombre est pair
function estPair(n) {
    return n % 2 === 0;
}

console.log(estPair(4)); // true
console.log(estPair(5)); // false

// Avec fonction fléchée
const estPair = (n) => n % 2 === 0;
console.log(estPair(4)); // true
console.log(estPair(5)); // false

7.2 Niveau 2 : Intermédiaire

Exercice 4 : Fonction qui Retourne un Objet

// Créer une fonction qui crée un utilisateur
function creerUtilisateur(nom, email) {
    return {
        nom: nom,
        email: email,
        dateCreation: new Date(),
    };
}

console.log(creerUtilisateur('myra', 'myra@example.com'));

// Avec fonction fléchée
const creerUtilisateur = (nom, email) => ({
    nom,
    email,
    dateCreation: new Date(),
});

console.log(creerUtilisateur('myra', 'myra@example.com'));

Exercice 5 : Fonction avec Validation

// Créer une fonction qui valide un mot de passe
function validerMotDePasse(mdp) {
    if (mdp.length < 8) {
        return 'Le mot de passe doit avoir au moins 8 caractères';
    }
    if (!/[A-Z]/.test(mdp)) {
        return 'Le mot de passe doit contenir une majuscule';
    }
    if (!/[0-9]/.test(mdp)) {
        return 'Le mot de passe doit contenir un chiffre';
    }
    return true;
}

console.log(validerMotDePasse('abc')); // "Le mot de passe doit avoir au moins 8 caractères"
console.log(validerMotDePasse('abcdefgh')); // "Le mot de passe doit contenir une majuscule"
console.log(validerMotDePasse('Abcdefgh')); // "Le mot de passe doit contenir un chiffre"
console.log(validerMotDePasse('Abcdefgh1')); // true

Exercice 6 : Fonction avec Tableau

// Créer une fonction qui calcule la moyenne
function calculerMoyenne(notes) {
    let somme = 0;
    for (let i = 0; i < notes.length; i++) {
        somme += notes[i];
    }
    return somme / notes.length;
}

console.log(calculerMoyenne([10, 15, 20])); // 15

// Avec fonction fléchée et reduce
const calculerMoyenne = (notes) => notes.reduce((acc, n) => acc + n, 0) / notes.length;

console.log(calculerMoyenne([10, 15, 20])); // 15

7.3 Niveau 3 : Avancé

Exercice 7 : Fonction Composée

// Créer des fonctions qui se composent
const additionner = (a, b) => a + b;
const multiplier = (a, b) => a * b;
const diviser = (a, b) => a / b;

// Composer les fonctions
const calculer = (a, b, c) => {
    const etape1 = additionner(a, b); // 5 + 3 = 8
    const etape2 = multiplier(etape1, c); // 8 * 2 = 16
    const etape3 = diviser(etape2, 2); // 16 / 2 = 8
    return etape3;
};

console.log(calculer(5, 3, 2)); // 8

Exercice 8 : Fonction d’Ordre Supérieur

// Créer une fonction qui retourne une fonction
function creerMultiplicateur(facteur) {
    return (n) => n * facteur;
}

const doubler = creerMultiplicateur(2);
const tripler = creerMultiplicateur(3);

console.log(doubler(5)); // 10
console.log(tripler(5)); // 15

Exercice 9 : Fonction avec Callback

// Créer une fonction qui accepte un callback
function traiterTableau(tableau, callback) {
    const resultat = [];
    for (let i = 0; i < tableau.length; i++) {
        resultat.push(callback(tableau[i]));
    }
    return resultat;
}

const nombres = [1, 2, 3, 4, 5];
const doubles = traiterTableau(nombres, (n) => n * 2);
console.log(doubles); // [2, 4, 6, 8, 10]

const carres = traiterTableau(nombres, (n) => n * n);
console.log(carres); // [1, 4, 9, 16, 25]

📖 SECTION 8 : RÉSUMÉ VISUEL

8.1 Diagramme de Décision

┌─────────────────────────────────────────┐
│ Dois-je créer une fonction ?            │
└────────────────┬────────────────────────┘
                 │
        ┌────────▼────────┐
        │ Code complexe ? │
        └────────┬────────┘
                 │
        ┌────────▼────────┐
        │ OUI : Classique │
        │ NON : Fléchée   │
        └────────┬────────┘
                 │
        ┌────────▼────────────────┐
        │ Une seule ligne ?       │
        └────────┬────────────────┘
                 │
        ┌────────▼────────────────┐
        │ OUI : Sans accolades    │
        │ NON : Avec accolades    │
        └────────┬────────────────┘
                 │
        ┌────────▼────────────────┐
        │ Retourne un objet ?     │
        └────────┬────────────────┘
                 │
        ┌────────▼────────────────┐
        │ O

Leçon précédente

Énoncés des TPs - Objets, Contrôle et Nouveautés

Prochaine leçon

Contrôle Continu - DOM et Événements (JavaScript)

Prêt à passer à la suite ?

Vous avez terminé cette leçon sur JAVASCRIPT - LES FONCTIONS (GUIDE COMPLET POUR DÉBUTANTS). Continuez votre apprentissage avec la prochaine leçon ou explorez d'autres formations.

Continuer avec Contrôle Continu - DOM et Événements (JavaScript) Explorer toutes les formations