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

Quelle est exactement la fonction du varmot - clé 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 la portée mondiale, il n'y a pas beaucoup de différence. Lisez la réponse de Kangax pour l'explication

Si vous êtes dans une fonction, alors varcréera une variable locale, "no var" recherchera la chaîne de portée jusqu'à ce qu'il trouve la variable ou atteigne la portée globale (à quel point il 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 de mission, vous devez utiliser var:

var x; // Declare x

Il y a une différence .

var x = 1 déclare une variable x dans la portée actuelle (aka contexte d'exécution). Si la déclaration apparaît dans une fonction - une variable locale est déclarée; s'il est de portée globale - une variable globale est déclarée.

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

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 objet variable) et que chaque propriété en Javascript (enfin, ECMAScript) a certains indicateurs qui décrivent leurs propriétés - ReadOnly, DontEnum et DontDelete.

Puisque la déclaration de variable crée une propriété avec l'indicateur DontDelete, la différence entre var x = 1et x = 1(lorsqu'elle est exécutée dans la portée globale) est que la première - déclaration de variable - crée la propriété DontDelete'able, et pas la dernière. Par conséquent, la propriété créée via cette affectation implicite peut ensuite être supprimée de l'objet global, et la première - celle créée via la déclaration de variable - ne peut pas être supprimée.

Mais ce n'est qu'une théorie bien sûr, et dans la pratique, il y a encore plus de différences entre les deux , en raison de divers bogues dans les implémentations (comme ceux d'IE).

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

[Mise à jour 2010/12/16]

Dans ES5 (ECMAScript 5; 5e édition du langage récemment normalisée), il existe un soi-disant «mode strict» - un mode de langue opt-in, qui modifie légèrement le comportement des affectations non déclarées. En mode strict, l'affectation à un identifiant non déclaré est une ReferenceError . La raison en était de capturer des affectations accidentelles, empêchant la création de propriétés globales indésirables. Certains des navigateurs les plus récents ont déjà commencé à prendre en charge le mode strict. Voir, par exemple, ma table compat .

Dire que c'est la différence entre « local et global » n'est pas tout à fait exact.

Il serait peut-être préférable de la considérer comme la différence entre « local et le plus proche ». Le plus proche peut certainement être mondial, 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 vardéclare une variable dans la portée actuelle , il n'y a aucune différence entre déclarer à l' var intérieur de la fenêtre et ne pas le déclarer du tout.

La différence survient lorsque vous n'êtes pas directement à l'intérieur de la fenêtre, par exemple à l'intérieur d'une fonction ou à l'intérieur d'un bloc.

L'utilisation varvous permet de masquer des variables externes portant le même nom. De cette façon, vous pouvez simuler une variable "privée", mais c'est un autre sujet.

Une règle d'or est de toujours utiliser var, car sinon vous courez le risque d'introduire des bugs subtils.

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

• vardéclare une variable dans la portée actuelle
• La portée mondiale est window
• Ne pas utiliser de vardéclarations implicites vardans la portée globale (fenêtre)
• Déclarer une variable dans la portée globale (fenêtre) en utilisant varrevient à l'omettre.
• Déclarer une variable dans des étendues différentes de window using var n'est pas la même chose que déclarer une variable sansvar
• Déclarez toujours varexplicitement car c'est une bonne pratique

Utilisez toujours le varmot - clé pour déclarer des variables. Pourquoi? Une bonne pratique de codage devrait être une raison suffisante en soi, mais l'omettre signifie qu'elle est déclarée dans la portée globale (une variable comme celle-ci est appelée globale "implicite"). Douglas Crockford recommande de ne jamais utiliser de globaux implicites , et selon les directives de codage JavaScript d'Apple :

Toute variable créée sans le var mot clé est créée au niveau global et n'est pas récupérée lorsque la fonction retourne (car elle ne sort pas du domaine), ce qui présente la possibilité d'une fuite de mémoire.

Voici un assez bon exemple de la façon dont vous pouvez éviter de déclarer des variables locales avec var:

<script>
one();

function one()
{
    for (i = 0;i < 10;i++)
    {
        two();
        alert(i);
    }
}

function two()
{
    i = 1;
}
</script>

( iest réinitialisé à chaque itération de la boucle, car il n'est pas déclaré localement dans la forboucle mais globalement) entraînant finalement une boucle infinie

Je dirais qu'il vaut mieux l'utiliser vardans la plupart des situations.

Les variables locales sont toujours plus rapides que les variables de portée globale.

Si vous n'utilisez pas varpour déclarer une variable, la variable aura une portée globale.

Pour plus d'informations, vous pouvez rechercher "chaîne de portée JavaScript" dans Google.

N'utilisez pas var!

varétait la manière pré-ES6 de déclarer une variable. Nous sommes maintenant dans le futur , et vous devriez coder comme tel.

Utiliser constetlet

constdoit être utilisé dans 95% des cas. Il fait en sorte que la référence de variable ne puisse pas changer, donc les propriétés de tableau, d'objet et de nœud DOM peuvent changer et devraient probablement l'être const.

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

Les deux ont une portée au niveau du bloc, comme prévu dans la plupart des autres langues.

une autre différence par exemple

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

tandis que

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

L'utilisation varest toujours une bonne idée pour empêcher les variables d'encombrer la portée globale et les variables d'entrer en conflit les unes avec les autres, provoquant un écrasement indésirable.

Sans var- variable globale.

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

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

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('<br/>');
document.write('<br/>');
document.write(foo);       //prints 5
document.write(bar);       //prints 100
document.write(fooba);     //prints 3

@Chris S a donné un bel exemple montrant la différence pratique (et le danger) entre varet non var. En voici un autre, je trouve celui-ci particulièrement dangereux car la différence n'est visible que dans un environnement asynchrone et peut donc facilement passer pendant les tests.

Comme vous vous en doutez, les extraits de code suivants ["text"]:

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

console.log(var_fun())

Il en va de même pour l'extrait de code suivant (notez ce qui manque letavant array):

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

console.log(var_fun())

L'exécution asynchrone de la manipulation des données produit toujours le même résultat avec un seul exécuteur:

function var_fun() {
  array = [];
  return new Promise(resolve => resolve()).then(() => {
    array.push('text')
    return array
  })
}

var_fun().then(result => {console.log(result)})

Mais se comporte différemment avec plusieurs:

function var_fun() {
  array = [];
  return new Promise(resolve => resolve()).then(() => {
    array.push('text')
    return array
  })
}

[1,2,3].forEach(i => {
  var_fun().then(result => {console.log(result)})
})

En utilisant let cependant:

function var_fun() {
  let array = [];
  return new Promise(resolve => resolve()).then(() => {
    array.push('text')
    return array
  })
}

[1,2,3].forEach(i => {
  var_fun().then(result => {console.log(result)})
})

Comme quelqu'un essaie d'apprendre cela, c'est ainsi 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: faux, faux, vrai, vrai

Parce qu'il voit les variables dans la fonction comme distinctes de celles en dehors d'elle, d'où le terme variable locale et c'est parce que nous avons utilisé var dans l'affectation. Si vous supprimez la var dans la fonction, elle se lit maintenant comme suit:

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);

La sortie est fausse, fausse, fausse, fausse

En effet, plutôt que de créer une nouvelle variable dans la portée 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 sur 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 \n a, b defined but c, d not defined yet: \n a:" + a + "\n b:" + 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: \n a:" + a + "\n b:" + b + "\n c:" + c + "\n d:" + d);

    a = a + 5;
    b = b + 5;
    c = c + 5;
    d = d + 5;

    alert("After added values inside the 1. function: \n a:" + a + "\n b:" + b + "\n c:" + c + "\n d:" + 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: \n a:" + a + "\n b:" + b + "\n c:" + c + "\n d:" + d);

    a = a + 5;
    b = b + 5;
    c = c + 5;
    d = d + 5;

    alert("After added values inside the 2. function: \n a:" + a + "\n b:" + b + "\n c:" + c + "\n d:" + d);
};

