JavaScript : Le Guide Complet pour Débutants 2026

JavaScript est le seul langage qui tourne nativement dans le navigateur — et aujourd'hui, aussi sur le serveur (Node.js), sur mobile (React Native), et au cœur des outils d'IA modernes. En 2026, c'est la compétence numéro 1 pour tout développeur web, et l'un des langages les plus demandés sur le marché. Ce guide complet te donne toutes les bases pour démarrer, progresser, et comprendre pourquoi JS est incontournable.

Pourquoi JavaScript en 2026 ?

JavaScript tourne partout : navigateur, serveur, mobile, outils IA

Universel : le seul langage compris nativement par tous les navigateurs — pas d'installation, pas de compilation
Full stack : avec Node.js, tu fais du front ET du back avec un seul langage
Écosystème npm : 2 millions de packages disponibles, des solutions pour absolument tout
Marché de l'emploi : React, Vue, Angular, Next.js — les frameworks JS dominent le front-end mondial
IA : les SDKs OpenAI, Anthropic, Vercel AI SDK sont en premier lieu écrits pour JavaScript/TypeScript

JavaScript est classé langage le plus utilisé au monde sur Stack Overflow depuis 12 ans consécutifs.

Comment exécuter JavaScript

Deux façons de démarrer sans rien installer :

<!-- Dans une page HTML -->
<script src="script.js"></script>

<!-- Ou directement dans la balise -->
<script>
  console.log('Hello world !');
</script>

Ou directement dans la console du navigateur (F12 → Console) : c'est le meilleur bac à sable pour apprendre. Pour un vrai projet, installe Node.js et utilise VS Code.

Variables : let, const et var

Les variables stockent les données de ton programme. JavaScript a trois mots-clés pour les déclarer — mais en pratique, tu n'en utilises que deux. Pour tout comprendre sur leurs différences de portée et de comportement, notre guide sur les variables JavaScript let, const et var va dans tous les détails.

let peut changer de valeur, const est verrouillée

// const — pour les valeurs qui ne changent pas (90% du temps)
const nom = 'Alice';
const PI = 3.14159;
const fruits = ['pomme', 'banane']; // const ne veut pas dire immuable !

// let — pour les valeurs qui changent
let score = 0;
let estConnecte = false;
score = score + 10; // OK

// var — à éviter (comportement imprévisible, portée function-level)
var ancien = 'éviter'; // ⚠️ ne plus utiliser

// Règle simple : const par défaut, let si la valeur change, jamais var

Types de données

// Primitifs
const entier = 42;            // number
const decimal = 3.14;         // number (pas de float séparé)
const texte = 'Bonjour';      // string
const vrai = true;            // boolean
const rien = null;            // null (absence intentionnelle)
const pasDefini = undefined;  // undefined (non assigné)
const symbole = Symbol('id'); // symbol (avancé)

// Objets (tout le reste)
const tableau = [1, 2, 3];        // Array
const objet = { nom: 'Alice' };   // Object
const fonction = () => {};        // Function

// Vérifier le type
console.log(typeof 42);        // 'number'
console.log(typeof 'hello');   // 'string'
console.log(typeof true);      // 'boolean'
console.log(typeof null);      // 'object' — bug historique de JS !
console.log(typeof []);        // 'object' — utiliser Array.isArray() à la place

// Template literals — concaténation moderne
const prenom = 'Bob';
const age = 25;
console.log(`${prenom} a ${age} ans`); // 'Bob a 25 ans'

Opérateurs

// Arithmétiques
5 + 3   // 8
10 - 4  // 6
3 * 7   // 21
10 / 3  // 3.333...
10 % 3  // 1 (modulo — reste de la division)
2 ** 8  // 256 (puissance)

// Comparaison — TOUJOURS === et !== (jamais == et !=)
5 === 5    // true
5 === '5'  // false — types différents
5 == '5'   // true  — ⚠️ conversion implicite, source de bugs

// Logiques
true && false  // false (ET)
true || false  // true  (OU)
!true          // false (NON)

// Nullish coalescing ?? — valeur par défaut si null/undefined
const pseudo = null ?? 'Anonyme'; // 'Anonyme'
const points = 0 ?? 100;          // 0 (car 0 n'est pas null/undefined)

// Optional chaining ?. — accès sécurisé sur objets potentiellement null
const ville = utilisateur?.adresse?.ville; // undefined si adresse manque

L'erreur == vs === est l'une des plus fréquentes. Pour éviter toutes les pièges classiques, consulte notre article sur les 10 erreurs JavaScript que font les débutants.

Conditions

const note = 85;

// if / else if / else
if (note >= 90) {
  console.log('Excellent');
} else if (note >= 70) {
  console.log('Bien');
} else {
  console.log('À améliorer');
}

