Javascript membuat variabel tersedia di luar fungsi

Menyimpan nilai dalam variabel adalah konsep dasar dalam pemrograman. "Cakupan" variabel menentukan kapan itu tersedia dan tidak tersedia di seluruh program Anda. Memahami ruang lingkup variabel dalam JavaScript adalah salah satu kunci untuk membangun fondasi yang kokoh dalam bahasa ini

Artikel ini akan menjelaskan cara kerja sistem pelingkupan JavaScript. Anda akan belajar tentang berbagai cara untuk mendeklarasikan variabel, perbedaan antara cakupan lokal dan cakupan global, dan tentang sesuatu yang disebut "pengangkatan" — kekhasan JavaScript yang dapat mengubah deklarasi variabel yang tampak tidak bersalah menjadi bug halus

Lingkup Variabel

Dalam JavaScript, ruang lingkup variabel dikendalikan oleh lokasi deklarasi variabel, dan mendefinisikan bagian dari program di mana variabel tertentu dapat diakses.

Saat ini, ada tiga cara untuk mendeklarasikan variabel dalam JavaScript. dengan menggunakan kata kunci var locales = { europe: function() { // The Europe continent's local scope var myFriend = "Monique"; var france = function() { // France country's local scope var paris = function() { // The Paris city's local scope console.log(myFriend); // output: Monique }; paris(); }; france(); } }; locales.europe(); 1 lama, dan dengan menggunakan kata kunci var locales = { europe: function() { // The Europe continent's local scope var myFriend = "Monique"; var france = function() { // France country's local scope var paris = function() { // The Paris city's local scope console.log(myFriend); // output: Monique }; paris(); }; france(); } }; locales.europe(); 2 dan var locales = { europe: function() { // The Europe continent's local scope var myFriend = "Monique"; var france = function() { // France country's local scope var paris = function() { // The Paris city's local scope console.log(myFriend); // output: Monique }; paris(); }; france(); } }; locales.europe(); 3 baru. Sebelum ES6, menggunakan kata kunci var locales = { europe: function() { // The Europe continent's local scope var myFriend = "Monique"; var france = function() { // France country's local scope var paris = function() { // The Paris city's local scope console.log(myFriend); // output: Monique }; paris(); }; france(); } }; locales.europe(); _1 adalah satu-satunya cara untuk mendeklarasikan variabel, tetapi sekarang kita dapat menggunakan var locales = { europe: function() { // The Europe continent's local scope var myFriend = "Monique"; var france = function() { // France country's local scope var paris = function() { // The Paris city's local scope console.log(myFriend); // output: Monique }; paris(); }; france(); } }; locales.europe(); 2 dan var locales = { europe: function() { // The Europe continent's local scope var myFriend = "Monique"; var france = function() { // France country's local scope var paris = function() { // The Paris city's local scope console.log(myFriend); // output: Monique }; paris(); }; france(); } }; locales.europe(); 3, yang memiliki aturan lebih ketat dan membuat kode lebih rentan kesalahan. Kami akan mengeksplorasi perbedaan antara ketiga kata kunci di bawah ini

Aturan pelingkupan bervariasi dari bahasa ke bahasa. JavaScript memiliki dua cakupan. global dan lokal. Cakupan lokal memiliki dua variasi. lingkup fungsi lama, dan lingkup blok baru diperkenalkan dengan ES6. Perlu dicatat bahwa ruang lingkup fungsi sebenarnya adalah jenis khusus dari ruang lingkup blok

Lingkup Global

Dalam sebuah skrip, cakupan terluar adalah cakupan global. Setiap variabel yang dideklarasikan dalam lingkup ini menjadi variabel global dan dapat diakses dari mana saja di dalam program

// Global Scope const name = "Monique"; function sayHi() { console.log(`Hi ${name}`); } sayHi(); // Hi Monique _

Seperti yang ditunjukkan contoh sederhana ini, variabel var locales = { europe: function() { // The Europe continent's local scope var myFriend = "Monique"; var france = function() { // France country's local scope var paris = function() { // The Paris city's local scope console.log(myFriend); // output: Monique }; paris(); }; france(); } }; locales.europe(); 7 bersifat global. Ini didefinisikan dalam lingkup global, dan dapat diakses di seluruh program

Tapi meskipun kelihatannya berguna, penggunaan variabel global tidak disarankan dalam JavaScript. Ini, misalnya, karena mereka berpotensi ditimpa oleh skrip lain, atau dari tempat lain di program Anda

Lingkup Lokal

Variabel apa pun yang dideklarasikan di dalam blok milik blok tersebut dan menjadi variabel lokal

Fungsi dalam JavaScript mendefinisikan ruang lingkup untuk variabel yang dideklarasikan menggunakan var locales = { europe: function() { // The Europe continent's local scope var myFriend = "Monique"; var france = function() { // France country's local scope var paris = function() { // The Paris city's local scope console.log(myFriend); // output: Monique }; paris(); }; france(); } }; locales.europe(); 1, var locales = { europe: function() { // The Europe continent's local scope var myFriend = "Monique"; var france = function() { // France country's local scope var paris = function() { // The Paris city's local scope console.log(myFriend); // output: Monique }; paris(); }; france(); } }; locales.europe(); 2 dan var locales = { europe: function() { // The Europe continent's local scope var myFriend = "Monique"; var france = function() { // France country's local scope var paris = function() { // The Paris city's local scope console.log(myFriend); // output: Monique }; paris(); }; france(); } }; locales.europe(); 3. Variabel apa pun yang dideklarasikan dalam fungsi itu hanya dapat diakses dari fungsi itu dan fungsi bersarang apa pun

Blok kode (function testScope(n) { if (true) { const greeting = 'Hello'; let name = n; console.log(greeting + " " + name); // output: Hello [name] } console.log(greeting + " " + name); // output: ReferenceError: greeting is not defined } testScope('David'); 1, function testScope(n) { if (true) { const greeting = 'Hello'; let name = n; console.log(greeting + " " + name); // output: Hello [name] } console.log(greeting + " " + name); // output: ReferenceError: greeting is not defined } testScope('David'); 2, dll. ) menentukan ruang lingkup hanya untuk variabel yang dideklarasikan dengan kata kunci var locales = { europe: function() { // The Europe continent's local scope var myFriend = "Monique"; var france = function() { // France country's local scope var paris = function() { // The Paris city's local scope console.log(myFriend); // output: Monique }; paris(); }; france(); } }; locales.europe(); 2 dan var locales = { europe: function() { // The Europe continent's local scope var myFriend = "Monique"; var france = function() { // France country's local scope var paris = function() { // The Paris city's local scope console.log(myFriend); // output: Monique }; paris(); }; france(); } }; locales.europe(); 3. Kata kunci var locales = { europe: function() { // The Europe continent's local scope var myFriend = "Monique"; var france = function() { // France country's local scope var paris = function() { // The Paris city's local scope console.log(myFriend); // output: Monique }; paris(); }; france(); } }; locales.europe(); 1 terbatas pada ruang lingkup fungsi, artinya ruang lingkup baru hanya dapat dibuat di dalam fungsi

Kata kunci var locales = { europe: function() { // The Europe continent's local scope var myFriend = "Monique"; var france = function() { // France country's local scope var paris = function() { // The Paris city's local scope console.log(myFriend); // output: Monique }; paris(); }; france(); } }; locales.europe(); 2 dan var locales = { europe: function() { // The Europe continent's local scope var myFriend = "Monique"; var france = function() { // France country's local scope var paris = function() { // The Paris city's local scope console.log(myFriend); // output: Monique }; paris(); }; france(); } }; locales.europe(); 3 memiliki cakupan blok, yang membuat cakupan lokal baru untuk setiap blok yang dideklarasikan. Anda juga dapat menentukan blok kode mandiri dalam JavaScript, dan mereka juga membatasi ruang lingkup

{ // standalone block scope }

Cakupan fungsi dan blok dapat disarangkan. Dalam situasi seperti itu, dengan beberapa lingkup bersarang, sebuah variabel dapat diakses di dalam lingkupnya sendiri atau dari lingkup dalam. Tetapi di luar cakupannya, variabel tersebut tidak dapat diakses

Contoh Sederhana untuk Membantu Memvisualisasikan Lingkup

Untuk memperjelas, mari gunakan metafora sederhana. Setiap negara di dunia kita memiliki perbatasan. Segala sesuatu di dalam perbatasan ini termasuk dalam ruang lingkup negara. Di setiap negara terdapat banyak kota, dan masing-masing memiliki ruang lingkup kotanya sendiri. Negara dan kota sama seperti fungsi atau blok JavaScript. Mereka memiliki cakupan lokal mereka. Hal yang sama berlaku untuk benua. Meskipun ukurannya sangat besar, mereka juga dapat didefinisikan sebagai lokal

Di sisi lain, lautan dunia tidak dapat didefinisikan memiliki ruang lingkup lokal, karena mereka sebenarnya membungkus semua objek lokal — benua, negara, dan kota — dan dengan demikian, ruang lingkupnya didefinisikan sebagai global. Mari kita visualisasikan ini pada contoh berikutnya

var locales = { europe: function() { // The Europe continent's local scope var myFriend = "Monique"; var france = function() { // France country's local scope var paris = function() { // The Paris city's local scope console.log(myFriend); // output: Monique }; paris(); }; france(); } }; locales.europe();

Lihat Pena
Lingkup Variabel. 1 oleh SitePoint (@SitePoint)
di CodePen

Di sini, variabel function testScope(n) { if (true) { const greeting = 'Hello'; let name = n; console.log(greeting + " " + name); // output: Hello [name] } console.log(greeting + " " + name); // output: ReferenceError: greeting is not defined } testScope('David'); _8 tersedia dari fungsi function testScope(n) { if (true) { const greeting = 'Hello'; let name = n; console.log(greeting + " " + name); // output: Hello [name] } console.log(greeting + " " + name); // output: ReferenceError: greeting is not defined } testScope('David'); 9, seperti yang didefinisikan dalam lingkup luar fungsi function testScope(n) { if (true) { var greeting = 'Hello'; var name = n; console.log(greeting + " " + name); // output: Hello [name] } console.log(greeting + " " + name); // output: Hello [name] } testScope('David'); 0. Jika kita menukar variabel function testScope(n) { if (true) { const greeting = 'Hello'; let name = n; console.log(greeting + " " + name); // output: Hello [name] } console.log(greeting + " " + name); // output: ReferenceError: greeting is not defined } testScope('David'); 8 dan pernyataan konsol, kita akan mendapatkan function testScope(n) { if (true) { var greeting = 'Hello'; var name = n; console.log(greeting + " " + name); // output: Hello [name] } console.log(greeting + " " + name); // output: Hello [name] } testScope('David'); 2, karena kita tidak dapat menjangkau lingkup dalam dari lingkup luar

Sekarang setelah kita memahami apa itu cakupan lokal dan global, dan bagaimana cakupan dibuat, saatnya untuk mempelajari bagaimana juru bahasa JavaScript menggunakannya untuk menemukan variabel tertentu.

Kembali ke metafora yang diberikan, katakanlah saya ingin mencari teman saya yang bernama Monique. Saya tahu dia tinggal di Paris, jadi saya mulai mencari dari sana. Ketika saya tidak dapat menemukannya di Paris, saya naik satu tingkat dan memperluas pencarian saya di seluruh Prancis. Tapi sekali lagi, dia tidak ada di sana. Selanjutnya, saya memperluas pencarian saya lagi dengan naik level lagi. Akhirnya, saya menemukannya di Italia, yang dalam kasus kami adalah lingkup lokal Eropa

Pada contoh sebelumnya, teman saya Monique diwakili oleh variabel function testScope(n) { if (true) { const greeting = 'Hello'; let name = n; console.log(greeting + " " + name); // output: Hello [name] } console.log(greeting + " " + name); // output: ReferenceError: greeting is not defined } testScope('David'); 8. Di baris terakhir kita memanggil fungsi function testScope(n) { if (true) { var greeting = 'Hello'; var name = n; console.log(greeting + " " + name); // output: Hello [name] } console.log(greeting + " " + name); // output: Hello [name] } testScope('David'); _4, yang memanggil function testScope(n) { if (true) { var greeting = 'Hello'; var name = n; console.log(greeting + " " + name); // output: Hello [name] } console.log(greeting + " " + name); // output: Hello [name] } testScope('David'); 5, dan akhirnya ketika fungsi function testScope(n) { if (true) { var greeting = 'Hello'; var name = n; console.log(greeting + " " + name); // output: Hello [name] } console.log(greeting + " " + name); // output: Hello [name] } testScope('David'); 6 dipanggil, pencarian dimulai. Penerjemah JavaScript bekerja dari lingkup yang sedang dijalankan dan bekerja sampai menemukan variabel yang dimaksud. Jika variabel tidak ditemukan dalam ruang lingkup apa pun, pengecualian akan dilemparkan

Jenis pencarian ini disebut. Struktur statis suatu program menentukan ruang lingkup variabel. Lingkup variabel ditentukan oleh lokasinya di dalam kode sumber, dan fungsi bersarang memiliki akses ke variabel yang dideklarasikan dalam lingkup luarnya. Tidak peduli dari mana suatu fungsi dipanggil, atau bahkan bagaimana itu dipanggil, cakupan leksikalnya hanya bergantung pada tempat fungsi itu dideklarasikan

Sekarang mari kita lihat bagaimana cakupan blok baru bekerja

function testScope(n) { if (true) { const greeting = 'Hello'; let name = n; console.log(greeting + " " + name); // output: Hello [name] } console.log(greeting + " " + name); // output: ReferenceError: greeting is not defined } testScope('David');

Lihat Pena
Lingkup Variabel. 2 oleh SitePoint (@SitePoint)
di CodePen

Dalam contoh ini, kita dapat melihat bahwa variabel function testScope(n) { if (true) { var greeting = 'Hello'; var name = n; console.log(greeting + " " + name); // output: Hello [name] } console.log(greeting + " " + name); // output: Hello [name] } testScope('David'); 7 dan var locales = { europe: function() { // The Europe continent's local scope var myFriend = "Monique"; var france = function() { // France country's local scope var paris = function() { // The Paris city's local scope console.log(myFriend); // output: Monique }; paris(); }; france(); } }; locales.europe(); 7 yang dideklarasikan dengan var locales = { europe: function() { // The Europe continent's local scope var myFriend = "Monique"; var france = function() { // France country's local scope var paris = function() { // The Paris city's local scope console.log(myFriend); // output: Monique }; paris(); }; france(); } }; locales.europe(); 3 dan var locales = { europe: function() { // The Europe continent's local scope var myFriend = "Monique"; var france = function() { // France country's local scope var paris = function() { // The Paris city's local scope console.log(myFriend); // output: Monique }; paris(); }; france(); } }; locales.europe(); 2 tidak dapat diakses di luar blok function testScope(n) { if (true) { const greeting = 'Hello'; let name = n; console.log(greeting + " " + name); // output: Hello [name] } console.log(greeting + " " + name); // output: ReferenceError: greeting is not defined } testScope('David'); 1

Sekarang mari kita ganti var locales = { europe: function() { // The Europe continent's local scope var myFriend = "Monique"; var france = function() { // France country's local scope var paris = function() { // The Paris city's local scope console.log(myFriend); // output: Monique }; paris(); }; france(); } }; locales.europe(); _3 dan var locales = { europe: function() { // The Europe continent's local scope var myFriend = "Monique"; var france = function() { // France country's local scope var paris = function() { // The Paris city's local scope console.log(myFriend); // output: Monique }; paris(); }; france(); } }; locales.europe(); 2 dengan var locales = { europe: function() { // The Europe continent's local scope var myFriend = "Monique"; var france = function() { // France country's local scope var paris = function() { // The Paris city's local scope console.log(myFriend); // output: Monique }; paris(); }; france(); } }; locales.europe(); 1 dan lihat apa yang terjadi

function testScope(n) { if (true) { var greeting = 'Hello'; var name = n; console.log(greeting + " " + name); // output: Hello [name] } console.log(greeting + " " + name); // output: Hello [name] } testScope('David');

Lihat Pena
Lingkup Variabel. 3 oleh SitePoint (@SitePoint)
di CodePen

Seperti yang Anda lihat, saat kita menggunakan kata kunci var locales = { europe: function() { // The Europe continent's local scope var myFriend = "Monique"; var france = function() { // France country's local scope var paris = function() { // The Paris city's local scope console.log(myFriend); // output: Monique }; paris(); }; france(); } }; locales.europe(); 1, variabel dapat dijangkau di seluruh cakupan fungsi

Dalam JavaScript, variabel dengan nama yang sama dapat ditentukan di beberapa lapisan lingkup bersarang. Dalam situasi seperti itu, variabel lokal mendapat prioritas di atas variabel global. Jika Anda mendeklarasikan variabel lokal dan variabel global dengan nama yang sama, variabel lokal akan diutamakan saat Anda menggunakannya di dalam fungsi atau blok. Jenis perilaku ini disebut membayangi. Sederhananya, variabel dalam membayangi luar

Itulah mekanisme persis yang digunakan saat juru bahasa JavaScript mencoba menemukan variabel tertentu. Ini dimulai pada lingkup terdalam yang dieksekusi pada saat itu, dan berlanjut hingga kecocokan pertama ditemukan, tidak peduli apakah ada variabel lain dengan nama yang sama di tingkat luar atau tidak. Mari kita lihat contohnya

var test = "I'm global"; function testScope() { var test = "I'm local"; console.log (test); } testScope(); // output: I'm local console.log(test); // output: I'm global

Lihat Pena
Lingkup Variabel. 4 oleh SitePoint (@SitePoint)
di CodePen

Bahkan dengan nama yang sama, variabel lokal tidak menimpa variabel global setelah eksekusi fungsi var test = "I'm global"; function testScope() { var test = "I'm local"; console.log (test); } testScope(); // output: I'm local console.log(test); // output: I'm global 6. Tapi ini tidak selalu terjadi. Mari pertimbangkan ini

var test = "I'm global"; function testScope() { test = "I'm local"; console.log(test); } console.log(test); // output: I'm global testScope(); // output: I'm local console.log(test); // output: I'm local (the global variable is reassigned)

Lihat Pena
Lingkup Variabel. 5 oleh SitePoint (@SitePoint)
di CodePen

Kali ini, variabel lokal var test = "I'm global"; function testScope() { var test = "I'm local"; console.log (test); } testScope(); // output: I'm local console.log(test); // output: I'm global _7 menimpa variabel global dengan nama yang sama. Saat kami menjalankan kode di dalam fungsi var test = "I'm global"; function testScope() { var test = "I'm local"; console.log (test); } testScope(); // output: I'm local console.log(test); // output: I'm global 6, variabel global dipindahkan. Jika variabel lokal ditugaskan tanpa terlebih dahulu dideklarasikan dengan kata kunci var locales = { europe: function() { // The Europe continent's local scope var myFriend = "Monique"; var france = function() { // France country's local scope var paris = function() { // The Paris city's local scope console.log(myFriend); // output: Monique }; paris(); }; france(); } }; locales.europe(); 1, itu menjadi variabel global. Untuk menghindari perilaku yang tidak diinginkan tersebut, Anda harus selalu mendeklarasikan variabel lokal sebelum menggunakannya. Variabel apa pun yang dideklarasikan dengan kata kunci var locales = { europe: function() { // The Europe continent's local scope var myFriend = "Monique"; var france = function() { // France country's local scope var paris = function() { // The Paris city's local scope console.log(myFriend); // output: Monique }; paris(); }; france(); } }; locales.europe(); _1 di dalam suatu fungsi adalah variabel lokal. Ini dianggap praktik terbaik untuk mendeklarasikan variabel Anda

Catatan. dalam mode ketat, merupakan kesalahan jika Anda menetapkan nilai ke variabel tanpa terlebih dahulu mendeklarasikan variabel

Mengangkat

Penerjemah JavaScript melakukan banyak operasi di belakang layar, dan salah satunya adalah "mengangkat". Jika Anda tidak mengetahui perilaku "tersembunyi" ini, ini dapat menyebabkan banyak kebingungan. Cara berpikir terbaik tentang perilaku variabel JavaScript adalah selalu memvisualisasikannya terdiri dari dua bagian. deklarasi dan inisialisasi/penugasan

var state; // variable declaration state = "ready"; // variable assignment var state = "ready"; // declaration plus assignment

Dalam kode di atas, pertama-tama kita mendeklarasikan variabel var test = "I'm global"; function testScope() { test = "I'm local"; console.log(test); } console.log(test); // output: I'm global testScope(); // output: I'm local console.log(test); // output: I'm local (the global variable is reassigned) 1, dan kemudian kita menetapkan nilai var test = "I'm global"; function testScope() { test = "I'm local"; console.log(test); } console.log(test); // output: I'm global testScope(); // output: I'm local console.log(test); // output: I'm local (the global variable is reassigned) 2 ke dalamnya. Dan di baris kode terakhir, kita melihat bahwa kedua langkah ini dapat digabungkan. Namun yang perlu Anda ingat adalah, meskipun tampak seperti satu pernyataan, dalam praktiknya mesin JavaScript memperlakukan pernyataan tunggal tersebut sebagai dua pernyataan terpisah, seperti pada dua baris pertama contoh.

Kita sudah tahu bahwa setiap variabel yang dideklarasikan dalam suatu ruang lingkup termasuk dalam ruang lingkup itu. Namun yang belum kita ketahui adalah, di mana pun variabel dideklarasikan dalam cakupan tertentu, semua deklarasi variabel dipindahkan ke bagian atas cakupannya (global atau lokal). Ini disebut mengangkat, karena deklarasi variabel diangkat ke atas ruang lingkup. Perhatikan bahwa mengangkat hanya memindahkan deklarasi. Tugas apa pun dibiarkan pada tempatnya. Mari kita lihat contohnya

console.log(state); // output: undefined var state = "ready";

Lihat Pena
Lingkup Variabel. 6 oleh SitePoint (@SitePoint)
di CodePen

Seperti yang Anda lihat, saat kita mencatat nilai var test = "I'm global"; function testScope() { test = "I'm local"; console.log(test); } console.log(test); // output: I'm global testScope(); // output: I'm local console.log(test); // output: I'm local (the global variable is reassigned) 1, hasilnya adalah var test = "I'm global"; function testScope() { test = "I'm local"; console.log(test); } console.log(test); // output: I'm global testScope(); // output: I'm local console.log(test); // output: I'm local (the global variable is reassigned) 4, karena kita mereferensikannya sebelum penugasan sebenarnya. Anda mungkin mengharapkan var test = "I'm global"; function testScope() { test = "I'm local"; console.log(test); } console.log(test); // output: I'm global testScope(); // output: I'm local console.log(test); // output: I'm local (the global variable is reassigned) _5 untuk dilempar, karena var test = "I'm global"; function testScope() { test = "I'm local"; console.log(test); } console.log(test); // output: I'm global testScope(); // output: I'm local console.log(test); // output: I'm local (the global variable is reassigned) 1 belum diumumkan. Tetapi yang tidak Anda ketahui adalah bahwa variabel tersebut dideklarasikan dan diinisialisasi dengan nilai default var test = "I'm global"; function testScope() { test = "I'm local"; console.log(test); } console.log(test); // output: I'm global testScope(); // output: I'm local console.log(test); // output: I'm local (the global variable is reassigned) 4 di belakang layar. Begini cara kode ditafsirkan oleh mesin JavaScript

var state; // moved to the top console.log(state); state = "ready"; // left in place

Penting untuk dicatat bahwa variabel tidak dipindahkan secara fisik. Mengangkat hanyalah model yang menjelaskan apa yang dilakukan mesin JS di belakang layar

Sekarang, mari kita lihat cara mengangkat bekerja dengan var locales = { europe: function() { // The Europe continent's local scope var myFriend = "Monique"; var france = function() { // France country's local scope var paris = function() { // The Paris city's local scope console.log(myFriend); // output: Monique }; paris(); }; france(); } }; locales.europe(); 2 variabel

{ // standalone block scope } _0

Lihat Pena
Lingkup Variabel. 7 oleh SitePoint (@SitePoint)
di CodePen

Dalam contoh ini, output konsol bukan ________42______4, tetapi kesalahan referensi dilemparkan. Mengapa? . Mereka sepenuhnya diinisialisasi hanya jika mereka benar-benar dideklarasikan dalam kode. Jadi, deklarasi variabel var locales = { europe: function() { // The Europe continent's local scope var myFriend = "Monique"; var france = function() { // France country's local scope var paris = function() { // The Paris city's local scope console.log(myFriend); // output: Monique }; paris(); }; france(); } }; locales.europe(); _2 diangkat tetapi tidak diinisialisasi dengan nilai var test = "I'm global"; function testScope() { test = "I'm local"; console.log(test); } console.log(test); // output: I'm global testScope(); // output: I'm local console.log(test); // output: I'm local (the global variable is reassigned) 4, yang merupakan kasus dengan variabel var locales = { europe: function() { // The Europe continent's local scope var myFriend = "Monique"; var france = function() { // France country's local scope var paris = function() { // The Paris city's local scope console.log(myFriend); // output: Monique }; paris(); }; france(); } }; locales.europe(); 1. Bagian dari awal blok hingga deklarasi variabel sebenarnya disebut Zona Mati Temporal. Ini adalah mekanisme yang memastikan praktik pengkodean yang lebih baik, memaksa Anda untuk mendeklarasikan variabel sebelum menggunakannya. Jika kami memindahkan pernyataan konsol dari TDZ, kami akan mendapatkan keluaran yang diharapkan. var state; // variable declaration state = "ready"; // variable assignment var state = "ready"; // declaration plus assignment 5

{ // standalone block scope } _1

Lihat Pena
Lingkup Variabel. 8 oleh SitePoint (@SitePoint)
di CodePen

Variabel yang dideklarasikan dengan kata kunci var locales = { europe: function() { // The Europe continent's local scope var myFriend = "Monique"; var france = function() { // France country's local scope var paris = function() { // The Paris city's local scope console.log(myFriend); // output: Monique }; paris(); }; france(); } }; locales.europe(); _3 memiliki perilaku yang sama dengan variabel var locales = { europe: function() { // The Europe continent's local scope var myFriend = "Monique"; var france = function() { // France country's local scope var paris = function() { // The Paris city's local scope console.log(myFriend); // output: Monique }; paris(); }; france(); } }; locales.europe(); 2

Fungsi

Mengangkat juga memengaruhi deklarasi fungsi. Namun sebelum kita melihat beberapa contoh, mari kita pelajari dulu perbedaan antara deklarasi fungsi dan ekspresi fungsi

{ // standalone block scope } _2

Cara termudah untuk membedakan deklarasi fungsi dari ekspresi fungsi adalah dengan memeriksa posisi kata var state; // variable declaration state = "ready"; // variable assignment var state = "ready"; // declaration plus assignment 8 dalam pernyataan tersebut. Jika var state; // variable declaration state = "ready"; // variable assignment var state = "ready"; // declaration plus assignment _8 adalah hal pertama dalam pernyataan, maka itu adalah deklarasi fungsi. Jika tidak, itu adalah ekspresi fungsi

Deklarasi fungsi diangkat sepenuhnya. Ini berarti seluruh badan fungsi dipindahkan ke atas. Ini memungkinkan Anda untuk memanggil fungsi sebelum dideklarasikan

{ // standalone block scope } _3

Lihat Pena
Lingkup Variabel. 9 oleh SitePoint (@SitePoint)
di CodePen

Alasan kode sebelumnya berfungsi adalah karena mesin JavaScript memindahkan deklarasi fungsi console.log(state); // output: undefined var state = "ready"; 0, dan semua kontennya, ke awal ruang lingkup. Kode ditafsirkan seperti ini

{ // standalone block scope } _4

Seperti yang mungkin Anda perhatikan, hanya deklarasi fungsi yang diangkat, tetapi ekspresi fungsinya tidak. Ketika suatu fungsi ditugaskan ke variabel, aturannya sama dengan untuk mengangkat variabel (hanya deklarasi yang dipindahkan, sedangkan penugasan dibiarkan di tempatnya)

Pada kode di atas, kita melihat bahwa deklarasi fungsi lebih diutamakan daripada deklarasi variabel. Dan dalam contoh berikutnya, kita akan melihat bahwa ketika kita memiliki deklarasi fungsi versus penugasan variabel, yang terakhir diprioritaskan

{ // standalone block scope } _5

Lihat Pena
Lingkup Variabel. 10 oleh SitePoint (@SitePoint)
di CodePen

Kali ini, kami memanggil fungsi console.log(state); // output: undefined var state = "ready"; _0 di baris terakhir kode, yang mengubah situasi. Sekarang kita mendapatkan output console.log(state); // output: undefined var state = "ready"; 2. Begini tampilannya saat ditafsirkan oleh mesin JavaScript

{ // standalone block scope } _6

Catatan. fungsi panah bekerja secara identik dengan ekspresi fungsi

Kelas

Deklarasi kelas juga diangkat dengan cara yang sama seperti variabel yang dideklarasikan dengan pernyataan var locales = { europe: function() { // The Europe continent's local scope var myFriend = "Monique"; var france = function() { // France country's local scope var paris = function() { // The Paris city's local scope console.log(myFriend); // output: Monique }; paris(); }; france(); } }; locales.europe(); 2

{ // standalone block scope } _7

Lihat Pena
Lingkup Variabel. 11 oleh SitePoint (@SitePoint)
di CodePen

Dalam contoh ini, kita dapat melihat bahwa menggunakan kelas console.log(state); // output: undefined var state = "ready"; 4 sebelum deklarasi menghasilkan kesalahan referensi yang mirip dengan yang ada di variabel var locales = { europe: function() { // The Europe continent's local scope var myFriend = "Monique"; var france = function() { // France country's local scope var paris = function() { // The Paris city's local scope console.log(myFriend); // output: Monique }; paris(); }; france(); } }; locales.europe(); 2. Untuk memperbaikinya, kita harus menggunakan kelas console.log(state); // output: undefined var state = "ready"; 4 setelah deklarasi

{ // standalone block scope } _8

Lihat Pena
Lingkup Variabel. 12 oleh SitePoint (@SitePoint)
di CodePen

Kelas juga dapat dibuat menggunakan ekspresi kelas, dengan menggunakan var locales = { europe: function() { // The Europe continent's local scope var myFriend = "Monique"; var france = function() { // France country's local scope var paris = function() { // The Paris city's local scope console.log(myFriend); // output: Monique }; paris(); }; france(); } }; locales.europe(); 1, var locales = { europe: function() { // The Europe continent's local scope var myFriend = "Monique"; var france = function() { // France country's local scope var paris = function() { // The Paris city's local scope console.log(myFriend); // output: Monique }; paris(); }; france(); } }; locales.europe(); 2 atau var locales = { europe: function() { // The Europe continent's local scope var myFriend = "Monique"; var france = function() { // France country's local scope var paris = function() { // The Paris city's local scope console.log(myFriend); // output: Monique }; paris(); }; france(); } }; locales.europe(); 3 pernyataan deklarasi variabel

{ // standalone block scope } _9

Lihat Pena
Lingkup Variabel. 13 oleh SitePoint (@SitePoint)
di CodePen

Dalam contoh ini, kita dapat melihat bahwa kelas console.log(state); // output: undefined var state = "ready"; 4 diangkat sebagai ekspresi fungsi, tetapi tidak dapat digunakan karena nilainya adalah var test = "I'm global"; function testScope() { test = "I'm local"; console.log(test); } console.log(test); // output: I'm global testScope(); // output: I'm local console.log(test); // output: I'm local (the global variable is reassigned) 4. Sekali lagi, untuk memperbaikinya kita harus menggunakan kelas console.log(state); // output: undefined var state = "ready"; 4 setelah deklarasi

var locales = { europe: function() { // The Europe continent's local scope var myFriend = "Monique"; var france = function() { // France country's local scope var paris = function() { // The Paris city's local scope console.log(myFriend); // output: Monique }; paris(); }; france(); } }; locales.europe(); 0

Lihat Pena
Lingkup Variabel. 14 oleh SitePoint (@SitePoint)
di CodePen

Hal-hal untuk diingat

• var locales = { europe: function() { // The Europe continent's local scope var myFriend = "Monique"; var france = function() { // France country's local scope var paris = function() { // The Paris city's local scope console.log(myFriend); // output: Monique }; paris(); }; france(); } }; locales.europe(); 1 variabel adalah cakupan fungsi
• var locales = { europe: function() { // The Europe continent's local scope var myFriend = "Monique"; var france = function() { // France country's local scope var paris = function() { // The Paris city's local scope console.log(myFriend); // output: Monique }; paris(); }; france(); } }; locales.europe(); 2 dan var locales = { europe: function() { // The Europe continent's local scope var myFriend = "Monique"; var france = function() { // France country's local scope var paris = function() { // The Paris city's local scope console.log(myFriend); // output: Monique }; paris(); }; france(); } }; locales.europe(); 3 variabel adalah cakupan blok (ini termasuk fungsi juga)
• Semua deklarasi — kelas, fungsi, dan variabel — diangkat ke bagian atas cakupan yang berisi, sebelum bagian mana pun dari kode Anda dijalankan
• Fungsi diangkat terlebih dahulu, kemudian variabel
• Deklarasi fungsi memiliki prioritas di atas deklarasi variabel, tetapi tidak di atas penugasan variabel

Bagikan Artikel Ini

Ivaylo Gerchev

Saya seorang pengembang/perancang web dari Bulgaria. Teknologi web favorit saya termasuk SVG, HTML, CSS, Tailwind, JavaScript, Node, Vue, dan React. Saat saya tidak memprogram Web, saya suka memprogram realitas saya sendiri ;)

Bagaimana cara membuat variabel dapat diakses di luar fungsi dalam JavaScript?

Bisakah saya mengakses variabel var di luar fungsi JavaScript?

Bagaimana Anda mengakses variabel dalam fungsi di luar fungsi?