testVar2();

alert("Now outside of all functions... \n \n Final Values: \n a:" + a + "\n b:" + b + "\n c:" + 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. Peu importe déclaré avec ou sans var (comme a, b) s'ils obtiennent leur valeur en dehors de la fonction, ils conserveront leur valeur et toutes les autres valeurs ajoutées à l'intérieur de diverses fonctions via le script seront préservées.
2. Si la variable est déclarée sans var à l'intérieur d'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 obtenu 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 à l'intérieur d'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.

Dans un code, si vous utilisez une variable sans utiliser var, alors ce qui se passe, c'est que var var_name est automatiquement placé dans la portée 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 i.e. gives b global scope or
    uses already defined global variable b */
}

Outre le problème des portées, certaines personnes mentionnent également le levage , mais personne n'a donné d'exemple. En voici une pour la portée mondiale:

console.log(noErrorCase);
var noErrorCase = "you will reach that point";

console.log(runTimeError);
runTimeError = "you won't reach that point";

Sans utiliser "var", les variables ne peuvent être définies que lorsqu'elles définissent une valeur. Par exemple:

my_var;

ne peut pas fonctionner dans une portée globale ou toute autre portée . Il doit avoir une valeur comme:

my_var = "value";

D'un autre côté, vous pouvez définir un vaiable comme;

var my_var;

Sa valeur est undefined(Sa valeur n'est pas nullet elle n'est pas égale à nullintéressante.).

Vous devez utiliser le mot-clé var, sauf si vous avez l'intention d'attacher la variable à l'objet window dans le navigateur. Voici un lien qui explique la portée et la différence entre la portée glocale et la portée locale avec et sans mot-clé var.

Lorsque des variables sont définies sans utiliser le mot clé var, ce à quoi cela ressemble est 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 / étendue que celui de l'affectation. Lorsque l'interpréteur s'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 un interpréteur javascript et cela s'appelle le levage)

Vous pouvez également regarder le levage en javascript