NOTA : questa domanda è stata posta dal punto di vista di ECMAScript versione 3 o 5. Le risposte potrebbero diventare obsolete con l'introduzione di nuove funzionalità nella versione di ECMAScript 6.

Qual è esattamente la funzione della varparola chiave in JavaScript e qual è la differenza tra

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

e

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

?

Quando useresti uno dei due, e perché / cosa fa?

Se sei nell'ambito globale, allora non c'è molta differenza. Leggi la risposta di Kangax per una spiegazione

Se si è in una funzione, varverrà creata una variabile locale, "no var" cercherà la catena dell'ambito fino a quando non trova la variabile o raggiunge l'ambito globale (a quel punto la creerà):

// 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
    }())
}

Se non stai svolgendo un compito, devi utilizzare var:

var x; // Declare x

C'è una differenza .

var x = 1 dichiara variabile x nell'ambito corrente (aka contesto di esecuzione). Se la dichiarazione appare in una funzione - viene dichiarata una variabile locale; se è nell'ambito globale, viene dichiarata una variabile globale.

x = 1d'altra parte, è semplicemente un'assegnazione di proprietà. Prima prova a risolvere la xcatena dell'ambito. Se lo trova ovunque in quella catena di portata, esegue l'assegnazione; se non lo trova x, solo allora crea xproprietà su un oggetto globale (che è un oggetto di livello superiore in una catena di ambito).

Ora, nota che non dichiara una variabile globale, crea una proprietà globale.

La differenza tra i due è sottile e potrebbe essere fonte di confusione a meno che non si capisca che le dichiarazioni di variabili creano anche proprietà (solo su un oggetto variabile) e che ogni proprietà in Javascript (bene, ECMAScript) ha alcuni flag che descrivono le loro proprietà - ReadOnly, DontEnum e DontDelete.

Poiché la dichiarazione di variabile crea proprietà con il flag DontDelete, la differenza tra var x = 1e x = 1(se eseguita in ambito globale) è che la prima - la dichiarazione di variabile - crea la proprietà DontDelete e quest'ultima no. Di conseguenza, la proprietà creata tramite questa assegnazione implicita può quindi essere eliminata dall'oggetto globale e la prima, quella creata tramite una dichiarazione variabile, non può essere eliminata.

Ma questa è ovviamente solo teoria, e in pratica ci sono ancora più differenze tra i due , a causa di vari bug nelle implementazioni (come quelli di IE).

Spero che tutto abbia un senso:)

[Aggiornamento 2010/12/16]

In ES5 (ECMAScript 5, recentemente standardizzato, 5a edizione della lingua) c'è una cosiddetta "modalità rigorosa" - una modalità di lingua opt-in, che modifica leggermente il comportamento delle assegnazioni non dichiarate. In modalità rigorosa, l'assegnazione a un identificatore non dichiarato è un ReferenceError . La logica di ciò era catturare incarichi accidentali, impedendo la creazione di proprietà globali indesiderate. Alcuni dei browser più recenti hanno già avviato il supporto per la modalità rigorosa. Vedi, ad esempio, la mia tabella di compatibilità .

Dire che è la differenza tra " locale e globale " non è del tutto esatto.

Potrebbe essere meglio pensarlo come la differenza tra " locale e più vicino ". Il più vicino può sicuramente essere globale, ma non sarà sempre così.

