📦 Variables & Types

de Données JavaScript

Stocker et manipuler l'information

Formation DWWM - 2025

Au programme 📋

• 📦 Variables : let, const, var
• 🔢 Types primitifs : nombres, textes, booléens
• 🎯 Types complexes : objets, tableaux
• 🔄 Conversions de types
• ⚙️ Opérateurs et manipulation
• ✨ Exemples pratiques
• 🎮 Exercices guidés

Les Variables

Stocker des informations

C'est quoi une variable ? 🤔

Variable : Une boîte dans la mémoire de l'ordinateur qui stocke une valeur avec un nom

Quand tu crées une variable, l'ordinateur réserve un espace mémoire et lui donne un nom pour que tu puisses retrouver cette information plus tard.

Analogie : Les casiers d'école 🏫

En programmation, c'est pareil : tu demandes le casier "age", et l'ordinateur te donne la valeur qui est dedans (25).

let age = 25;           // Créer le casier "age" avec 25 dedans
console.log(age);       // Ouvrir le casier et voir ce qu'il y a
// Résultat : 25

Pourquoi utiliser des variables ? 🤔

Les variables permettent de réutiliser une information et de la modifier facilement.

console.log("Bonjour Marie");
console.log("Marie a 25 ans");
console.log("Marie habite Paris");

// Si je veux changer le prénom,
// je dois modifier 3 lignes ! 😰
// Risque d'oubli et d'erreur !

let prenom = "Marie";
console.log("Bonjour " + prenom);
console.log(prenom + " a 25 ans");
console.log(prenom + " habite Paris");

// Pour changer, 1 seule ligne ! 😊
// Aucun risque d'erreur

3 façons de créer une variable 🎯

En JavaScript moderne, il existe 3 mots-clés pour déclarer des variables :

Le mot-clé let ✏️

let = Variable modifiable (peut changer de valeur)

// Déclaration + initialisation
let age = 25;
console.log(age);  // 25

// Modification de la valeur
age = 26;
console.log(age);  // 26

age = 30;
console.log(age);  // 30

À chaque fois que tu réassignes une valeur avec =, l'ancienne valeur est remplacée par la nouvelle.

Le mot-clé const 🔒

const = Variable constante (ne peut PAS changer)

// Déclaration + initialisation
const prenom = "Marie";
console.log(prenom);  // "Marie"

// ❌ ERREUR si on essaie de changer
prenom = "Jean";
// TypeError: Assignment to constant variable

Une fois qu'une const est définie, sa valeur est figée pour toujours. C'est comme écrire au stylo indélébile plutôt qu'au crayon.

Quand utiliser let ou const ? 💡

let score = 0;
score = score + 10;  // ✅ OK
score = score + 5;   // ✅ OK

let compteur = 0;
compteur++;          // ✅ OK

const PI = 3.14159;
const NOM = "Dupont";
const API_URL = "https://...";

// Ces valeurs ne changent jamais

Nommer une variable 📝

Le nom d'une variable doit respecter des règles strictes, sinon JavaScript refuse de fonctionner !

Si tu ne respectes pas ces règles, JavaScript affiche une erreur de syntaxe et le code ne fonctionne pas du tout.

Exemples de noms 🔍

let age = 25;
let prenom = "Marie";
let estMajeur = true;
let _secret = 123;
let $prix = 99.99;
let age2 = 30;
let nomUtilisateur = "Jean";
let URL_API = "https://...";

let 2age = 25;         // ❌ chiffre au début
let mon-age = 25;      // ❌ tiret interdit
let mon age = 25;      // ❌ espace interdit
let let = 25;          // ❌ mot réservé
let class = "A";       // ❌ mot réservé
let for = 10;          // ❌ mot réservé

Convention camelCase 🐫

En JavaScript, on utilise la convention camelCase pour nommer les variables.

// Exemples camelCase
let monAge = 25;
let prenomUtilisateur = "Jean";
let dateDeNaissance = "01/01/2000";
let prixTotalTTC = 119.99;
let nombreDeVisiteurs = 1500;

Ça ressemble au dos d'un chameau 🐫 avec ses bosses = d'où le nom "camelCase" !

Choisis des noms clairs ! 💡

Un bon nom de variable doit être descriptif : on doit comprendre ce qu'elle contient rien qu'en lisant son nom.

let x = 25;
let y = "Marie";
let z = true;
let data = 100;
let temp = "Paris";

// Impossible de deviner ce que 
// contiennent ces variables !

let age = 25;
let prenom = "Marie";
let estMajeur = true;
let prixTotal = 100;
let ville = "Paris";

// On comprend tout de suite !

Les Types de Données

Différentes sortes d'informations

C'est quoi un "type" ? 🎨

Le type d'une variable définit la nature de l'information qu'elle contient.

En programmation, c'est pareil : certaines variables contiennent des nombres, d'autres du texte, d'autres des vrais/faux...

let age = 25;              // Type: Number (nombre)
let prenom = "Marie";      // Type: String (texte)
let estMajeur = true;      // Type: Boolean (vrai/faux)

Les 7 types de JavaScript 🎯

JavaScript reconnaît 7 types de données différents :

On va se concentrer sur les 5 premiers types qui sont les plus utilisés au quotidien.

Type Number 🔢

