11 concepts clés de JavaScript que tout Senior doit connaître 👨‍💻

🧠 JavaScript peut être simple, mais sous le capot, il cache beaucoup de choses intéressantes. Même si vous travaillez avec le langage depuis plus d'un an, la connaissance de ses mécanismes internes, de ses subtilités et de ses pièges vous aidera à écrire un code plus propre, plus prévisible et plus efficace. Cet article est un guide détaillé des principales fonctionnalités de JavaScript, qui sera utile non seulement aux débutants, mais aussi aux développeurs expérimentés.

🚀 Les sujets que nous allons couvrir :

• Hoisting (remontée)

• Temporal Dead Zone (zone morte temporaire)

• Function Declaration vs Function Expression

• Shallow Copy vs Deep Copy (copie superficielle et copie profonde)

• Object.assign

• Slice vs Splice

• forEach vs Map

• Global Execution Context

• Polyfilling (polyfill)

• Plongée profonde dans map()

• Conversion de type (Type Coercion)

🪄 1. Levage (Hoisting)

Hoisting est l'un des mécanismes JavaScript les plus mystérieux pour les débutants. Il s'agit d'un comportement du moteur dans lequel les déclarations de variables et de fonctions semblent « apparaître » au début de leur portée.

Cela signifie que vous pouvez essayer de faire référence à une variable ou à une fonction avant sa déclaration réelle, et parfois cela fonctionnera même :

console.log(a); // undefined
var a = 10;

var — apparaît et undefined est initialisé, tandis que let et const apparaissent, mais ne sont pas initialisés. Par conséquent, le code suivant provoquera une erreur :

console.log(b); // ReferenceError
let b = 20;

En ce qui concerne les fonctions, la différence entre function declaration et function expression est particulièrement importante :

console.log(getNum()); // OK
function getNum() { return 42; }

console.log(getArrow()); // TypeError: getArrow is not a function
var getArrow = () => 42;

📸 Invite pour la photo: "Infographie sur le hoisting en JavaScript, avec la division des variables var/let/const et function/function expression"

🕳 2. Temporal Dead Zone (TDZ)

Une zone morte temporaire est une période pendant laquelle une variable a déjà été déclarée (via let ou const), mais n'a pas encore été initialisée. Dans TDZ, toute tentative d'accès à une variable appelle ReferenceError.

console.log(value); // ReferenceError
let value = 100;

Ce mécanisme nous protège des erreurs et rend le comportement du code plus prévisible. TDZ s'étend également aux fonctions définies comme const et let.

🧩 3. Function Declaration vs Function Expression

Function Declaration

function greet() {
  console.log("Hello!");
}

Ces fonctions apparaissent et peuvent être appelées n'importe où dans la portée. Ceci est pratique si la logique de la fonction doit être disponible dans tout le script.

Function Expression

const greet = function() {
  console.log("Hello!");
}

Ici, la fonction ne devient disponible qu'après l'affectation de la variable. C'est parfait pour une utilisation dans les fermetures ou les rappels.

📦 4. Shallow Copy vs Deep Copy

Copie superficielle (Shallow Copy)

Il copie uniquement le niveau supérieur des propriétés de l'objet. Les objets imbriqués continuent de faire référence aux mêmes zones de mémoire :

const obj1 = { name: "Olga", address: { city: "Kazan" } };
const obj2 = { ...obj1 };
obj2.address.city = "Ufa";
console.log(obj1.address.city); // "Ufa"

Copie profonde (Deep Copy)

Permet de copier complètement l'objet, y compris les structures imbriquées :

const deepCopy = structuredClone(obj1);
deepCopy.address.city = "Sochi";

Alternatives :

• JSON.stringify/parse — ne fonctionne pas avec les fonctions et undefined

• structuredClone — méthode moderne

• Fonction récursive personnalisée

📸 Invite pour la photo: « Comparaison de la copie de surface et de la copie profonde avec visualisation des objets imbriqués »

🔄 5. Object.assign()

La méthode permet de copier les propriétés d'un ou plusieurs objets vers la cible :

const objA = { name: "Alice" };
const objB = { age: 30 };
const result = Object.assign({}, objA, objB);

Caractéristiques :

• Renvoie l'objet cible

• Copie uniquement ses propres propriétés énumérées

• Remplace les propriétés du même nom

Alternative - syntaxe spread : { ...objA, ...objB }

✂️ 6. Slice vs Splice

slice() et splice() — méthodes de tableaux souvent confondues entre elles :

• slice(start, end) — renvoie un nouveau tableau sans modifier l'original

• splice(start, deleteCount, ...items) — modifie le tableau sur place

const arr = [1, 2, 3, 4, 5];
console.log(arr.slice(1, 3)); // [2, 3]
console.log(arr.splice(1, 2, 9, 9)); // [2, 3], arr maintenant [1, 9, 9, 4, 5]

🔁 7. forEach vs map

Les deux méthodes parcourent le tableau, mais il y a des nuances :

[1, 2, , 4].map(x => x || 0); // nous traitons un tableau sparse

Si vous devez arrêter l'exécution, utilisez for, for...of, some ou every.

🌍 8. Global Execution Context

Contexte d'exécution — est l'environnement dans lequel le code est exécuté. Il existe deux types :

1. Global — est créé en premier, contient des variables globales, des fonctions et un objet this.

2. Fonctionnel — est créé lorsque chaque fonction est appelée.

Une fois le script terminé, le contexte global est supprimé.

🛠 9. Polyfilling

Les polyfils permettent d'émuler le comportement des nouvelles fonctionnalités du langage dans les anciens navigateurs.

Exemple : polyfill pour Array.prototype.includes :

if (!Array.prototype.includes) {
  Array.prototype.includes = function(el) {
    return this.indexOf(el) !== -1;
  };
}

Les polyfils sont particulièrement importants lors du développement de solutions cross-browser.

🗺 10. Map Deep Dive

La méthode map() prend trois arguments :

• valeur

• code postal

• tableau d'origine

const data = [1, 2, , 4];
const result = data.map((val, idx, arr) => val ? val * 2 : (arr[idx - 1] || 1));

Caractéristiques :

• Les éléments manquants (empty slots) sont ignorés

• Les nouveaux éléments ajoutés pendant l'exécution ne sont pas traités

• Supprimés avant l'exécution — ignorés

⚖️ 11. Type Coercion (Conversion de type)

Implicite (implicit) :

10 + "2"; // "102"
10 - "2"; // 8
true + 1; // 2
[] + 1;   // "1"
null + 1; // 1
undefined + 1; // NaN

Explicite (explicit) :

String(123);
Number("456");
Boolean(0); // false

Il est important de comprendre comment et quand la transformation se produit afin d'éviter les bogues inattendus.

📝 Conclusion

📚 Une compréhension approfondie du fonctionnement interne de JavaScript vous aidera non seulement à écrire du code, mais aussi à concevoir une architecture d'application plus fiable et plus claire. Ceci est particulièrement important dans le développement en équipe, où la lisibilité et la prévisibilité du comportement sont essentielles.

Après avoir analysé des sujets tels que le hoisting, les TDZ, les types de fonctions, la copie d'objets, les fonctionnalités map et forEach, ainsi que la réduction des types, vous atteignez un niveau où JavaScript cesse d'être simplement un langage : il devient un outil de réglage fin de la logique.