📝

SYNTAXE FONDAMENTALE DE JAVASCRIPT

Version Ultra-Détaillée - Définitions & Explications Complètes

📖 1. INTRODUCTION À LA SYNTAXE JAVASCRIPT

Définition : La syntaxe d'un langage de programmation est l'ensemble des règles grammaticales qui définissent comment écrire du code valide. C'est comme la grammaire d'une langue naturelle : elle indique comment structurer les mots (mots-clés) et les phrases (instructions) pour qu'elles aient un sens pour l'ordinateur.

Les composants fondamentaux de la syntaxe JavaScript :

Variables : Des "boîtes" qui stockent des données (ex: let nom = "Jean").
Types de données : La nature des données stockées (nombre, texte, booléen, etc.).
Opérateurs : Des symboles qui effectuent des opérations sur les données (+, -, *, /, ===, etc.).
Instructions : Des lignes de code qui exécutent des actions (ex: console.log()).
Blocs : Des groupes d'instructions délimités par des { }.
Commentaires : Des notes pour les humains (ignorées par l'ordinateur).

Détail méconnu : JavaScript est un langage case-sensitive : les majuscules et minuscules sont distinctes. maVariable est différent de mavariable.

📦 2. LES VARIABLES

Définition : Une variable est un espace de mémoire nommé qui permet de stocker une valeur. On peut imaginer une variable comme une boîte étiquetée dans laquelle on peut ranger quelque chose (un nombre, un texte, un objet, etc.) et la retrouver plus tard grâce à son étiquette.

Pourquoi utiliser des variables ?

Réutilisabilité : Éviter de répéter les valeurs en dur.
Lisibilité : Donner des noms significatifs aux données.
Modifiabilité : Faciliter les changements (une seule modification).
Stockage : Conserver des données entre différentes instructions.

2.1 Déclaration des Variables

Définition : Déclarer une variable, c'est créer la variable et lui donner un nom. On utilise un mot-clé (let, const, var) suivi du nom de la variable.

2.1.1 let (Variable modifiable)

Définition : let permet de déclarer une variable mutable (modifiable). La variable peut être réassignée plusieurs fois.

Caractéristiques :

Scope de bloc : La variable n'existe que dans le bloc { } où elle est déclarée.
Peut être réassignée : On peut changer sa valeur.
Peut être déclarée sans valeur : La valeur par défaut est undefined.
Pas de hoisting (remontée) : On ne peut pas l'utiliser avant sa déclaration.

// Déclaration et initialisation

let

age = 30;

// Réassignation

age

= 31; // ✅ OK

// Déclaration sans valeur

let

nom; // undefined

// Scope de bloc

(true) {

let

blockScoped = "visible ici"; }

// console.log(blockScoped); // ❌ Erreur ! (hors scope)

2.1.2 const (Constante)

Définition : const permet de déclarer une constante : une variable qui ne peut pas être réassignée après sa déclaration. La valeur est immutable (pour les types primitifs) ou la référence est immuable (pour les objets).

Caractéristiques :

Scope de bloc : Comme let, existe uniquement dans le bloc.
Ne peut pas être réassignée : Une erreur est levée si on essaie.
Doit être initialisée : Obligatoire de donner une valeur à la déclaration.
Objets : Le contenu de l'objet peut être modifié, mais pas la référence.

// Déclaration obligatoire avec valeur

const

PI = 3.14159;

// PI = 3.14; // ❌ Erreur ! (réassignation impossible)

// Avec un objet (la référence est constante)

const

user = { nom: "Jean", age: 30 };

user.age = 31; // ✅ OK (propriété modifiée)

// user = { nom: "Marie" }; // ❌ Erreur ! (réassignation impossible)

2.1.3 var (Ancien - À éviter)

Définition : var est l'ancienne manière de déclarer des variables (avant ES6). Elle est déconseillée dans le code moderne car elle a des comportements sources d'erreurs.

Problèmes avec var :

Scope de fonction : Pas de scope de bloc, la variable est visible dans toute la fonction.
Hoisting (remontée) : La déclaration est remontée en haut, on peut l'utiliser avant sa déclaration (sans erreur).
Peut être redéclarée : On peut déclarer plusieurs fois la même variable (source d'erreurs).

// Exemple problématique

var

x = 10;

(true) {

var

x = 20; // ❌ Redéclaration silencieuse }

console.log(x); // 20 (pas 10 !)

// Hoisting

console.log(y); // undefined (pas d'erreur)

var

y = 5;

Règle d'or : Utilisez const par défaut, utilisez let si vous devez réassigner, n'utilisez jamais var dans le code moderne.

2.2 Règles de Nommage des Variables

Règle	Explication	Exemple
Lettres, chiffres, _, $	Seuls les caractères autorisés.	maVariable, _temp, $data
Ne pas commencer par un chiffre	Le premier caractère doit être une lettre, _ ou $.	❌ 1variable ✅ variable1
Case-sensitive	Les majuscules et minuscules sont distinctes.	age ≠ Age ≠ aGe
Pas de mots réservés	On ne peut pas utiliser les mots-clés du langage.	❌ let, const, if, for
camelCase (recommandé)	Premier mot en minuscule, suivants avec majuscule.	monNomDeVariable
SCREAMING_SNAKE (constantes)	Utilisé pour les constantes globales (convention).	const PI = 3.14159;

Bonnes pratiques : Un nom de variable doit être descriptif. Préférez nombreUtilisateurs plutôt que n. Le code doit être auto-documenté.

📊 3. LES TYPES DE DONNÉES

Définition : Un type de données (ou type) définit la nature d'une valeur stockée dans une variable. Le type détermine :

Quelles opérations peuvent être effectuées sur la valeur.
La quantité de mémoire nécessaire pour la stocker.
La représentation de la valeur en mémoire.

Métaphore : Les types de données sont comme les contenants dans une cuisine. Un "nombre" est comme une balance (pour peser), une "chaîne" est comme une étiquette (pour écrire du texte), un "booléen" est comme un interrupteur (ON/OFF).

3.1 Types Primitifs

Définition : Les types primitifs sont les types de base de JavaScript. Ils sont immuables (leur valeur ne peut pas être modifiée) et sont stockés par valeur (directement en mémoire).

Les 7 types primitifs :

number : Nombres (entiers et décimaux).
string : Chaînes de caractères (texte).
boolean : Vrai ou Faux (true / false).
undefined : Valeur non définie (variable déclarée sans valeur).
null : Valeur vide intentionnelle ("rien").
symbol : Identifiant unique (ES6).
bigint : Nombres entiers très grands (ES2020).

3.1.1 Number (Nombres)

Définition : Le type number représente des nombres entiers et décimaux. JavaScript utilise le format IEEE 754 (double précision 64 bits), ce qui signifie que tous les nombres sont des nombres à virgule flottante.

Particularités :

Les nombres peuvent être écrits avec ou sans décimales.
Les nombres peuvent être en notation scientifique (3e8 = 300 000 000).
Il y a des valeurs spéciales : Infinity, -Infinity, NaN (Not a Number).
Les calculs en virgule flottante peuvent avoir des imprécisions (ex: 0.1 + 0.2 ≠ 0.3).

let entier = 42;

let decimal = 3.14;

let negatif = -10;

let scientifique = 2.5e6; // 2 500 000

let infini = 1 / 0; // Infinity

let pasNombre = "abc" * 2; // NaN

// Vérifier le type

typeof 42; // "number"

Piège : 0.1 + 0.2 === 0.3 est faux ! Le résultat est 0.30000000000000004. Utilisez Number.EPSILON ou toFixed() pour comparer des flottants.

3.1.2 String (Chaînes de caractères)

Définition : Le type string représente une séquence de caractères (texte). Les chaînes sont immuables : une fois créées, elles ne peuvent pas être modifiées (mais on peut en créer de nouvelles).

Comment écrire une chaîne :

Guillemets simples : 'texte'
Guillemets doubles : "texte"
Backticks (Template Literals) : `texte` (permet l'interpolation et les multi-lignes).

// Guillemets simples

let

nom = 'Jean';

// Guillemets doubles

let

ville = "Paris";

// Template Literals (backticks)

let

message = `Bonjour ${nom}, vous êtes à ${ville}.`;

// Multi-lignes

let

poeme = `Ligne 1 Ligne 2 Ligne 3`;

// Échappement

let

avecQuote = 'Il a dit "Bonjour"';

let

avecBackslash = 'Chemin \\dossier\\fichier';

3.1.3 Boolean (Booléen)

Définition : Le type boolean représente une valeur logique : soit true (vrai), soit false (faux). Les booléens sont utilisés dans les conditions (if, while) et les opérations logiques.

Métaphore : Un booléen est comme un interrupteur : il est soit allumé (true), soit éteint (false).

let

estMajeur = true;

let

estEnLigne = false;

let

resultat = 10 > 5; // true

// Utilisation dans une condition

if (estMajeur) { console.log("Vous êtes majeur"); }

3.1.4 undefined

Définition : undefined est une valeur qui signifie qu'une variable a été déclarée mais pas encore initialisée (aucune valeur assignée). C'est la valeur par défaut des variables déclarées avec let et var.

let

x; // undefined

console.log(x); // undefined

// Une fonction sans return retourne undefined

function sansRetour() {}

console.log(sansRetour()); // undefined

3.1.5 null

Définition : null est une valeur qui représente l'absence intentionnelle de valeur. C'est une valeur que l'on assigne volontairement pour dire "c'est vide" ou "il n'y a rien ici".

Différence entre undefined et null :

undefined : Le moteur JS dit "je n'ai pas trouvé de valeur". (Automatique)
null : Le développeur dit "j'ai mis une valeur vide intentionnellement". (Manuel)

let

utilisateur = null; // Pas d'utilisateur pour l'instant

console.log(utilisateur); // null

// On peut vérifier

if (utilisateur === null) { console.log("Aucun utilisateur connecté"); }

3.1.6 Symbol (Identifiant unique)

Définition : Symbol est un type introduit en ES6 qui permet de créer des identifiants uniques. Chaque symbole est garanti unique, même s'ils ont la même description.

Utilisations :

Créer des clés de propriétés d'objets uniques (évite les collisions).
Définir des comportements personnalisés (ex: Symbol.iterator).

const

symbole1 = Symbol('description');

const

symbole2 = Symbol('description');

console.log(symbole1 === symbole2); // false (toujours unique)

// Utilisation comme clé d'objet

const

obj = {};

obj[symbole1] = "valeur secrète";

3.1.7 BigInt (Grands entiers)

Définition : BigInt est un type introduit en ES2020 pour représenter des nombres entiers très grands (au-delà de la limite des nombres classiques, qui est 2^53 - 1).

// Création d'un BigInt

const

grandNombre = 9007199254740991n; // n à la fin

const

autreGrand = BigInt("12345678901234567890");

// Opérations

const

resultat = grandNombre + 1n;

// Attention : BigInt et Number ne peuvent pas être mélangés

// const erreur = grandNombre + 5; // ❌ Erreur !

3.2 Object (Type Référence)

Définition : Le type object est un type de référence qui peut contenir des collections de données et des fonctionnalités. Contrairement aux primitifs, les objets sont mutables et sont stockés par référence (l'adresse en mémoire).

Types d'objets courants :

Object littéral : { clé: valeur }
Array : [1, 2, 3]
Function : function() {}
Date : new Date()
RegExp : /pattern/
Map, Set, WeakMap, WeakSet

Métaphore : Un objet est comme un dossier dans une armoire. Le dossier (l'objet) contient des fiches (les propriétés) avec des étiquettes (les clés) et des informations (les valeurs). Quand on dit que les objets sont stockés par référence, c'est comme avoir un numéro de dossier : plusieurs personnes peuvent avoir le même numéro et voir le même dossier.

3.3 L'opérateur typeof

Définition : typeof est un opérateur qui retourne une chaîne de caractères indiquant le type de la valeur qui lui est passée. C'est un outil très utile pour déboguer ou pour vérifier les types dynamiquement.

Valeur	typeof
42	"number"
"Hello"	"string"
true	"boolean"
undefined	"undefined"
null	"object"
{}	"object"
[]	"object"
function() {}	"function"
Symbol()	"symbol"
123n	"bigint"

Piège : typeof null retourne "object". C'est un bug historique de JavaScript qui ne sera jamais corrigé pour des raisons de compatibilité.

➕ 4. LES OPÉRATEURS

Définition : Un opérateur est un symbole qui effectue une opération sur une ou plusieurs valeurs (appelées opérandes) et produit un résultat.

Métaphore : Les opérateurs sont comme les outils dans une boîte à outils : chaque outil fait une chose spécifique (le marteau pour enfoncer, la scie pour couper). Les opérateurs font des opérations spécifiques sur les données.

4.1 Opérateurs Arithmétiques

Opérateur	Nom	Exemple	Résultat
+	Addition	5 + 3	8
-	Soustraction	5 - 3	2
*	Multiplication	5 * 3	15
/	Division	15 / 3	5
%	Modulo (reste)	10 % 3	1
**	Exposant (puissance)	2 ** 3	8
++	Incrémentation	let x = 5; x++	x = 6
--	Décrémentation	let x = 5; x--	x = 4

// Exemples d'opérateurs arithmétiques

let a = 10, b = 3;

console.log(a + b); // 13

console.log(a - b); // 7

console.log(a * b); // 30

console.log(a / b); // 3.333...

console.log(a % b); // 1 (reste de la division)

console.log(a ** b); // 1000 (10^3)

Piège : L'opérateur + peut aussi concaténer des chaînes. Si l'un des opérandes est une chaîne, l'autre est converti en chaîne. Ex: "10" + 5 donne "105".

4.2 Opérateurs d'Assignation

Opérateur	Exemple	Équivalent à
=	x = 5	x = 5
+=	x += 3	x = x + 3
-=	x -= 3	x = x - 3
*=	x *= 3	x = x * 3
/=	x /= 3	x = x / 3
%=	x %= 3	x = x % 3
**=	x **= 3	x = x ** 3

let x = 5;

x += 3; // x = 8

x *= 2; // x = 16

x -= 4; // x = 12

x /= 3; // x = 4

4.3 Opérateurs de Comparaison

Opérateur	Nom	Exemple	Résultat
==	Égalité (valeur)	5 == "5"	true
===	Égalité stricte (valeur + type)	5 === "5"	false
!=	Différence (valeur)	5 != "5"	false
!==	Différence stricte	5 !== "5"	true
>	Supérieur à	5 > 3	true
>=	Supérieur ou égal	5 >= 5	true
<	Inférieur à	3 < 5	true
<=	Inférieur ou égal	5 <= 5	true

// Différence entre == et ===

console.log(5 == "5"); // true (conversion de type)

console.log(5 === "5"); // false (type différent)

console.log(true == 1); // true (true = 1)

console.log(true === 1); // false (booléen ≠ nombre)

console.log(null == undefined); // true (cas particulier)

console.log(null === undefined); // false

Règle d'or : Utilisez toujours === et !== sauf si vous avez une raison spécifique d'utiliser == et !=. L'égalité stricte évite les conversions de type inattendues.

4.4 Opérateurs Logiques

Opérateur	Nom	Description	Exemple
&&	ET logique (AND)	Retourne true si les deux sont true.	(5 > 3 && 2 > 1) → true
\|\|	OU logique (OR)	Retourne true si au moins un est true.	(5 > 3 \|\| 2 > 5) → true
!	NON logique (NOT)	Inverse la valeur booléenne.	!(5 > 3) → false

// Exemples

let

a = true, b = false;

console.log(a && b); // false

console.log(a || b); // true

console.log(!a); // false

// Avec des nombres (short-circuit evaluation)

console.log(5 && 3); // 3 (retourne la dernière valeur)

console.log(0 || 5); // 5 (retourne la première valeur "truthy")

4.5 L'Opérateur Ternaire (Conditionnel)

Définition : L'opérateur ternaire est un raccourci pour la structure if...else. Il a la forme suivante :
condition ? valeurSiVrai : valeurSiFaux

// Syntaxe

let

age = 18;

let

statut = age >= 18 ? "Majeur" : "Mineur";

console.log(statut); // "Majeur"

// Équivalent avec if...else

let

statut2;

if (age >= 18) { statut2 = "Majeur"; } else { statut2 = "Mineur"; }

Bon usage : L'opérateur ternaire est idéal pour des affectations simples. Si la logique est complexe, utilisez if...else pour plus de lisibilité.

4.6 Opérateurs de Coalescence (ES2020)

Définition : L'opérateur de coalescence nulle ?? permet de fournir une valeur par défaut uniquement si la valeur de gauche est null ou undefined.

let

nom = null;

let

affichage = nom ?? "Anonyme";

console.log(affichage); // "Anonyme"

// Différence avec || (ou logique)

let

zero = 0;

let

resultat1 = zero || 10; // 10 (0 est falsy)

let

resultat2 = zero ?? 10; // 0 (0 n'est pas null/undefined)

🔄 5. CONVERSIONS DE TYPE

Définition : La conversion de type (ou coercion) est le processus qui consiste à transformer une valeur d'un type vers un autre. JavaScript est un langage à typage dynamique, ce qui signifie que les conversions sont souvent automatiques (coercition implicite) ou peuvent être faites manuellement (coercition explicite).

Métaphore : La conversion de type est comme traduire un texte d'une langue à une autre. Parfois la traduction est automatique (implicite), parfois vous devez la faire vous-même (explicite) pour être sûr du résultat.

5.1 Conversion Implicite (Coercition)

Définition : La conversion implicite se produit lorsque JavaScript convertit automatiquement une valeur d'un type à un autre sans que le développeur le demande explicitement.

// Conversion implicite avec l'opérateur +

console.log("5" + 3); // "53" (nombre → chaîne)

console.log(5 + "3"); // "53" (nombre → chaîne)

// Conversion implicite avec l'opérateur -

console.log("5" - 3); // 2 (chaîne → nombre)

console.log("10" * "2"); // 20 (chaînes → nombres)

// Conversion implicite en booléen

if ("Hello") { // "Hello" → true console.log("C'est truthy"); }

if (0) { // 0 → false // Ce code ne s'exécute pas }

Valeurs Truthy et Falsy

Valeurs Falsy (false)	Valeurs Truthy (true)
false, 0, -0, 0n, "", null, undefined, NaN	Tout le reste : "0", "false", [], {}, function() {}

5.2 Conversion Explicite (Casting)

Définition : La conversion explicite est effectuée volontairement par le développeur en utilisant des fonctions ou des opérateurs pour transformer un type en un autre.

Vers Number (nombre)

// Number() - Conversion explicite

console.log(Number("123")); // 123

console.log(Number(true)); // 1

console.log(Number(false)); // 0

console.log(Number("abc")); // NaN

// parseInt() - Convertit en entier

console.log(parseInt("123px")); // 123 (ignore "px")

console.log(parseInt("101", 2)); // 5 (base 2)

// parseFloat() - Convertit en nombre décimal

console.log(parseFloat("3.14")); // 3.14

console.log(parseFloat("3.14px")); // 3.14

// Unary + (opérateur unaire)

console.log(+"42"); // 42

Vers String (chaîne)

// String() - Conversion explicite

console.log(String(123)); // "123"

console.log(String(true)); // "true"

console.log(String(null)); // "null"

// toString() - Méthode des objets

console.log((123).toString()); // "123"

console.log((123).toString(16)); // "7b" (base 16)

// Concaténation avec une chaîne vide

console.log(123 + ""); // "123"

Vers Boolean (booléen)

// Boolean() - Conversion explicite

console.log(Boolean(0)); // false

console.log(Boolean(42)); // true

console.log(Boolean("")); // false

console.log(Boolean("hello")); // true

console.log(Boolean(null)); // false

console.log(Boolean(undefined)); // false

console.log(Boolean([])); // true (tableau vide est truthy)

console.log(Boolean({})); // true (objet vide est truthy)

// Double négation (raccourci)

console.log(!!42); // true

console.log(!!0); // false

Bonnes pratiques :

Utilisez la conversion explicite quand vous voulez être sûr du résultat.
Méfiez-vous de la conversion implicite avec + (concaténation vs addition).
Vérifiez les types avec typeof avant des opérations sensibles.
Utilisez Number.isNaN() pour vérifier NaN (car NaN === NaN est faux).

📊 6. RÉSUMÉ - SYNTAXE FONDAMENTALE

Concept	Mots-clés / Opérateurs	À retenir
Variables	let, const, var	Utiliser const par défaut, let si réassignation, jamais var.
Types primitifs	number, string, boolean, undefined, null, symbol, bigint	Immutables, stockés par valeur.
Types référence	object, array, function	Mutables, stockés par référence.
Opérateurs arithmétiques	+, -, , /, %, *, ++, --	** = puissance, % = reste.
Opérateurs d'assignation	=, +=, -=, =, /=, %=, *=	Raccourcis pour modifier une variable.
Opérateurs de comparaison	==, ===, !=, !==, >, >=, <, <=	Toujours utiliser === et !==.
Opérateurs logiques	&&, \|\|, !	AND, OR, NOT. Les valeurs truthy/falsy sont importantes.
Ternaire	? :	Raccourci pour if...else simple.
Coalescence nulle	??	Valeur par défaut si null ou undefined.
Conversion implicite	Automatique	Peut causer des bugs inattendus.
Conversion explicite	Number(), String(), Boolean(), parseInt(), parseFloat()	Contrôle total sur le résultat.

Syntaxe fondamentale

SYNTAXE FONDAMENTALE DE JAVASCRIPT

📖 1. INTRODUCTION À LA SYNTAXE JAVASCRIPT

📦 2. LES VARIABLES

2.1 Déclaration des Variables

2.1.1 let (Variable modifiable)

2.1.2 const (Constante)

2.1.3 var (Ancien - À éviter)

2.2 Règles de Nommage des Variables

📊 3. LES TYPES DE DONNÉES

3.1 Types Primitifs

3.1.1 Number (Nombres)

3.1.2 String (Chaînes de caractères)

3.1.3 Boolean (Booléen)

3.1.4 undefined

3.1.5 null

3.1.6 Symbol (Identifiant unique)

3.1.7 BigInt (Grands entiers)

3.2 Object (Type Référence)

3.3 L'opérateur typeof

➕ 4. LES OPÉRATEURS

4.1 Opérateurs Arithmétiques

4.2 Opérateurs d'Assignation

4.3 Opérateurs de Comparaison

4.4 Opérateurs Logiques

4.5 L'Opérateur Ternaire (Conditionnel)

4.6 Opérateurs de Coalescence (ES2020)

🔄 5. CONVERSIONS DE TYPE

5.1 Conversion Implicite (Coercition)

Valeurs Truthy et Falsy

5.2 Conversion Explicite (Casting)

Vers Number (nombre)

Vers String (chaîne)

Vers Boolean (booléen)

📊 6. RÉSUMÉ - SYNTAXE FONDAMENTALE