Number = Tous les nombres (entiers, décimaux, positifs, négatifs)

En JavaScript, il n'y a qu'UN SEUL type pour tous les nombres. Pas de différence entre entiers et décimaux !

let age = 25;                    // Entier positif
let temperature = -5;            // Entier négatif
let prix = 19.99;                // Décimal (avec point, pas virgule!)
let distance = 3.14159;          // Décimal avec précision
let grand = 1000000;             // Grand nombre
let scientifique = 1.5e6;        // 1 500 000 en notation scientifique

let prix = 19.99;    // ✅ Correct
let prix = 19,99;    // ❌ Erreur de syntaxe !

Valeurs spéciales Number ⚠️

JavaScript a 3 valeurs spéciales de type Number :

let division = 5 / 0;
console.log(division);     // Infinity

let grand = 1e308 * 2;
console.log(grand);        // Infinity

let division = -5 / 0;
console.log(division);     // -Infinity

let invalide = "texte" * 3;
console.log(invalide);     // NaN

let erreur = Math.sqrt(-1);
console.log(erreur);       // NaN

Opérations mathématiques ➕➖✖️➗

JavaScript peut effectuer toutes les opérations mathématiques de base :

L'opérateur modulo % 🤔

Le modulo (%) donne le reste d'une division.

console.log(10 % 3);    // 1 (reste de 10÷3)
console.log(15 % 4);    // 3 (reste de 15÷4)
console.log(20 % 5);    // 0 (division exacte, pas de reste)
console.log(7 % 2);     // 1 (7 divisé par 2 = 3 reste 1)

Type String 📝

String = Chaîne de caractères = Texte

Une string est du texte entouré de guillemets (simples, doubles ou backticks).

let prenom1 = "Marie";     // Guillemets doubles
let prenom2 = 'Jean';      // Guillemets simples  
let prenom3 = `Sophie`;    // Backticks

let lettre = "A";
let mot = "Bonjour";
let phrase = "Ceci est une phrase";
let paragraphe = "Un long texte...";

let nom = "Marie";      // ✅ OK
let nom = 'Marie';      // ✅ OK
let nom = "Marie';      // ❌ ERREUR - guillemets différents !

Assembler des strings : Concaténation ➕

Concaténer = Coller plusieurs strings ensemble pour en former une seule.

Méthode 1 : Opérateur +

let prenom = "Marie";
let nom = "Dupont";

// Assembler avec +
let complet = prenom + " " + nom;
console.log(complet);  // "Marie Dupont"

let age = 25;
let message = "J'ai " + age + " ans";
console.log(message);  // "J'ai 25 ans"

L'opérateur + colle les morceaux bout à bout. Attention à ajouter des espaces manuellement !

Méthode moderne : Template Literals 🎯

Les template literals (backticks) permettent d'insérer des variables directement dans le texte.

Syntaxe : `${variable}`

let prenom = "Marie";
let age = 25;

// Avec template literals (backticks)
let message = `Bonjour, je suis ${prenom} et j'ai ${age} ans`;
console.log(message);
// "Bonjour, je suis Marie et j'ai 25 ans"

// On peut faire des calculs dedans !
let phrase = `Dans 5 ans, j'aurai ${age + 5} ans`;
console.log(phrase);
// "Dans 5 ans, j'aurai 30 ans"

Type Boolean ✅❌

Boolean = Valeur logique : VRAI ou FAUX

Un boolean ne peut avoir que 2 valeurs : true (vrai) ou false (faux).

let estMajeur = true;
let estMineur = false;
let pluie = false;
let soleil = true;

Les comparaisons donnent des booleans 🔍

Quand tu compares deux valeurs, le résultat est toujours un boolean.

let age = 18;

let majeur = age >= 18;
console.log(majeur);       // true

let mineur = age < 18;
console.log(mineur);       // false

console.log(5 > 3);        // true
console.log(10 === 10);    // true
console.log("A" === "B");  // false

Undefined vs Null 🕳️

Ces deux types représentent "l'absence de valeur", mais avec une nuance importante.

let prenom;
console.log(prenom);  // undefined

let age;
console.log(age);     // undefined

let resultat = null;
console.log(resultat);  // null

// Réinitialiser
let user = {nom: "Marie"};
user = null;  // Volontairement vide

Types Complexes

Objets et Tableaux

Type Object 📦

Object = Collection de propriétés (paires clé-valeur)

Un objet regroupe plusieurs informations liées ensemble. Comme une fiche d'identité !

let utilisateur = {
    nom: "Dupont",
    prenom: "Marie",
    age: 25,
    ville: "Paris"
};

// Accéder aux propriétés
console.log(utilisateur.nom);      // "Dupont"
console.log(utilisateur.age);      // 25

Type Array (Tableau) 📊

Array = Liste ordonnée de valeurs

Un tableau stocke plusieurs valeurs dans une liste numérotée (index commence à 0).

let fruits = ["pomme", "banane", "orange"];

// Accès par index (commence à 0)
console.log(fruits[0]);     // "pomme"
console.log(fruits[1]);     // "banane"
console.log(fruits[2]);     // "orange"

// Longueur du tableau
console.log(fruits.length); // 3

🎓 Fin du cours

Variables & Types de Données

À vous de coder ! 💪

Formation DWWM - 2025