Élévation en Javascript

Concepts fondamentaux du hissage en Javascript

Une variable peut être déclarée de trois façons en JavaScript. Il s'agit de :

• var
• let
• const

Chaque déclaration a son comportement de hissage, qui peut être représenté par le tableau ci-dessous :

En utilisant var, la variable sera hissée au sommet de sa portée et initialisée avec une valeur indéfinie. Mais avec let et const, la variable se trouve dans une zone morte temporelle. Cela signifie qu'elle n'est pas initialisée et que toute référence à cette variable entraînera une erreur de référence (ReferenceError), parce qu'elle n'est pas hissée. Pour le montrer, tu peux utiliser les codes suivants :

console.log(myVar) ; //undefined var myVar ; console.log(myLet) ; //ReferenceError let myLet ;

En ce qui concerne le hissage de fonctions, les déclarations de fonctions sont hissées complètement au sommet de leur portée, contrairement aux déclarations de variables.

console.log(myFunction()) ; // 'Hello, world!' function myFunction() { return 'Hello, world!' ; }

Présentation complète de la fonction "hoisting" en JavaScript

Bien que le hissage soit un concept complexe, il fait partie intégrante du contexte d'exécution de JavaScript et joue un rôle important dans la production d'un code plus propre et plus lisible. En comprenant le hoisting, tu te donnes les moyens d'éviter les pièges et les erreurs de codage les plus courants.

Un mythe populaire à dissiper est que le hoisting déplace physiquement ton code vers le haut du fichier JavaScript. Ce n'est pas le cas. Comme nous l'avons vu précédemment, l'empilement se produit lors de la phase de compilation, de sorte que le compilateur ne fait qu'attribuer un espace mémoire pour les déclarations de variables et de fonctions.

Par conséquent, l'ordre physique de ton code ne change pas, mais seulement la façon dont l'interprète JavaScript le perçoit.

Ainsi, lorsque tu écris du code JavaScript, garde toujours à l'esprit le hissage et son impact sur tes déclarations et initialisations. Il est recommandé de toujours déclarer tes variables au sommet de ton champ d'application.

Exploration des fonctions et du hoisting en Javascript

Lorsque l'on travaille avec Javascript, il est important de comprendre comment le langage gère les fonctions et les variables. L'une des caractéristiques fascinantes de Javascript est son phénomène de "hoisting". Contrairement à d'autres langages, Javascript a tendance à se comporter différemment lorsqu'il s'agit de déclarations et d'expressions de fonctions, notamment en raison de ce concept de " hoisting ".

Les fonctions sont-elles hissées en Javascript ?

En Javascript, la théorie du hissage s'applique aussi bien aux fonctions qu'aux variables. L'interprète déplace les déclarations au sommet de la portée actuelle, ce qui signifie que tu peux appeler des fonctions avant qu'elles ne soient définies dans le bloc de code. Cependant, cela peut être quelque peu déroutant si tu ne comprends pas comment cela fonctionne. Il est donc essentiel de faire la distinction entre deux types de fonctions en Javascript : les déclarations de fonctions et les expressions de fonctions.

