Bagaimana Anda mendeklarasikan variabel baru dalam javascript?

Variabel adalah nama yang terkait dengan nilai; . Variabel memungkinkan Anda untuk menyimpan dan memanipulasi data dalam program Anda. Misalnya, baris JavaScript berikut memberikan nilai

var sum = i + 3;

var sum = i + 3;

i = 2;

Dan baris berikut menambahkan

var sum = i + 3;

var sum = i + 3;

i = 10;
i = "ten";

var sum = i + 3;

Dua baris kode ini menunjukkan hampir semua hal yang perlu Anda ketahui tentang variabel. Namun, untuk memahami sepenuhnya cara kerja variabel dalam JavaScript, Anda perlu menguasai beberapa konsep lagi. Sayangnya, konsep ini memerlukan lebih dari beberapa baris kode untuk menjelaskannya. Bagian selanjutnya dari bab ini menjelaskan tentang pengetikan, deklarasi, ruang lingkup, isi, dan resolusi variabel. Ini juga mengeksplorasi pengumpulan sampah dan dualitas variabel/properti. []

Perbedaan penting antara JavaScript dan bahasa seperti Java dan C adalah bahwa JavaScript tidak bertipe. Ini berarti, sebagian, variabel JavaScript dapat menampung nilai dari tipe data apa pun, tidak seperti variabel Java atau C, yang hanya dapat menampung satu jenis data tertentu yang dideklarasikan. Misalnya, sangat legal dalam JavaScript untuk menetapkan angka ke variabel dan kemudian menetapkan string ke variabel itu

i = 10;
i = "ten";

Di C, C++, Java, atau bahasa yang diketik dengan kuat lainnya, kode seperti ini adalah ilegal

Fitur yang terkait dengan kurangnya pengetikan JavaScript adalah bahwa bahasa tersebut dengan mudah dan otomatis mengonversi nilai dari satu jenis ke jenis lainnya, jika diperlukan. Jika Anda mencoba untuk menambahkan nomor ke string, misalnya, JavaScript secara otomatis mengonversi nomor ke string yang sesuai sehingga dapat ditambahkan. Konversi tipe data dibahas secara mendetail di Bab 3

JavaScript jelas merupakan bahasa yang lebih sederhana untuk tidak diketik. Keuntungan dari bahasa yang diketik dengan kuat seperti C++ dan Java adalah mereka menerapkan praktik pemrograman yang ketat, yang membuatnya lebih mudah untuk menulis, memelihara, dan menggunakan kembali program yang panjang dan kompleks. Karena banyak program JavaScript adalah skrip yang lebih pendek, kekakuan ini tidak diperlukan, dan kami mendapat manfaat dari sintaksis yang lebih sederhana

Sebelum Anda menggunakan variabel dalam program JavaScript, Anda harus mendeklarasikannya. [] Variabel dideklarasikan dengan kata kunci

i = 10;
i = "ten";

var i;
var sum;

Anda juga dapat mendeklarasikan banyak variabel dengan kata kunci

i = 10;
i = "ten";

var i, sum;

Dan Anda dapat menggabungkan deklarasi variabel dengan inisialisasi variabel

var message = "hello";
var i = 0, j = 0, k = 0;

Jika Anda tidak menentukan nilai awal untuk variabel dengan pernyataan

i = 10;
i = "ten";

i = 10;
i = "ten";

Perhatikan bahwa pernyataan

i = 10;
i = "ten";

i = 10;
i = "ten";

i = 10;
i = "ten";

for(var i = 0; i < 10; i++) document.write(i, ">br<");
for(var i = 0, j=10; i < 10; i++,j--) document.write(i*j, ">br<");
for(var i in o) document.write(i, ">br<");

Variabel yang dideklarasikan dengan

i = 10;
i = "ten";

var i;
var sum;

var i;
var sum;

Deklarasi Berulang dan Dihilangkan

Adalah legal dan tidak berbahaya untuk mendeklarasikan variabel lebih dari sekali dengan pernyataan

i = 10;
i = "ten";

Jika Anda mencoba membaca nilai variabel yang tidak dideklarasikan, JavaScript akan menghasilkan kesalahan. Jika Anda menetapkan nilai ke variabel yang belum Anda nyatakan dengan

