Variables, fonctions et objets en JavaScript

Quel que soit le projet, JavaScript repose sur trois briques : des variables qui stockent des valeurs, des fonctions qui regroupent des comportements et des objets qui structurent les données. Les maîtriser vraiment, avec leurs règles de portée et leurs pièges, rend la suite (DOM, asynchrone, modules) beaucoup plus simple.

Cet article propose une base solide, avec des exemples courts et commentés en français. La référence reste la documentation MDN sur la grammaire du langage.

Variables : const, let et pourquoi oublier var

Une variable est un nom associé à une valeur.

const langage = 'JavaScript'; // ne peut pas être réaffectée
let compteur = 0;             // peut être réaffectée
compteur = compteur + 1;

Quelle déclaration choisir ?

• const par défaut : le nom ne sera pas réaffecté, ce qui rend le code plus prévisible ;
• let quand la valeur doit changer (compteur, accumulation dans une boucle) ;
• var à éviter dans du code moderne : sa portée de fonction et son comportement au « hoisting » provoquent des surprises.

Attention : const empêche la réaffectation, pas la modification d’un objet ou d’un tableau :

const panier = [];
panier.push('clavier'); // autorisé : on modifie le contenu
// panier = [];         // erreur : réaffectation interdite

La portée (scope)

let et const ont une portée de bloc : elles n’existent qu’entre les accolades où elles sont déclarées.

if (true) {
  const message = 'visible dans ce bloc';
  console.log(message);
}
// console.log(message); // ReferenceError : message n'existe plus ici

Autre piège : utiliser une variable let ou const avant sa déclaration provoque une erreur (la « zone morte temporelle »), alors que var renverrait silencieusement undefined. Mieux vaut une erreur franche qu’un bug silencieux.

Types de valeurs

JavaScript distingue des valeurs primitives (chaîne, nombre, booléen, undefined, null, bigint, symbol) et des objets (dont les tableaux et les fonctions). Les primitives sont copiées par valeur ; les objets sont manipulés par référence, ce qui explique de nombreux bugs de copie (voir plus bas). L’opérateur typeof renseigne sur le type, avec une exception célèbre : typeof null renvoie 'object'.

Fonctions : déclarer, passer, retourner

Déclaration et expression

// Déclaration : remontée en début de portée (hoisting)
function additionner(a, b) {
  return a + b;
}

// Expression de fonction
const soustraire = function (a, b) {
  return a - b;
};

Fonctions fléchées

const doubler = (n) => n * 2;
const saluer = (prenom) => `Bonjour ${prenom}`;

console.log(doubler(21));      // 42
console.log(saluer('Léa'));    // Bonjour Léa

Les fonctions fléchées sont concises et conviennent très bien aux fonctions de rappel (map, filter, écouteurs d’événements). Une différence importante : elles n’ont pas leur propre this, elles héritent de celui du contexte englobant. Pour une méthode d’objet qui a besoin de son this, préférez la syntaxe classique ou la syntaxe abrégée de méthode.

Paramètres par défaut, reste et propagation

function creerUtilisateur(nom, role = 'lecteur') {
  return { nom, role };
}

function somme(...nombres) {
  return nombres.reduce((total, n) => total + n, 0);
}

console.log(somme(1, 2, 3)); // 6

const a = [1, 2];
const b = [...a, 3, 4]; // copie superficielle + ajout

Fonctions pures et effets de bord

Une fonction pure renvoie toujours le même résultat pour les mêmes arguments et ne modifie rien à l’extérieur. Elle est facile à tester et à comprendre. Une fonction qui modifie le DOM, écrit dans une variable globale ou lance une requête réseau a un effet de bord : c’est parfois nécessaire, mais isolez-les pour garder la majorité du code simple.

Les fonctions sont des valeurs

On peut les stocker, les passer en paramètre, les retourner :

const prix = [10, 25, 40];
const avecTva = prix.map((p) => p * 1.2);
const chers = prix.filter((p) => p > 20);

C’est la base des méthodes de tableaux, de la programmation fonctionnelle légère et des écouteurs d’événements.

Les fermetures (closures)

Une fonction se souvient des variables de la portée où elle a été créée :

function creerCompteur() {
  let n = 0;
  return () => {
    n += 1;
    return n;
  };
}

const compteur = creerCompteur();
console.log(compteur()); // 1
console.log(compteur()); // 2

La variable n n’est pas accessible de l’extérieur, mais la fonction retournée la conserve : on obtient un état privé sans classe.

Objets : regrouper des données et des comportements

Un objet est un ensemble de paires clé : valeur.

const produit = {
  nom: 'Casque audio',
  prix: 49,
  enStock: true,
  decrire() {
    return `${this.nom} : ${this.prix} €`;
  },
};

console.log(produit.nom);          // accès par point
console.log(produit['prix']);      // accès par crochets
console.log(produit.decrire());

Ajouter, modifier, supprimer

produit.couleur = 'noir';   // ajout
produit.prix = 45;          // modification
delete produit.enStock;     // suppression

Parcourir un objet

for (const [cle, valeur] of Object.entries(produit)) {
  console.log(cle, valeur);
}

Object.keys(produit);   // tableau des clés
Object.values(produit); // tableau des valeurs

Déstructuration et notation abrégée

const { nom, prix } = produit;      // extraction
const { couleur = 'inconnue' } = produit; // avec valeur par défaut

