JavaScript Syntax : Concepts de Base et Exemples de Code

(Le code parle… mais d’abord, nous devons apprendre sa langue.)

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

Et JavaScript vous regarde :
« Je suis prêt. Et toi ? »

Si vous êtes prêt, attachez votre ceinture.
Dans cet article, nous n’allons pas seulement apprendre la syntaxe JavaScript…
Nous allons la démonter. L’analyser. L’assaisonner avec une touche d’humour.

🧠 1. Les Variables – De Petites Boîtes en Mémoire

Une variable est une petite boîte stockée dans la mémoire de JavaScript.

🎩 let – Moderne et Flexible

let score = 10;
score = 20;

console.log(score);

Que s’est-il passé ici ?

• let score = 10; → Une boîte a été créée en mémoire.
• score = 20; → Le contenu de la boîte a été modifié.
• console.log(score); → Affiche 20.

let est modifiable. Parfait pour une utilisation quotidienne.

👑 const – Fidèle et Déterminé

const pi = 3.14;
pi = 3.15; // ERREUR !

const ne peut pas être réassigné.

Mais voici la subtilité ⚠️
S’il s’agit d’un objet, ses valeurs internes peuvent changer :

const user = {
  name: "Cansu"
};

user.name = "Ahmet";

console.log(user.name); // Ahmet

Vous ne pouvez pas remplacer la boîte,
mais vous pouvez réorganiser ce qu’il y a dedans.

👴 var – Un Invité du Passé

var message = "Bonjour";

var était utilisé autrefois.
Mais son comportement lié au scope peut prêter à confusion.

Recommandation : dans les projets modernes, utilisez let et const.

🔍 Scope – Les Frontières de Votre Code

if (true) {
  let number = 5;
}

console.log(number); // ERREUR !

let possède un scope de bloc.
S’il est défini dans {}, il ne peut pas en sortir.

Mais si vous utilisez var :

if (true) {
  var number = 5;
}

console.log(number); // 5

Et c’est là que les surprises commencent 😅

🔢 2. Les Types de Données – Les Personnages de JavaScript

String (Chaîne de caractères)

let name = "Cansu";

Une string est du texte.

Exemple avec template literal :

let age = 25;
console.log(`Je m'appelle ${name} et j'ai ${age} ans`);

Utilisez les backticks (`) pour intégrer des variables dans une chaîne.

Number (Nombre)

let price = 99.99;

En JavaScript, les entiers et les décimaux sont tous de type number.

Boolean (Booléen)

let isActive = true;

Deux valeurs seulement : true ou false.

Undefined vs Null

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

Undefined → Déclaré mais non assigné.

let y = null;

Null → Vide intentionnellement.

Différence :
Undefined arrive par oubli.
Null est un choix conscient.

➕ 3. Les Opérateurs – Plus Que des Mathématiques

=== vs ==

console.log(5 == "5");   // true
console.log(5 === "5");  // false

== effectue une conversion de type.
=== vérifie la valeur ET le type.

En développement professionnel, utilisez toujours ===.

Opérateurs Logiques

let age = 20;
let hasLicense = true;

if (age >= 18 && hasLicense) {
  console.log("Vous pouvez conduire 🚗");
}

• && → et
• || → ou
• ! → non

🔀 4. Les Conditions – Apprendre à JavaScript à Décider

let grade = 75;

if (grade >= 90) {
  console.log("AA");
} else if (grade >= 70) {
  console.log("BB");
} else {
  console.log("Échec 😅");
}

Les conditions sont évaluées de haut en bas.

Opérateur Ternary – Mini If

let age = 18;
let result = age >= 18 ? "Adulte" : "Enfant";

console.log(result);

Version plus courte d’un if.

🔁 5. Les Boucles – Le Robot Patient

Boucle For

for (let i = 1; i <= 5; i++) {
  console.log(i);
}

Structure :

• Initialisation
• Condition
• Incrémentation

Boucle While

let i = 0;

while (i < 3) {
  console.log("Bonjour");
  i++;
}

S’exécute tant que la condition est vraie.

Attention : évitez les boucles infinies 😅

🧩 6. Les Fonctions – Le Super Pouvoir du Code

Fonction Classique

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

console.log(add(3, 5)); // 8

Explication :

• a et b sont des paramètres
• return renvoie le résultat

Arrow Function

const multiply = (a, b) => a * b;

console.log(multiply(4, 5));

Plus court. Plus propre. Plus moderne.

Paramètre par Défaut

function greet(name = "Invité") {
  console.log(`Bonjour ${name}`);
}

greet(); // Bonjour Invité

📦 7. Array – Créer des Listes

let fruits = ["Pomme", "Poire", "Banane"];

console.log(fruits[0]); // Pomme

Parcourir un Tableau

fruits.forEach(function(fruit) {
  console.log(fruit);
});

Version moderne :

fruits.forEach(fruit => console.log(fruit));

🧠 8. Object – Modéliser la Réalité

let user = {
  name: "Cansu",
  age: 25,
  active: true
};

console.log(user.name);

Un objet est une structure clé-valeur.

⚡ Mini Projet – Petit Système Utilisateur

const user = {
  name: "Cansu",
  age: 25,
  isLoggedIn: true
};

function checkUser(person) {
  if (person.isLoggedIn && person.age >= 18) {
    return `Bienvenue ${person.name} 🎉`;
  } else {
    return "Accès refusé.";
  }
}

console.log(checkUser(user));

Ce projet inclut :

• Objet
• Fonction
• Condition
• Booléen
• Template literal

Tout fonctionne ensemble.

🎯 Conseils Professionnels

✅ Utilisez toujours ===
✅ Préférez const autant que possible
✅ Divisez votre code en petites parties
✅ Écrivez des commentaires
✅ Lisez les messages d’erreur (écoutez-les avant de chercher sur Google 😄)

🚀 Conclusion

Apprendre la syntaxe JavaScript, c’est comme apprendre une langue.

Au début, c’est difficile.
Puis vous formez des phrases.
Puis vous écrivez des histoires.
Puis vous construisez des applications.

Et un jour, vous écrivez :

console.log("Je connais maintenant JavaScript 🚀");

Et cette fois… c’est vrai.