Expressions JavaScript : Concepts de Base et Exemples

(Le code parle… mais nous apprenons à le faire parler.)

Un matin, vous ouvrez votre ordinateur.
Vous créez un nouveau fichier .js.
Le curseur clignote.

JavaScript se penche vers vous et murmure :

« Chaque fois que je m’exécute, je produis une valeur… à condition que tu écrives la bonne chose. »

Aujourd’hui, nous allons parler de ces « choses qui produisent des valeurs ».
Autrement dit : les expressions.

Mais pas d’une manière ennuyeuse.
Cette fois, nous allons vraiment comprendre.
Vraiment assimiler.
Et oui… nous allons aussi nous amuser. 😎

📌 Qu’est-ce qu’une Expression ? – Le Cœur du Sujet

La définition la plus simple :

Tout ce qui produit une valeur est une expression.

Si un morceau de code JavaScript s’exécute et vous donne un résultat,
alors il contient une expression.

Petit test rapide :

2 + 2

Résultat ? → 4

C’est une expression.

Et ceci ?

console.log("Hello")

C’est aussi une expression.
Car techniquement, console.log() retourne undefined.
Et devinez quoi ? C’est quand même une valeur.

Oui… en JavaScript, presque tout produit une valeur.
JavaScript est un peu du genre :
« J’ai toujours quelque chose à dire. » 😄

🧮 1. Expressions Arithmétiques – Quand les Mathématiques Flirtent avec le Code

Les plus familières :

10 + 5
10 - 3
4 * 2
20 / 4

Elles s’exécutent toutes et produisent une valeur.

Allons un peu plus loin.

🧠 Priorité des Opérateurs

5 + 3 * 2

Quel est le résultat ?

Beaucoup disent 16.
Mais JavaScript suit les règles mathématiques.

La multiplication d’abord :

3 * 2 = 6
5 + 6 = 11

Résultat → 11

Si vous voulez un résultat différent, utilisez des parenthèses :

(5 + 3) * 2

Résultat → 16

🎯 Astuce :
Les parenthèses ne servent pas seulement aux maths.
Elles améliorent aussi la lisibilité du code.

🧮 Exemple un Peu Plus Complexe

let result = (10 / 2) + (3 * 4) - 1;
console.log(result);

Étape par étape :

• 10 / 2 = 5
• 3 * 4 = 12
• 5 + 12 = 17
• 17 – 1 = 16

Résultat final → 16

Entraînez votre cerveau à analyser les expressions étape par étape.

🔤 2. Expressions de Chaînes de Caractères – Jouer avec les Mots

Une chaîne de caractères est une valeur.
Donc les opérations sur les chaînes sont aussi des expressions.

"Hello" + " World"

Résultat → "Hello World"

🧠 La Puissance des Template Literals

La méthode moderne et élégante :

let name = "Cansu";
let message = `Hello ${name}, welcome to JavaScript!`;
console.log(message);

Résultat :

Hello Cansu, welcome to JavaScript!

Que s’est-il passé ?

• ${name} est une expression.
• À l’intérieur des template literals, vous pouvez exécuter n’importe quelle expression.

Exemple :

let price = 100;
let tax = 0.18;

let total = `Total price: ${price + (price * tax)}`;
console.log(total);

${price + (price * tax)} est une expression complète.

🎯 Astuce :
Dans les template literals, vous pouvez utiliser des calculs, des appels de fonctions, des comparaisons… tout ce que vous voulez.

🧠 3. Expressions de Variables – Connaître son Identité

let age = 25;
age

Lorsque vous écrivez age, JavaScript vous donne 25.
Car une variable représente une valeur.

🔄 Mise à Jour des Valeurs

let score = 10;
score = score + 5;
console.log(score);

Étape par étape :

• score = 10
• score + 5 → 15
• score vaut maintenant 15

Raccourci :

score += 5;

🎯 Astuce :
Les opérateurs comme +=, -=, *=, /= sont plus courts et plus propres.

⚖️ 4. Expressions de Comparaison – Le Juge de JavaScript

Les comparaisons produisent des valeurs booléennes.

5 > 3
10 === 10
7 !== 2

Résultats :

true
true
true

🧠 === vs == (Zone Dangereuse)

5 == "5"

Résultat → true

Pourquoi ? Parce que == effectue une conversion de type.

Mais :

5 === "5"

Résultat → false

Car === vérifie à la fois la valeur et le type.

🎯 Règle d’or :
Utilisez toujours ===.
==, c’est JavaScript qui dit : « Laisse-moi deviner un peu. » 😅

🧩 5. Appels de Fonctions – Usines à Valeurs

Les fonctions produisent des valeurs.

function add(a, b) {
  return a + b;
}

let result = add(3, 7);
console.log(result);

Étape par étape :

• add(3, 7)
• 3 + 7
• return 10
• result = 10

Un appel de fonction est une expression.

🎲 Exemple Concret

let random = Math.random();
console.log(random);

Cela génère un nombre entre 0 et 1.

let dice = Math.floor(Math.random() * 6) + 1;
console.log(dice);

Cela génère un nombre entre 1 et 6.

Que se passe-t-il ici ?

• Math.random() → expression
• Math.random() * 6 → expression
• Math.floor(...) → expression

JavaScript adore les expressions imbriquées.

🎯 6. Expressions d’Affectation – Plus Profondes qu’on ne le Pense

let x;
x = 10;

C’est une expression d’affectation.

Regardez maintenant :

let a, b;
a = b = 5;

Que s’est-il passé ?

• b = 5 → retourne 5
• a = 5

Résultat final :

a = 5
b = 5

JavaScript affecte de droite à gauche.

🎯 Astuce :
Attention aux affectations en chaîne.
La lisibilité est essentielle.

🧪 7. Expressions Logiques – La Magie du Court-Circuit

true && false

Résultat → false

Mais ce n’est pas tout.

🧠 Logique de Court-Circuit

let name = "Cansu";
let message = name && "Welcome!";
console.log(message);

Si name est truthy, le résultat est "Welcome!".

Mais si :

let name = "";
let message = name && "Welcome!";

Résultat → ""

Car une chaîne vide est falsy.

🧠 Technique de Valeur par Défaut

let username = "";
let displayName = username || "Guest";
console.log(displayName);

Résultat → "Guest"

Cette technique est très utilisée dans les projets réels.

🆚 Expression vs Instruction – Clarification Finale

Expression → produit une valeur
Instruction (Statement) → exécute une action

if (5 > 3) {
  console.log("Correct");
}

• if → instruction
• 5 > 3 → expression

Les expressions vivent à l’intérieur des instructions.

🚀 Vue d’Ensemble – Pourquoi C’est Important

Parce que :

• En React, vous utilisez des expressions dans le JSX
• La programmation fonctionnelle est centrée sur les expressions
• Le JavaScript moderne repose fortement sur les expressions

Lorsque vous écrivez du code, demandez-vous :

« Ce morceau de code produit-il une valeur ? »

Si la réponse est oui…
vous pensez comme un développeur JavaScript.

🎬 Conclusion

Le curseur clignote toujours.
JavaScript vous regarde toujours.

Maintenant, vous savez :

• Les mathématiques sont une expression
• Une chaîne est une expression
• Un appel de fonction est une expression
• Une comparaison est une expression
• Même certaines affectations sont des expressions

Dans le monde JavaScript, la vie est simple :