function afficher({ nom, prix }) {  // directement dans les paramètres
  return `${nom} (${prix} €)`;
}

const x = 1;
const y = 2;
const point = { x, y };             // équivaut à { x: x, y: y }

Chaînage optionnel et valeur par défaut

Pour lire une propriété qui peut ne pas exister sans provoquer d’erreur :

const ville = utilisateur?.adresse?.ville ?? 'Non renseignée';

?. s’arrête si la valeur est null ou undefined, et ?? fournit une valeur de repli uniquement dans ces deux cas (contrairement à ||, qui réagit aussi à 0 ou '').

Tableaux d’objets : le cas le plus courant

Dans les applications web, on manipule surtout des listes d’objets, par exemple renvoyées par une API.

const commandes = [
  { id: 1, total: 30, payee: true },
  { id: 2, total: 80, payee: false },
  { id: 3, total: 55, payee: true },
];

const payees = commandes.filter((c) => c.payee);
const totaux = payees.map((c) => c.total);
const chiffre = totaux.reduce((somme, t) => somme + t, 0);

console.log(chiffre); // 85

Chaque méthode renvoie un nouveau tableau, sans modifier l’original : un bon réflexe pour éviter les effets de bord. Pour afficher ces données dans la page, lisez DOM JavaScript : manipuler la page correctement. Pour les récupérer depuis un serveur, voyez Promesses et async/await en JavaScript.

Copier un objet : attention aux références

const original = { nom: 'Léa', adresse: { ville: 'Lyon' } };

const copie = { ...original };       // copie superficielle
copie.adresse.ville = 'Paris';

console.log(original.adresse.ville); // 'Paris' : l'objet imbriqué est partagé !

const copieProfonde = structuredClone(original); // copie profonde

La syntaxe { ...objet } ne copie que le premier niveau. Pour une copie complète, structuredClone est disponible dans les environnements récents. Vérifiez la compatibilité de vos navigateurs cibles avant de l’adopter.

Erreurs fréquentes

• Utiliser var par habitude : préférez const et let.
• Croire que const rend l’objet immuable : il protège le nom, pas le contenu.
• Comparer des objets avec === : deux objets distincts ne sont jamais égaux, même avec le même contenu, car la comparaison porte sur la référence.
• Utiliser une fonction fléchée comme méthode qui s’appuie sur this.
• Oublier return dans une fonction à accolades : elle renvoie undefined.
• Confondre == et === : utilisez ===, qui ne fait pas de conversion de type implicite.
• Variables globales : elles créent des collisions entre scripts. Les modules, présentés dans Modules JavaScript : import, export et ESM, résolvent ce problème.

Bonnes pratiques pour un code lisible

• Nommez avec précision : prixTtc, estPaye, chargerCommandes plutôt que x, flag, data2.
• const par défaut, let si nécessaire.
• Fonctions courtes, avec une responsabilité claire.
• Évitez la mutation quand une copie ou un map suffit.
• Commentez le pourquoi, pas le quoi : le code dit déjà ce qu’il fait.
• Utilisez un formateur et un linter (Prettier, ESLint) pour garder un style homogène sans débat.
• Testez dans la console : les outils de développement du navigateur permettent d’essayer chaque exemple en quelques secondes. Le contexte d’exécution est expliqué dans Comment fonctionne JavaScript dans le navigateur.

Exercice pour s’entraîner

Créez une petite liste de tâches en mémoire :

1. déclarez un tableau taches d’objets { id, titre, faite } ;
2. écrivez ajouterTache(taches, titre) qui renvoie un nouveau tableau ;
3. écrivez basculerTache(taches, id) qui inverse faite sur une tâche sans modifier l’original ;
4. écrivez compterRestantes(taches) avec filter ;
5. affichez le résultat avec console.log.

Vous aurez utilisé variables, fonctions pures, objets, déstructuration et méthodes de tableaux. L’étape suivante naturelle : afficher cette liste dans une page HTML.

Conclusion

Variables, fonctions et objets forment le socle de JavaScript. Retenez quelques principes : const par défaut, fonctions courtes et de préférence pures, objets manipulés avec déstructuration, et une vigilance constante sur la différence entre valeur et référence.

Avec ces bases, vous pouvez aborder sereinement le DOM, l’asynchrone et les modules. Pour suivre un parcours guidé avec des exercices, découvrez Academy Yunt et les autres articles du blog.

FAQ

Faut-il encore connaître var ?

Oui, pour lire du code existant. Dans du code nouveau, const et let suffisent et évitent plusieurs pièges.

Quelle différence entre null et undefined ?

undefined signifie qu’aucune valeur n’a été attribuée ; null est une absence de valeur posée volontairement. Dans les deux cas, ?. et ?? aident à les traiter.

Pourquoi this change-t-il selon la façon d’appeler une fonction ?

Parce que this dépend du contexte d’appel, sauf pour les fonctions fléchées qui reprennent celui de leur portée englobante. Quand c’est confus, passez les données en paramètres.

Quelle différence entre fonction déclarée et fonction fléchée ?

La déclaration est remontée en début de portée et possède son propre this ; la fonction fléchée est une expression, plus concise, sans this propre. Les deux ont leur place.

Comment bien copier un tableau ou un objet ?

Pour une copie superficielle, utilisez la propagation ([...tab], { ...obj }). Si des objets sont imbriqués, utilisez structuredClone ou copiez chaque niveau concerné.