i = 10;
i = "ten";

i = 10;
i = "ten";

i = 10;
i = "ten";

Cakupan variabel adalah wilayah program Anda yang mendefinisikannya. Variabel global memiliki cakupan global; . Di sisi lain, variabel yang dideklarasikan dalam suatu fungsi hanya didefinisikan di dalam tubuh fungsi. Mereka adalah variabel lokal dan memiliki cakupan lokal. Parameter fungsi juga dihitung sebagai variabel lokal dan ditentukan hanya di dalam isi fungsi

Di dalam tubuh fungsi, variabel lokal lebih diutamakan daripada variabel global dengan nama yang sama. Jika Anda mendeklarasikan variabel lokal atau parameter fungsi dengan nama yang sama dengan variabel global, Anda secara efektif menyembunyikan variabel global. Misalnya, kode berikut mencetak kata âlocalâ

var scope = "global";         // Declare a global variable
function checkscope( ) {
    var scope = "local";      // Declare a local variable with the same name
    document.write(scope);    // Use the local variable, not the global one
}
checkscope( );                 // Prints "local"

Meskipun Anda dapat lolos dengan tidak menggunakan pernyataan

i = 10;
i = "ten";

i = 10;
i = "ten";

scope = "global";             // Declare a global variable, even without var
function checkscope( ) {
    scope = "local";          // Oops! We just changed the global variable
    document.write(scope);    // Uses the global variable
    myscope = "local";        // This implicitly declares a new global variable
    document.write(myscope);  // Uses the new global variable
}
checkscope( );                 // Prints "locallocal"
document.write(scope);        // This prints "local"
document.write(myscope);      // This prints "local"

Secara umum, fungsi tidak mengetahui variabel apa yang didefinisikan dalam lingkup global atau digunakan untuk apa. Jadi, jika suatu fungsi menggunakan variabel global alih-alih variabel lokal, ia berisiko mengubah nilai yang menjadi sandaran beberapa bagian lain dari program. Untungnya, menghindari masalah ini sederhana. deklarasikan semua variabel dengan

i = 10;
i = "ten";

Definisi fungsi dapat disarangkan. Setiap fungsi memiliki cakupan lokalnya sendiri, sehingga dimungkinkan untuk memiliki beberapa lapisan cakupan lokal bersarang. Misalnya

var scope = "global scope";          // A global variable
function checkscope( ) {
    var scope = "local scope";       // A local variable
    function nested( ) {
        var scope = "nested scope";  // A nested scope of local variables
        document.write(scope);       // Prints "nested scope"
    }
    nested( );
}
checkscope( );

Perhatikan bahwa tidak seperti C, C++, dan Java, JavaScript tidak memiliki cakupan tingkat blok. Semua variabel yang dideklarasikan dalam suatu fungsi, di mana pun mereka dideklarasikan, didefinisikan di seluruh fungsi. Dalam kode berikut, variabel

var sum = i + 3;

var i, sum;

var i, sum;

var sum = i + 3;

Aturan bahwa semua variabel yang dideklarasikan dalam suatu fungsi didefinisikan di seluruh fungsi dapat menyebabkan hasil yang mengejutkan. Kode berikut menggambarkan hal ini

var sum = i + 3;

Anda mungkin berpikir bahwa panggilan pertama ke

var i, sum;

i = 10;
i = "ten";

i = 10;
i = "ten";

var i, sum;

var sum = i + 3;

Contoh ini mengilustrasikan mengapa praktik pemrograman yang baik adalah menempatkan semua deklarasi variabel Anda bersama-sama di awal fungsi apa pun

Tidak Ditentukan Versus Tidak Ditugaskan

Contoh di bagian sebelumnya menunjukkan titik halus dalam pemrograman JavaScript. ada dua jenis variabel yang tidak terdefinisi. Jenis variabel tak terdefinisi pertama adalah variabel yang belum pernah dideklarasikan. Upaya untuk membaca nilai dari variabel yang tidak dideklarasikan menyebabkan kesalahan runtime. Variabel yang tidak dideklarasikan tidak terdefinisi karena tidak ada. Seperti dijelaskan sebelumnya, menetapkan nilai ke variabel yang tidak dideklarasikan tidak menyebabkan kesalahan;

