Quel est le but du mot-clé var et quand dois-je l’utiliser (ou l’omettre)?

REMARQUE : Cette question a été posée du sharepoint vue d’ECMAScript version 3 ou 5. Les réponses peuvent devenir obsolètes avec l’introduction de nouvelles fonctionnalités dans la version d’ECMAScript 6.

Quelle est la fonction du mot-clé var en JavaScript et quelle est la différence entre

 var someNumber = 2; var someFunction = function() { doSomething; } var someObject = { } var someObject.someProperty = 5; 

et

 someNumber = 2; someFunction = function() { doSomething; } someObject = { } someObject.someProperty = 5; 

?

Quand utiliseriez-vous l’un ou l’autre et pourquoi / que fait-il?

Si vous êtes dans le monde entier, il n’y a pas beaucoup de différence. Lisez la réponse de Kangax pour une explication

Si vous êtes dans une fonction, var créera une variable locale, “no var” recherchera la chaîne de scope jusqu’à ce qu’elle trouve la variable ou atteigne la scope globale (à quel point elle la créera):

 // These are both globals var foo = 1; bar = 2; function() { var foo = 1; // Local bar = 2; // Global // Execute an anonymous function (function() { var wibble = 1; // Local foo = 2; // Inherits from scope above (creating a closure) moo = 3; // Global }()) } 

Si vous ne faites pas d’affectation, vous devez utiliser var :

 var x; // Declare x 

Il y a une différence .

var x = 1 déclare la variable x dans la scope actuelle (contexte d’exécution aka). Si la déclaration apparaît dans une fonction – une variable locale est déclarée; si c’est dans la scope globale – une variable globale est déclarée.

x = 1 , d’autre part, n’est qu’une affectation de propriété. Il essaie d’abord de résoudre la chaîne x fonction de la scope. S’il le trouve n’importe où dans cette chaîne de scope, il effectue une affectation; S’il ne trouve pas x , alors seulement crée une propriété x sur un object global (qui est un object de niveau supérieur dans une chaîne de scope).

Maintenant, notez qu’il ne déclare pas de variable globale, il crée une propriété globale.

La différence entre les deux est subtile et peut être déroutante à moins que vous ne compreniez que les déclarations de variables créent également des propriétés (uniquement sur un object variable) et que toutes les propriétés en javascript (ECMAScript) décrivent leurs propriétés – ReadOnly, DontEnum et DontDelete.

Étant donné que la déclaration de variable crée une propriété avec l’indicateur DontDelete, la différence entre var x = 1 et x = 1 (lorsqu’elle est exécutée dans une scope globale) est que l’ancienne – déclaration de variable – crée la propriété DontDelete’able. . En conséquence, la propriété créée via cette affectation implicite peut alors être supprimée de l’object global, et la précédente, celle créée via la déclaration de variable, ne peut pas être supprimée.

Mais il ne s’agit que de théorie, et dans la pratique, il y a encore plus de différences entre les deux , en raison de divers bogues dans les implémentations (telles que celles provenant d’IE).

J’espère que tout cela a du sens:)


[Mise à jour 2010/12/16]

Dans ES5 (ECMAScript 5; 5ème édition récemment standardisée du langage), il existe un mode dit “ssortingct” – un mode de langage opt-in qui modifie légèrement le comportement des assignations non déclarées. En mode ssortingct, l’atsortingbution à un identificateur non déclaré est une référence . La raison à cela était d’attraper des assignations accidentelles, empêchant la création de propriétés globales indésirables. Certains des nouveaux navigateurs ont déjà commencé à prendre en charge le mode ssortingct. Voir, par exemple, ma table compat .

Dire que c’est la différence entre ” local et global ” n’est pas tout à fait exact.

Il vaut peut-être mieux y voir la différence entre ” local et le plus proche “. Le plus proche peut sûrement être global, mais ce ne sera pas toujours le cas.

 /* global scope */ var local = true; var global = true; function outer() { /* local scope */ var local = true; var global = false; /* nearest scope = outer */ local = !global; function inner() { /* nearest scope = outer */ local = false; global = false; /* nearest scope = undefined */ /* defaults to defining a global */ public = global; } } 