/* 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;
    }
}

Quando Javascript viene eseguito in un browser, tutto il codice è circondato da un'istruzione with, in questo modo:

with (window) {
    //Your code
}

Maggiori informazioni su with- MDN

Poiché vardichiara una variabile nell'ambito corrente , non vi è alcuna differenza tra dichiarare var all'interno della finestra e non dichiararla affatto.

La differenza arriva quando non sei direttamente all'interno della finestra, ad esempio all'interno di una funzione o all'interno di un blocco.

L'utilizzo varconsente di nascondere le variabili esterne che hanno lo stesso nome. In questo modo puoi simulare una variabile "privata", ma questo è un altro argomento.

Una regola empirica è quella di utilizzare sempre var, perché altrimenti si corre il rischio di introdurre bug sottili.

EDIT: dopo le critiche che ho ricevuto, vorrei sottolineare quanto segue:

• vardichiara una variabile nell'ambito corrente
• Lo scopo globale è window
• Non usare vardichiara implicitamente varnell'ambito globale (finestra)
• Dichiarare una variabile nell'ambito globale (finestra) usando varequivale a ometterla.
• Dichiarare una variabile in ambiti diversi dall'uso di window var non è la stessa cosa di dichiarare una variabile senzavar
• Dichiarare sempre varesplicitamente perché è una buona pratica

Usa sempre la varparola chiave per dichiarare le variabili. Perché? Una buona pratica di codifica dovrebbe essere una ragione sufficiente in sé, ma ometterla significa che è dichiarata nell'ambito globale (una variabile come questa è chiamata "implicita" globale). Douglas Crockford consiglia di non utilizzare mai globalmente impliciti e secondo le Linee guida per la codifica JavaScript di Apple :

Qualsiasi variabile creata senza la var parola chiave viene creata nell'ambito globale e non viene raccolta in modo errato quando la funzione ritorna (perché non esce dall'ambito), offrendo l'opportunità di una perdita di memoria.

Ecco un buon esempio di come puoi essere scoperto dal non dichiarare variabili locali con var:

<script>
one();

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

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

( iviene ripristinato ad ogni iterazione del ciclo, poiché non è dichiarato localmente nel forciclo ma a livello globale) alla fine con conseguente ciclo infinito

Direi che è meglio usare varnella maggior parte delle situazioni.

Le variabili locali sono sempre più veloci delle variabili nell'ambito globale.

Se non si utilizza varper dichiarare una variabile, la variabile sarà nell'ambito globale.

Per ulteriori informazioni, è possibile cercare "scope chain JavaScript" in Google.

Non usare var!

varera il modo pre-ES6 per dichiarare una variabile. Ora siamo in futuro e dovresti scrivere il codice in quanto tale.

Usa constelet

constdovrebbe essere usato per il 95% dei casi. Lo rende quindi impossibile cambiare il riferimento alla variabile, quindi le proprietà del nodo array, oggetto e DOM possono cambiare e dovrebbero probabilmente esserlo const.

letdovrebbe essere usato per qualsiasi variabile che si aspetta di essere riassegnata. Questo include all'interno di un ciclo for. Se hai mai scritto varName =oltre l'inizializzazione, usa let.

Entrambi hanno ambito a livello di blocco, come previsto nella maggior parte delle altre lingue.

un'altra differenza ad es

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

mentre

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

L'uso varè sempre una buona idea per impedire alle variabili di ingombrare l'ambito globale e le variabili in conflitto tra loro, causando sovrascritture indesiderate.

Senza var- variabile globale.

Altamente raccomandato di usare SEMPRE lavar dichiarazione, perché init variabile globale nel contesto locale - è male. Ma, se hai bisogno di questo trucco sporco, dovresti scrivere un commento all'inizio della pagina:

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

Questo è un codice di esempio che ho scritto per farti capire questo concetto:

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 ha dato un buon esempio mostrando la differenza pratica (e il pericolo) tra vare no var. Eccone un altro, lo trovo particolarmente pericoloso perché la differenza è visibile solo in un ambiente asincrono, quindi può facilmente scivolare durante i test.

Come ci si aspetterebbe i seguenti output di frammenti ["text"]:

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

console.log(var_fun())

Lo stesso fa il seguente frammento (nota letprima quello mancante array):

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

console.log(var_fun())

L'esecuzione asincrona della manipolazione dei dati produce ancora lo stesso risultato con un singolo esecutore:

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

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

Ma si comporta diversamente con più di uno:

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

Usando let comunque:

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

Come qualcuno che sta cercando di imparare questo è come lo vedo io. Gli esempi sopra erano forse un po 'troppo complicati per un principiante.

Se esegui questo codice:

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

L'output verrà letto come: falso, falso, vero, vero

Perché vede le variabili nella funzione come separate da quelle esterne, quindi il termine variabile locale e questo perché abbiamo usato var nell'assegnazione. Se togli la var nella funzione in modo che ora si legge in questo modo:

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

L'output è false, false, false, false

Questo perché anziché creare una nuova variabile nell'ambito o funzione locale, utilizza semplicemente le variabili globali e le riassegna in false.

Vedo che le persone sono confuse quando dichiarano variabili con o senza var e all'interno o all'esterno della funzione. Ecco un esempio profondo che ti guiderà attraverso questi passaggi:

Guarda lo script qui sotto in azione qui su 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);

Conclusione

1. Indipendentemente da quanto dichiarato con o senza var (come a, b) se ottengono il loro valore al di fuori della funzione, manterranno il loro valore e anche tutti gli altri valori aggiunti all'interno di varie funzioni tramite lo script vengono conservati.
2. Se la variabile viene dichiarata senza var all'interno di una funzione (come c), agirà come la regola precedente, da ora in poi manterrà il suo valore in tutte le funzioni. O ha ottenuto il suo primo valore nella funzione testVar1 () conserva ancora il valore e ottiene un valore aggiuntivo nella funzione testVar2 ()
3. Se la variabile viene dichiarata con var solo all'interno di una funzione (come d in testVar1 o testVar2) sarà indefinita ogni volta che termina la funzione. Quindi sarà una variabile temporanea in una funzione.

All'interno di un codice se si utilizza una variabile senza usare var, ciò che accade è automaticamente var var_name viene inserito nell'ambito globale, ad esempio:

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 */
}

Oltre al problema degli scopi, alcune persone menzionano anche il sollevamento , ma nessuno ha dato un esempio. Eccone uno per portata globale:

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

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

Senza usare "var" le variabili possono definire solo quando si imposta un valore. Per esempio:

my_var;

non può funzionare nell'ambito globale o in qualsiasi altro ambito . Dovrebbe essere con un valore come:

my_var = "value";

D'altra parte è possibile definire un valore variabile;

var my_var;

Il suo valore è undefined(Il suo valore non nulllo è e non è nullinteressante in modo interessante.).

È necessario utilizzare la parola chiave var a meno che non si intenda avere la variabile collegata all'oggetto finestra nel browser. Ecco un link che spiega l'ambito e la differenza tra ambito glocale e ambito locale con e senza parola chiave var.

Quando le variabili vengono definite senza l'uso della parola chiave var, ciò che appare è una semplice operazione di "assegnazione".

Quando il valore viene assegnato a una variabile in javascript, l'interprete cerca innanzitutto di trovare la "dichiarazione di variabile" nello stesso contesto / ambito di quello dell'assegnazione. Quando viene eseguito l'interprete dummyVariable = 20, cerca la dichiarazione di dummyVariable all'inizio della funzione. (Poiché tutte le dichiarazioni delle variabili vengono spostate all'inizio del contesto dall'interprete javascript e questo si chiama sollevamento)

Potresti anche voler esaminare il sollevamento in JavaScript