function myFunc () { //fait quelque chose }

var myFunc = function() { //faire quelque chose } ;

Alors, quelle est la différence entre ces deux types d'expression ? Eh bien, elle est importante. Les déclarations de fonction sont complètement hissées, ce qui signifie que l'ensemble du bloc de fonction est déplacé en haut de la portée. Ainsi, si tu as une déclaration de fonction dans ton code, tu peux l'appeler quand tu veux, quel que soit son emplacement dans ton code.

Aperçu de la fonction Hoisting en Javascript

Tu penses peut-être que puisque les déclarations de fonction se déplacent vers le haut de la portée, les expressions de fonction devraient faire de même. Mais ce n'est pas le cas. Lors de l'utilisation d'une expression de fonction, l'ascension se produit, mais elle est limitée à la déclaration de la variable, et non à l'affectation. Par conséquent, si une expression de fonction est invoquée avant la déclaration, tu recevras une erreur indiquant qu'il ne s'agit pas d'une fonction.

console.log(myFunction()) ; // myFunction n'est pas une fonction var myFunction = function() { return 'Hello, world!' ; } ;

Mais pourquoi Javascript a-t-il ce comportement étrange ? Eh bien, Javascript utilise un interprète à deux passes. La première passe recherche toutes les déclarations et les hisse au sommet de leurs portées respectives. Pendant cette phase, les initialisations ne sont pas hissées. Dans les expressions de fonction, la fonction est assignée à une variable. La déclaration (variable) est hissée, mais l'affectation (fonction) ne l'est pas.

Cette dichotomie garantit un contexte d'exécution approprié et maintient la cohérence du langage Javascript. Pour éviter les résultats inattendus, il est conseillé de déclarer et d'initialiser les variables au début de tes scripts et d'appeler les fonctions après leur déclaration ou de les assigner simplement à des variables si tu souhaites les utiliser plus tôt dans tes scripts, assurant ainsi la prévisibilité du résultat de ton code.

Démêler l'utilisation des classes en Javascript

Comme tu le sais peut-être, Javascript introduit un comportement de hissage en relation avec les déclarations de fonctions ou de variables. Ici, tu vas te plonger dans un concept intrigant connu sous le nom de "Class Hoisting".

Analyse approfondie de l'utilisation des classes en Javascript

Dans certains langages, les classes agissent de la même manière que les fonctions ou les variables dans le contexte de l'indexation. Mais en Javascript, le scénario est quelque peu différent. L'aspect intéressant de la notion de "class hoisting" en JavaScript est que, contrairement aux variables et aux déclarations de fonctions, les déclarations de classes ne sont pas hissées. Si tu essaies d'accéder à ta classe avant de l'avoir déclarée, le JavaScript va envoyer une erreur.

console.log(myClass) ; //RéférenceErreur class myClass{} ;

Tu remarqueras que cela s'écarte du comportement des fonctions où tu peux utiliser des fonctions avant la déclaration à cause du comportement automatique du hoisting. Cet écart est dû à la nature du mot-clé "class". Tout comme les mots clés "let" et "const", les déclarations de "classe" sont limitées à un bloc et ne peuvent donc pas être hissées au sommet du bloc qui les contient.

Cependant, les classes, comme les fonctions, ont une histoire légèrement plus détaillée en raison de l'existence des "expressions de classe", qui reflètent la fonctionnalité des "expressions de fonction" et des "déclarations de fonction". Mais contrairement aux expressions de fonction, les expressions de classe ne sont pas hissées.

var MyClass = class Klass { // les méthodes vont ici } ; console.log(Klass) ; //ReferenceError : Klass n'est pas défini

L'expression de la classe ici est nommée "Klass". Cependant, la portée de 'Klass' est limitée uniquement à l'intérieur du corps de la classe, ce qui respecte le principe d'encapsulation des données où les objets cachent leurs propriétés et leurs méthodes.

Comprendre l'encapsulation des classes dans le contexte de JavaScript

Lorsque l'on parle d'encapsulation en JavaScript, les termes "var", "let", "const", les déclarations de fonctions, les expressions de fonctions et maintenant les classes entrent en ligne de compte. Il est essentiel de comprendre comment tous les éléments se comportent dans un cadre plus large pour éviter les bogues et maintenir un code propre et efficace.

Tout comme "let" et "const", les définitions de classes sont limitées à un bloc. Elles ne sont pas placées au sommet de ton code. Toute tentative d'accès à la classe avant sa déclaration entraînera une erreur de référence (ReferenceError). Cette erreur est rendue parce que les classes JavaScript, contrairement aux fonctions, ne sont pas initialisées avec un espace en mémoire. Elles n'ont donc pas de valeur jusqu'à ce qu'elles soient évaluées pendant l'exécution du script.

console.log(myFunction()) ; // 'Hello, world!' console.log(myClass) ; // ReferenceError - cannot access 'myClass' before initialization function myFunction() { return 'Hello, world!' ; } class myClass {} ;

Compte tenu de leurs caractéristiques de hissage, les classes doivent être déclarées au début du bloc où elles sont censées être référencées. Bien que cela semble restrictif, rappelle-toi que les bonnes pratiques de codage encouragent ce type de structure. En plaçant toutes tes déclarations au sommet de leurs portées respectives, tu permets à ton code d'être clair, facile à maintenir et moins sujet à des bogues gênants.

Le rôle de l'accrochage de variables en Javascript

En Javascript, le terme "hoisting" est souvent mentionné en ce qui concerne le comportement des variables. Il s'agit d'un concept clé à comprendre lors de l'écriture du code, car il peut facilement être une source de confusion pour les nouveaux programmeurs et même pour les programmeurs expérimentés. Pour comprendre les nuances de Javascript, tu dois voir l'accrochage des variables en action.

Gros plan sur les variables hissées en Javascript

Dans un langage de programmation standard, l'idée est simple : tu déclares une variable, puis tu l'utilises. Mais Javascript lance une petite balle courbe appelée hoisting. Essentiellement, Javascript "hisse" ou soulève toutes les déclarations de variables (pas les initialisations) au sommet de la portée actuelle, qu'il s'agisse d'une fonction ou d'une portée globale.

L'aspect surprenant de l'accrochage de variables est qu'il permet l'utilisation d'une variable avant qu'elle ne soit techniquement déclarée dans le code. Cela peut provoquer des comportements inattendus dans ton programme si tu ne l'as pas anticipé.

console.log(x) ; // undefined var x = 5 ; console.log(x) ; // 5.

Même si x est déclaré après la première instruction console.log, cela n'entraîne pas d'erreur car la déclaration (et non l'initialisation) est hissée au sommet de la portée.

Cependant, il est important de noter que le mécanisme de hissage fonctionne différemment pour les déclarations "var", "let" et "const" :

• Les déclarations 'var' sont hissées et initialisées avec la valeur 'undefined'.
• Les déclarations 'let' et 'const' sont hissées mais ne sont pas initialisées. Par conséquent, le fait de les référencer avant la déclaration entraîne une erreur de référence (ReferenceError).

Par exemple :

console.log(y) ; // ReferenceError : y is not defined let y = 5 ;

Bien que l'attribution de variables en Javascript puisse être légèrement complexe, elle constitue la base de la compréhension de l'attribution de fonctions et de classes et est une caractéristique essentielle du langage.

Le mécanisme de l'extraction de variables en Javascript

Pour comprendre plus en profondeur la façon dont Javascript traite l'accrochage de variables, il faut se plonger dans les phases de compilation et d'exécution. Il est facile de penser que Javascript est un langage purement interprété, mais il subit un processus en deux étapes : Compilation et Exécution.

Dans la phase de compilation:

• Javascript parcourt l'ensemble du code à la recherche de déclarations de variables et de fonctions.
• Il alloue de la mémoire pour les variables et les fonctions déclarées, en créant une référence à celles-ci dans le contexte d'exécution de Javascript.
• Les variables de type 'var' se voient attribuer la valeur par défaut 'undefined'. En revanche, les variables de type 'let' et 'const' ne sont pas initialisées.
• Cela ne concerne que les déclarations de variables, pas les initialisations.

Dans la phase d'exécution:

• Elle exécute le code ligne par ligne, de haut en bas.
• Il attribue des valeurs aux variables et exécute les fonctions au fur et à mesure qu'il les rencontre au cours de cette phase.
• Les variables 'let' et 'const' ne sont désormais utilisables qu'après l'exécution de leur ligne de code, contrairement aux variables de type 'var' qui étaient disponibles dès le départ.

C'est donc le processus en deux étapes de la compilation et de l'exécution en Javascript qui rend possible l'accrochage de variables.

console.log(z) ; // indéfini var z = 5 ; // initialisation de la variable console.log(z) ; // 5

Même si nous avons tenté de consigner 'z' avant qu'il ne soit déclaré, cela n'a pas entraîné d'erreur, juste 'undefined'. Ce 'undefined' est l'initialisation par défaut que 'var' reçoit en raison de son hissage. Ce n'est que pendant la phase d'exécution que 'z' reçoit la valeur '5'.

Le mécanisme d'accrochage est une caractéristique fascinante de Javascript, bien qu'il puisse conduire à des résultats déroutants s'il n'est pas bien compris. Grâce à l'extraction de variables, tu peux obtenir une compréhension plus claire des phases de compilation et d'exécution en Javascript.

Illustrations pratiques de l'accrochage en Javascript

En Javascript, le mécanisme de levage peut créer des comportements apparemment inhabituels s'il n'est pas bien compris. C'est une différence essentielle qui distingue Javascript de la majorité des autres langages informatiques. Mais n'aie pas peur, saisir ce concept est une aide certaine au débogage et à l'écriture d'un code propre.

Exemples de hissage : Comment se comporte Javascript ?

Nous allons nous efforcer de comprendre le comportement de JavaScript en ce qui concerne les déclarations de variables et de fonctions. Une fois que tu l'auras vu à l'œuvre, la conception anormale du hoisting deviendra beaucoup plus compréhensible.

Tout d'abord, voici comment hoisting traite les variables déclarées 'var' :

console.log(aVar) ; // undefined var aVar = 5 ;

Dans cet exemple, JavaScript hisse la déclaration de la variable "var" au sommet de la portée, même si elle est déclarée après la première référence console.log. Il en résulte "undefined" plutôt qu'une erreur.

Maintenant, observe comment le hissage diffère avec les déclarations "let" et "const" :

console.log(aLet) ; // ReferenceError let aLet = 5 ;

Contrairement à 'var', 'let' et 'const' sont hissés mais pas initialisés, donc essayer d'y accéder avant leur ligne de déclaration provoque une ReferenceError (not undefined).

Au-delà des variables variables, les expressions et les déclarations de fonctions ont également des comportements remarquables :

console.log(namedFunction()) ; // 'Hello, world!' function namedFunction() { return 'Hello, world!' ; }

Les déclarations de fonction, comme les variables 'var', sont hissées et initialisées. Par conséquent, tu peux appeler la fonction avant qu'elle ne soit déclarée, et cela n'entraînera pas d'erreur.

À l'inverse, les expressions de fonction présentent un scénario différent :

console.log(namedFunctionExpression()) ; // TypeError var namedFunctionExpression = function() { return 'Hello, world!' ; } ;

Les expressions de fonction tombent sous les mêmes règles de hissage que 'var'. L'expression de la fonction est hissée, mais la valeur de la fonction n'est pas initialisée tant que Javascript n'a pas atteint la ligne où la fonction est assignée. Par conséquent, toute tentative d'invocation avant l'affectation de la fonction entraîne une erreur de type (TypeError).

Ces illustrations soulignent la façon dont le hoisting se comporte dans différents contextes en Javascript. Il est essentiel de connaître ces comportements pour éviter les erreurs potentielles ou les résultats inattendus dans tes scripts.

Décoder le hoisting à l'aide d'exemples en Javascript

Plusieurs exemples pratiques aident à clarifier les comportements spécifiques du hoisting en Javascript. Grâce à ces exemples, tu comprendras comment Javascript gère les déclarations de variables et de fonctions pendant la phase de compilation.

Considère le hoisting de 'var' à l'intérieur de la portée d'une fonction :

function hoistTest() { console.log(hoistVar) ; // undefined - Not a ReferenceError var hoistVar = "I'm hoisted" ; console.log(hoistVar) ; // "I'm hoisted" } hoistTest() ;

Une variable "var", lorsqu'elle est déclarée à l'intérieur d'une fonction, obéit au function-scoping. Sa déclaration est hissée au sommet de la portée de la fonction. Par conséquent, le premier console.log aboutit à "undefined", et non à une erreur. Mais il est évident que l'initialisation de la variable n'a lieu qu'à sa ligne de code, ce qui rend la valeur de la variable accessible par la suite.

En revanche, 'let' et 'const' ont une échelle de blocs :

if(true) { console.log(hoistLet) ; // ReferenceError let hoistLet = "Je suis hissé" ; }

Les déclarations 'let' et 'const' restent inaccessibles jusqu'à ce que Javascript atteigne la ligne où elles sont déclarées. Tenter de les utiliser avant leur ligne de déclaration provoque une ReferenceError, même si elles se trouvent à l'intérieur d'un bloc 'if' ou de tout autre bloc.

Sois vigilant aux nuances de hoisting lorsque tu as des déclarations de fonctions et des expressions de fonctions :

console.log(hoistFunction()) ; // "Je suis hissé" function hoistFunction() { return "Je suis hissé" ; }

Les déclarations de fonction sont entièrement hissées. Tu peux donc appeler une fonction au-dessus de sa déclaration sans rencontrer d'erreur.

Mais attention aux expressions de fonction avec "var" :

console.log(hoistFunctionExpression()) ; // TypeError var hoistFunctionExpression = function() { return "I'm hoisted" ; } ;

Une expression de fonction a le même principe de hissage que 'var' : la déclaration est hissée, pas l'initialisation. Ainsi, l'invocation de la fonction avant qu'elle ne soit assignée entraîne une TypeError, et non une valeur de retour.

Ces exemples devraient te permettre de comprendre de manière transparente comment fonctionne le hissage en Javascript. La compréhension du concept permet de prédire plus facilement les résultats, de déboguer les problèmes et d'écrire des pratiques de codage plus efficaces.