// Opérateur ternaire — pour les cas simples
const mention = note >= 70 ? 'admis' : 'recalé';

// Switch — pour comparer une valeur à plusieurs cas
const jour = 'lundi';
switch (jour) {
  case 'lundi':
  case 'mardi':
    console.log('Début de semaine');
    break;
  case 'vendredi':
    console.log('Fin de semaine !');
    break;
  default:
    console.log('Milieu de semaine');
}

Boucles

const fruits = ['pomme', 'banane', 'cerise'];

// for...of — itérer sur les valeurs (le plus courant)
for (const fruit of fruits) {
  console.log(fruit);
}

// forEach — avec callback
fruits.forEach((fruit, index) => {
  console.log(`${index}: ${fruit}`);
});

// for classique — quand tu as besoin de l'index
for (let i = 0; i < fruits.length; i++) {
  console.log(fruits[i]);
}

// for...in — itérer sur les clés d'un objet
const user = { nom: 'Alice', age: 25, ville: 'Paris' };
for (const cle in user) {
  console.log(`${cle}: ${user[cle]}`);
}

// while
let compteur = 0;
while (compteur < 5) {
  compteur++;
}

// break et continue
for (const n of [1, 2, 3, 4, 5]) {
  if (n === 3) continue; // passe au suivant
  if (n === 5) break;    // sort de la boucle
  console.log(n);        // 1, 2, 4
}

Fonctions

Les fonctions sont le cœur de JavaScript. Il existe trois syntaxes — comprendre leurs différences est essentiel.

// 1. Déclaration de fonction — hoistée (disponible avant sa définition)
function additionner(a, b) {
  return a + b;
}

// 2. Expression de fonction — non hoistée
const multiplier = function(a, b) {
  return a * b;
};

// 3. Arrow function — syntaxe moderne, recommandée
const diviser = (a, b) => a / b;

// Paramètres par défaut
const saluer = (nom = 'monde') => `Bonjour, ${nom} !`;
console.log(saluer());        // 'Bonjour, monde !'
console.log(saluer('Alice')); // 'Bonjour, Alice !'

// Rest parameters — nombre variable d'arguments
const somme = (...nombres) => nombres.reduce((acc, n) => acc + n, 0);
console.log(somme(1, 2, 3, 4, 5)); // 15

// Destructuration dans les paramètres
const afficherUser = ({ nom, age }) => `${nom}, ${age} ans`;
afficherUser({ nom: 'Alice', age: 25 }); // 'Alice, 25 ans'

Les fonctions ont un comportement avancé — la portée lexicale et les closures — qui devient indispensable dès que tu travailles avec des callbacks ou du code asynchrone. Notre guide sur les closures JavaScript démystifie tout ça.

Tableaux et méthodes fonctionnelles

Les tableaux JavaScript sont bien plus puissants que de simples listes. Les méthodes fonctionnelles te permettent de les transformer, filtrer et agréger sans une seule boucle explicite.

const produits = [
  { nom: 'Laptop', prix: 1200, stock: 5 },
  { nom: 'Souris', prix: 35, stock: 0 },
  { nom: 'Clavier', prix: 89, stock: 12 },
];

// map() — transformer chaque élément
const noms = produits.map(p => p.nom);
// ['Laptop', 'Souris', 'Clavier']

// filter() — garder selon un critère
const enStock = produits.filter(p => p.stock > 0);
// [{ nom: 'Laptop', ... }, { nom: 'Clavier', ... }]

// reduce() — agréger en une valeur
const valeurTotale = produits.reduce((acc, p) => acc + p.prix * p.stock, 0);
// 1200*5 + 35*0 + 89*12 = 7068

// Chaîner — la puissance du fonctionnel
const totalEnStock = produits
  .filter(p => p.stock > 0)
  .map(p => p.prix * p.stock)
  .reduce((acc, val) => acc + val, 0);
// 7068

// find(), some(), every()
const laptop = produits.find(p => p.nom === 'Laptop');
const aRupture = produits.some(p => p.stock === 0);    // true
const tousEnStock = produits.every(p => p.stock > 0);  // false

Ces méthodes font l'objet d'un guide complet avec animations et cas d'usage React : Map, Filter, Reduce en JavaScript.

Objets

// Créer un objet
const utilisateur = {
  nom: 'Alice',
  age: 25,
  adresse: { ville: 'Paris', cp: '75001' },
  saluer() { return `Bonjour, je suis ${this.nom}`; }
};

// Accès
console.log(utilisateur.nom);           // 'Alice'
console.log(utilisateur['age']);         // 25 (notation bracket)
console.log(utilisateur.adresse.ville); // 'Paris'

// Destructuration — extraire des propriétés
const { nom, age } = utilisateur;
const { ville, cp } = utilisateur.adresse;

