Fundamentals of JavaScript

Introduction aux fondamentaux de JavaScript

JavaScript est le langage de script incontournable du web. Maîtriser ses concepts de base – call stack, portée des variables, coercition de type, structures de données comme Set ou Array, et l'interaction avec le DOM – est essentiel pour développer des applications performantes et maintenables.

Dans ce cours, nous décortiquons chaque notion à travers les questions d’un quiz, afin de fournir des explications détaillées, des exemples de code et des bonnes pratiques SEO pour que votre contenu soit bien référencé.

Le Call Stack : cœur du moteur JavaScript

Le call stack (pile d’appels) est une structure de données de type LIFO (Last In, First Out) qui gère l’ordre d’exécution des fonctions. Chaque fois qu’une fonction est invoquée, une frame est ajoutée au sommet de la pile. Lorsque la fonction se termine, sa frame est retirée.

• Rôle principal : garder la trace des contextes d’exécution synchrones.
• Interaction avec l’event loop : le call stack travaille de concert avec la file d’attente (task queue) pour gérer les opérations asynchrones, mais il ne les orchestre pas directement.
• Gestion de la mémoire : le call stack ne stocke pas les objets du heap; il ne conserve que les références aux variables locales.

Exemple simple :

function a() { b(); }
function b() { console.log('B'); }
a(); // call stack: a → b → console.log

Comprendre le call stack aide à diagnostiquer les stack overflow et à optimiser la profondeur des appels récursifs.

Portée des variables et l’objet global

En JavaScript, la portée (scope) dépend du type de déclaration :

• var : portée fonctionnelle ou globale. Une variable déclarée avec var au niveau du script devient une propriété de l’objet global (window dans le navigateur).
• let et const : portée de bloc, ne polluent pas l’objet global.

Illustration :

// Dans le script principal
var a = 10; // → window.a = 10
let b = 20; // → pas de propriété window

Cette distinction est cruciale pour éviter les collisions de noms et les fuites de mémoire.

Coercition de type : concaténation et opérateur +

L’opérateur + effectue une addition numérique ou une concaténation de chaînes selon les types des opérandes. Si l’un des opérandes est une chaîne, JavaScript convertit l’autre en chaîne.

Exemple tiré du quiz :

console.log(10 + " objets"); // "10 objets"

Cette règle de coercition peut entraîner des résultats inattendus. Pour forcer une addition numérique, utilisez Number() ou l’opérateur unaire + :

console.log(10 + +"5"); // 15

Les collections modernes : Set et ses méthodes

Le Set est une collection d’éléments uniques. La méthode has() permet de vérifier la présence d’un élément.

const fruits = new Set(["pomme", "banane"]);
console.log(fruits.has("pomme")); // true

Contrairement à includes() (qui appartient aux tableaux), has() est optimisé pour les recherches en O(1).

Le DOM et son nœud racine

Dans le modèle d’objet du document (DOM), le nœud racine est l’objet window. Bien que document représente le document HTML, c’est window qui constitue le point d’entrée de l’arbre d’objets du navigateur.

console.log(window === window.top); // true

Comprendre cette hiérarchie facilite la manipulation d’événements globaux et la gestion des contextes d’exécution.

Tri des tableaux et valeurs undefined

La méthode Array.prototype.sort() accepte une fonction de comparaison. Lorsque le tableau contient undefined, le comportement par défaut place ces éléments à la fin du tableau, après le tri.

const arr = [3, undefined, 1, 2];
arr.sort((a, b) => a - b);
console.log(arr); // [1, 2, 3, undefined]

Cette règle garantit que les valeurs indéfinies ne perturbent pas l’ordre numérique des éléments valides.

Modifier dynamiquement le style d’un élément

Pour changer la couleur de fond d’un élément via JavaScript, utilisez la propriété style.backgroundColor de l’objet DOM.

const div = document.querySelector('#maDiv');
div.style.backgroundColor = 'lightblue';

Cette approche est plus performante que la manipulation d’attributs HTML ou la reconstruction du innerHTML.

Fonctions fléchées vs fonctions classiques : le this lexical

Les fonctions fléchées (=>) n’ont pas leur propre liaison this. Elles héritent du this du contexte lexical où elles sont définies, ce qui les rend idéales pour les callbacks où le contexte doit être préservé.

class Compteur {
  constructor() { this.val = 0; }
  increment() {
    setTimeout(() => { this.val++; console.log(this.val); }, 1000);
  }
}
new Compteur().increment(); // 1

En revanche, une fonction classique crée son propre this lorsqu’elle est appelée comme méthode, ce qui peut conduire à des bugs si le contexte n’est pas correctement lié.

Conclusion et bonnes pratiques SEO

Ce cours a couvert les concepts clés du quiz « Fundamentals of JavaScript » :

• Call stack et event loop
• Portée des variables et objet global
• Coercition de type avec l’opérateur +
• Utilisation du Set et de la méthode has()
• Structure du DOM et nœud racine window
• Comportement du tri avec undefined
• Modification dynamique du style via style.backgroundColor
• Différence du this entre fonctions fléchées et classiques

Pour optimiser le référencement de votre contenu, intégrez les mots‑clés suivants de façon naturelle : JavaScript fundamentals, call stack, scope var, Set has method, DOM root node, array sort undefined, style.backgroundColor, arrow functions this. Utilisez des balises sémantiques (<h2>, <h3>, <p>) et structurez vos articles avec des listes à puces pour améliorer la lisibilité et le SEO.

En appliquant ces concepts, vous serez capable d’écrire du code JavaScript robuste, d’optimiser les performances et de créer des pages web bien référencées.