Javascript membuat variabel tersedia di luar fungsi

Question

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

Table of Contents Show

Lingkup Variabel
Lingkup Global
Lingkup Lokal
Contoh Sederhana untuk Membantu Memvisualisasikan Lingkup
Hal-hal untuk diingat
Bagikan Artikel Ini
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?

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?

Variabel yang dideklarasikan secara Global (di luar fungsi apa pun) memiliki Cakupan Global . Variabel global dapat diakses dari mana saja dalam program JavaScript. Variabel yang dideklarasikan dengan var , let dan const sangat mirip ketika dideklarasikan di luar blok.

Bisakah saya mengakses variabel var di luar fungsi JavaScript?

Variabel yang dideklarasikan di dalam fungsi apa pun dengan kata kunci var disebut variabel lokal. Variabel lokal tidak dapat diakses atau dimodifikasi di luar deklarasi fungsi .

Bagaimana Anda mengakses variabel dalam fungsi di luar fungsi?

Menggunakan kata kunci "global", Anda dapat mengubah cakupan variabel dari lokal ke global, lalu Anda dapat mengaksesnya di luar fungsi . e. g. Kode berikut akan mencetak v =25 meskipun pernyataan cetak berada di luar fungsi.

kode javascript