// Spread operator — copier / fusionner
const userModifie = { ...utilisateur, age: 26 }; // nouvelle copie avec age modifié
const config = { ...defaultConfig, ...userConfig }; // fusion

// Object.keys(), values(), entries()
Object.keys(utilisateur);    // ['nom', 'age', 'adresse', 'saluer']
Object.values(utilisateur);  // ['Alice', 25, {...}, f]
Object.entries(utilisateur).forEach(([cle, val]) => {
  console.log(`${cle}:`, val);
});

// Propriétés dynamiques (computed properties)
const champ = 'email';
const data = { [champ]: 'alice@example.com' }; // { email: 'alice@...' }

Le DOM : JavaScript dans le navigateur

Le DOM (Document Object Model) est la représentation de ta page HTML en objets JavaScript. C'est ici que JS devient vraiment interactif.

// Sélectionner des éléments
const titre = document.querySelector('h1');
const boutons = document.querySelectorAll('.btn');
const formulaire = document.getElementById('contact-form');

// Lire et modifier
titre.textContent = 'Nouveau titre';
titre.style.color = '#d4a853';
titre.classList.add('actif');
titre.classList.toggle('visible');

// Créer et insérer
const li = document.createElement('li');
li.textContent = 'Nouvel élément';
document.querySelector('ul').appendChild(li);

// Événements
const btn = document.querySelector('#mon-bouton');
btn.addEventListener('click', (event) => {
  event.preventDefault(); // annuler comportement par défaut
  console.log('Cliqué !');
});

// Formulaires
formulaire.addEventListener('submit', (e) => {
  e.preventDefault();
  const email = document.querySelector('#email').value;
  console.log('Email soumis:', email);
});

La manipulation du DOM est un sujet qui mérite son propre guide complet — avec querySelector, les événements, classList et la création dynamique d'éléments, notre article sur la manipulation du DOM en JavaScript couvre tout en détail.

Asynchrone : Promises et async/await

JavaScript est mono-thread — il exécute une chose à la fois. Pour les opérations longues (appels API, lecture de fichiers), il utilise l'asynchronicité pour ne pas bloquer l'exécution.

await suspend l'exécution jusqu'à ce que la Promise soit résolue

// Promise — la base
const promise = new Promise((resolve, reject) => {
  setTimeout(() => resolve('Données reçues'), 1000);
});

promise.then(data => console.log(data));

// async/await — syntaxe moderne, bien plus lisible
async function chargerUtilisateur(id) {
  try {
    const response = await fetch(`https://api.exemple.com/users/${id}`);
    
    if (!response.ok) {
      throw new Error(`HTTP ${response.status}`);
    }
    
    const data = await response.json();
    return data;
  } catch (erreur) {
    console.error('Erreur:', erreur.message);
    return null;
  }
}

// Appels parallèles avec Promise.all()
async function chargerTout() {
  const [users, posts] = await Promise.all([
    fetch('/api/users').then(r => r.json()),
    fetch('/api/posts').then(r => r.json()),
  ]);
  // Les deux requêtes partent en même temps — bien plus rapide
  return { users, posts };
}

L'asynchrone est le concept qui déroute le plus les débutants. Notre guide complet sur async/await et les Promises explique l'event loop, les erreurs classiques et les patterns avancés.

Modules ES6

// math.js — exporter
export const PI = 3.14159;
export function additionner(a, b) { return a + b; }
export default class Calculatrice { /* ... */ }

// app.js — importer
import Calculatrice, { PI, additionner } from './math.js';
import * as Math from './math.js'; // tout importer

// Import dynamique (lazy loading)
const module = await import('./gros-module.js');

Les modules permettent de découper ton code en fichiers réutilisables. C'est la base de tout projet moderne avec React, Vue ou Node.js.

Destructuration et spread : la syntaxe moderne

// Destructuration de tableau
const [premier, deuxieme, ...reste] = [1, 2, 3, 4, 5];
console.log(premier); // 1
console.log(reste);   // [3, 4, 5]

// Swap de variables
let a = 1, b = 2;
[a, b] = [b, a];

// Destructuration d'objet avec renommage
const { nom: prenom, age: annees } = { nom: 'Alice', age: 25 };
console.log(prenom); // 'Alice'
console.log(annees); // 25

// Spread — copier des tableaux et objets
const original = [1, 2, 3];
const copie = [...original]; // copie superficielle
const etendu = [...original, 4, 5]; // [1, 2, 3, 4, 5]

// Fusionner des objets
const defaultOptions = { theme: 'dark', lang: 'fr', debug: false };
const userOptions = { lang: 'en', debug: true };
const options = { ...defaultOptions, ...userOptions };
// { theme: 'dark', lang: 'en', debug: true }

Gestion des erreurs