Jenis kedua dari variabel tidak terdefinisi adalah variabel yang telah dideklarasikan tetapi tidak pernah memiliki nilai yang diberikan padanya. Jika Anda membaca nilai dari salah satu variabel ini, Anda mendapatkan nilai defaultnya,

i = 10;
i = "ten";

Fragmen kode berikut mengilustrasikan beberapa perbedaan antara variabel yang benar-benar tidak terdefinisi dan hanya variabel yang tidak ditetapkan

var sum = i + 3;

Jenis Primitif dan Jenis Referensi

Topik selanjutnya yang perlu kita perhatikan adalah isi variabel. Kita sering mengatakan bahwa variabel memiliki atau mengandung nilai. Tapi apa yang dikandungnya? . Jenis-jenis tersebut dapat dibagi menjadi dua kelompok. tipe primitif dan tipe referensi. Angka, nilai boolean, dan tipe

var i, sum;

i = 10;
i = "ten";

Tipe primitif memiliki ukuran tetap dalam memori. Misalnya, angka menempati delapan byte memori, dan nilai boolean dapat direpresentasikan hanya dengan satu bit. Tipe angka adalah yang terbesar dari tipe primitif. Jika setiap variabel JavaScript mencadangkan delapan byte memori, variabel tersebut dapat langsung menyimpan nilai primitif apa pun. []

Jenis referensi adalah masalah lain. Objek, misalnya, bisa berukuran berapa saja. mereka tidak memiliki ukuran tetap. Hal yang sama berlaku untuk array. sebuah array dapat memiliki sejumlah elemen. Demikian pula, suatu fungsi dapat berisi sejumlah kode JavaScript. Karena jenis ini tidak memiliki ukuran yang tetap, nilainya tidak dapat disimpan secara langsung dalam delapan byte memori yang terkait dengan setiap variabel. Sebaliknya, variabel menyimpan referensi ke nilai. Biasanya, referensi ini berupa penunjuk atau alamat memori. Ini bukan nilai data itu sendiri, tetapi memberi tahu variabel ke mana harus mencari untuk menemukan nilainya

Perbedaan antara tipe primitif dan referensi adalah penting karena mereka berperilaku berbeda. Pertimbangkan kode berikut yang menggunakan angka (tipe primitif)

var sum = i + 3;

Tidak ada yang mengejutkan tentang kode ini. Sekarang pertimbangkan apa yang terjadi jika kita sedikit mengubah kode sehingga menggunakan array (tipe referensi) alih-alih angka

var sum = i + 3;

Jika hasil ini tampaknya tidak mengejutkan Anda, Anda sudah mengetahui perbedaan antara tipe primitif dan tipe referensi. Jika memang tampak mengejutkan, perhatikan lebih dekat baris kedua. Perhatikan bahwa referensi ke nilai array, bukan array itu sendiri, yang diberikan dalam pernyataan ini. Setelah baris kode kedua, kita hanya memiliki satu objek array;

Jika perbedaan tipe primitif-versus-referensi baru bagi Anda, cobalah untuk mengingat konten variabel. Variabel menyimpan nilai sebenarnya dari tipe primitif, tetapi mereka hanya menyimpan referensi ke nilai tipe referensi. Perilaku yang berbeda dari tipe primitif dan referensi dieksplorasi lebih detail di

Anda mungkin telah memperhatikan bahwa saya tidak menentukan apakah string adalah tipe primitif atau referensi dalam JavaScript. String adalah kasus yang tidak biasa. Mereka memiliki ukuran variabel, jadi jelas mereka tidak dapat disimpan secara langsung dalam variabel ukuran tetap. Untuk efisiensi, Anda akan mengharapkan JavaScript menyalin referensi ke string, bukan konten string yang sebenarnya. Di sisi lain, string berperilaku seperti tipe primitif dalam banyak hal. Pertanyaan apakah string adalah tipe primitif atau referensi sebenarnya diperdebatkan karena string tidak dapat diubah. tidak ada cara untuk mengubah isi dari nilai string. Ini berarti bahwa Anda tidak dapat membuat contoh seperti contoh sebelumnya yang menunjukkan bahwa array disalin dengan referensi. Pada akhirnya, tidak masalah apakah Anda menganggap string sebagai tipe referensi yang tidak dapat diubah yang berperilaku seperti tipe primitif atau sebagai tipe primitif yang diimplementasikan dengan efisiensi internal dari tipe referensi

