CATATAN : Pertanyaan ini ditanyakan dari sudut pandang ECMAScript versi 3 atau 5. Jawabannya mungkin menjadi usang dengan pengenalan fitur-fitur baru dalam rilis ECMAScript 6.

Apa sebenarnya fungsi varkata kunci dalam JavaScript, dan apa perbedaannya

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

dan

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

?

Kapan Anda akan menggunakan salah satunya, dan mengapa / apa fungsinya?

Jika Anda berada dalam lingkup global maka tidak ada banyak perbedaan. Baca jawaban Kangax untuk penjelasan

Jika Anda berada dalam suatu fungsi maka varakan membuat variabel lokal, "no var" akan mencari rantai lingkup sampai menemukan variabel atau mengenai lingkup global (pada titik mana ia akan membuatnya):

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

Jika Anda tidak melakukan tugas maka Anda perlu menggunakan var:

var x; // Declare x

Ada perbedaan .

var x = 1 mendeklarasikan variabel x dalam lingkup saat ini (alias konteks eksekusi). Jika deklarasi muncul dalam suatu fungsi - variabel lokal dideklarasikan; jika itu dalam lingkup global - variabel global dideklarasikan.

x = 1, di sisi lain, hanyalah penugasan properti. Pertama kali mencoba untuk menyelesaikan xterhadap rantai ruang lingkup. Jika menemukannya di mana saja dalam rantai lingkup itu, ia melakukan tugas; jika tidak ditemukan x, barulah ia menciptakan xproperti pada objek global (yang merupakan objek tingkat atas dalam rantai lingkup).

Sekarang, perhatikan bahwa itu tidak mendeklarasikan variabel global, itu menciptakan properti global.

Perbedaan antara keduanya adalah halus dan mungkin membingungkan kecuali Anda memahami bahwa deklarasi variabel juga membuat properti (hanya pada Objek Variabel) dan bahwa setiap properti di Javascript (yah, ECMAScript) memiliki flag tertentu yang menggambarkan properti mereka - ReadOnly, DontEnum dan DontDelete.

Karena deklarasi variabel membuat properti dengan flag DontDelete, perbedaan antara var x = 1dan x = 1(ketika dieksekusi dalam lingkup global) adalah bahwa deklarasi satu - variabel - menciptakan properti DontDelete'able, dan yang terakhir tidak. Sebagai akibatnya, properti yang dibuat melalui penugasan implisit ini kemudian dapat dihapus dari objek global, dan yang pertama - yang dibuat melalui deklarasi variabel - tidak dapat dihapus.

Tapi ini hanya teori saja, dan dalam praktiknya ada lebih banyak perbedaan di antara keduanya , karena berbagai bug dalam implementasi (seperti yang dari IE).

Semoga semuanya masuk akal :)

[Pembaruan 2010/12/16]

Dalam ES5 (ECMAScript 5; baru-baru ini distandarisasi, edisi ke-5 bahasa) ada yang disebut "mode ketat" - mode bahasa opt-in, yang sedikit mengubah perilaku tugas yang tidak diumumkan. Dalam mode ketat, penugasan ke pengidentifikasi yang tidak diumumkan adalah ReferenceError . Alasan untuk ini adalah untuk menangkap tugas yang tidak disengaja, mencegah penciptaan properti global yang tidak diinginkan. Beberapa browser yang lebih baru sudah mulai menggulirkan dukungan untuk mode ketat. Lihat, misalnya, tabel compat saya .

Mengatakan itu perbedaan antara " lokal dan global " tidak sepenuhnya akurat.

Mungkin lebih baik untuk menganggapnya sebagai perbedaan antara " lokal dan terdekat ". Yang terdekat pasti bisa bersifat global, tetapi itu tidak selalu terjadi.

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

Ketika Javascript dieksekusi di browser, semua kode Anda dikelilingi oleh pernyataan with, seperti:

with (window) {
    //Your code
}

Info lebih lanjut tentang with- MDN

Karena varmendeklarasikan variabel dalam cakupan saat ini , tidak ada perbedaan antara mendeklarasikan var jendela bagian dalam dan tidak mendeklarasikannya sama sekali.

