Ruang lingkup merupakan konsep penting dalam menentukan aksesibilitas variabel. Konsep ini berada di jantung penutupan, membagi variabel menjadi global dan lokal.
Pada artikel ini saya akan mencoba menjelaskan secara sederhana apa ruang lingkup dalam JavaScript.
1. Ruang Lingkup
Sebelum mendalami detail cakupan, mari kita lihat contoh singkatnya.
Katakanlah kita telah mendefinisikan variabel:
const message = 'Hello'
console.log(message) // 'Hello'
Kita dapat dengan mudah menampilkan nilainya ke konsol. Ini jelas.
Sekarang mari tempatkan deklarasi variabel pesan di blok if:
if (true) {
const message = 'Hello'
}
console.log(message) // ReferenceError: message is not defined
Kali ini, ketika mencoba mengakses variabel, sebuah ReferenceError: pesan tidak didefinisikan pengecualian dilempar.
Kenapa ini terjadi?
Karena blok if telah menciptakan ruang lingkup untuk variabel pesan. Dan pesan hanya tersedia dalam cakupan ini.
Jadi, ketersediaan variabel dibatasi oleh ruang lingkup di mana mereka didefinisikan.
Jadi ruang lingkup adalah ruang lingkup variabel.
2. Lingkup blok
Sebuah blok kode dalam JavaScript mendefinisikan ruang lingkup variabel yang dideklarasikan dengan const dan membiarkan kata kunci:
if (true) {
// if
const message = 'Hello'
console.log(message) // 'Hello'
}
console.log(message) // ReferenceError
Console.log () pertama dengan aman mencetak nilai variabel pesan ke konsol, karena variabel ini diakses dalam cakupan di mana ia didefinisikan.
Namun, memanggil console.log kedua () menghasilkan kesalahan karena variabel pesan tidak tersedia dalam lingkup eksternalnya: pesan tidak ada dalam konteks saat ini.
Lingkup blok juga dibuat dalam pernyataan if, for, while.
Misalnya:
for (const color of ['green', 'red', 'blue']) {
// for
const message = 'Hi'
console.log(color) // 'green', 'red', 'blue'
console.log(message) // 'Hi', 'Hi', 'Hi'
}
console.log(color) // ReferenceError
console.log(message) // ReferenceError
Variabel warna dan pesan hanya ada di dalam blok for.
Hal yang sama berlaku untuk pernyataan while:
while (/* */) {
// while
const message = 'Hi'
console.log(message) // 'Hi'
}
console.log(message) // ReferenceError
Pesan yang ditentukan dalam while hanya tersedia dalam loop ini.
Di JavaScript, Anda dapat membuat blok kode mandiri. Mereka juga menentukan ruang lingkup mereka sendiri:
{
const message = 'Hi'
console.log(message) // 'Hi'
}
console.log(message) // ReferenceError
2.1. var tidak memiliki cakupan blok
Seperti yang kita lihat pada contoh sebelumnya, blok kode menciptakan ruang lingkup untuk variabel yang dideklarasikan dengan const dan membiarkan kata kunci. Namun, ini tidak berfungsi untuk variabel yang dideklarasikan dengan kata kunci var.
Mari pertimbangkan sebuah contoh:
if (true) {
// if
var count = 0
console.log(count) // 0
}
console.log(count) // 0
Jumlah variabel tersedia di dalam blok if, seperti yang diharapkan. Namun, itu juga tersedia di luar blok ini!
Ini karena blok kode tidak membuat ruang lingkup untuk variabel yang dideklarasikan dengan kata kunci var. Tapi fungsinya melakukannya.
3. Ruang lingkup fungsi
Fungsi dalam JavaScript membuat cakupan untuk semua variabel, tidak peduli dengan kata kunci apa variabel tersebut dideklarasikan (var, const, atau let).
Misalnya:
function run() {
// run()
var message = ', , !'
console.log(message)
}
run() // ', , !'
console.log(message) // ReferenceError
Fungsi run () membuat ruang lingkup. Pesan variabel tersedia di dalam fungsi, tetapi tidak di luar.
Demikian juga, fungsi tersebut membuat ruang lingkup untuk variabel yang dideklarasikan dengan const dan let, dan bahkan untuk fungsi dan ekspresi fungsi lainnya:
function run() {
// run()
const two = 2
let one = 1
function run2() {}
var run3 = () => {}
console.log(two)
console.log(one)
console.log(run2)
console.log(run3)
}
run() // 2 1 ƒ run2() {} () => {}
console.log(two) // ReferenceError
console.log(one) // ReferenceError
console.log(run2) // ReferenceError
console.log(run3) // ReferenceError
4. Visibilitas modul
Modul ES6 juga membuat ruang lingkup untuk variabel, fungsi, dan kelas.
Modul lingkaran membuat pi konstan (untuk penggunaan internal):
// circle
const pi = 3.14
console.log(pi) // 3.14
// pi
Variabel pi dideklarasikan di dalam modul circle dan tidak diekspor dari sana.
Kemudian modul lingkaran diimpor:
import './circle'
console.log(pi) // ReferenceError
Variabel pi tidak tersedia di luar modul circle (sampai itu diekspor menggunakan ekspor).
Ruang lingkup modular merangkum modul. Ini berarti bahwa variabel privat (yang tidak diekspor) digunakan untuk kebutuhan modul itu sendiri dan dilindungi dari akses luar.
Jadi, kita dapat mengatakan bahwa ruang lingkup adalah mekanisme enkapsulasi untuk blok kode, fungsi, dan modul.
5. Cakupan bisa disarangkan
Fitur yang menarik dari cakupan adalah bahwa mereka dapat bertumpuk satu sama lain.
Dalam contoh berikut, fungsi run () membuat ruang lingkup, dan di dalamnya, blok if membuat ruang lingkup lain:
function run() {
// run()
const message = ', , !'
if (true) {
// if
const friend = ''
console.log(message) // ', , !'
}
console.log(friend) // ReferenceError
}
run()
Cakupan blok if berada di dalam lingkup fungsi run ().
Ruang lingkup yang berada di dalam lingkup lain disebut lingkup internal. Dalam contoh di atas, ini adalah cakupan blok if.
Ruang lingkup yang berisi lingkup lain disebut lingkup luar. Dalam contoh di atas, ini adalah cakupan fungsi run ().
Bagaimana dengan ketersediaan variabel? Aturan sederhana untuk diingat adalah:
Variabel dari lingkup luar tersedia di lingkup dalam.
Oleh karena itu, variabel pesan tersedia di dalam blok if.
6. Ruang lingkup global
Cakupan global adalah cakupan terluar. Ini tersedia untuk lingkup internal atau lokal apa pun. Di browser, cakupan global dibuat ketika file JavaScript yang ditentukan dalam atribut src dari tag skrip dimuat:
<script src="script.js">// script.js
// lingkup global
let counter = 1
Variabel yang dideklarasikan dalam lingkup global adalah variabel global. Mereka tersedia di area lain.
Cakupan global adalah mekanisme yang memungkinkan runtime JavaScript (browser, Node.js) untuk mengekspos objek host (yaitu, milik lingkungan) ke aplikasi sebagai variabel global.
Misalnya, jendela dan dokumen adalah variabel global (objek) yang disediakan oleh browser. Di Node.js, variabel seperti itu, misalnya, adalah objek proses.
7. Ruang lingkup leksikal
Mari kita definisikan dua fungsi, salah satunya bertumpuk di dalam yang lain:
function outer() {
// outer()
let v = ' outer()!'
function inner() {
// inner()
console.log(v) // ' outer()!'
}
return inner
}
const f = outer()
f()
Lihatlah baris terakhir: inner () dipanggil di luar lingkup outer (). Bagaimana JavaScript mengetahui bahwa nilai yang dicetak ke konsol di fungsi inner () milik variabel v yang dideklarasikan di fungsi outer ()?
Jawaban: berkat lexical scoping.
JavaScript mengimplementasikan mekanisme yang disebut pelingkupan leksikal atau statis. Lingkup leksikal berarti bahwa aksesibilitas variabel secara statis ditentukan oleh posisi variabel-variabel ini dalam lingkup fungsi bersarang: variabel dari ruang lingkup fungsi luar tersedia dalam ruang lingkup fungsi bertingkat.
Definisi formal dari lingkup leksikal adalah sebagai berikut:
Ruang lingkup leksikal terdiri dari lingkup eksternal yang didefinisikan secara statis, yaitu. dari wilayah luar, diperbaiki dengan menggunakan variabel dari wilayah tersebut di fungsi dalam.
Dalam contoh di atas, lingkup leksikal dari fungsi inner () terdiri dari ruang lingkup fungsi outer ().
Selain itu, inner () adalah closure karena menggunakan nilai variabel dari lexical scope.
8. Isolasi variabel
Jelas, ruang lingkup mengisolasi variabel. Ini memungkinkan cakupan yang berbeda untuk memuat variabel dengan nama yang sama.
Anda dapat menggunakan jumlah variabel, indeks, arus, nilai, dll. di berbagai daerah tanpa ancaman benturan (konflik nama).
Misalnya:
function foo() {
// foo()
let count = 1
console.log(count) // 1
}
function bar() {
// bar()
let count = 2
console.log(count) // 2
}
foo()
bar()
Kesimpulan
Ruang lingkup menentukan ketersediaan variabel. Variabel yang dideklarasikan dalam cakupan saat ini hanya tersedia di dalamnya.
Dalam JavaScript, cakupan dibuat oleh blok, fungsi, dan modul.
Variabel dideklarasikan dengan const dan biarkan kata kunci dapat diblokir, berfungsi, atau modular, sedangkan variabel yang dideklarasikan dengan kata kunci var tidak memiliki cakupan blok.
Cakupan bisa disarangkan. Variabel yang dideklarasikan di lingkup luar tersedia di lingkup dalam.
Lingkup leksikal terdiri dari lingkup luar yang didefinisikan secara statis. Fungsi apa pun, terlepas dari tempat eksekusi, memiliki akses ke variabel dari ruang lingkup leksikal (ini adalah inti dari closure).
Semoga artikel ini bermanfaat bagi Anda. Terima kasih atas perhatian Anda.