Comprendre la mémoire en JavaScript

Cette article fait partie d’une série d’article sur la mémoire en JavaScript :

• Comprendre la mémoire en JavaScript
• Le Garbage collector en JavaScript

Qu’est ce que la mémoire ?

La mémoire, en informatique, est un dispositif électronique qui permet de stocker de données. Elle se présente sous différentes forme, la mémoire vive, la mémoire morte ou la mémoire de masse.

Dans le développement, certains langages bas niveau permettent une gestion avancée de la mémoire comme en C, avec malloc() et free() qui permettent respectivement d’allouer un espace mémoire et de libérer un espace mémoire.

En JavaScript, l’allocation mémoire se fait automatiquement mais nous allons voir qu’il est intéressant de comprendre comme celle-ci fonctionne pour optimiser les performances de ses applications.

Le cycle de vie d’un espace mémoire

Le cycle de vie d’un espace mémoire est assez simple :

• Allouer un espace mémoire
• Lire ou écrire sur cet espace
• Libérer l’espace mémoire

En JavaScript, l’allocation et la libération sont fait de façon implicite. En revanche, comme dans tous les langages de programmation, la lecture et l’écriture sont fait de manière explicite.

Allouer un espace mémoire

Pour allouer un espace mémoire en JavaScript, il suffit de déclarer une variable. Il existe différents types d’allocation mémoire (statique et dynamique) mais nous y reviendrons plus tard.

Voici quelques exemples :

// allocation pour un number
const a = 1

// allocation pour une string
const b = 'John'

// allocation pour un object
const c = {
  c1: 1,
  c2: 'Billy',
}

// allocation pour un object
const d = [1, 2, 3]

// allocation pour une fonction
function e(e1) {
  return e1 + 2
}

Lorsque l'on parle de mémoire, les 'object' incluent les types object, les array et les function. C'est-à-dire que la gestion de la mémoire (allocation et libération) et faite de façon identique pour tous ces types.

Mémoire Statique vs Dynamique en JavaScript

En JavaScript, on distingue deux types de mémoires, la mémoire dite statique (stack) et la mémoire dite dynamique (heap).

Vous avez d’ailleurs peut-être déjà entendu ces deux mots mais nous allons voir quelles sont leurs réels différences.

La stack

La mémoire statique (stack) est utilisé pour l’allocation de mémoire dont on connaît la taille au moment de la compilation. Cela inclut les valeurs primitives en JavaScript (number, string, boolean, undefined et null).

La stack est aussi en charge de stocker les références à des objets ou des fonctions mais nous y reviendrons.

La stack est une liste d’éléments qui répond au principe FILO (first-in, last-out). Cela signifie que le premier élément ajouté à la stack sera le dernier à la quitter.

La heap

La mémoire dynamique (heap) est utilisé pour l’allocation de mémoire dont on ne connaît la taille qu’à l’exécution. C’est le cas pour les object, array et function.

A la différence de la stack, la heap n’alloue pas un espace mémoire de taille défini. L’espace peut évoluer lors de l’éxecution.

En JavaScript, la heap ne fonctionne pas seule. Chaque espace alloué par le moteur JavaScript possède une référence à cette espace dans la stack. C’est ce qu’on appelle un pointeur. Très simplement, on stocke dans la stack, le numéro de l’espace mémoire alloué afin de retrouver notre information.

Voici un schéma ci-dessous qui représente un cas concret.

Le comparatif entre la mémoire Statique et Dynamique

Dans ce premier article, nous avons fait une introduction à la mémoire en JavaScript afin de découvrir son fonctionnement et son utilisation.

Ce qu’il faut retenir :

• Le cycle de vie d’un espace mémoire est : Allouer, Lire/Ecrire, Libérer
• Mémoire statique = La stack
• Mémoire dynamique = La heap