Maison > interface Web > js tutoriel > Différences entre `var`, `let` et `const` en JavaScript : une explication simple

Différences entre `var`, `let` et `const` en JavaScript : une explication simple

WBOY
Libérer: 2024-09-03 17:16:00
original
1007 Les gens l'ont consulté

Imaginez que vous organisez votre maison. Chaque type de variable en JavaScript – var, let et const – fonctionne comme différents types d'espaces dans lesquels vous pouvez stocker vos éléments. Voyons comment cela s'intègre aux objets du quotidien et aux exemples de code pour que ce soit encore plus clair !

1. var – Le tiroir en désordre

Pensez au var comme à ce tiroir de cuisine en désordre rempli de choses différentes, un peu désorganisé. Vous pouvez y mettre n'importe quoi et il vous est toujours accessible, peu importe où vous êtes dans la cuisine.

Comment ça marche :

  • Accessible partout dans la cuisine : peu importe que vous soyez près de l'évier ou de la cuisinière ; vous pouvez toujours ouvrir ce tiroir et récupérer ce qu'il contient.
  • Désordre avec vos affaires : Si vous mettez quelque chose dans le tiroir et que vous essayez ensuite de mettre autre chose avec le même nom, tout se mélange et fonctionne, mais cela peut prêter à confusion.
// Example of var
var item = "Mug";
console.log(item); // Prints "Mug"

var item = "Plate"; // Allows redeclaration
console.log(item); // Now prints "Plate"
Copier après la connexion
  • Exemple concret : Vous mettez une paire de chaussettes dans le tiroir, mais vous oubliez ensuite et vous mettez une autre paire du même type. Les chaussettes se mélangent et on ne peut pas dire quelle paire est laquelle.

Differences Between `var`, `let`, and `const` in JavaScript: A Simple Explanation

2. let – La boîte à outils organisée

Maintenant, considérez let comme une boîte à outils bien organisée. Les outils sont là, mais vous ne pouvez y accéder que lorsque vous ouvrez la boîte à outils. Ils sont stockés à un endroit précis, et il faut ouvrir la bonne boîte à outils pour les retrouver.

Comment ça marche :

  • Accessible uniquement dans la boîte à outils : les outils restent soigneusement dans la boîte à outils et vous ne pouvez les utiliser que lorsque vous l'ouvrez.
  • Meilleure organisation : Si vous essayez de mettre un tournevis puis un autre tournevis du même type dans la même boîte à outils, cela ne vous permettra pas, car chaque outil a sa place.
// Example of let
let tool = "Screwdriver";
console.log(tool); // Prints "Screwdriver"

tool = "Hammer"; // Can reassign the value
console.log(tool); // Now prints "Hammer"

// let tool = "Hammer"; // This would cause an error, as you cannot redeclare
Copier après la connexion
  • Exemple concret : Si vous assemblez des meubles, le tournevis n'apparaît que lorsque vous ouvrez la boîte à outils, et il est remis en place lorsque vous la fermez. Vous ne pouvez pas accéder à l'outil sans ouvrir au préalable la boîte à outils.

Differences Between `var`, `let`, and `const` in JavaScript: A Simple Explanation

3. const – Le coffre-fort verrouillé

Considérez const comme un coffre-fort. Une fois que vous avez mis quelque chose à l’intérieur, il reste verrouillé et ne peut plus être modifié. Vous pouvez réorganiser les éléments à l'intérieur du coffre-fort, comme réorganiser les pièces de monnaie, mais le coffre-fort lui-même reste verrouillé avec ce que vous y avez initialement mis.

Comment ça marche :

  • Verrouillé pour toujours : Lorsque vous mettez quelque chose dans le coffre-fort, comme des trésors, vous pouvez réorganiser les pièces à l'intérieur, mais vous ne pouvez pas changer le fait que vous mettez des pièces dans le coffre-fort.
  • Protection contre les changements : Si vous essayez de remplacer les trésors par autre chose, le coffre-fort ne le permettra tout simplement pas.
// Example of const
const safe = "Jewels";
console.log(safe); // Prints "Jewels"

// safe = "Money"; // This would cause an error, as you cannot reassign const

const coins = [1, 2, 3];
coins.push(4); // This is allowed
console.log(coins); // Prints [1, 2, 3, 4]
Copier après la connexion
  • Exemple concret : Imaginez que vous mettez des bijoux dans le coffre-fort. Vous pouvez réorganiser les bijoux, mais vous ne pouvez pas changer le fait que le but du coffre-fort est de contenir ces bijoux.

Differences Between `var`, `let`, and `const` in JavaScript: A Simple Explanation

Comparer tout ensemble

  • var est comme ce tiroir en désordre : on peut y mettre n'importe quoi, et il est toujours accessible, mais attention, les choses peuvent facilement se mélanger !
    • Exemple : Déclarez la même variable plusieurs fois sans erreur.
  • let est comme une boîte à outils organisée : les outils ne sont accessibles que lorsque vous ouvrez la boîte à outils, ce qui permet de tout garder plus organisé.
    • Exemple : les variables let peuvent être réaffectées mais pas redéclarées.
  • const est comme un coffre-fort verrouillé : une fois que vous y stockez quelque chose, il ne peut pas être remplacé, mais vous pouvez en modifier le contenu.
    • Exemple : vous ne pouvez pas modifier une variable const, mais vous pouvez modifier les éléments d'un tableau qui y est stocké.

Conclusion

Maintenant, chaque fois que vous codez, considérez ces variables comme différentes façons d'organiser votre maison. Utilisez let pour les situations où les choses peuvent changer et const pour les valeurs qui doivent être protégées. Évitez var lorsque cela est possible – c'est utile mais peut prêter à confusion, comme un tiroir en désordre !

Differences Between `var`, `let`, and `const` in JavaScript: A Simple Explanation

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

source:dev.to
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal