Aller au contenu principal

Module JS.2 – Syntaxe & bases

Objectif​

Maîtriser la syntaxe fondamentale de JavaScript : let/const, déclaration de variables, et utilisation de console.log pour le débogage.

Théorie​

let / const​

ES6 (2015) a introduit let et const pour remplacer var.

let​

let déclare une variable avec un scope de bloc, modifiable.

Syntaxe :

let variable = "modifiable";
variable = "changé";  // OK

Scope de bloc :

if (true) {
    let x = 10;
    console.log(x);  // 10
}
console.log(x);  // Erreur : x n'est pas défini

Différence avec var :

// var (ancien, à éviter)
for (var i = 0; i < 3; i++) {
    setTimeout(() => console.log(i), 100);  // Affiche 3, 3, 3
}

// let (moderne, recommandé)
for (let i = 0; i < 3; i++) {
    setTimeout(() => console.log(i), 100);  // Affiche 0, 1, 2
}

const​

const déclare une constante : la référence ne peut pas être réassignée.

Syntaxe :

const constante = "immuable";
// constante = "erreur";  // Erreur : Assignment to constant variable

Important : const ne rend pas l'objet immuable, seulement la référence.

const personne = { nom: "Jean", age: 30 };
personne.age = 31;  // OK : modification de propriété
// personne = { nom: "Marie" };  // Erreur : réassignation

const nombres = [1, 2, 3];
nombres.push(4);  // OK : modification du tableau
// nombres = [5, 6];  // Erreur : réassignation

Quand utiliser const :

  • Toujours par défaut
  • Quand la valeur ne doit pas changer
  • Pour les objets et tableaux (référence constante)

Quand utiliser let :

  • Quand la variable doit être réassignée
  • Dans les boucles
  • Variables temporaires

Quand éviter var :

  • Toujours ! Utilisez let ou const à la place

Variables​

Déclaration :

let nombre = 42;
let texte = "Bonjour";
let decimal = 3.14;
let booleen = true;
let rien = null;
let indefini = undefined;

Règles de nommage :

  • Commencent par lettre, underscore _, ou dollar $
  • Peuvent contenir lettres, chiffres, _, $
  • Sensibles à la casse (nom ≠ Nom)
  • Mots réservés interdits (if, for, function, etc.)

Conventions :

  • camelCase pour variables : nomUtilisateur, agePersonne
  • UPPER_CASE pour constantes : MAX_SIZE, API_URL
  • Noms descriptifs et clairs

Exemples valides :

let nomUtilisateur = "Jean";
let _variablePrivee = "test";
let $element = document.getElementById('id');
let nombre123 = 42;

Exemples invalides :

// let 123nombre = 42;      // Ne peut pas commencer par chiffre
// let nom-utilisateur = "";  // Pas de tirets
// let nom utilisateur = "";  // Pas d'espaces
// let if = "test";          // Mot réservé

Déclaration multiple :

let a = 1, b = 2, c = 3;
let nom = "Jean",
    age = 30,
    ville = "Paris";

console.log et méthodes de débogage​

La console est votre meilleur ami pour déboguer JavaScript.

console.log​

Affiche des messages dans la console.

console.log("Message simple");
console.log("Variable :", variable);
console.log("Plusieurs valeurs :", a, b, c);

Formatage :

const nom = "Jean";
const age = 30;

console.log("Bonjour " + nom);           // Concaténation
console.log(`Bonjour ${nom}`);           // Template literals (ES6)
console.log("Bonjour %s, vous avez %d ans", nom, age);  // Formatage C-style

Autres méthodes console​

console.error : Affiche une erreur

console.error("Une erreur s'est produite");
console.error(new Error("Erreur détaillée"));

console.warn : Affiche un avertissement

console.warn("Attention : valeur suspecte");

console.info : Affiche une information

console.info("Information : opération réussie");

console.table : Affiche un tableau formaté

const personnes = [
    { nom: "Jean", age: 30, ville: "Paris" },
    { nom: "Marie", age: 25, ville: "Lyon" }
];
console.table(personnes);

console.group : Groupe des messages

console.group("Groupe 1");
console.log("Message 1");
console.log("Message 2");
console.groupEnd();