Jenis referensi tidak memiliki ukuran tetap; . Seperti yang telah kita bahas, variabel tidak secara langsung menyimpan nilai referensi. Nilai disimpan di beberapa lokasi lain, dan variabel hanya menyimpan referensi ke lokasi itu. Sekarang mari fokus sebentar pada penyimpanan nilai yang sebenarnya

Karena string, objek, dan larik tidak memiliki ukuran tetap, penyimpanannya harus dialokasikan secara dinamis, jika ukurannya diketahui. Setiap kali program JavaScript membuat string, array, atau objek, interpreter harus mengalokasikan memori untuk menyimpan entitas tersebut. Setiap kali memori dialokasikan secara dinamis seperti ini, pada akhirnya harus dibebaskan untuk digunakan kembali, atau juru bahasa JavaScript akan menggunakan semua memori yang tersedia pada sistem dan macet

Dalam bahasa seperti C dan C++, memori harus dibebaskan secara manual. Merupakan tanggung jawab pemrogram untuk melacak semua objek yang dibuat dan menghancurkannya (membebaskan memori mereka) saat tidak lagi diperlukan. Ini bisa menjadi tugas yang berat dan sering menjadi sumber bug

Alih-alih membutuhkan alokasi manual, JavaScript mengandalkan teknik yang disebut pengumpulan sampah. Penerjemah JavaScript dapat mendeteksi kapan suatu objek tidak akan pernah lagi digunakan oleh program. Ketika menentukan bahwa suatu objek tidak dapat dijangkau (mis. e. , tidak ada lagi cara untuk merujuknya menggunakan variabel dalam program), ia mengetahui bahwa objek tidak lagi diperlukan dan memorinya dapat diperoleh kembali. Pertimbangkan baris kode berikut, misalnya

var sum = i + 3;

Setelah kode ini dijalankan, string asli âhelloâ tidak lagi dapat dijangkau; . Sistem mendeteksi fakta ini dan membebaskan ruang penyimpanannya untuk digunakan kembali

Pengumpulan sampah dilakukan secara otomatis dan tidak terlihat oleh pemrogram. Anda hanya perlu mengetahui cukup tentang pengumpulan sampah untuk percaya bahwa itu berfungsi. untuk mengetahui Anda dapat membuat semua objek sampah yang Anda inginkan, dan sistem akan membersihkannya setelah Anda

Anda mungkin telah memperhatikan sekarang bahwa ada banyak kesamaan dalam JavaScript antara variabel dan properti objek. Keduanya ditetapkan dengan cara yang sama, keduanya digunakan dengan cara yang sama dalam ekspresi JavaScript, dan seterusnya. Apakah benar-benar ada perbedaan mendasar antara variabel

var sum = i + 3;

var sum = i + 3;

var message = "hello";
var i = 0, j = 0, k = 0;

Saat penerjemah JavaScript dijalankan, salah satu hal pertama yang dilakukannya, sebelum mengeksekusi kode JavaScript apa pun, adalah membuat objek global. Properti objek ini adalah variabel global dari program JavaScript. Saat Anda mendeklarasikan variabel JavaScript global, yang sebenarnya Anda lakukan adalah mendefinisikan properti dari objek global

Penerjemah JavaScript menginisialisasi objek global dengan sejumlah properti yang mengacu pada nilai dan fungsi yang telah ditentukan sebelumnya. Misalnya, properti

var message = "hello";
var i = 0, j = 0, k = 0;

var message = "hello";
var i = 0, j = 0, k = 0;

var message = "hello";
var i = 0, j = 0, k = 0;

var message = "hello";
var i = 0, j = 0, k = 0;

Dalam kode tingkat atas (mis. e. , kode JavaScript yang bukan bagian dari suatu fungsi), Anda dapat menggunakan kata kunci JavaScript

var message = "hello";
var i = 0, j = 0, k = 0;

