Bonjour, Habr! Je vous présente la traduction de l'article
«var vs let vs const en JavaScript» par Tyler McGinnis.
Dans cet article, vous apprendrez 2 nouvelles façons de créer des variables en Javascript (ES6), let et const. Tout au long de cet article, nous examinerons les différences entre
var ,
let et
const , ainsi que des sujets connexes tels que: «portée de la fonction contre portée du bloc», «augmentation» des variables et immunité.
Si vous préférez une vidéo, regardez-la (originale en anglais):
ES2015 (ou ES6) nous a présenté 2 nouvelles façons de créer des variables,
let et
const . Mais avant de nous plonger dans les différences entre
var ,
let et
const , il y a quelques sujets que vous devez d'abord connaître. Ce sont la déclaration des variables et leur initialisation, la portée (une portée spéciale de la fonction) et la «montée».
Déclaration et initialisation de variables
Une déclaration de variable introduit un nouvel identifiant.
var declaration
Ci-dessus, nous créons un nouvel identifiant que nous avons nommé «déclaration». En Javascript, lors de leur création, les variables sont initialisées avec une valeur
indéfinie . Cela signifie que si nous essayons de sortir notre variable de
déclaration , nous obtenons
undefined .
var declaration console.log(declaration)
Et donc, nous avons déduit la variable de
déclaration et nous sommes
devenus indéfinis .
Par rapport à la déclaration d'une variable, l'initialisation d'une variable est la première fois que vous définissez la valeur de cette variable.
var declaration console.log(declaration)
Et donc, ici, nous avons initialisé la variable de
déclaration en y écrivant une chaîne.
Cela nous amène au concept suivant, la portée.
Portée
Une portée décrit où la variable et les fonctions sont accessibles dans notre programme. En Javascript, il existe 2 types d'étendues - l' étendue globale et l'étendue d'une fonction . Selon les spécifications officielles,
"Si une déclaration de variable se produit à l'intérieur d'une déclaration de fonction, la variable est définie dans la portée locale de cette fonction ..."
Cela signifie que si vous créez une variable à l'aide de var , la portée de cette variable sera la fonction dans laquelle elle a été créée et sera disponible uniquement à l'intérieur de cette fonction ou de toute autre fonction imbriquée.
function getDate () { var date = new Date() return date } getDate() console.log(date)
Ci-dessus, nous avons essayé d'accéder à la variable depuis l'extérieur de la fonction dans laquelle elle a été déclarée. Étant donné que la portée de la variable date est la fonction getDate , elle n'est disponible qu'à l'intérieur de cette fonction ou dans toute autre fonction imbriquée dans getDate (comme indiqué ci-dessous).
function getDate () { var date = new Date() function formatDate () { return date.toDateString().slice(4)
Voyons maintenant un exemple plus avancé. Disons que nous avons un tableau de prix et que nous avons besoin d'une fonction qui accepte ce tableau, ainsi qu'une remise variable, et nous renvoie un nouveau tableau de prix avec des remises. L'objectif final peut ressembler à ceci:
discountPrices([100, 200, 300], .5)
Et l'implémentation pourrait ressembler à ceci:
function discountPrices (prices, discount) { var discounted = [] for (var i = 0; i < prices.length; i++) { var discountedPrice = prices[i] * (1 - discount) var finalPrice = Math.round(discountedPrice * 100) / 100 discounted.push(finalPrice) } return discounted }
Cela semble assez simple, mais qu'est-ce que cela a à voir avec la portée du bloc? Jetez un œil à cette boucle. Les variables déclarées à l'intérieur sont-elles accessibles à l'extérieur? Il s'avère disponible.
function discountPrices (prices, discount) { var discounted = [] for (var i = 0; i < prices.length; i++) { var discountedPrice = prices[i] * (1 - discount) var finalPrice = Math.round(discountedPrice * 100) / 100 discounted.push(finalPrice) } console.log(i)
Si JavaScript est le seul langage de programmation que vous connaissez, vous n'aurez peut-être pas à vous en soucier autant. Cependant, si vous êtes arrivé à JavaScript à partir d'un autre langage de programmation, en particulier un langage de programmation qui bloque la portée, vous êtes probablement un peu inquiet de ce qui se passe ici.
Ce n'est pas cassé, ça marche juste un peu bizarre. Il n'y a vraiment aucune raison d'avoir accès à i , discountPrice et finalPrice en dehors de la boucle for . Cela ne nous fait aucun bien et peut même nous faire du mal dans certaines situations. Cependant, comme les variables sont déclarées à l'aide de var , elles entrent dans le champ d'application de la fonction et vous pouvez y accéder.
Maintenant, nous avons discuté de la déclaration et de l'initialisation des variables, ainsi que de la portée, une autre chose que nous devons traiter avant de plonger dans les différences entre let et const , c'est «augmenter».
"Lift"
Rappelez-vous, il a été dit plus tôt "En Javascript, lors de leur création, les variables sont initialisées avec la valeur non définie". Il s'avère que cela signifie «soulèvement». L'interpréteur JavaScript définit les variables déclarées sur indéfinies lors d'une phase appelée «Création».
Pour une étude plus approfondie de la phase de création, «Augmenter» et les étendues, lisez cet article: «Le guide ultime pour le levage, les étendues et les fermetures en JavaScript» .
Jetons un coup d'œil à l'exemple précédent et voyons comment le «soulèvement» l'affecte.
function discountPrices (prices, discount) { var discounted = undefined var i = undefined var discountedPrice = undefined var finalPrice = undefined discounted = [] for (var i = 0; i < prices.length; i++) { discountedPrice = prices[i] * (1 - discount) finalPrice = Math.round(discountedPrice * 100) / 100 discounted.push(finalPrice) } console.log(i)
Notez que toutes les variables déclarées ont été définies sur undefined . C'est pourquoi si vous essayez d'accéder à l'un d'eux avant qu'il ne soit réellement annoncé, vous obtenez simplement undefined .
function discountPrices (prices, discount) { console.log(discounted)
Maintenant que vous savez tout ce dont vous avez besoin sur var , parlons maintenant du but principal pour lequel nous sommes ici: quelle est la différence entre var , let et const ?
var, let ou const
Pour commencer, comparons var et let . La principale différence entre var et let est que, indépendamment de la portée globale et de la portée de la fonction, vous pouvez définir des variables dans la portée du bloc. Cela signifie que la variable créée avec le mot clé let est disponible à l'intérieur du «bloc» où elle a été créée, ainsi qu'à l'intérieur des blocs imbriqués. Quand j'ai dit «bloquer», je voulais dire quelque chose entouré d'accolades {}, comme une boucle for ou une instruction if .
Et donc, revenons à notre fonction discountPrices pour la dernière fois.
function discountPrices (prices, discount) { var discounted = [] for (var i = 0; i < prices.length; i++) { var discountedPrice = prices[i] * (1 - discount) var finalPrice = Math.round(discountedPrice * 100) / 100 discounted.push(finalPrice) } console.log(i)
Rappelons que nous avons le droit de sortir i , discountPrice et finalPrice en dehors de la boucle for , car ils ont été déclarés en utilisant var et les variables déclarées en utilisant le mot-clé var sont limitées à la portée de la fonction. Mais que se passe-t-il maintenant si nous changeons var pour laisser et essayer d'exécuter notre code?
function discountPrices (prices, discount) { let discounted = [] for (let i = 0; i < prices.length; i++) { let discountedPrice = prices[i] * (1 - discount) let finalPrice = Math.round(discountedPrice * 100) / 100 discounted.push(finalPrice) } console.log(i)
Nous avons eu ReferenceError: i n'est pas défini . Ce qui nous dit que la variable déclarée avec let est limitée à la portée du bloc, pas à la fonction. Essayez d'appeler i (ou discountedPrice ou finalPrice ) en dehors du «bloc» où ils ont été déclarés, et cela nous donnera une erreur d'appel, comme nous venons de le voir.
var VS let var: let:
Les différences suivantes sont liées au «soulèvement». Nous avons dit plus tôt que la définition de «uplift» est: «L'interpréteur JavaScript définit les variables déclarées sur indéfinies pendant la phase appelée« Création ».« Nous l'avons également vu en action en appelant la variable avant qu'elle ne soit déclarée (vous avez obtenu undefined ).
function discountPrices (prices, discount) { console.log(discounted)
Je ne me souviens pas d'un cas d'utilisation unique lorsque vous souhaitez vraiment accéder à une variable avant de la déclarer. Il semble qu'obtenir une ReferenceError serait mieux que de ne pas être défini .
En fait, c'est ce que laisse faire. Si vous essayez d'accéder à une variable avant sa déclaration avec let , au lieu d'être indéfini (comme lors de la déclaration avec var ), vous obtiendrez une ReferenceError .
function discountPrices (prices, discount) { console.log(discounted)
var VS let var: undefined . let: ReferenceError .
let or const
Vous comprenez maintenant la différence entre var et let, qu'en est-il de const? Il s'avère que const est presque identique à let. Cependant, il y a une différence: si vous avez attribué une valeur à l'aide de const, vous ne pouvez pas la changer en une autre.
let name = 'Tyler' const handle = 'tylermcginnis' name = 'Tyler McGinnis'
La conclusion de ce qui précède est que les variables déclarées avec let peuvent être écrasées, et les variables déclarées avec const ne le peuvent pas.
Génial, maintenant que vous voulez que votre variable soit immuable, vous pouvez la déclarer avec const . Ou pas vraiment. Ce n'est pas parce qu'une variable a été déclarée à l'aide de const qu'elle est immuable, cela signifie qu'elle ne peut pas être écrasée. Voici un bon exemple.
const person = { name: 'Kim Kardashian' } person.name = 'Kim Kardashian West'
Notez que la modification de la propriété d'un objet n'est pas un remplacement, donc même si l'objet est déclaré à l'aide de const , cela ne signifie pas que vous ne pouvez modifier aucune de ses propriétés. Cela signifie seulement que vous ne pouvez pas remplacer cet objet.
Maintenant, la question la plus importante à laquelle on n'a pas encore répondu: que dois-je utiliser var , let ou const ? L'opinion la plus populaire, à laquelle j'adhère, est de toujours utiliser const jusqu'à ce que vous sachiez si la variable va changer. La raison en est que l'utilisation de const vous indique clairement à vous-même et aux futurs développeurs qui devraient lire votre code que cette variable ne doit pas être modifiée. Si vous devez le changer (par exemple dans une boucle for ), utilisez simplement let .
Il ne reste pas beaucoup de cas entre les variables qui changent et les variables qui ne changent pas. Cela signifie que vous n'aurez plus jamais à utiliser var .
Maintenant, l'opinion impopulaire, bien qu'elle ait encore une justification, est que vous ne devriez jamais utiliser const , bien que vous essayiez de montrer que cette variable est immuable, comme nous l'avons vu ci-dessus, ce n'est pas entièrement vrai. Les développeurs qui partagent cette opinion utilisent toujours let tant qu'il n'y a pas de variables qui sont réellement des constantes, telles que _LOCATION_ = ....
Faisons un résumé de ce qui précède, var est limité par la portée de la fonction et si vous essayez d'accéder à une telle variable avant sa déclaration, vous obtiendrez undefined . const et let sont limités par la portée du bloc, et si vous essayez d'accéder à ces variables avant de les déclarer, vous obtenez une ReferenceError . Et la différence entre const et let est que la valeur qui a été affectée à const ne peut pas être écrasée, contrairement à let .
var VS let VS const var: undefined . let: ReferenceError . const: ReferenceError .
Cet article a été initialement publié sur tylermcginnis.com dans le cadre du cours JavaScript moderne .
Merci d'avoir lu cette traduction, j'espère que vous avez rencontré quelque chose de nouveau et d'utile pour vous. Je serai heureux de voir les commentaires!