01 - Introduction JavaScript - Partie 1 : Fondamentaux et Variables
1.1 Qu’est-ce que JavaScript en 2025 ?
JavaScript est un langage de programmation multi-paradigme qui a évolué de simples scripts web à un écosystème complet capable de fonctionner partout : navigateurs, serveurs, applications mobiles, et même objets connectés.
L’écosystème JavaScript moderne
En 2025, JavaScript n’est plus seulement un langage web. C’est devenu une plateforme complète :
// JavaScript peut maintenant s'exécuter dans différents environnements
// Navigateur (front-end)
console.log(typeof window); // "object" - disponible dans le navigateur
// Node.js (back-end)
console.log(typeof process); // "object" - disponible dans Node.js
// Deno/Bun (runtimes modernes)
// Support natif des modules, TypeScript, et performances améliorées
ES2024+ : Les nouveautés importantes
JavaScript continue d’évoluer avec des spécifications annuelles. ES2024+ apporte des fonctionnalités qui rendent le code plus expressif et sécurisé :
// Nouvelles méthodes de tableaux ES2023+
const nombres = [1, 2, 3, 4, 5];
// toSorted() : crée une copie triée sans modifier l'original
const trie = nombres.toSorted((a, b) => b - a);
console.log(nombres); // [1, 2, 3, 4, 5] - original intact
console.log(trie); // [5, 4, 3, 2, 1] - copie triée
// toReversed() : crée une copie inversée
const inverse = nombres.toReversed();
// toSpliced() : crée une copie avec modifications
const modifie = nombres.toSpliced(1, 2, 99, 100); // remplace 2,3,4 par 99,100
1.2 Variables : let, const, et pourquoi éviter var
Comprendre les déclarations de variables
En JavaScript moderne, nous avons trois façons de déclarer des variables, chacune avec ses spécificités :
// let : variable réassignable
let ageEva = 25;
ageEva = 26; // ✅ Réassignation autorisée
// const : constante (référence immuable)
const nomOwen = 'Owen';
// nomOwen = "Nouveau nom"; // ❌ Erreur : réassignation interdite
// var : ancienne méthode (à éviter)
var ancienneVariable = 'obsolète';
Pourquoi éviter var ?
var a des comportements problématiques qui peuvent causer des bugs difficiles à détecter :
// Problème 1 : Hoisting avec comportement inattendu
console.log(villeRostand); // undefined (pas d'erreur !)
var villeRostand = 'Paris';
console.log(villeRostand); // "Paris"
// Problème 2 : Portée de fonction au lieu de portée de bloc
if (true) {
var dansBlock = 'je suis accessible partout';
}
console.log(dansBlock); // "je suis accessible partout" - problème !
// Solution moderne avec let/const
if (true) {
let moderne = 'je suis bien scoupé';
const constante = 'moi aussi';
}
// console.log(moderne); // ❌ ReferenceError : moderne is not defined
// console.log(constante); // ❌ ReferenceError : constante is not defined
Temporal Dead Zone (TDZ)
let et const ont une zone morte temporaire où les variables ne sont pas accessibles avant leur déclaration :
// Exemple avec Eva et ses variables
console.log(ageEva); // ❌ ReferenceError : Cannot access 'ageEva' before initialization
let ageEva = 25;
// Même comportement avec const
console.log(nomOwen); // ❌ ReferenceError : Cannot access 'nomOwen' before initialization
const nomOwen = 'Owen';
1.3 Types de données en JavaScript
Types primitifs
Les types primitifs sont immuables et stockés directement dans la variable :
// String : chaînes de caractères
const prenomEva = 'Eva';
const citation = 'JavaScript est partout';
const template = `Bonjour ${prenomEva}, bienvenue en 2025`;
// Number : nombres (tous les nombres sont des flottants 64-bit)
const ageEva = 25;
const temperature = -5.5;
const pi = 3.14159;
const infini = Infinity;
const pasUnNombre = NaN;
// Boolean : valeurs logiques
const estMajeur = true;
const estConnecte = false;
// Undefined : variable déclarée mais non initialisée
let variableNonInitialisee;
console.log(variableNonInitialisee); // undefined
// Null : absence intentionnelle de valeur
const utilisateurNonTrouve = null;
// Symbol : identifiant unique (ES2015+)
const idUnique = Symbol('description');
const autreId = Symbol('description');
console.log(idUnique === autreId); // false
// BigInt : nombres entiers de précision arbitraire (ES2020+)
const grandNombre = 9007199254740991n; // n pour BigInt
const encorePlusGrand = 123456789012345678901234567890n;
Types complexes (références)
Les types complexes sont stockés par référence :
// Object : objets génériques
const profilEva = {
nom: 'Eva',
age: 25,
ville: 'Lyon',
preferences: {
theme: 'sombre',
notifications: true,
},
};
// Array : tableaux
const notesSohan = [15, 18, 12, 20];
const noms = ['Eva', 'Owen', 'Diane', 'Rostand', 'Sohan'];
// Function : fonctions
const saluer = function (nom) {
return `Bonjour ${nom} !`;
};
// Date : dates
const aujourdHui = new Date();
const anniversaireEva = new Date('1999-05-15');
// RegExp : expressions régulières
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
const telephoneRegex = /^0[1-9]\d{8}$/;
Vérification des types
// typeof pour les types primitifs
console.log(typeof 'Eva'); // "string"
console.log(typeof 25); // "number"
console.log(typeof true); // "boolean"
console.log(typeof undefined); // "undefined"
console.log(typeof null); // "object" (historique !)
console.log(typeof Symbol()); // "symbol"
console.log(typeof 123n); // "bigint"
// typeof pour les types complexes
console.log(typeof {}); // "object"
console.log(typeof []); // "object"
console.log(typeof function () {}); // "function"
// Vérifications plus précises
console.log(Array.isArray([])); // true
console.log(Array.isArray({})); // false
console.log({} instanceof Object); // true
console.log([] instanceof Array); // true
1.4 Opérateurs modernes JavaScript 2025
Nullish coalescing (??)
L’opérateur ?? retourne l’opérande de droite si l’opérande de gauche est null ou undefined :
Optional chaining (?.)
L’opérateur ?. permet d’accéder en toute sécurité à des propriétés imbriquées :
Assignment avec nullish coalescing (??=)
// Initialiser seulement si la valeur est null/undefined
let configurationTheme = null;
let configurationLangue = 'en';
configurationTheme ??= 'sombre'; // "sombre" (car null)
configurationLangue ??= 'fr'; // "en" (car déjà défini)
console.log(configurationTheme); // "sombre"
console.log(configurationLangue); // "en"
// Équivalent à :
// configurationTheme = configurationTheme ?? "sombre";
Exercices
Exercice 1 : Variables et types
Créez des variables pour représenter les informations de Diane (nom, age, skills, estConnecte) en utilisant les bonnes pratiques de déclaration.
Exercice 2 : Opérateurs modernes
Utilisez les opérateurs ?? et ?. pour accéder en toute sécurité aux propriétés imbriquées d’un objet utilisateur complexe.
Concepts clés à retenir
- const par défaut, let uniquement pour la réassignation, jamais var
- Les types primitifs sont immuables, les types complexes sont des références
- ?? pour gérer null/undefined, ?. pour l’accès sécurisé aux propriétés
- Temporal Dead Zone : let/const ne sont pas accessibles avant leur déclaration
- Immutabilité : préférez créer des copies plutôt que de modifier les originaux
Prêt à passer à la suite ?
Vous avez terminé cette leçon sur 01 - Introduction JavaScript - Partie 1 : Fondamentaux et Variables. Continuez votre apprentissage avec la prochaine leçon ou explorez d'autres formations.