var message = "hello";
var i = 0, j = 0, k = 0;

Dalam JavaScript sisi klien, objek Window berfungsi sebagai objek global untuk semua kode JavaScript yang ada di jendela browser yang diwakilinya. Objek Window global ini memiliki properti

var message = "hello";
var i = 0, j = 0, k = 0;

var message = "hello";
var i = 0, j = 0, k = 0;

var message = "hello";
var i = 0, j = 0, k = 0;

var message = "hello";
var i = 0, j = 0, k = 0;

for(var i = 0; i < 10; i++) document.write(i, ">br<");
for(var i = 0, j=10; i < 10; i++,j--) document.write(i*j, ">br<");
for(var i in o) document.write(i, ">br<");

for(var i = 0; i < 10; i++) document.write(i, ">br<");
for(var i = 0, j=10; i < 10; i++,j--) document.write(i*j, ">br<");
for(var i in o) document.write(i, ">br<");

Variabel Lokal. Objek Panggilan

Jika variabel global adalah properti dari objek global khusus, lalu apa itu variabel lokal? . Objek ini dikenal sebagai objek panggilan. Objek panggilan memiliki umur yang lebih pendek daripada objek global, tetapi memiliki tujuan yang sama. Saat badan fungsi dieksekusi, argumen fungsi dan variabel lokal disimpan sebagai properti dari objek panggilan ini. Penggunaan objek yang sepenuhnya terpisah untuk variabel lokal adalah yang memungkinkan JavaScript menjaga variabel lokal agar tidak menimpa nilai variabel global dengan nama yang sama

Konteks Eksekusi JavaScript

Setiap kali juru bahasa JavaScript mulai mengeksekusi suatu fungsi, itu membuat konteks eksekusi baru untuk fungsi itu. Konteks eksekusi, jelas, adalah konteks di mana setiap bagian dari kode JavaScript dieksekusi. Bagian penting dari konteks adalah objek di mana variabel didefinisikan. Jadi, kode JavaScript yang bukan merupakan bagian dari fungsi apa pun berjalan dalam konteks eksekusi yang menggunakan objek global untuk definisi variabel. Dan setiap fungsi JavaScript berjalan dalam konteks eksekusi uniknya sendiri dengan objek panggilannya sendiri di mana variabel lokal ditentukan

Hal yang menarik untuk dicatat adalah bahwa implementasi JavaScript memungkinkan beberapa konteks eksekusi global, masing-masing dengan objek global yang berbeda. [] (Meskipun, dalam hal ini, setiap objek global tidak sepenuhnya global. ) Contoh yang jelas adalah JavaScript sisi klien, di mana setiap jendela browser yang terpisah, atau setiap bingkai di dalam jendela, menentukan konteks eksekusi global yang terpisah. Kode JavaScript sisi klien di setiap bingkai atau jendela berjalan dalam konteks eksekusinya sendiri dan memiliki objek globalnya sendiri. Namun, objek global sisi klien yang terpisah ini memiliki properti yang menautkannya. Jadi, kode JavaScript dalam satu frame mungkin merujuk ke frame lain dengan ekspresi

for(var i = 0; i < 10; i++) document.write(i, ">br<");
for(var i = 0, j=10; i < 10; i++,j--) document.write(i*j, ">br<");
for(var i in o) document.write(i, ">br<");

for(var i = 0; i < 10; i++) document.write(i, ">br<");
for(var i = 0, j=10; i < 10; i++,j--) document.write(i*j, ">br<");
for(var i in o) document.write(i, ">br<");

for(var i = 0; i < 10; i++) document.write(i, ">br<");
for(var i = 0, j=10; i < 10; i++,j--) document.write(i*j, ">br<");
for(var i in o) document.write(i, ">br<");

Anda belum perlu memahami sepenuhnya bagaimana konteks eksekusi jendela dan bingkai yang terpisah ditautkan bersama dalam JavaScript sisi klien. Topik tersebut dibahas secara mendetail dalam pembahasan tentang integrasi JavaScript dengan browser web di Bab 13. Apa yang harus Anda pahami sekarang adalah bahwa JavaScript cukup fleksibel sehingga satu juru bahasa JavaScript dapat menjalankan skrip dalam konteks eksekusi global yang berbeda dan bahwa konteks tersebut tidak perlu sepenuhnya terpisah;