console.time : Mesure le temps d'exécution

console.time("opération");
// Code à mesurer
console.timeEnd("opération");  // Affiche le temps écoulé

console.dir : Affiche les propriétés d'un objet

console.dir(document.body);

console.assert : Affiche une erreur si condition fausse

console.assert(age >= 18, "L'âge doit être >= 18");

Template literals (ES6)​

Syntaxe moderne pour les chaînes de caractères.

Syntaxe :

const nom = "Jean";
const age = 30;

// Ancienne méthode
const message = "Bonjour " + nom + ", vous avez " + age + " ans";

// Template literals
const message = `Bonjour ${nom}, vous avez ${age} ans`;

Avantages :

  • Plus lisible
  • Supporte les sauts de ligne
  • Expressions JavaScript à l'intérieur

Exemples :

// Sauts de ligne
const texte = `Ligne 1
Ligne 2
Ligne 3`;

// Expressions
const calcul = `2 + 3 = ${2 + 3}`;  // "2 + 3 = 5"

// Fonctions
const saluer = (nom) => `Bonjour ${nom.toUpperCase()}`;

Exercice​

  1. Variables avec let/const

    • Créez des variables avec let et const
    • Testez la modification et la réassignation
    • Comprenez la différence

  2. Scope de bloc

    • Créez des variables dans différents blocs
    • Testez l'accès depuis l'extérieur
    • Comparez let et var

  3. Console

    • Utilisez toutes les méthodes console
    • Testez console.table avec un tableau d'objets
    • Mesurez le temps d'exécution d'une fonction

  4. Template literals

    • Créez des messages avec template literals
    • Utilisez des expressions à l'intérieur
    • Créez des chaînes multi-lignes

  5. Nommage

    • Créez des variables avec des noms descriptifs
    • Respectez les conventions camelCase
    • Testez les noms invalides (commentez-les)

Quiz​

  1. Quelle est la différence entre let et const ?

    • Aucune différence
    • const ne peut pas être réassigné, let oui
    • let est plus rapide

  2. Que fait console.table() ?

    • Crée un tableau HTML
    • Affiche un tableau formaté dans la console
    • Convertit en tableau

  3. Que sont les template literals ?

    • Des fonctions
    • Syntaxe moderne pour les chaînes avec $
    • Des tableaux

  4. Peut-on modifier un objet déclaré avec const ?

    • Oui, les propriétés peuvent être modifiées
    • Non, l'objet est complètement immuable
    • Seulement avec let

  5. Quel est le scope de let ?

    • Global
    • Bloc (block scope)
    • Fonction

Mini défi​

Mission : Créer un script JavaScript complet avec toutes les bases

Créez un fichier bases.js qui démontre toutes les concepts :

  1. Variables

    • Déclarez des variables avec let et const
    • Différents types (string, number, boolean, object, array)
    • Testez la modification

  2. Scope

    • Créez des variables dans différents blocs
    • Testez l'accès depuis différents contextes
    • Démontrez la différence let/var

  3. Console

    • Utilisez console.log, error, warn, info
    • Créez un tableau d'objets et affichez-le avec console.table
    • Mesurez le temps d'exécution d'une boucle

  4. Template literals

    • Créez des messages formatés
    • Utilisez des expressions JavaScript
    • Créez un template pour afficher des informations

  5. Organisation

    • Code bien commenté
    • Noms de variables descriptifs
    • Structure claire

Exemple de sortie attendue :

=== Variables ===
Nombre : 42
Texte : Bonjour
Booléen : true

=== Scope ===
Variable dans bloc : accessible
Variable globale : accessible

=== Tableau ===
[Affiche un tableau formaté]

=== Template ===
Bonjour Jean, vous avez 30 ans
Calcul : 2 + 3 = 5

Critères :

  • ✅ Utilisation correcte de let/const
  • ✅ Toutes les méthodes console testées
  • ✅ Template literals utilisés
  • ✅ Code propre et commenté
  • ✅ Démonstration du scope

Objectif : Maîtriser la syntaxe de base de JavaScript et les outils de débogage.

Validation : Vous pouvez passer au module suivant quand vous maîtrisez let/const, variables et console.log.