Perbedaannya muncul ketika Anda tidak berada langsung di dalam jendela, misalnya di dalam suatu fungsi atau di dalam blok.

Menggunakan varmemungkinkan Anda menyembunyikan variabel eksternal yang memiliki nama yang sama. Dengan cara ini Anda bisa mensimulasikan variabel "pribadi", tapi itu topik lain.

Aturan praktis adalah untuk selalu menggunakan var, karena jika tidak Anda berisiko memperkenalkan bug halus.

EDIT: Setelah kritik yang saya terima, saya ingin menekankan yang berikut:

• varmendeklarasikan variabel dalam cakupan saat ini
• Lingkup global adalah window
• Tidak menggunakan varsecara implisit menyatakan vardalam lingkup global (jendela)
• Mendeklarasikan variabel dalam lingkup global (jendela) menggunakan varsama dengan menghilangkannya.
• Mendeklarasikan variabel dalam lingkup yang berbeda dari menggunakan jendela var tidak sama dengan mendeklarasikan variabel tanpavar
• Selalu menyatakan varsecara eksplisit karena itu praktik yang baik

Selalu gunakan varkata kunci untuk mendeklarasikan variabel. Mengapa? Praktik pengkodean yang baik seharusnya cukup menjadi alasan tersendiri, tetapi menghilangkannya berarti dideklarasikan dalam lingkup global (variabel seperti ini disebut global "tersirat"). Douglas Crockford merekomendasikan untuk tidak pernah menggunakan global tersirat , dan menurut Pedoman Pengkodean JavaScript Apple :

Variabel apa pun yang dibuat tanpa var kata kunci dibuat di lingkup global dan bukan sampah yang dikumpulkan ketika fungsi kembali (karena itu tidak keluar dari ruang lingkup), menghadirkan peluang kebocoran memori.

Berikut ini adalah contoh yang cukup baik tentang bagaimana Anda bisa tertangkap karena tidak mendeklarasikan variabel lokal dengan var:

<script>
one();

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

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

( iDi-reset pada setiap iterasi dari loop, karena tidak dinyatakan secara lokal dalam forloop tetapi secara global) akhirnya menghasilkan loop tak terbatas

Saya akan mengatakan itu lebih baik untuk digunakan vardalam kebanyakan situasi.

Variabel lokal selalu lebih cepat daripada variabel dalam lingkup global.

Jika Anda tidak menggunakan varuntuk mendeklarasikan variabel, variabel tersebut akan berada dalam lingkup global.

Untuk informasi lebih lanjut, Anda dapat mencari "JavaScript rantai lingkup" di Google.

Jangan gunakan var!

varadalah cara pra-ES6 untuk mendeklarasikan variabel. Kami sekarang di masa depan , dan Anda harus mengkodekannya.

Gunakan constdanlet

constharus digunakan untuk 95% kasus. Itu membuatnya sehingga referensi variabel tidak dapat berubah, sehingga array, objek, dan properti DOM node dapat berubah dan seharusnya const.

letharus digunakan untuk variabel apa saja yang akan dipindahkan. Ini termasuk dalam for loop. Jika Anda pernah menulis di varName =luar inisialisasi, gunakan let.

Keduanya memiliki ruang lingkup tingkat blok, seperti yang diharapkan di sebagian besar bahasa lain.

perbedaan lain misalnya

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

sementara

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

Menggunakan varselalu merupakan ide yang baik untuk mencegah variabel mengacaukan ruang lingkup global dan variabel saling bertentangan, menyebabkan penimpaan yang tidak diinginkan.

Tanpa var- variabel global.

Sangat disarankan untuk SELALU menggunakan varpernyataan, karena variabel global init dalam konteks lokal - adalah jahat. Tetapi, jika Anda membutuhkan trik kotor ini, Anda harus menulis komentar di awal halaman:

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

Ini adalah contoh kode yang saya tulis agar Anda memahami konsep ini:

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 memberikan contoh yang bagus menunjukkan perbedaan praktis (dan bahaya) antara vardan tidak var. Inilah yang lain, saya menemukan ini sangat berbahaya karena perbedaannya hanya terlihat di lingkungan asinkron sehingga dapat dengan mudah lolos selama pengujian.

Seperti yang Anda harapkan dari output cuplikan berikut ["text"]:

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

