JavaScript Warm Up — Holberton Cheat Sheet

C'EST QUOI JAVASCRIPT

📜 LE LANGAGE QUI FAIT VIVRE LE WEB

JavaScript (JS) est un langage interprété : pas de compilation, le moteur lit ton code et l'exécute directement. Il tourne dans le navigateur (Chrome, Firefox...) pour rendre les pages interactives, et côté serveur avec Node.js.

Comme Python, il est dynamiquement typé : tu ne déclares pas le type d'une variable, JS le devine à l'exécution.

🏠 ANALOGIE DU QUOTIDIEN

Imagine une maison. Les murs et les pièces, c'est le HTML (la structure). La peinture, les meubles, la déco, c'est le CSS (l'apparence). JavaScript, c'est l'électricité et les interrupteurs : ce qui allume la lumière quand tu appuies, fait sonner la porte, refroidit le frigo. Sans lui, la maison est belle mais rien ne réagit.

JavaScript ≠ Java. Deux langages totalement différents — même nom de famille par pur coup marketing des années 90. Ne les confonds jamais.

CONCEPTS CLÉS

📦 let / const / var

Trois façons de déclarer une variable. let = modifiable, const = constante (ne change plus), var = ancien, à éviter.

Par défaut utilise const, et let seulement si la valeur doit changer.

🎭 TYPAGE DYNAMIQUE

Une variable n'a pas de type fixe. x = 5 puis x = "salut" est valide. Le type est rattaché à la valeur, pas à la variable.

Comme Python — rien à voir avec le int x; du C.

⚙️ FONCTIONS = VALEURS

En JS une fonction est une valeur comme une autre : on peut la stocker dans une variable, la passer en argument, la retourner.

C'est la base des callbacks et de .map(), .filter()...

🟰 === PAS ==

=== compare valeur ET type, sans conversion magique. == convertit avant de comparer et crée des bugs.

0 == "0" → true 😱 mais 0 === "0" → false.

🌀 undefined vs null

undefined = pas encore de valeur (JS l'a mis tout seul). null = vide volontaire (toi tu l'as mis).

Les deux sont « vides » mais l'intention diffère.

🖥️ NAVIGATEUR / NODE

Le même langage tourne dans la console du navigateur (F12) et dans le terminal via node fichier.js.

Ouvre la console du navigateur et tape du JS direct — feedback instantané.

🎮 Fil rouge : tous les exemples de cette fiche font tourner le même mini-jeu Mario. À chaque section on réutilise les mêmes ingrédients — les pièces, les vies, les ennemis, les power-ups. Apprends la syntaxe, pas un nouvel exemple à chaque fois.

VARIABLES ET TYPES DE BASE

📦 LA FICHE DE PERSO DE MARIO

// ── DÉCLARATION — const ne change pas, let oui ──────────
const NOM = "Mario";       // const  — le héros ne change pas de nom
let pieces = 0;            // let    — le score va monter
let vies = 3;              // let    — on peut en perdre ou en gagner
vies = 2;                  // ✅ ok : Mario a pris un coup
// var ancien = "..."        // ⚠️ var = obsolète, ne plus utiliser

// ── LES TYPES PRIMITIFS ──────────────────────────────────
let taille     = 42;       // number  — PAS d'int/float séparés en JS
let vitesse    = 3.5;      // number  — entiers et décimaux : même type
let monde      = "1-1";     // string  — " ' ou backtick `
let aChampignon = true;     // boolean — Mario a-t-il grandi ? (minuscule !)
let checkpoint = null;     // null    — aucun checkpoint atteint (vide volontaire)
let boss;                   // undefined — pas encore défini

// ── VÉRIFIER LE TYPE — typeof ────────────────────────────
console.log(typeof pieces);      // → "number"
console.log(typeof NOM);         // → "string"
console.log(typeof aChampignon); // → "boolean"

// ── CONVERSIONS EXPLICITES ───────────────────────────────
Number("3");      // "3" → 3   (ex: lire un nombre de vies affiché à l'écran)
String(pieces);  // 0   → "0"
Boolean(0);     // 0   → false  (0, "", null, undefined, NaN = falsy)

Un seul type number en JS. Pas de int / float / double comme en C. Les pièces de Mario (entiers) et sa vitesse (décimal) sont du même type.

AFFICHER — CONSOLE.LOG ET TEMPLATE LITERALS

🖨️ AFFICHER LE SCORE

const monde = "1-1";
let pieces = 12;

// ── L'ÉQUIVALENT DU printf / print ───────────────────────
console.log("GO !");                // → GO !
console.log("Pièces :", pieces);     // → Pièces : 12  (virgule = espace auto)

// ── TEMPLATE LITERALS — backticks ` + ${ } ──────────────
console.log(`Mario entre dans le niveau ${monde}`);   // → Mario entre dans le niveau 1-1
console.log(`Score : ${pieces} pièces`);             // → Score : 12 pièces
console.log(`Plus que ${100 - pieces} avant une vie !`); // → Plus que 88 avant une vie !

// ── AUTRES NIVEAUX UTILES ────────────────────────────────
console.warn("Attention : un Goomba approche");  // avertissement (jaune)
console.error("Game Over");                   // erreur (rouge)

// ── CONCATÉNATION CLASSIQUE (à connaître) ───────────────
console.log("Niveau " + monde);      // → Niveau 1-1

Le template literal (backtick ` + ${...}) est l'équivalent direct de la f-string Python. Tu peux mettre n'importe quelle expression dans ${ } — même un calcul comme ${100 - pieces}.

OPÉRATEURS

🪙 COMPTER LES PIÈCES, GÉRER LES VIES

let pieces = 0;
let vies = 3;

// ── ARITHMÉTIQUE ─────────────────────────────────────────
pieces = pieces + 1;   // Mario ramasse une pièce → 1
pieces += 5;          // un bloc à 5 pièces      → 6
pieces++;              // une pièce de plus       → 7  (ça existe en JS, pas en Python)

100 % 100             // 0   modulo : 0 pile quand on atteint un multiple de 100
Math.floor(250 / 100) // 2   nombre de vies gagnées (250 pièces = 2 vies)

// ── COMPARAISON — TOUJOURS === et !== ───────────────────
vies === 0           // false  égalité STRICTE (valeur + type) ← À UTILISER
pieces >= 100        // false  (Mario n'a pas encore 100 pièces)
vies !== 3           // true   différence stricte
vies == "3"          // true   ⚠️ == convertit → PIÈGE, à éviter

// ── LOGIQUE ──────────────────────────────────────────────
let aChampignon = true;
let invincible = false;
aChampignon && invincible   // false  grand ET invincible (ET = &&)
aChampignon || invincible   // true   grand OU invincible (OU = ||)
!invincible              // true   PAS invincible (NON = !)

Le + est ambigu : 1 + 1 → 2 mais "1" + 1 → "11" (concaténation). Si un opérande est une string, JS colle tout en string. Convertis avec Number() en cas de doute.

CONDITIONS — IF / ELSE / TERNAIRE

👹 COLLISION AVEC UN ENNEMI

let vies = 3;
let aChampignon = true;

// ── IF / ELSE — accolades obligatoires ──────────────────
if (aChampignon) {
  aChampignon = false;                 // grand Mario rapetisse mais survit
  console.log("Aïe ! Mario redevient petit");
} else {
  vies--;                            // petit Mario perd une vie
  console.log("Mario perd une vie...");  // → Mario perd une vie...
}

// ── ELSE IF — plusieurs cas ─────────────────────────────
let pieces = 100;
if (pieces >= 100) {
  vies++;                            // → vie bonus !
} else if (pieces >= 50) {
  console.log("À mi-chemin");
} else {
  console.log("Continue à ramasser");
}

// ── TERNAIRE — if en une ligne ──────────────────────────
const etat = aChampignon ? "Grand" : "Petit";
console.log(etat);        // → Petit

// ── SWITCH — choisir selon le power-up ──────────────────
const item = "fleur";
switch (item) {
  case "champignon": console.log("Mario grandit"); break;
  case "fleur": console.log("Boules de feu !"); break;  // → Boules de feu !
  case "etoile": console.log("Invincible !"); break;
  default: console.log("Rien");
}
// ⚠️ ne JAMAIS oublier le break → sinon ça "tombe" sur le cas suivant

Valeurs falsy (considérées comme false) : 0, "", null, undefined, NaN, false. Tout le reste est truthy. Donc if (checkpoint) teste si un checkpoint a vraiment été atteint.

BOUCLES

🔁 PARCOURIR LE NIVEAU

// ── FOR CLASSIQUE — ramasser 5 pièces ───────────────────
for (let i = 1; i <= 5; i++) {
  console.log(`Pièce n°${i} ramassée`);  // → Pièce n°1 ... n°5
}

// ── FOR...OF — parcourir les VALEURS (le plus utile) ────
const ennemis = ["Goomba", "Koopa", "Bowser"];
for (const ennemi of ennemis) {
  console.log(`Combat : ${ennemi}`);  // → Goomba, Koopa, Bowser
}

// ── WHILE — tant que Mario est en vie ───────────────────
let vies = 3;
while (vies > 0) {
  vies--;                // il prend des coups... ⚠️ sinon boucle infinie
}
console.log("Game Over");  // → Game Over

// ── BREAK & CONTINUE ────────────────────────────────────
for (const ennemi of ennemis) {
  if (ennemi === "Bowser") break;     // on s'arrête au boss final
  if (ennemi === "Koopa") continue;  // on esquive Koopa
  console.log(ennemi);              // → Goomba
}

for...of donne les valeurs (les ennemis), for...in donne les index/clés. Sur un tableau, utilise for...of (ou .forEach()). for...in sur un tableau renvoie "0" "1" "2" — source de bugs.

FONCTIONS

🦘 LES ACTIONS DE MARIO

// ── DÉCLARATION CLASSIQUE ───────────────────────────────
function sauter(hauteur) {
  return `Mario saute à ${hauteur}px`;
}
console.log(sauter(80));        // → Mario saute à 80px

// ── ARROW FUNCTION — syntaxe moderne ( => ) ─────────────
const ramasserPiece = (score) => {
  return score + 1;
};
let pieces = ramasserPiece(0);   // → 1

// ── ARROW COURTE — return implicite si une seule ligne ──
const estVivant = vies => vies > 0;  // pas d'accolades = return auto
console.log(estVivant(2));         // → true

// ── PARAMÈTRE PAR DÉFAUT ────────────────────────────────
const demarrer = (monde = "1-1") => `Niveau ${monde}`;
console.log(demarrer());           // → Niveau 1-1

// ── FONCTION PASSÉE EN ARGUMENT (callback) ──────────────
const ennemis = ["Goomba", "Koopa"];
ennemis.forEach(e => console.log(`Sauter sur ${e}`));  // → Sauter sur Goomba / Koopa

Les arrow functions => sont partout dans le JS moderne, surtout comme callbacks de .map(), .filter(), .forEach(). Accolades + return si plusieurs lignes, version courte sans accolades pour un one-liner.

RÉCAP — MÉTHODES À CONNAÎTRE

🧰 ARRAYS ET STRINGS — LES INCONTOURNABLES

const ennemis = ["Goomba", "Koopa", "Bowser"];
const scores  = [42, 88, 15, 95];

Méthode	Exemple (Mario)	Résultat
.length	`ennemis.length`	`3` (nombre d'ennemis)
.push(x)	`ennemis.push("Lakitu")`	ajoute un ennemi à la fin
.pop()	`ennemis.pop()`	retire et renvoie `"Bowser"`
.includes(x)	`ennemis.includes("Koopa")`	`true`
.indexOf(x)	`ennemis.indexOf("Koopa")`	`1` (`-1` si absent)
.map(fn)	`scores.map(s => s + 5)`	nouveau tableau, +5 partout
.filter(fn)	`scores.filter(s => s >= 50)`	`[88, 95]`
.forEach(fn)	`ennemis.forEach(...)`	exécute sur chaque (sans renvoyer)
.reduce(fn)	`scores.reduce((a,s) => a+s, 0)`	`240` (somme)
.join(sep)	`ennemis.join(" vs ")`	`"Goomba vs Koopa vs Bowser"`
.split(sep)	`"1-1-2".split("-")`	`["1","1","2"]`
.toUpperCase()	`"mario".toUpperCase()`	`"MARIO"`
.slice(a, b)	`ennemis.slice(0, 2)`	`["Goomba", "Koopa"]`

.map / .filter ne modifient pas l'original — elles renvoient un nouveau tableau. .push / .pop au contraire modifient le tableau d'origine.

ERREURS CLASSIQUES DU DÉBUTANT

✗ MAUVAIS

// 1. == au lieu de ===
if (vies == "0") ...

// 2. réassigner une const
const VIES_MAX = 3;
VIES_MAX = 5;   // 💥 TypeError

// 3. oublier le return
function scoreFinal(p) {
  p * 10;   // renvoie undefined !
}

// 4. for...in sur un array
for (const e in ennemis)
  console.log(e); // → "0" "1" (index !)

✓ CORRECT

// 1. toujours === (strict)
if (vies === 0) ...

// 2. let si ça doit changer
let vies = 3;
vies = 5;   // ✅ ok

// 3. toujours return la valeur
function scoreFinal(p) {
  return p * 10;
}

// 4. for...of pour les valeurs
for (const e of ennemis)
  console.log(e); // → Goomba ... ✅

🚨 LE PIÈGE N°1 : NaN ET LE +

let pieces = 3;
console.log("5" + pieces);       // → "53"  (concaténation, pas addition !)
console.log("5" - pieces);       // → 2     (- force la conversion en number)
console.log(Number("Goomba"));   // → NaN   (Not a Number)
console.log(NaN === NaN);       // → false (NaN n'est égal à RIEN, même pas à lui-même)
console.log(isNaN("Goomba" * 2)); // → true  (pour tester un NaN)

Quand un calcul donne un résultat bizarre, demande-toi si un opérande était une string. Le + concatène dès qu'une string traîne. Force toujours avec Number() si tu lis une valeur (input, score affiché...).

SKILL TREE — TON PARCOURS JS

VARIABLES

const par défaut, let si ça change. Oublie var.

TYPES & TYPEOF

number, string, boolean, null, undefined. Vérifie avec typeof.

CONSOLE & TEMPLATES

console.log + template literals `${ }` pour tout afficher.

=== TOUJOURS

Égalité stricte. Le == est un piège, bannis-le.

CONDITIONS & BOUCLES

if/else, ternaire, switch, for, for...of, while + break/continue.

FONCTIONS & ARROW

function classique et => moderne. Une fonction est une valeur.

MÉTHODES ARRAY

.map .filter .forEach .reduce — le cœur du JS quotidien.

RÉSUMÉ — TOUT EN UN COUP D'ŒIL

🗺️ LA CARTE MENTALE JAVASCRIPT

// VARIABLES
// ─────────────────────────────────────────────────────
// const  → ne change plus  (par défaut)
// let    → modifiable
// var    → obsolète, à éviter

// TYPES (typeof pour vérifier)
// ─────────────────────────────────────────────────────
// number   → 42 et 3.5 (un seul type !)
// string   → "txt"  'txt'  `txt`
// boolean  → true / false
// null     → vide volontaire   undefined → pas assigné

// AFFICHER
// ─────────────────────────────────────────────────────
// console.log(valeur)
// `Score : ${pieces}`   ← template literal (= f-string)

// COMPARAISON
// ─────────────────────────────────────────────────────
// ===  !==   → STRICT, à utiliser TOUJOURS
// ==   !=    → convertit → PIÈGE, à éviter
// && (et)    || (ou)    ! (non)

// CONDITIONS & BOUCLES
// ─────────────────────────────────────────────────────
// if (...) { } else if (...) { } else { }
// cond ? a : b               ← ternaire
// switch (x) { case ...: break; default: }
// for (let i=0; i a + b;      ← arrow
// toujours return la valeur !

// MÉTHODES ARRAY ESSENTIELLES
// ─────────────────────────────────────────────────────
// .push() .pop() .length .includes() .indexOf()
// .map()  .filter()  .forEach()  .reduce()
// .join() / .split()   (array <-> string)