Introduction
JavaScript est un langage de programmation à un seul filet, populaire et couramment utilisé. Donc, en plus de coder en JavaScript, nous devrions savoir comment le code fonctionne en interne. Dans cet article, nous allons regarder à travers les étapes et comprendre l'exécution du code interne en JavaScript.

Alors, plongeons-y.

Qu'est-ce que le contexte de l'exécution?

Le contexte d'exécution est un sujet fondamental en JavaScript qui se réfère à la portée ou à l'environnement dans lequel le code JavaScript est évalué et exécuté.

Chaque fois qu'un code s'exécute en JavaScript, il s'exécute à l'intérieur du contexte d'exécution.

Il se compose de deux éléments clés :
1.La mémoire:La mémoire du contexte d'exécution stocke les variables et fonctions définies dans son champ d'application.

2.L'environnement lexical:L'environnement lexical: L'environnement lexical définit les règles d'accès aux variables et fonctions en fonction de la structure du code.

Lorsqu'un code JavaScript s'exécute, un nouveau contexte d'exécution est créé. Ce contexte est associé à ce code et devient l'environnement dans lequel il s'exécute. Les variables et fonctions définies dans le code sont stockées dans la mémoire du contexte d'exécution, et l'environnement lexical détermine les règles d'accès à ces variables et fonctions.
Son importance
Comprendre le contexte d'exécution est important car il nous aide à comprendre l'accessibilité variable (c'est-à-dire la portée des variables dans le code), la valeur de «ce» mot-clé qui est souvent mal compris, et le concept de Hoisting.

Types de contexte d'exécution

Il existe trois types de contexte d'exécution

• Contexte de l'exécution mondiale,
• Contexte de l'exécution des fonctions,
• Contexte de l'exécution des fonctions Eval Maintenant, plongeons dans le contenu principal et examinons la création du contexte d'exécution.

Création d'un contexte d'exécution

Lorsqu'un code est exécuté en JavaScript, un contexte d'exécution global est d'abord créé. Le contexte global d'exécution est attribué à la variable "ceci".

Après cela, la création du contexte d'exécution comprend deux phases: la phase de création et la phase d'exécution du code. Le code JS fonctionne en deux phases

Pas assez clair ?

Comprenons ces phases et l'ensemble du processus d'exécution de code à travers un exemple et des diagrammes.
Jetons un coup d'oeil à un simple code

let num1 = 50;
let num2 = 100;
function product(val1 , val2){
    let ans= val1*val2;
    return ans;
}
let result= product(num1 , num2);

Lors de l'exécution du code, on crée dans un premier temps un contexte d'exécution global qui est mentionné thisvariable.

Dans le navigateur, la valeur de ceci et l'objet "fenêtre".

Tous les contextes d'exécution supplémentaires sont créés dans ce contexte d'exécution globale.

Comme JavaScript est un langage à un seul trait, tout ce qui se trouve à l'intérieur de celui-ci fonctionne dans un processus défini.

Maintenant, après la création du contexte d'exécution globale, l'exécution du code a lieu.

En JS, l'exécution du code se déroule en deux étapes, la première étant la phase de création de mémoire dans laquelle les variables sont déclarées et allouées mémoire. La seconde est la phase d'exécution de code dans laquelle les variables sont affectées de leur valeur et le code est en cours d'exécution ligne par ligne.

Phase de création de mémoire

Dans cette phase, la déclaration et l'allocation de mémoire de variables ont lieu dans le contexte d'exécution mais ne sont pas initialisées ou affectées de valeur.

Dans l'exemple ci-dessus, dans la phase de création de mémoire à des premières variables num1et puis num2sont déclarés qui sont initialisés avec la valeur undefined. Après cela, la fonction productest déclaré qui contient la définition de la fonction, et enfin, la variable resultest déclaré qui contient la valeur undefined.

Voici le concept "Hoisting"d'"Hossissement".
Le roulage est un mécanisme JS où les variables et les déclarations de fonction sont déplacées vers le haut de leur portée contenant dans la phase de compilation avant même l'exécution du code. Ces variables sont ainsi hissées au sommet de leurs aléatiques.
Maintenant regardons la phase suivante, c'est-à-dire la phase d'exécution.

Phase d'exécution

Après déclaration des variables, la première moitié de l'exécution est terminée. Maintenant, ici commence la phase d'exécution de code. Dans la phase d'exécution, toutes les variables déclarées sont initialisées avec les valeurs et le code est exécuté ligne par ligne.

Dans l'exemple ci-dessus, lors de la phase d'exécution au premier num1est initialisé avec la valeur i.e. 50, et de même, num2est initialisé avec 100.

Ensuite, la fonction productest appelé et pour cette fonction, un nouveau contexte d'exécution de fonction est créé composé d'un nouvel environnement variable et d'un thread d'exécution

La fonction est également exécutée de manière similaire en deux phases à l'intérieur du contexte d'exécution de la fonction jusqu'à ce qu'elle retourne la valeur dans le contexte d'exécution globale.

Le mécanisme de hoisting en JavaScript

Le hoisting est un phénomène particulier de JavaScript qui permet aux déclarations de variables et de fonctions d'être accessibles avant leur déclaration physique dans le code. Cela signifie que les variables et les fonctions peuvent être utilisées avant d'être définies.

Le mécanisme de hoisting fonctionne en portant toutes les déclarations de variables et de fonctions au début de leur portée respective. Cela crée une illusion que les variables et les fonctions sont définies au début du code.

Chaîne de recherche de portée en JavaScript

La chaîne de recherche de portée est un mécanisme utilisé pour trouver une variable ou une fonction lorsqu'elle est référencée dans le code. La chaîne de recherche de portée est consultée dans l'ordre suivant :

1.Le contexte d'activation actuel: La chaîne de recherche commence par le contexte d'activation actuel, c'est-à-dire le contexte d'exécution de la fonction dans laquelle la variable ou la fonction est référencée.
2.Le contexte parent: Si la variable ou la fonction n'est pas trouvée dans le contexte d'activation actuel, la recherche se poursuit dans le contexte parent, c'est-à-dire le contexte d'exécution de la fonction appelante.
3.Le contexte global: Si la variable ou la fonction n'est pas trouvée dans le contexte parent, la recherche se termine dans le contexte global.

Si la variable ou la fonction n'est pas trouvée dans la chaîne de recherche de portée, une erreur est levée.

Dans l'étape suivante, la valeur retournée par la fonction est affectée à la resultvariable et la sortie est donnée. Maintenant, l'exécution du code est terminée. Après achèvement, tout le contexte d'exécution est détruit.

l y a aussi un concept appelé Call Stack. C'est un

mécanisme qui garde une trace des fonctions appelées, qui sont en cours d'exécution, et qui sont en file d'attente pour être exécutées les unes après les autres.

Il suit le principe LIFO (i.e. Dernier principe du premier sorti). La fonction appelée à la dernière est ajoutée en haut de la liste et après son exécution, elle est sortie.

Conclusion

L'exécution context est un concept fondamental en JavaScript qui permet de comprendre comment le code s'exécute et comment les variables et fonctions sont accessibles. La maîtrise de ce concept est essentielle pour écrire du code JavaScript propre, efficace et maintenable.

En conclusion, l'exécution context est un concept fondamental en JavaScript qui mérite d'être étudié et compris par tous les développeurs JavaScript. En investissant du temps et des efforts pour apprendre ce concept, les développeurs peuvent améliorer considérablement leurs compétences en programmation et créer du code JavaScript plus efficace, plus fiable et plus maintenable.

Sources de référence

• JavaScript Execution Context - How JS Works Behind The Scenes,
• Eloquent JavaScript JavaScript and JQuery: Interactive Front-End Web Development JavaScript: The Definitive Guide
• JavaScript Info
• Mozilla Developer Network