De nombreuses nouvelles fonctionnalités brillantes sont sorties avec ES2015 (ES6). Et maintenant, depuis 2020, on suppose que de nombreux développeurs JavaScript se sont familiarisés avec ces fonctionnalités et ont commencé à les utiliser.
Bien que cette hypothèse puisse être partiellement vraie, il est toujours possible que certaines de ces fonctionnalités restent un mystère pour certains développeurs.
L'une des fonctionnalités fournies avec ES6 est l'ajout de letet const, qui peut être utilisé pour la déclaration de variable. La question est, qu'est-ce qui les rend différents du bon vieux varque nous utilisons? Si vous n'êtes toujours pas clair à ce sujet, cet article est pour vous.
Dans cet article, nous allons discuter var, letet const en ce qui concerne leur champ d' application, l' utilisation et le levage. En lisant, notez les différences entre eux que je vais souligner.
Var
Avant l'avènement de l'ES6, les vardéclarations ont régné. Cependant, il existe des problèmes associés aux variables déclarées avec var. C'est pourquoi il était nécessaire que de nouvelles façons de déclarer les variables émergent. Tout d'abord, apprenons à mieux comprendre varavant de discuter de ces problèmes.
Portée de var
La portée signifie essentiellement où ces variables sont disponibles pour utilisation. varles déclarations ont une portée globale ou une portée fonction / locale.
La portée est globale lorsqu'une varvariable est déclarée en dehors d'une fonction. Cela signifie que toute variable déclarée à l' varextérieur d'un bloc fonction est disponible pour une utilisation dans toute la fenêtre.
varcorrespond à la portée de la fonction lorsqu'elle est déclarée dans une fonction. Cela signifie qu'il est disponible et accessible uniquement dans cette fonction.
Pour mieux comprendre, regardez l'exemple ci-dessous.
var greeter = "hey hi"; function newFunction() { var hello = "hello"; } Ici, a une greeterportée globale car elle existe en dehors d'une fonction alors qu'elle helloest étendue à une fonction. Nous ne pouvons donc pas accéder à la variable en hellodehors d'une fonction. Donc, si nous faisons cela:
var tester = "hey hi"; function newFunction() { var hello = "hello"; } console.log(hello); // error: hello is not defined Nous obtiendrons une erreur qui résulte de l' helloabsence de disponibilité en dehors de la fonction.
les variables var peuvent être re-déclarées et mises à jour
Cela signifie que nous pouvons le faire dans le même périmètre et que nous n'obtiendrons pas d'erreur.
var greeter = "hey hi"; var greeter = "say Hello instead"; et cela aussi
var greeter = "hey hi"; greeter = "say Hello instead"; Levage de var
Le levage est un mécanisme JavaScript dans lequel les variables et les déclarations de fonction sont déplacées vers le haut de leur portée avant l'exécution du code. Cela signifie que si nous faisons cela:
console.log (greeter); var greeter = "say hello" il est interprété comme ceci:
var greeter; console.log(greeter); // greeter is undefined greeter = "say hello" Ainsi, les varvariables sont hissées au sommet de leur portée et initialisées avec une valeur de undefined.
Problème avec var
Il y a une faiblesse qui vient avec var. Je vais utiliser l'exemple ci-dessous pour expliquer:
var greeter = "hey hi"; var times = 4; if (times > 3) { var greeter = "say Hello instead"; } console.log(greeter) // "say Hello instead" Donc, puisque times > 3renvoie true, greeterest redéfini à "say Hello instead". Bien que ce ne soit pas un problème si vous souhaitez sciemment greeterêtre redéfini, cela devient un problème lorsque vous ne réalisez pas qu'une variable greetera déjà été définie auparavant.
Si vous avez utilisé greeterdans d'autres parties de votre code, vous pourriez être surpris de la sortie que vous pourriez obtenir. Cela causera probablement beaucoup de bogues dans votre code. C'est pourquoi letet constsont nécessaires.
Laisser
letest maintenant préféré pour la déclaration de variable. Ce n'est pas une surprise car il s'agit d'une amélioration des vardéclarations. Cela résout également le problème varque nous venons de couvrir. Voyons pourquoi il en est ainsi.
let a une portée de bloc
Un bloc est un morceau de code délimité par {}. Un bloc vit dans des accolades. Tout ce qui se trouve entre accolades est un bloc.
Ainsi, une variable déclarée dans un bloc avec let n'est disponible que pour une utilisation dans ce bloc. Laissez-moi vous expliquer cela avec un exemple:
let greeting = "say Hi"; let times = 4; if (times > 3) { let hello = "say Hello instead"; console.log(hello);// "say Hello instead" } console.log(hello) // hello is not defined Nous voyons que l'utilisation en hellodehors de son bloc (les accolades où il a été défini) renvoie une erreur. Cela est dû au fait que les letvariables ont une portée de bloc.
let peut être mis à jour mais pas re-déclaré.
Tout comme var, une variable déclarée avec letpeut être mise à jour dans sa portée. À la différence var, une letvariable ne peut pas être re-déclarée dans sa portée. Donc, pendant que cela fonctionnera:
let greeting = "say Hi"; greeting = "say Hello instead"; cela renverra une erreur:
let greeting = "say Hi"; let greeting = "say Hello instead"; // error: Identifier 'greeting' has already been declared Cependant, si la même variable est définie dans des portées différentes, il n'y aura pas d'erreur:
let greeting = "say Hi"; if (true) { let greeting = "say Hello instead"; console.log(greeting); // "say Hello instead" } console.log(greeting); // "say Hi" Pourquoi n'y a-t-il pas d'erreur? En effet, les deux instances sont traitées comme des variables différentes puisqu'elles ont des portées différentes.
Ce fait fait letun meilleur choix que var. Lors de l'utilisation let, vous n'avez pas à vous soucier si vous avez déjà utilisé un nom pour une variable car une variable n'existe que dans sa portée.
De plus, comme une variable ne peut pas être déclarée plus d'une fois dans une étendue, le problème abordé précédemment qui se produit avec varne se produit pas.
Levage de location
Tout comme var, les letdéclarations sont hissées au sommet. Contrairement à varce qui est initialisé en tant que undefined, le letmot-clé n'est pas initialisé. Donc, si vous essayez d'utiliser une letvariable avant la déclaration, vous obtiendrez un Reference Error.
Const
Variables déclarées avec les constvaleurs constantes de maintien. constles déclarations partagent certaines similitudes avec les letdéclarations.
const declarations are block scoped
Like let declarations, const declarations can only be accessed within the block they were declared.
const cannot be updated or re-declared
This means that the value of a variable declared with const remains the same within its scope. It cannot be updated or re-declared. So if we declare a variable with const, we can neither do this:
const greeting = "say Hi"; greeting = "say Hello instead";// error: Assignment to constant variable. nor this:
const greeting = "say Hi"; const greeting = "say Hello instead";// error: Identifier 'greeting' has already been declared Every const declaration, therefore, must be initialized at the time of declaration.
This behavior is somehow different when it comes to objects declared with const. While a const object cannot be updated, the properties of this objects can be updated. Therefore, if we declare a const object as this:
const greeting = { message: "say Hi", times: 4 } while we cannot do this:
const greeting = { words: "Hello", number: "five" } // error: Assignment to constant variable. we can do this:
greeting.message = "say Hello instead"; This will update the value of greeting.message without returning errors.
Hoisting of const
Just like let, const declarations are hoisted to the top but are not initialized.
So just in case you missed the differences, here they are:
vardeclarations are globally scoped or function scoped whileletandconstare block scoped.varvariables can be updated and re-declared within its scope;letvariables can be updated but not re-declared;constvariables can neither be updated nor re-declared.- They are all hoisted to the top of their scope. But while
varvariables are initialized withundefined,letandconstvariables are not initialized. - While
varandletcan be declared without being initialized,constmust be initialized during declaration.
Got any question or additions? Please let me know.
Thank you for reading :)