Variables et Types Primitifs

Les fondamentaux de JavaScript

Utilisez les flèches, cliquez ou glissez pour naviguer

Objectifs de la leçon

1. Comprendre les variables

var, let, const et leurs différences

2. Découvrir les types primitifs

String, Number, Boolean, etc.

3. Utiliser typeof

Vérifier le type d'une valeur

4. Éviter les erreurs courantes

Bonnes pratiques de déclaration

Plan de la présentation

1. Qu'est-ce qu'une variable ?

Définition et analogie

2. Déclarer des variables

var, let, const

3. Les types primitifs

7 types en JavaScript

4. Exemples pratiques

Code et bonnes pratiques

Qu'est-ce qu'une variable ?

Un conteneur pour stocker une valeur

Analogie : Une boîte étiquetée dans laquelle on range quelque chose

nom

📦

"Alice"

age

📦

25

estEtudiant

📦

true

Déclarer avec var

Le mot-clé historique (ES5)

var

nom = "Alice";

var

age = 25;

⚠️ Portée de fonction (pas de bloc)

⚠️ Peut être redéclarée

⚠️ Peut être réassignée

Déclarer avec let

Le mot-clé moderne (ES6)

let

nom = "Alice";

let

age = 25;

✅ Portée de bloc (plus prévisible)

✅ Ne peut pas être redéclarée dans le même bloc

✅ Peut être réassignée

Déclarer avec const

Pour les valeurs qui ne changent pas

const

PI = 3.14159;

const

NOM_SITE = "MonApp";

✅ Portée de bloc

✅ Ne peut pas être redéclarée

✅ Ne peut pas être réassignée

💡 Doit être initialisée dès la déclaration

var vs let vs const

Caractéristique	var	let	const
Portée	Fonction	Bloc	Bloc
Redéclarable	✅ Oui	❌ Non	❌ Non
Réassignable	✅ Oui	✅ Oui	❌ Non
Hoisting	⚠️ Oui	Non	Non

💡 Recommandation : Utilisez const par défaut, let si vous devez réassigner

Les Types Primitifs

7 types de base en JavaScript

Les types primitifs sont immuables

On ne peut pas les modifier, seulement les remplacer

String - Les chaînes de caractères

Du texte entre guillemets

// Avec des guillemets doubles

let

nom = "Alice";

// Avec des guillemets simples

let

ville = 'Paris';

// Avec les backticks (template strings)

let

message = `Bonjour ${nom}!`;

"text"

Doubles

'text'

Simples

`text`

Backticks

Number - Les nombres

Entiers et décimaux (un seul type!)

let

age = 25;

// Entier

let

prix = 19.99;

// Décimal

let

negatif = -10;

// Négatif

NaN

Not a Number

Résultat d'opérations invalides

Infinity

L'infini

Division par 0 par exemple

Boolean - Vrai ou Faux

Un type à deux valeurs seulement

true

Vrai

false

Faux

let

estConnecte = true;

let

aPlusDe18Ans = false;

let

estAdmin = (age > 18);

// Résultat d'une comparaison

undefined vs null

undefined

Valeur par défaut

• Variable déclarée mais non initialisée

• Absence de valeur (implicite)

let

x;

// x vaut undefined

null

Valeur intentionnelle

• Assigné délibérément

• Absence de valeur (explicite)

let

y = null;

// y est vide volontairement

💡 typeof null retourne "object" (bug historique de JS!)

Les autres types primitifs

Symbol

Identifiant unique

ES6 - Pour les propriétés d'objets uniques

let

s = Symbol();

BigInt

Nombres entiers très grands

ES2020 - Au-delà de Number

let

big = 9007199254740991n;

📋 Récapitulatif des 7 types primitifs :

String | Number | Boolean | undefined | null | Symbol | BigInt

L'opérateur typeof

Pour vérifier le type d'une valeur

typeof "Bonjour" // → "string"

typeof 42 // → "number"

typeof true // → "boolean"

typeof undefined // → "undefined"

typeof null // → "object" ⚠️

typeof Symbol() // → "symbol"

typeof 10n // → "bigint"

💡 typeof retourne toujours une String

Exemples pratiques

// Déclarations recommandées

const

NOM = "Alice";

const

AGE = 25;

let

score = 0;

// score va changer pendant le jeu

let

estVivant = true;

// peut devenir false

✅ Bonnes pratiques :

• • const par défaut
• • Noms explicites (camelCase)
• • Initialiser les variables

Conversion de types

Vers String

String(42) // → "42"

42.toString() // → "42"

"" + 42 // → "42"

Vers Number

Number("42") // → 42

parseInt("42") // → 42

parseFloat("3.14") // → 3.14

Vers Boolean

Boolean(1) // → true

Boolean(0) // → false

Boolean("") // → false

Boolean("texte") // → true

Erreurs courantes à éviter

❌ Oublier var/let/const

nom = "Alice";

// Crée une variable globale! ⚠️

❌ Réassigner une const

const

PI = 3.14;

PI = 3.14159; // Erreur!

❌ Comparer avec == au lieu de ===

5 == "5" // → true ⚠️ (convertit)

5 === "5" // → false ✅ (strict)

Récapitulatif

Variables

• • const par défaut
• • let si réassignation
• • Éviter var

Types primitifs

• • String, Number, Boolean
• • undefined, null
• • Symbol, BigInt

Prochaine étape

Les objets et les tableaux en JavaScript