KONE Internal
Cours JavaScript
Formation complète – Chapitres 2 & 3
Chapitre 2 Chapitre 3
Structures de contrôle Fonctions
Niveau : Débutant / Intermédiaire
KONE Internal
Chapitre 2 : Structures de contrôle
Les structures de contrôle permettent de diriger l'exécution du code selon des conditions ou de
répéter des blocs d'instructions. Elles sont au cœur de toute logique de programmation.
2.1 Conditions
La condition if / else if / else
La structure if évalue une expression booléenne. Si elle est vraie (truthy), le bloc correspondant
est exécuté.
// Syntaxe de base
if (condition) {
// bloc exécuté si condition est vraie
} else if (autreCondition) {
// bloc exécuté si autreCondition est vraie
} else {
// bloc exécuté si aucune condition n'est vérifiée
}
Exemple concret :
const note = 14;
if (note >= 16) {
[Link]("Très bien !");
} else if (note >= 12) {
[Link]("Bien");
} else if (note >= 10) {
[Link]("Passable");
} else {
[Link]("Insuffisant");
}
// Résultat : "Bien"
Valeurs falsy en JavaScript
Les valeurs suivantes sont considérées comme fausses : false, 0, "" (chaîne vide), null,
undefined, NaN. Toutes les autres valeurs sont truthy.
L'opérateur ternaire
Une version condensée du if/else pour les cas simples, sur une seule ligne.
// Syntaxe : condition ? valeurSiVrai : valeurSiFaux
const age = 20;
const statut = age >= 18 ? "majeur" : "mineur";
KONE Internal
[Link](statut); // "majeur"
La condition switch
Le switch est idéal quand on compare une variable à plusieurs valeurs précises. Il est souvent
plus lisible qu'une longue chaîne de if/else if.
const jour = 'mercredi';
switch (jour) {
case 'lundi':
case 'mardi':
[Link]("Début de semaine");
break;
case 'mercredi':
[Link]("Milieu de semaine");
break;
case 'jeudi':
case 'vendredi':
[Link]("Fin de semaine");
break;
default:
[Link]("Weekend !");
}
// Résultat : "Milieu de semaine"
Important : le mot-clé break
Sans break, l'exécution "tombe" dans le case suivant (fall-through). C'est parfois voulu
(comme lundi/mardi ci-dessus), mais souvent source de bugs. Ne l'oubliez pas !
2.2 Boucles
Les boucles permettent de répéter un bloc de code plusieurs fois, ce qui évite la répétition
manuelle de code.
La boucle for
La boucle for est la plus classique. Elle est utilisée quand on connaît à l'avance le nombre
d'itérations.
// Structure : for (initialisation; condition; incrément)
for (let i = 0; i < 5; i++) {
[Link]('Itération numéro ' + i);
}
// Affiche : Itération numéro 0, 1, 2, 3, 4
// Parcourir un tableau
const fruits = ['pomme', 'banane', 'cerise'];
for (let i = 0; i < [Link]; i++) {
KONE Internal
[Link](fruits[i]);
}
Les boucles for...of et for...in
ES6 introduit des boucles plus lisibles pour parcourir des collections.
// for...of : parcourt les valeurs d'un tableau
const couleurs = ['rouge', 'vert', 'bleu'];
for (const couleur of couleurs) {
[Link](couleur); // 'rouge', 'vert', 'bleu'
}
// for...in : parcourt les clés d'un objet
const personne = { nom: 'Alice', age: 25, ville: 'Paris' };
for (const cle in personne) {
[Link](cle + ' : ' + personne[cle]);
}
// nom : Alice age : 25 ville : Paris
La boucle while
La boucle while répète un bloc tant que la condition est vraie. Elle est utilisée quand le nombre
d'itérations n'est pas connu à l'avance.
let compteur = 0;
while (compteur < 5) {
[Link]('Compteur : ' + compteur);
compteur++; // IMPORTANT : sans cela, boucle infinie !
}
// Exemple pratique : attendre une entrée valide
let nombreAleatoire = [Link]([Link]() * 10);
while (nombreAleatoire !== 5) {
nombreAleatoire = [Link]([Link]() * 10);
}
[Link]("On a obtenu 5 !");
La boucle do...while
Similaire à while, mais le bloc est exécuté au moins une fois avant de vérifier la condition.
let reponse;
do {
reponse = prompt('Entrez un nombre entre 1 et 10 :');
} while (reponse < 1 || reponse > 10);
[Link]("Valeur valide :", reponse);
KONE Internal
break et continue
Ces mots-clés permettent de contrôler finement l'exécution des boucles.
// break : sort de la boucle immédiatement
for (let i = 0; i < 10; i++) {
if (i === 5) break;
[Link](i); // Affiche 0, 1, 2, 3, 4
}
// continue : passe à l'itération suivante
for (let i = 0; i < 10; i++) {
if (i % 2 === 0) continue; // Ignore les pairs
[Link](i); // Affiche 1, 3, 5, 7, 9
}
2.3 Bonnes pratiques
Conditions claires et lisibles
Bonne pratique A eviter
// Nommer les conditions complexes // Conditions obscures
const estAdulte = age >= 18;
const aUnCompte = solde > 0;
if (estAdulte && aUnCompte) {
if (age >= 18 && solde > 0) {
accorderPret();
accorderPret();
}
}
Choisir la bonne boucle
Boucle Quand l'utiliser Exemple typique
for Nombre d'itérations connu à Parcourir un tableau avec index
l'avance
for...of Parcourir les valeurs d'un itérable Lire les éléments d'un tableau
for...in Parcourir les clés d'un objet Afficher les propriétés d'un objet
while Condition d'arrêt inconnue à Attendre une réponse utilisateur
l'avance
do...while Exécuter au moins une fois Menu qui s'affiche puis se répète
Autres bonnes pratiques
• Utiliser const et let (jamais var) pour les variables de boucle
• Eviter les boucles infinies : toujours s'assurer que la condition d'arrêt sera atteinte
• Eviter les effets de bord : ne pas modifier le tableau qu'on parcourt
• Préférer forEach, map, filter pour les tableaux (code plus expressif)
KONE Internal
// Préférer les méthodes de tableau modernes
const nombres = [1, 2, 3, 4, 5];
// forEach : pour parcourir sans résultat
[Link](n => [Link](n));
// map : transforme chaque élément (retourne un nouveau tableau)
const doubles = [Link](n => n * 2); // [2, 4, 6, 8, 10]
// filter : filtre selon une condition
const pairs = [Link](n => n % 2 === 0); // [2, 4]
KONE Internal
Chapitre 3 : Fonctions
Les fonctions sont des blocs de code réutilisables qui effectuent une tâche précise. Elles
permettent d'organiser le code, d'éviter les répétitions et de le rendre plus lisible et maintenable.
3.1 Déclaration de fonctions
Déclaration classique (function declaration)
La façon traditionnelle de définir une fonction. Elle est "hissée" (hoisted) : vous pouvez l'appeler
avant sa déclaration dans le code.
// Déclaration
function direBonjour() {
[Link]("Bonjour tout le monde !");
}
// Appel
direBonjour(); // Bonjour tout le monde !
// Le hoisting permet ceci :
saluer(); // Fonctionne même avant la déclaration
function saluer() {
[Link]("Salut !");
}
Expression de fonction (function expression)
Une fonction assignée à une variable. Elle n'est PAS hissée : elle doit être déclarée avant d'être
appelée.
// Expression de fonction
const multiplier = function(a, b) {
return a * b;
};
[Link](multiplier(3, 4)); // 12
// Contrairement à la déclaration, ceci provoque une erreur :
// calculer(2, 3); // ReferenceError !
const calculer = function(a, b) { return a + b; };
Fonctions nommées vs anonymes
Les fonctions peuvent être nommées (utile pour le débogage) ou anonymes (souvent utilisées
comme callbacks).
// Fonction nommée
const maFonction = function calculerSomme(a, b) {
KONE Internal
return a + b;
};
// Fonction anonyme (callback)
setTimeout(function() {
[Link]("Exécuté après 1 seconde");
}, 1000);
// Avec des tableaux
const nombres = [3, 1, 4, 1, 5];
[Link](function(a, b) { return a - b; });
[Link](nombres); // [1, 1, 3, 4, 5]
3.2 Paramètres et valeur de retour
Paramètres simples
Les paramètres sont les variables que la fonction attend en entrée. Les arguments sont les
valeurs passées lors de l'appel.
// Paramètres : nom et prénom
function presenterPersonne(prenom, nom) {
return 'Je m\'appelle ' + prenom + ' ' + nom;
}
// Arguments : 'Alice' et 'Dupont'
const resultat = presenterPersonne('Alice', 'Dupont');
[Link](resultat); // Je m'appelle Alice Dupont
Paramètres par défaut (ES6)
ES6 permet de définir des valeurs par défaut pour les paramètres, utilisées si aucun argument
n'est fourni.
function creerMessage(nom, salutation = 'Bonjour') {
return salutation + ', ' + nom + ' !';
}
[Link](creerMessage('Alice')); // Bonjour, Alice !
[Link](creerMessage('Bob', 'Salut')); // Salut, Bob !
[Link](creerMessage('Charlie', '')); // , Charlie !
Le rest operator (...)
Le rest operator capture un nombre variable d'arguments dans un tableau.
function somme(...nombres) {
return [Link]((total, n) => total + n, 0);
}
[Link](somme(1, 2, 3)); // 6
KONE Internal
[Link](somme(1, 2, 3, 4, 5)); // 15
// Mélanger paramètres normaux et rest
function logger(niveau, ...messages) {
[Link]('[' + niveau + ']', ...messages);
}
logger('INFO', 'Connexion réussie', 'Utilisateur:', 'Alice');
La valeur de retour (return)
Le mot-clé return renvoie une valeur et arrête immédiatement l'exécution de la fonction. Sans
return, la fonction retourne undefined.
function diviser(a, b) {
if (b === 0) {
return null; // Arrêt précoce si division par zéro
}
return a / b; // Valeur retournée
}
[Link](diviser(10, 2)); // 5
[Link](diviser(10, 0)); // null
// Une fonction sans return retourne undefined
function sanReturn() {
let x = 42; // Non retourné
}
[Link](sanReturn()); // undefined
Retourner plusieurs valeurs
JavaScript ne permet pas de retourner plusieurs valeurs directement. On utilise un objet ou un
tableau.
// Retourner un objet
function analyserTexte(texte) {
return {
longueur: [Link],
motCount: [Link](' ').length,
majuscule: [Link]()
};
}
const { longueur, motCount } = analyserTexte('Bonjour le monde');
[Link](longueur); // 17
[Link](motCount); // 3
3.3 Fonctions fléchées (ES6)
Les fonctions fléchées (arrow functions) sont une syntaxe concise introduite en ES6. Elles sont
très utilisées en JavaScript moderne.
KONE Internal
Syntaxe de base
// Fonction classique
function addition(a, b) {
return a + b;
}
// Equivalent en fonction fléchée
const addition = (a, b) => {
return a + b;
};
// Version ultra-compacte (retour implicite)
const addition = (a, b) => a + b;
// Avec un seul paramètre : parenthèses optionnelles
const doubler = x => x * 2;
// Sans paramètre : parenthèses obligatoires
const direBonjour = () => 'Bonjour !';
Retour implicite
Quand le corps de la fonction est une expression (pas un bloc), la valeur est automatiquement
retournée.
// Retour implicite (expression)
const carre = x => x * x;
[Link](carre(5)); // 25
// Retour implicite d'un objet : entourer de parenthèses !
const creerUtilisateur = (nom, age) => ({ nom, age });
const user = creerUtilisateur('Alice', 25);
[Link](user); // { nom: 'Alice', age: 25 }
// Retour explicite (bloc {})
const factorielle = n => {
if (n <= 1) return 1;
return n * factorielle(n - 1);
};
[Link](factorielle(5)); // 120
Différences avec les fonctions classiques : this
La différence principale entre les fonctions fléchées et les fonctions classiques concerne le mot-
clé this. Les fonctions fléchées n'ont pas leur propre this : elles héritent du this du contexte
parent.
const monObjet = {
nom: 'Alice',
// Fonction classique : this = l'objet
direNomClassique: function() {
return 'Je suis ' + [Link];
},
KONE Internal
// Fonction fléchée : this = contexte parent (global/undefined)
direNomFlechee: () => {
return 'Je suis ' + [Link]; // [Link] = undefined !
}
};
[Link]([Link]()); // Je suis Alice
[Link]([Link]()); // Je suis undefined
Règle pratique pour this
Utilisez des fonctions fléchées pour les callbacks (setTimeout, map, filter...) et les fonctions
imbriquées. Utilisez des fonctions classiques pour les méthodes d'objet, les constructeurs et
partout où this doit référencer l'objet.
Utilisation avec les méthodes de tableau
Les fonctions fléchées brillent particulièrement avec les méthodes comme map, filter, reduce.
const etudiants = [
{ nom: 'Alice', note: 15 },
{ nom: 'Bob', note: 8 },
{ nom: 'Charlie', note: 12 },
{ nom: 'Diana', note: 18 },
];
// Filtrer les étudiants admis (note >= 10)
const admis = [Link](e => [Link] >= 10);
// Extraire uniquement les noms
const noms = [Link](e => [Link]);
[Link](noms); // ['Alice', 'Charlie', 'Diana']
// Calculer la moyenne
const total = [Link]((acc, e) => acc + [Link], 0);
const moyenne = total / [Link];
[Link]('Moyenne :', moyenne); // 13.25
3.4 Bonnes pratiques pour les fonctions
Principe de responsabilité unique
Une fonction doit faire une seule chose et la faire bien. Si une fonction est trop longue ou
complexe, il faut la découper.
Bonne pratique A eviter
// Une fonction, une responsabilité // Trop de responsabilités
function validerEmail(email) { function traiterEmail(email, msg) {
return [Link]('@'); // validation ET envoi ET log
} if () return;
function envoyerEmail(email, msg) { // envoi...
if (!validerEmail(email)) return; [Link]('Email envoyé');
KONE Internal
// logique d'envoi... }
}
Nommage des fonctions
• Utiliser des verbes d'action : calculer, obtenir, creer, valider, afficher
• Etre précis : calculerMoyenne plutôt que juste calculer
• Fonctions booléennes : commencer par est, a, peut (estValide, aUnCompte)
// Bons noms de fonctions
function calculerTVA(montant, taux = 0.20) { ... }
function obtenirUtilisateur(id) { ... }
function estEmailValide(email) { ... }
function afficherErreur(message) { ... }
Documentation avec JSDoc
Documenter ses fonctions permet aux outils et aux collègues de comprendre leur usage sans lire
l'implémentation.
/**
* Calcule l'indice de masse corporelle (IMC)
* @param {number} poids - Le poids en kilogrammes
* @param {number} taille - La taille en mètres
* @returns {number} L'IMC arrondi à 2 décimales
*/
function calculerIMC(poids, taille) {
if (taille <= 0) throw new Error('La taille doit être positive');
return [Link]((poids / (taille * taille)) * 100) / 100;
}
[Link](calculerIMC(70, 1.75)); // 22.86
Récapitulatif : les types de fonctions
Type Syntaxe Spécificité
Déclaration function nom() { } Hissée (hoisting)
Expression const f = function() { } Non hissée, anonyme possible
Fléchée const f = () => { } Pas de this propre, concise
Méthode { nom() { } } Dans un objet ou une classe
IIFE (function() { })() Auto-invoquée immédiatement