Poin terakhir ini membutuhkan pertimbangan tambahan. Saat kode JavaScript dalam satu konteks eksekusi dapat membaca dan menulis nilai properti dan mengeksekusi fungsi yang ditentukan dalam konteks eksekusi lain, Anda telah mencapai tingkat kerumitan yang memerlukan pertimbangan masalah keamanan. Ambil JavaScript sisi klien sebagai contoh. Misalkan jendela browser A menjalankan skrip atau berisi informasi dari intranet lokal Anda, dan jendela B menjalankan skrip dari beberapa situs acak di Internet. Secara umum, Anda tidak ingin mengizinkan kode di jendela B untuk dapat mengakses properti jendela A. Jika Anda mengizinkannya, jendela B mungkin dapat membaca informasi sensitif perusahaan dan mencurinya, misalnya. Jadi, untuk menjalankan kode JavaScript dengan aman, harus ada mekanisme keamanan yang mencegah akses dari satu konteks eksekusi ke konteks eksekusi lainnya ketika akses tersebut tidak boleh diizinkan. Kita akan kembali ke topik ini dalam

Ketika kita pertama kali membahas pengertian lingkup variabel, saya mendasarkan definisi tersebut hanya pada struktur leksikal kode JavaScript. variabel global memiliki cakupan global, dan variabel yang dideklarasikan dalam fungsi memiliki cakupan lokal. Jika satu definisi fungsi bersarang di dalam yang lain, variabel yang dideklarasikan di dalam fungsi bersarang itu memiliki lingkup lokal bersarang. Sekarang Anda tahu bahwa variabel global adalah properti dari objek global dan bahwa variabel lokal adalah properti dari objek panggilan khusus, kita dapat kembali ke pengertian lingkup variabel dan mengonseptualisasikannya kembali. Deskripsi ruang lingkup baru ini menawarkan cara yang berguna untuk memikirkan variabel dalam banyak konteks;

Setiap konteks eksekusi JavaScript memiliki rantai cakupan yang terkait dengannya. Rantai lingkup ini adalah daftar atau rangkaian objek. Saat kode JavaScript perlu mencari nilai variabel

for(var i = 0; i < 10; i++) document.write(i, ">br<");
for(var i = 0, j=10; i < 10; i++,j--) document.write(i*j, ">br<");
for(var i in o) document.write(i, ">br<");

for(var i = 0; i < 10; i++) document.write(i, ">br<");
for(var i = 0, j=10; i < 10; i++,j--) document.write(i*j, ">br<");
for(var i in o) document.write(i, ">br<");

for(var i = 0; i < 10; i++) document.write(i, ">br<");
for(var i = 0, j=10; i < 10; i++,j--) document.write(i*j, ">br<");
for(var i in o) document.write(i, ">br<");

for(var i = 0; i < 10; i++) document.write(i, ">br<");
for(var i = 0, j=10; i < 10; i++,j--) document.write(i*j, ">br<");
for(var i in o) document.write(i, ">br<");

Dalam kode JavaScript tingkat atas (mis. e. , kode tidak terkandung dalam definisi fungsi apa pun), rantai lingkup terdiri dari satu objek, objek global. Semua variabel dicari di objek ini. Jika variabel tidak ada, nilai variabel tidak terdefinisi. Namun, dalam fungsi (nonnested), rantai cakupan terdiri dari dua objek. Yang pertama adalah objek pemanggilan fungsi, dan yang kedua adalah objek global. Ketika fungsi merujuk ke variabel, objek panggilan (lingkup lokal) diperiksa terlebih dahulu, dan objek global (lingkup global) diperiksa kedua. Fungsi bersarang akan memiliki tiga objek atau lebih dalam rantai cakupannya. mengilustrasikan proses mencari nama variabel dalam rantai cakupan suatu fungsi

Bagaimana cara mendeklarasikan variabel baru?

Kunci mana yang digunakan untuk mendeklarasikan variabel dalam JavaScript?

Apakah Anda harus mendeklarasikan variabel dalam JavaScript?