Maitriser la Programmation Javascript
Maitriser la Programmation Javascript

Introduction à JavaScript : Variables, Types et Opérateurs

Contexte du cours : Maîtriser la Programmation Javascript

Introduction : Les Fondations de Toute Application JavaScript

Bienvenue dans ce module fondamental de votre parcours pour maîtriser JavaScript ! Si le code JavaScript vous semble parfois complexe, c'est parce qu'il manipule des informations, et pour manipuler des informations, nous devons d'abord savoir comment les stocker, les catégoriser et interagir avec elles.

C'est précisément l'objectif de cette leçon : nous allons explorer les concepts cruciaux de variables, de types de données et d'opérateurs. Ces trois piliers constituent la base sur laquelle toutes les applications JavaScript sont construites. Comprendre comment déclarer une variable, quel type de donnée elle contient et comment les opérateurs permettent de modifier ou de comparer ces données est essentiel pour écrire du code efficace et lisible.

À la fin de cette leçon, vous serez capable de :

  • Déclarer et utiliser des variables en JavaScript en choisissant le mot-clé approprié (let, const).
  • Identifier les principaux types de données primitifs et non primitifs.
  • Manipuler des données à l'aide des différents types d'opérateurs (arithmétiques, d'assignation, de comparaison, logiques).

Préparez-vous à poser les premières pierres de votre expertise en JavaScript !

1. Les Variables : Des Conteneurs pour Vos Données

Imaginez les variables comme des boîtes ou des conteneurs dans la mémoire de votre ordinateur. Chacune de ces boîtes possède un nom unique (l'identifiant de la variable) et peut contenir une valeur (les données que vous stockez). En JavaScript, vous déclarez une variable pour réserver un espace en mémoire et lui donner un nom afin de pouvoir y accéder ou la modifier plus tard.

JavaScript est un langage à typage dynamique, ce qui signifie que vous n'avez pas besoin de spécifier le type de la donnée que votre variable va contenir lors de sa déclaration. Le type est déterminé automatiquement au moment de l'exécution en fonction de la valeur que vous lui assignez.

Historiquement, JavaScript utilisait le mot-clé var. Cependant, avec l'arrivée d'ES6 (ECMAScript 2015), deux nouveaux mots-clés sont apparus : let et const, qui sont désormais les méthodes préférées et recommandées pour déclarer des variables en raison de leur gestion plus prévisible de la portée (scope).

1.1. Les Mots-Clés de Déclaration

1.1.1. let : Pour les Variables qui Changent

Le mot-clé let est utilisé pour déclarer des variables dont la valeur peut être réassignée ultérieurement.

  • Portée (Scope) : Les variables déclarées avec let ont une portée de bloc (block scope). Cela signifie qu'elles ne sont accessibles qu'à l'intérieur du bloc de code où elles ont été définies (un bloc est généralement délimité par des accolades {}).
  • Réassignation : Vous pouvez changer la valeur d'une variable let autant de fois que nécessaire.
  • Redéclaration : Vous ne pouvez pas redéclarer une variable let dans le même bloc de portée.

Exemple :

let age = 30; // Déclaration et initialisation
console.log(age); // Affiche : 30

age = 31; // Réassignation de la valeur
console.log(age); // Affiche : 31

// let age = 32; // Erreur ! 'age' a déjà été déclaré dans ce bloc.

1.1.2. const : Pour les Constantes

Le mot-clé const est utilisé pour déclarer des variables dont la valeur ne doit pas changer après son initialisation. Elles sont souvent appelées "constantes".

  • Portée (Scope) : Comme let, les variables const ont une portée de bloc.
  • Initialisation : Une variable const doit être initialisée au moment de sa déclaration. Vous ne pouvez pas la déclarer sans lui assigner une valeur immédiatement.
  • Réassignation : Vous ne pouvez pas réassigner une nouvelle valeur à une variable const après son initialisation. Toute tentative de le faire entraînera une erreur.
  • Redéclaration : Vous ne pouvez pas redéclarer une variable const dans le même bloc de portée.

Exemple :

const PI = 3.14159; // Déclaration et initialisation
console.log(PI); // Affiche : 3.14159

// PI = 3.14; // Erreur ! Affectation à une constante non autorisée.

const NOM_SITE = "MonSuperSite";
// const HEURE_DEBUT; // Erreur ! Les constantes doivent être initialisées.

Important : Pour les objets et les tableaux déclarés avec const, c'est la référence à l'objet qui est constante, pas le contenu de l'objet. Vous pouvez toujours modifier les propriétés d'un objet ou les éléments d'un tableau const.

1.1.3. var : L'Ancien Mot-Clé (À Éviter)

Bien que var existe toujours, il est fortement recommandé d'utiliser let ou const à la place.

  • Portée (Scope) : Les variables déclarées avec var ont une portée de fonction (function scope) ou une portée globale. Elles n'ont pas une portée de bloc, ce qui peut mener à des comportements inattendus, notamment dans les boucles ou les structures conditionnelles.
  • Hoisting : Les déclarations var sont "montées" (hoisted) en haut de leur portée, ce qui signifie que vous pouvez utiliser une variable var avant même de l'avoir déclarée (sa valeur sera undefined avant l'assignation). Cela peut rendre le code difficile à débugger.

Exemple (pour comprendre pourquoi l'éviter) :

if (true) {
  var x = 10;
}
console.log(x); // Affiche : 10 (la variable 'x' est accessible en dehors du bloc if)

function maFonction() {
  var y = 20;
  console.log(y); // Affiche : 20
}
maFonction();
// console.log(y); // Erreur ! 'y' n'est pas défini (car portée de fonction)

// console.log(z); // Affiche : undefined (à cause du hoisting)
// var z = 30;

En raison de la clarté et de la prévisibilité offertes par la portée de bloc, privilégiez toujours let et const.

1.2. Règles de Nommage des Variables

Pour nommer vos variables, suivez ces règles :

  • Doivent commencer par une lettre, un underscore (_) ou un signe dollar ($).
  • Ne peuvent pas commencer par un chiffre.
  • Ne peuvent contenir que des lettres, des chiffres, des underscores ou des signes dollar.
  • Sont sensibles à la casse (maVariable est différente de MaVariable).
  • Ne peuvent pas être des mots-clés réservés de JavaScript (function, if, for, let, const, etc.).

Convention recommandée : Utilisez la convention camelCase. Le premier mot est en minuscules, et les mots suivants commencent par une majuscule (ex: nombreDeVisiteurs, monNomComplet). Pour les constantes const qui ne changeront jamais (comme PI), il est courant d'utiliser des majuscules avec des underscores (MA_CONSTANTE_GLOBALE).

2. Les Types de Données : La Nature de Vos Informations

Chaque valeur en JavaScript a un type. Connaître le type d'une donnée est crucial car cela détermine les opérations que vous pouvez effectuer avec elle. JavaScript est, comme mentionné, un langage à typage dynamique, ce qui signifie que le type d'une variable est déterminé par la valeur qu'elle contient au moment de l'exécution, et qu'il peut même changer au cours de la vie du programme.

Il existe deux grandes catégories de types en JavaScript : les types primitifs et les types d'objets (non-primitifs).

2.1. Types Primitifs

Les types primitifs représentent une seule valeur simple. Ils sont immuables, c'est-à-dire qu'une fois créés, leur valeur ne peut pas être modifiée (toute opération qui semble les modifier renvoie en fait une nouvelle valeur).

  • Number : Représente les nombres entiers et décimaux (nombres à virgule flottante).

    let age = 25;        // Nombre entier
let prix = 19.99;    // Nombre décimal
let infini = Infinity; // Valeur spéciale pour l'infini
let nonNombre = NaN;   // Not a Number, résultat d'une opération mathématique invalide

  • String : Représente une séquence de caractères (texte). Les chaînes de caractères peuvent être délimitées par des guillemets simples (' '), doubles (" ") ou des apostrophes inversées (backticks `). Les backticks permettent également les littéraux de gabarit (template literals) pour inclure des variables et des expressions directement dans la chaîne.

    let nom = "Alice";
let message = 'Bonjour le monde !';
let salutation = `Bonjour, ${nom} ! Vous avez ${age} ans.`; // Template literal
console.log(salutation); // Affiche : Bonjour, Alice ! Vous avez 25 ans.

  • Boolean : Représente une valeur logique qui ne peut être que true (vrai) ou false (faux). Utilisé pour les conditions et la logique de contrôle.

    let estConnecte = true;
let aDroitAcces = false;

  • Undefined : Indique qu'une variable a été déclarée mais n'a pas encore reçu de valeur. C'est la valeur par défaut.

    let maVariable;
console.log(maVariable); // Affiche : undefined

  • Null : Représente l'absence intentionnelle de toute valeur. C'est une valeur que vous assignez explicitement pour indiquer "vide" ou "pas d'objet".

    let objetVide = null;
console.log(objetVide); // Affiche : null

    Attention : typeof null renvoie 'object', ce qui est une erreur historique de JavaScript. Il faut le savoir mais ce n'est pas un object au sens des objets complexes.

  • Symbol (ES6) : Représente une valeur unique et immuable qui peut être utilisée comme clé de propriété d'objet. C'est un type plus avancé, utile pour éviter les conflits de nommage de propriétés.

    const id = Symbol('id');
const autreId = Symbol('id');
console.log(id === autreId); // Affiche : false

  • BigInt (ES11) : Représente des nombres entiers avec une précision arbitraire, permettant de travailler avec des nombres plus grands que ceux que le type Number peut gérer (2^53 - 1).

    const bigNumber = 9007199254740991n; // Le 'n' à la fin indique un BigInt

2.2. Type Non-Primitif : Object

Tous les autres types de données en JavaScript sont des Objects. Contrairement aux primitifs, les objets sont des collections de propriétés et sont mutables. Lorsque vous manipulez un objet, vous travaillez avec une référence à cet objet en mémoire.

  • Objets purs : Collections de paires clé-valeur. 
    let personne = {
  nom: "Dupont",
  prenom: "Jean",
  age: 30
};
  • Tableaux (Array) : Listes ordonnées de valeurs. 
    let couleurs = ["rouge", "vert", "bleu"];
  • Fonctions : En JavaScript, les fonctions sont des objets de première classe. 
    function saluer() {
  console.log("Salut !");
}
  • Dates, RegExp, etc. : D'autres objets intégrés à JavaScript.

2.3. L'Opérateur typeof

Pour vérifier le type d'une variable ou d'une valeur, vous pouvez utiliser l'opérateur typeof.

console.log(typeof 42);             // "number"
console.log(typeof "Bonjour");      // "string"
console.log(typeof true);           // "boolean"
console.log(typeof undefined);      // "undefined"
console.log(typeof null);           // "object" (erreur historique, mais c'est le résultat)
console.log(typeof { a: 1 });       // "object"
console.log(typeof [1, 2, 3]);      // "object" (les tableaux sont des objets)
console.log(typeof function() {}); // "function" (les fonctions sont un type spécial d'objet)
console.log(typeof Symbol('foo'));  // "symbol"
console.log(typeof 10n);            // "bigint"

3. Les Opérateurs : Manipuler Vos Données

Les opérateurs sont des symboles spéciaux qui effectuent des opérations sur une ou plusieurs valeurs (appelées opérandes) et retournent un résultat. Ils sont essentiels pour toute logique de programmation, qu'il s'agisse de calculs, de comparaisons ou de combinaisons de conditions.

3.1. Opérateurs Arithmétiques

Utilisés pour effectuer des calculs mathématiques.

| Opérateur | Description | Exemple | Résultat | | :-------- | :-------------------- | :---------------- | :-------- | | + | Addition | 5 + 3 | 8 | | - | Soustraction | 10 - 4 | 6 | | * | Multiplication | 2 * 6 | 12 | | / | Division | 15 / 3 | 5 | | % | Modulo (reste de div) | 7 % 3 | 1 | | ** | Exponentiation (ES6) | 2 ** 3 | 8 | | ++ | Incrémentation | let a = 5; a++; | a est 6 | | -- | Décrémentation | let b = 5; b--; | b est 4 |

Note sur l'incrémentation/décrémentation :

  • Pré-incrémentation/décrémentation (++a, --a) : L'opérateur est appliqué avant que la valeur ne soit utilisée dans l'expression.
  • Post-incrémentation/décrémentation (a++, a--) : L'opérateur est appliqué après que la valeur ait été utilisée dans l'expression.
let x = 5;
let y = ++x; // x devient 6, puis y prend la valeur 6
console.log(x, y); // Affiche : 6 6

let p = 5;
let q = p++; // q prend la valeur 5, puis p devient 6
console.log(p, q); // Affiche : 6 5

3.2. Opérateurs d'Assignation

Utilisés pour assigner une valeur à une variable.

| Opérateur | Description | Exemple | Équivalent à | | :-------- | :-------------------------- | :-------------- | :-------------- | | = | Assignation | x = 10 | | | += | Addition et assignation | x += 5 | x = x + 5 | | -= | Soustraction et assignation | x -= 2 | x = x - 2 | | *= | Multiplication et assignation | x *= 3 | x = x * 3 | | /= | Division et assignation | x /= 2 | x = x / 2 | | %= | Modulo et assignation | x %= 3 | x = x % 3 | | **= | Exponentiation et assignation | x **= 2 | x = x ** 2 |

3.3. Opérateurs de Comparaison

Utilisés pour comparer deux valeurs. Ils retournent toujours une valeur Boolean (true ou false).

| Opérateur | Description | Exemple | Résultat | | :-------- | :-------------------------------------------------- | :------------- | :------- | | == | Égalité (valeur seulement, coercition de type) | 5 == '5' | true | | === | Égalité stricte (valeur et type) | 5 === '5' | false | | != | Inégalité (valeur seulement, coercition de type) | 5 != '5' | false | | !== | Inégalité stricte (valeur ou type) | 5 !== '5' | true | | > | Supérieur à | 10 > 5 | true | | < | Inférieur à | 10 < 5 | false | | >= | Supérieur ou égal à | 5 >= 5 | true | | <= | Inférieur ou égal à | 5 <= 10 | true |

Conseil important : Utilisez toujours === et !== pour les comparaisons d'égalité en JavaScript. Les opérateurs == et != peuvent provoquer des comportements inattendus en raison de la coercition de type, où JavaScript tente de convertir les opérandes pour qu'ils aient le même type avant la comparaison. L'égalité stricte (===) compare la valeur et le type sans conversion.

3.4. Opérateurs Logiques

Utilisés pour combiner ou modifier des expressions booléennes.

| Opérateur | Description | Exemple | Résultat | | :-------- | :---------- | :------------------------------------ | :--------------------- | | && | AND logique | true && false | false | | || | OR logique | true || false | true | | ! | NOT logique | !true | false |

  • && (AND) : Retourne true si tous les opérandes sont true. Sinon, false.
  • || (OR) : Retourne true si au moins un des opérandes est true. Sinon, false.
  • ! (NOT) : Inverse la valeur booléenne d'un opérande. Si l'opérande est true, il renvoie false, et vice-versa.
let estMajeur = true;
let aPermis = false;

console.log(estMajeur && aPermis); // false (true ET false)
console.log(estMajeur || aPermis); // true (true OU false)
console.log(!estMajeur);           // false (NON true)

3.5. Autres Opérateurs Notables

  • Opérateur ternaire (conditionnel) : condition ? valeurSiVrai : valeurSiFaux C'est un raccourci pour une instruction if/else simple. 
    let age = 18;
let statut = (age >= 18) ? "Adulte" : "Mineur";
console.log(statut); // Affiche : Adulte
  • typeof : Déjà vu, retourne une chaîne indiquant le type non évalué de son opérande.

4. Exemple Pratique Combiné

Mettons en pratique ce que nous avons appris avec un scénario simple : la gestion d'un profil utilisateur.

// --- Déclaration et initialisation de variables ---

// Utilisez 'const' pour les valeurs qui ne devraient pas changer
const NOM_UTILISATEUR = "john_doe";
const EMAIL_UTILISATEUR = "john.doe@exemple.com";
const ANNEE_NAISSANCE = 1995;

// Utilisez 'let' pour les valeurs qui peuvent changer
let estActif = true; // Boolean pour le statut d'activité
let nombreDePosts = 150; // Number pour le compte de posts
let dernierLogin = "2023-10-26 14:30:00"; // String pour la date du dernier login

console.log("--- Informations Initiales de l'Utilisateur ---");
console.log(`Nom d'utilisateur: ${NOM_UTILISATEUR}`);
console.log(`Email: ${EMAIL_UTILISATEUR}`);
console.log(`Année de naissance: ${ANNEE_NAISSANCE}`);
console.log(`Statut actif: ${estActif}`);
console.log(`Nombre de posts: ${nombreDePosts}`);
console.log(`Dernier login: ${dernierLogin}`);

// --- Utilisation des opérateurs et modification des variables ---

// Calcul de l'âge actuel (opérateur arithmétique)
const ANNEE_ACTUELLE = new Date().getFullYear(); // Obtenons l'année actuelle
let ageUtilisateur = ANNEE_ACTUELLE - ANNEE_NAISSANCE;
console.log(`Age calculé: ${ageUtilisateur} ans`);

// L'utilisateur fait un nouveau post (opérateur d'incrémentation et d'assignation)
nombreDePosts++; // Incrémente nombreDePosts de 1
console.log(`Nouveau nombre de posts: ${nombreDePosts}`);

// L'utilisateur se déconnecte (modification de boolean)
estActif = false; // Réassignation
console.log(`Statut après déconnexion: ${estActif}`);

// Vérification de l'éligibilité pour une fonctionnalité (opérateurs de comparaison et logiques)
const AGE_MINIMUM_FONCTIONNALITE = 18;
const A_ASSEZ_DE_POSTS = nombreDePosts >= 100; // true si nombreDePosts est >= 100

let estEligible = (ageUtilisateur >= AGE_MINIMUM_FONCTIONNALITE) && A_ASSEZ_DE_POSTS && estActif; // Vérification combinée
console.log(`Est éligible (actif requis): ${estEligible}`); // devrait être false car estActif est false

// Tentative de réactiver l'utilisateur sans qu'il se reconnecte réellement (erreur logique)
// Note: Le "true" ici est juste pour l'exemple. En vrai, cela viendrait d'une action utilisateur.
estActif = true;

// Nouvelle vérification d'éligibilité
estEligible = (ageUtilisateur >= AGE_MINIMUM_FONCTIONNALITE) && A_ASSEZ_DE_POSTS && estActif;
console.log(`Est éligible (après réactivation): ${estEligible}`); // devrait être true

// Comparaison de type et de valeur (opérateurs d'égalité stricte vs lâche)
let nombreEnChaine = "150";

console.log(`Comparaison 'nombreDePosts == nombreEnChaine': ${nombreDePosts == nombreEnChaine}`);   // true (coercition de type)
console.log(`Comparaison 'nombreDePosts === nombreEnChaine': ${nombreDePosts === nombreEnChaine}`); // false (types différents)

// Utilisation de typeof
console.log(`Type de 'NOM_UTILISATEUR': ${typeof NOM_UTILISATEUR}`);
console.log(`Type de 'nombreDePosts': ${typeof nombreDePosts}`);
console.log(`Type de 'estActif': ${typeof estActif}`);
console.log(`Type de 'ANNEE_NAISSANCE': ${typeof ANNEE_NAISSANCE}`);

Explication du Code :

  1. Déclaration des Variables (const et let) :

    • Nous utilisons const pour NOM_UTILISATEUR, EMAIL_UTILISATEUR, et ANNEE_NAISSANCE car ces informations sont généralement fixes pour un profil.
    • let est utilisé pour estActif, nombreDePosts, et dernierLogin car ce sont des données susceptibles de changer au cours de l'utilisation de l'application (l'utilisateur peut se connecter/déconnecter, faire plus de posts, etc.).
    • Des littéraux de gabarit (backticks `) sont utilisés avec console.log pour une meilleure lisibilité.

  2. Opérateurs Arithmétiques :

    • const ANNEE_ACTUELLE = new Date().getFullYear(); récupère l'année actuelle (un Number).
    • let ageUtilisateur = ANNEE_ACTUELLE - ANNEE_NAISSANCE; utilise l'opérateur de soustraction (-) pour calculer l'âge.

  3. Opérateurs d'Assignation et d'Incrémentation :

    • nombreDePosts++; est un raccourci pour nombreDePosts = nombreDePosts + 1; et utilise l'opérateur de post-incrémentation.
    • estActif = false; est une simple réassignation de la valeur false à la variable estActif.

  4. Opérateurs de Comparaison et Logiques :

    • A_ASSEZ_DE_POSTS = nombreDePosts >= 100; utilise l'opérateur de comparaison "supérieur ou égal à" (>=). Le résultat est un Boolean.
    • estEligible = (ageUtilisateur >= AGE_MINIMUM_FONCTIONNALITE) && A_ASSEZ_DE_POSTS && estActif; combine plusieurs conditions :
      • ageUtilisateur >= AGE_MINIMUM_FONCTIONNALITE (comparaison si l'utilisateur a l'âge requis).
      • A_ASSEZ_DE_POSTS (résultat d'une comparaison précédente).
      • estActif (le statut actuel de l'utilisateur).
      • L'opérateur logique && (AND) garantit que toutes ces conditions doivent être true pour que estEligible soit true. Si l'une d'elles est false, le résultat est false.

  5. Importance de l'Égalité Stricte (===) :

    • La comparaison nombreDePosts == nombreEnChaine retourne true car JavaScript convertit la chaîne "150" en nombre 150 avant de comparer les valeurs. C'est l'effet de la coercition de type.
    • nombreDePosts === nombreEnChaine retourne false car, bien que les valeurs numériques soient équivalentes, leurs types (number vs string) sont différents. Cet exemple illustre pourquoi === est toujours préférable pour éviter les surprises.

  6. typeof Opérateur :

    • Enfin, nous utilisons typeof pour confirmer les types de données de nos variables, montrant bien comment les nombres, chaînes et booléens sont identifiés.

Conclusion et Prochaines Étapes

Félicitations ! Vous avez maintenant une solide compréhension des concepts fondamentaux de JavaScript : les variables, les types de données et les opérateurs.

  • Vous savez comment déclarer des conteneurs d'informations en utilisant let pour les valeurs mutables et const pour les valeurs constantes, en évitant var.
  • Vous avez découvert les types de données primitifs (Number, String, Boolean, Undefined, Null, Symbol, BigInt) et la nature du type Object, et savez comment vérifier le type avec typeof.
  • Vous maîtrisez les différents opérateurs (arithmétiques, d'assignation, de comparaison, logiques) qui vous permettent de manipuler, de comparer et de prendre des décisions basées sur vos données.

Ces bases sont absolument cruciales. La capacité de stocker, de catégoriser et de manipuler des informations est le cœur de toute programmation. Pratiquez ces concepts en créant vos propres petites expériences JavaScript.

Dans la prochaine leçon, nous nous appuierons sur cette connaissance pour explorer les structures de contrôle de flux (conditions if/else, boucles for/while), qui vous permettront de rendre votre code dynamique et de prendre des décisions basées sur les valeurs que vous venez d'apprendre à manipuler. Continuez à coder !