Mengapa variabel global javascript buruk

"Jangan pernah memasukkan variabel dalam lingkup global" adalah praktik terbaik karena membuat variabel tersebut rapuh. Laman web biasa atau terutama aplikasi web biasa cenderung berisi banyak skrip berbeda dari berbagai sumber, dan berhati-hatilah untuk melacak variabel global Anda sendiri, semua orang yang skripnya Anda rujuk mungkin tidak ikut bermain

Anggap saja seperti vaksin. Jika setiap orang memiliki vaksin, tidak akan ada ancaman, dan jika Anda sendiri yang memiliki vaksin, tidak ada ancaman, tetapi sementara semua orang mencoba untuk divaksinasi, jadi Anda mungkin tidak divaksinasi karena tidak ada orang lain yang menjadi milik Anda.

Ada beberapa kebebasan dengan menggunakan global jika Anda namespace. Root namespace Anda adalah global, tetapi Anda hanya mengizinkan satu variabel root namespace. Itu kompromi yang biasanya diterima oleh komunitas Javascript, terutama jika itu terbatas pada aplikasi Anda

Namespace mungkin terlihat seperti ini

window.MyNamespace = {
    ClassA: function() { },
    NestedNamespace1: {
        ClassB: function() { }
    }
};

Ini menempatkan ClassA dan ClassB di nesting dari namespace MyNamespace

(function() {
    var myClassAInstance = new MyNamespace.ClassA();
    var myClassBInstance = new MyNamesapce.NestedNamespace1.ClassB();
})();

Anda juga dapat membangunnya menggunakan fungsi namespace seperti yang saya buat [di sini], yang juga menjelaskan lebih lanjut bagaimana Anda dapat memanfaatkan kesederhanaan namespace

Namun, secara umum, rekomendasinya adalah menggunakan variabel penutupan di mana saja. Ruang nama adalah minimum, tetapi tidak disarankan karena manfaat dari variabel penutupan. Variabel penutupan adalah variabel yang dideklarasikan dalam eksekusi suatu fungsi. Semua file skrip yang Anda tulis harus terkandung dalam suatu fungsi

JavaScript menggunakan fungsi untuk mengelola ruang lingkup. Variabel yang didefinisikan di dalam fungsi berada dalam lingkup lokal dan tidak tersedia di luar fungsi. Sementara variabel yang didefinisikan di luar fungsi berada dalam lingkup global. Setiap fungsi saat dipanggil membuat ruang lingkup baru

Perlu diingat bahwa setiap fungsi saat dipanggil membuat cakupan baru

Variabel global mudah ditimpa oleh skrip lain. Misalnya ketika dua bagian aplikasi yang terpisah mendefinisikan variabel global dengan nama yang sama tetapi dengan tujuan yang berbeda

Laman web juga umum menyertakan kode yang tidak ditulis oleh pengembang laman, misalnya

• Pustaka JavaScript pihak ketiga
• Kode dari skrip pelacakan dan analitik pengguna pihak ketiga
• Berbagai jenis widget, lencana, dan tombol
• Skrip dari mitra iklan

Contoh 1

Perhatikan contoh berikut. result digunakan tanpa dinyatakan. Ini bisa menjadi sumber masalah

function multiply(x, y) {
    //anti-pattern: implied a global variable    
    result = x * y
    return result
}

Aturan praktisnya adalah selalu mendeklarasikan variabel dengan var

function multiply(x, y) {
    var result = x * y
    return result
}

Contoh 2

Contoh lain yang membuat global tersirat adalah untuk mengaitkan penugasan sebagai bagian dari deklarasi var. Dalam contoh berikut, a bersifat lokal tetapi b menjadi global

function makeSomething() {
    //anti-pattern: don't use 
    var a = b = 0
    ...
}

Penulisan ulang seperti kode-kode berikut. Baik a dan b bersifat lokal

function makeSomething() {
    var a, b
    a = b = 0
    ...
}

Contoh 3

Properti dapat dihapus dengan operator hapus sedangkan variabel tidak bisa

Perlu diingat bahwa properti dapat dihapus dengan operator hapus sedangkan variabel tidak bisa

Global yang dibuat dengan var tidak dapat dihapus

var x = 10
delete x
<< false

Global tersirat yang dibuat tanpa var dapat dihapus terlepas dari apakah dibuat di dalam fungsi

x = 10
delete x
<< truefunction makeSomething() {
    y= 20
}
delete y
<< true

Contoh 4

Anda menggunakan variabel dan kemudian mendeklarasikannya lebih lanjut dalam fungsi. Lihatlah contoh ini

x = "global" // global variable
function makeSomething() {    console.log(x) // undefined
    var x = "local"
    console.log(x) // local
}
makeSomething()
console.log(x)
<< undefined
<< local
<< global

Dalam JavaScript, ini memungkinkan kita untuk memiliki beberapa pernyataan var di mana saja dalam suatu fungsi, dan semuanya bertindak seolah-olah variabel dideklarasikan di bagian atas fungsi

Sebenarnya potongan kode di atas adalah seperti berikut ini. Variabel x dideklarasikan di bagian atas fungsi tetapi nilai x tetap pada posisi saat ini

x = "global" // global variable
function makeSomething() {
    var x
    console.log(x) // undefined
    x = "local
    console.log(x) // local
}
makeSomething()
console.log(x)
<< undefined
<< local
<< global

Variabel Global tidak buruk dan bahkan bukan masalah keamanan, tetapi tidak boleh menimpa nilai variabel lain

Mengapa menggunakan variabel global adalah JavaScript yang buruk?

Apakah baik menggunakan variabel global dalam JavaScript?

Mengapa variabel global adalah ide yang buruk?