// try / catch / finally
try {
  const data = JSON.parse('{invalid json}');
} catch (erreur) {
  console.error('Parsing échoué:', erreur.message);
} finally {
  console.log('Exécuté quoi qu\'il arrive');
}

// Créer ses propres erreurs
class ValidationError extends Error {
  constructor(champ, message) {
    super(message);
    this.name = 'ValidationError';
    this.champ = champ;
  }
}

function validerAge(age) {
  if (typeof age !== 'number') throw new ValidationError('age', 'Doit être un nombre');
  if (age < 0 || age > 150) throw new ValidationError('age', 'Valeur impossible');
  return true;
}

try {
  validerAge('vingt');
} catch (e) {
  if (e instanceof ValidationError) {
    console.log(`Champ ${e.champ}: ${e.message}`);
  }
}

JavaScript et l'IA en 2026

En 2026, JavaScript est au cœur du développement IA côté web. Le SDK Anthropic, les LangChain.js, Vercel AI SDK, LlamaIndex.TS — tous sont écrits en TypeScript/JavaScript en premier.

// Intégrer Claude (Anthropic) dans une app JS
import Anthropic from '@anthropic-ai/sdk';

const client = new Anthropic({ apiKey: process.env.ANTHROPIC_API_KEY });

async function analyserTexte(texte) {
  const message = await client.messages.create({
    model: 'claude-opus-4-6',
    max_tokens: 1024,
    messages: [{ role: 'user', content: `Résume ce texte : ${texte}` }]
  });
  return message.content[0].text;
}

// Streaming — afficher la réponse en temps réel
async function streamReponse(question) {
  const stream = client.messages.stream({
    model: 'claude-opus-4-6',
    max_tokens: 1024,
    messages: [{ role: 'user', content: question }]
  });

  for await (const event of stream) {
    if (event.type === 'content_block_delta') {
      process.stdout.write(event.delta.text); // affichage progressif
    }
  }
}

Ton premier projet complet : une Todo App

Pour consolider tous ces concepts ensemble :

// todo.js — applique variables, tableaux, DOM, événements
const todos = [];

function ajouterTodo(texte) {
  const todo = {
    id: Date.now(),
    texte,
    fait: false,
    creeA: new Date().toLocaleDateString('fr-FR')
  };
  todos.push(todo);
  afficherTodos();
}

function toggleTodo(id) {
  const todo = todos.find(t => t.id === id);
  if (todo) {
    todo.fait = !todo.fait;
    afficherTodos();
  }
}

function afficherTodos() {
  const liste = document.querySelector('#liste-todos');
  liste.innerHTML = todos
    .map(todo => `
      <li class="${todo.fait ? 'fait' : ''}" onclick="toggleTodo(${todo.id})">
        ${todo.texte} — ${todo.creeA}
      </li>
    `)
    .join('');

  const restants = todos.filter(t => !t.fait).length;
  document.querySelector('#compteur').textContent = `${restants} tâche(s) restante(s)`;
}

// Écouter le formulaire
document.querySelector('#form-todo').addEventListener('submit', (e) => {
  e.preventDefault();
  const input = document.querySelector('#input-todo');
  if (input.value.trim()) {
    ajouterTodo(input.value.trim());
    input.value = '';
  }
});

La roadmap : où aller après les bases ?

Niveau	Ce qu'il faut maîtriser	Ressource GoGoKodo
Bases	Variables, fonctions, tableaux, objets	Ce guide + erreurs JS débutant
Intermédiaire	DOM, events, fetch, async/await	DOM JS + async/await
Avancé	Closures, map/filter/reduce, modules	Closures JS + map/filter/reduce
Framework	React, composants, hooks, state	Débuter React 2026

Pour tout ce qui touche à la référence du langage, MDN Web Docs JavaScript est la ressource la plus complète et la plus fiable — elle couvre chaque méthode, chaque opérateur, chaque concept avec des exemples interactifs.

Conclusion

JavaScript est vaste, mais ses fondamentaux sont accessibles. Tu as maintenant couvert les briques essentielles : variables et types, conditions, boucles, fonctions, tableaux, objets, DOM, asynchrone et modules. C'est 80 % de ce que tu écriras au quotidien dans n'importe quel projet front-end.

Ce qui fait la différence : coder tous les jours, même 20 minutes. Pas lire — écrire. Lance la console de ton navigateur, reproduis les exemples, casse-les, comprends pourquoi, répare-les. C'est le seul chemin.

Pour pratiquer directement dans le navigateur sans rien installer, avec correction automatique et progression guidée, retrouve nos ateliers JavaScript interactifs GoGoKodo — les exercices couvrent exactement ce guide, étape par étape.

Vous pouvez pratiquer ces bases JavaScript directement sur mobile : notre comparatif des meilleures ressources mobiles pour coder montre comment GoGoKodo s'utilise dans le train ou le métro.