console.log(var_fun())

Begitu juga cuplikan berikut (perhatikan yang hilang letsebelumnya array):

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

console.log(var_fun())

Menjalankan manipulasi data secara tidak sinkron masih menghasilkan hasil yang sama dengan satu pelaksana:

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

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

Tetapi berperilaku berbeda dengan banyak yang:

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

Namun, gunakan let:

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

Ketika seseorang mencoba mempelajari ini, inilah cara saya melihatnya. Contoh-contoh di atas mungkin agak terlalu rumit untuk pemula.

Jika Anda menjalankan kode ini:

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

Output akan berbunyi: false, false, true, true

Karena ia melihat variabel dalam fungsi sebagai terpisah dari yang di luarnya, maka istilah variabel lokal dan ini adalah karena kami menggunakan var dalam penugasan. Jika Anda mengambil var di fungsi jadi sekarang berbunyi seperti ini:

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

Outputnya salah, salah, salah, salah

Ini karena alih-alih membuat variabel baru dalam lingkup atau fungsi lokal, ia hanya menggunakan variabel global dan menugaskannya menjadi false.

Saya melihat orang-orang bingung ketika mendeklarasikan variabel dengan atau tanpa var dan di dalam atau di luar fungsi. Berikut adalah contoh mendalam yang akan memandu Anda melalui langkah-langkah ini:

Lihat skrip di bawah ini dalam aksi di sini di 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);

Kesimpulan

1. Tidak masalah dideklarasikan dengan atau tanpa var (seperti a, b) jika mereka mendapatkan nilainya di luar fungsi, mereka akan mempertahankan nilainya dan juga nilai-nilai lain yang ditambahkan di dalam berbagai fungsi melalui skrip dipertahankan.
2. Jika variabel dideklarasikan tanpa var di dalam suatu fungsi (seperti c), ia akan bertindak seperti aturan sebelumnya, ia akan mempertahankan nilainya di semua fungsi mulai sekarang. Entah itu mendapatkan nilai pertamanya di function testVar1 () masih mempertahankan nilai dan mendapatkan nilai tambahan di function testVar2 ()
3. Jika variabel dideklarasikan dengan var di dalam suatu fungsi saja (seperti d dalam testVar1 atau testVar2) itu akan tidak terdefinisi setiap kali fungsi berakhir. Jadi itu akan menjadi variabel sementara dalam suatu fungsi.

Di dalam kode Anda jika Anda menggunakan variabel tanpa menggunakan var, maka yang terjadi adalah var_name secara otomatis ditempatkan di lingkup global misalnya:

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

Selain masalah cakupan, beberapa orang juga menyebutkan mengangkat , tetapi tidak ada yang memberi contoh. Inilah satu untuk lingkup global:

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

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

Tanpa menggunakan variabel "var" hanya dapat menentukan kapan menetapkan nilai. Sebagai contoh:

my_var;

tidak dapat bekerja dalam lingkup global atau dalam lingkup lain apa pun . Itu harus dengan nilai seperti:

my_var = "value";

Di sisi lain, Anda dapat mendefinisikan seperti vaiable;

var my_var;

Nilainya adalah undefined(Nilainya tidak nulldan tidak sama dengan yang nullmenarik.).

Anda harus menggunakan kata kunci var kecuali jika Anda ingin agar variabel dilampirkan ke objek jendela di browser. Berikut ini tautan yang menjelaskan pelingkupan dan perbedaan antara pelingkupan glokal dan pelingkupan lokal dengan dan tanpa kata kunci var.

Ketika variabel didefinisikan tanpa menggunakan kata kunci var, seperti apa itu adalah operasi "penugasan" sederhana.

Ketika nilai ditugaskan ke variabel dalam javascript, penerjemah pertama kali mencoba menemukan "deklarasi variabel" dalam konteks / lingkup yang sama dengan penugasan. Saat penerjemah dieksekusidummyVariable = 20 , ia mencari deklarasi dummyVariable di awal fungsi. (Karena semua deklarasi Variabel dipindahkan ke awal konteks oleh penerjemah javascript dan ini disebut hoisting)

Anda mungkin juga ingin melihatnya mengangkat dalam javascript