Lorsque Javascript est exécuté dans un navigateur, tout votre code est entouré d’une instruction with, comme ceci:

 with (window) { //Your code } 

Plus d’infos sur with – MDN

Puisque var déclare une variable dans la scope actuelle , il n’y a pas de différence entre déclarer la variable var dans la fenêtre et ne pas la déclarer du tout.

La différence vient quand vous n’êtes pas directement dans la fenêtre, par exemple dans une fonction ou dans un bloc.

Utiliser var permet de masquer les variables externes qui portent le même nom. De cette façon, vous pouvez simuler une variable “privée”, mais c’est un autre sujet.

Une règle de base est de toujours utiliser var , car sinon vous risquez d’introduire des bogues subtils.

EDIT: Après les critiques que j’ai reçues, je voudrais souligner ce qui suit:

  • var déclare une variable dans la scope actuelle
  • La scope globale est la window
  • Ne pas utiliser var déclare implicitement var dans la scope globale (window)
  • Déclarer une variable dans la scope globale (fenêtre) à l’aide de var revient à l’omettre.
  • Déclarer une variable dans des étendues différentes de Window en utilisant var n’est pas la même chose que déclarer une variable sans var
  • Toujours déclarer var explicitement parce que c’est une bonne pratique

Vous devez toujours utiliser le mot-clé var pour déclarer des variables. Pourquoi? Une bonne pratique de codage devrait être une raison en soi, mais déclarer une variable sans le mot-clé var signifie qu’elle est déclarée dans la scope globale (une variable comme celle-ci est appelée un “implicite” global). Douglas Crockford recommande de ne jamais utiliser de globaux implicites et, conformément aux directives de codage JavaScript d’Apple :

Toute variable créée sans le mot-clé var est créée au niveau global et n’est pas collectée lorsque la fonction est renvoyée (car elle ne sort pas du cadre), ce qui présente une possibilité de fuite de mémoire.

Donc, en bref, déclarez toujours les variables en utilisant le mot-clé var .

Voici un bon exemple de la façon dont vous pouvez être empêché de ne pas déclarer de variables locales avec var :

  

( i réinitialisé à chaque itération de la boucle, car elle n'est pas déclarée localement dans la boucle for mais globalement), ce qui aboutit à une boucle infinie

Je dirais qu’il vaut mieux utiliser var dans la plupart des situations.

Les variables locales sont toujours plus rapides que les variables globales.

Si vous n’utilisez pas var pour déclarer une variable, celle-ci aura une scope globale.

Pour plus d’informations, vous pouvez rechercher “scope chaîne JavaScript” dans Google.

une autre différence, par exemple

 var a = a || [] ; // works 

tandis que

 a = a || [] ; // a is undefined error. 

L’utilisation de var est toujours une bonne idée d’empêcher les variables d’encombrer la scope globale et d’empêcher les variables d’entrer en conflit, entraînant un écrasement indésirable.

Sans var – variable globale.

Fortement recommandé d’utiliser TOUJOURS l’ instruction var , car la variable globale init dans le contexte local – est mauvaise. Mais si vous avez besoin de ce sale tour, vous devez écrire un commentaire au début de la page:

 /* global: varname1, varname2... */ 

Ne pas utiliser var !

var était la manière pré-ES6 de déclarer une variable. Nous sums maintenant dans le futur et vous devriez coder en tant que tel.

Utilisez const et let

const devrait être utilisé dans 95% des cas. Il fait en sorte que la référence de la variable ne puisse pas changer, donc les propriétés du tableau, de l’object et du noeud DOM peuvent changer et devraient être const .

let doit être utilisé pour toute variable devant être réaffectée. Cela inclut dans une boucle for. Si vous écrivez jamais varName = au-delà de l’initialisation, utilisez let .

Les deux ont une scope de niveau bloc, comme prévu dans la plupart des autres langues.

Voici un exemple de code que j’ai écrit pour que vous compreniez ce concept:

 var foo = 5; bar = 2; fooba = 3; // Execute an anonymous function (function() { bar = 100; //overwrites global scope bar var foo = 4; //a new foo variable is created in this' function's scope var fooba = 900; //same as above document.write(foo); //prints 4 document.write(bar); //prints 100 document.write(fooba); //prints 900 })(); document.write('
'); document.write('
'); document.write(foo); //prints 5 document.write(bar); //prints 100 document.write(fooba); //prints 3

Dans un code, si vous utilisez une variable sans utiliser var, alors ce qui se passe est que var var_name est placé automatiquement dans la scope globale, par exemple:

 someFunction() { var a = some_value; /*a has local scope and it cannot be accessed when this function is not active*/ b = a; /*here it places "var b" at top of script ie gives b global scope or uses already defined global variable b */ } 

Sans utiliser “var”, les variables ne peuvent définir que lorsqu’une valeur est définie. Par exemple:

 my_var; 

ne peut pas fonctionner à l’ échelle mondiale ou dans tout autre domaine . Il devrait être avec valeur comme:

 my_var = "value"; 

D’autre part, vous pouvez définir une valeur appréciable;

 var my_var; 

Sa valeur est undefined (sa valeur n’est pas null et elle n’est pas null intéressante).

Comme quelqu’un essaie d’apprendre cela, c’est comme ça que je le vois. Les exemples ci-dessus étaient peut-être un peu trop compliqués pour un débutant.

Si vous exécutez ce code:

 var local = true; var global = true; function test(){ var local = false; var global = false; console.log(local) console.log(global) } test(); console.log(local); console.log(global); 

La sortie se lira comme suit: false, false, true, true

Parce qu’il voit les variables de la fonction comme séparées de celles-ci, d’où le terme variable locale, car nous avons utilisé var dans l’affectation. Si vous enlevez la var dans la fonction, elle se lit comme ceci:

 var local = true; var global = true; function test(){ local = false; global = false; console.log(local) console.log(global) } test(); console.log(local); console.log(global); 

Le résultat est faux, faux, faux, faux

En effet, plutôt que de créer une nouvelle variable dans la scope ou la fonction locale, elle utilise simplement les variables globales et les réaffecte à false.

Je vois que les gens sont confus lorsqu’ils déclarent des variables avec ou sans var et à l’intérieur ou à l’extérieur de la fonction. Voici un exemple détaillé qui vous guidera à travers ces étapes:

Voir le script ci-dessous en action ici à jsfiddle

 a = 1;// Defined outside the function without var var b = 1;// Defined outside the function with var alert("Starting outside of all functions... \n \na, b defined but c, d not defined yet: \na:" + a + "\nb:" + b + "\n \n (If I try to show the value of the undefined c or d, console.log would throw 'Uncaught ReferenceError: c is not defined' error and script would stop running!)"); function testVar1(){ c = 1;// Defined inside the function without var var d = 1;// Defined inside the function with var alert("Now inside the 1. function: \na:" + a + "\nb:" + b + "\nc:" + c + "\nd:" + d); a = a + 5; b = b + 5; c = c + 5; d = d + 5; alert("After added values inside the 1. function: \na:" + a + "\nb:" + b + "\nc:" + c + "\nd:" + d); }; testVar1(); alert("Run the 1. function again..."); testVar1(); function testVar2(){ var d = 1;// Defined inside the function with var alert("Now inside the 2. function: \na:" + a + "\nb:" + b + "\nc:" + c + "\nd:" + d); a = a + 5; b = b + 5; c = c + 5; d = d + 5; alert("After added values inside the 2. function: \na:" + a + "\nb:" + b + "\nc:" + c + "\nd:" + d); }; testVar2(); alert("Now outside of all functions... \n \n Final Values: \na:" + a + "\nb:" + b + "\nc:" + c + "\n You will not be able to see d here because then the value is requested, console.log would throw error 'Uncaught ReferenceError: d is not defined' and script would stop. \n "); alert("**************\n Conclusion \n ************** \n \n 1. No matter declared with or without var (like a, b) if they get their value outside the function, they will preserve their value and also any other values that are added inside various functions through the script are preserved.\n 2. If the variable is declared without var inside a function (like c), it will act like the previous rule, it will preserve its value across all functions from now on. Either it got its first value in function testVar1() it still preserves the value and get additional value in function testVar2() \n 3. If the variable is declared with var inside a function only (like d in testVar1 or testVar2) it will will be undefined whenever the function ends. So it will be temporary variable in a function."); alert("Now check console.log for the error when value d is requested next:"); alert(d); 

Conclusion

  1. Aucune chose déclarée avec ou sans var (comme a, b) si elles obtiennent leur valeur en dehors de la fonction, elles conserveront leur valeur et toutes les autres valeurs ajoutées à l’intérieur de diverses fonctions via le script seront conservées.
  2. Si la variable est déclarée sans var dans une fonction (comme c), elle agira comme la règle précédente, elle conservera désormais sa valeur dans toutes les fonctions. Soit il a eu sa première valeur dans la fonction testVar1 (), il conserve toujours la valeur et obtient une valeur supplémentaire dans la fonction testVar2 ()
  3. Si la variable est déclarée avec var dans une fonction uniquement (comme d dans testVar1 ou testVar2), elle sera indéfinie à la fin de la fonction. Ce sera donc une variable temporaire dans une fonction.

Vous devez utiliser le mot-clé var à moins que vous n’ayez l’intention d’attacher la variable à l’object window dans le navigateur. Voici un lien qui explique la scope et la différence entre la scope glocale et la scope locale avec le mot-clé wihtout var.

Lorsque les variables sont définies sans utiliser le mot-clé var, il s’agit d’une simple opération «d’affectation».

Lorsque la valeur est affectée à une variable en javascript, l’interpréteur essaie d’abord de trouver la «déclaration de variable» dans le même contexte / champ d’application que celui de l’affectation. Lorsque l’interpréteur exécute dummyVariable = 20 , il recherche la déclaration de dummyVariable au début de la fonction. (Puisque toutes les déclarations de variables sont déplacées au début du contexte par l’interpréteur JavaScript et que cela s’appelle le levage)

Vous pouvez également vouloir regarder le levage en javascript

@Chris S a donné un bel exemple illustrant la différence pratique (et le danger) entre var et no var . En voici une autre, je trouve celle-ci particulièrement dangereuse car la différence n’est visible que dans un environnement asynchrone, de sorte qu’elle peut facilement passer au travers des tests.

Comme vous vous en doutez, les sorties de code suivantes ["text"] :

 function var_fun() { let array = [] array.push('text') return array } console.log(var_fun())