Javascript

Let JavaScript: Lingkup dan Contoh Codenya

ECMAScript 2015

ES2015 memperkenalkan dua kata kunci JavaScript baru yang penting yaitu let dan const.

Kedua kata kunci ini menyediakan variabel cakupan Blok (dan konstanta) di JavaScript.

Sebelum ES2015, JavaScript hanya memiliki dua jenis cakupan: Cakupan Global dan Cakupan Fungsi.

Lingkup Global

Variabel yang dideklarasikan secara Global (di luar fungsi apa pun) memiliki Cakupan Global.

Contoh:

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Scope</h2>

<p> Variabel GLOBAL dapat diakses dari skrip atau fungsi apa pun. </p>
<p id="demo"></p>

<script>
var carName = "Volvo";
myFunction();

function myFunction() {
  document.getElementById("demo").innerHTML = "I can display " + carName;
}
</script>

</body>
</html>

Variabel global dapat diakses dari mana saja dalam program JavaScript.

Lingkup Fungsi

Variabel yang dideklarasikan secara Lokal (di dalam fungsi) memiliki Cakupan Fungsi.

Contoh:

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Scope</h2>

<p> Di luar myFunction() carName tidak ditentukan. </p>
<p id="demo1"></p>

<p id="demo2"></p>

<script>
myFunction();

function myFunction() {
  var carName = "Volvo";
  document.getElementById("demo1").innerHTML = typeof carName + " " + carName;
}
document.getElementById("demo2").innerHTML = typeof carName;
</script>

</body>
</html>

Variabel lokal hanya dapat diakses dari dalam fungsi tempat variabel tersebut dideklarasikan.

Lingkup Blok JavaScript

Variabel yang dideklarasikan dengan kata kunci var tidak boleh memiliki Cakupan Blok.

Variabel yang dideklarasikan di dalam blok {} bisa diakses dari luar blok.

Contoh:

{
  var x = 2;
}
// x CAN be used here

Sebelum ES2015 JavaScript tidak memiliki Cakupan Blok.

Variabel yang dideklarasikan dengan kata kunci let memiliki cakupan Blok.

Variabel yang dideklarasikan di dalam blok {} tidak dapat diakses dari luar blok.

Contoh

{
  let x = 2;
}
// x can NOT be used here

Mendeklarasikan Ulang Variabel

Mendeklarasikan ulang variabel menggunakan kata kunci var dapat menimbulkan masalah.

Mendeklarasikan ulang variabel di dalam blok juga akan mendeklarasikan ulang variabel di luar blok.

Contoh:

<!DOCTYPE html>
<html>
<body>

<h2>Mendeklarasikan Variabel Menggunakan var</h2>
<p id="demo"></p>

<script>
var  x = 10;
// Here x is 10
{  
  var x = 2;
  // Here x is 2
}
// Here x is 2
document.getElementById("demo").innerHTML = x;
</script>

</body>
</html>

Mendeklarasikan ulang variabel menggunakan kata kunci let dapat menyelesaikan masalah ini.

Mendeklarasikan ulang variabel di dalam blok tidak akan mendeklarasikan ulang variabel di luar blok.

Contoh:

<!DOCTYPE html>
<html>
<body>

<h2>Mendeklarasikan Variabel Menggunakan let</h2>
<p id="demo"></p>

<script>
var  x = 10;
// Here x is 10
{  
  let x = 2;
  // Here x is 2
}
// Here x is 10
document.getElementById("demo").innerHTML = x;
</script>

</body>
</html>

Dukungan Browser

Kata kunci let tidak sepenuhnya didukung di Internet Explorer 11 atau versi sebelumnya.

Tabel berikut menjelaskan versi browser pertama dengan dukungan penuh untuk kata kunci let:

ChromeEdgeFirefoxSafariOpera
Chrome 49Edge 12Firefox 44Safari 11Opera 36
Mar, 2016Jul, 2015Jan, 2015Sep, 2017Mar, 2016

Lingkup Loop

Menggunakan var dalam satu loop.

Contoh

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript let</h2>

<p id="demo"></p>

<script>
var i = 5;
for (var i = 0; i < 10; i++) {
  // some statements
}
document.getElementById("demo").innerHTML = i;
</script>

</body>
</html>

Menggunakan let in a loop:

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript let</h2>

<p id="demo"></p>

<script>
let i = 5;
for (let i = 0; i < 10; i++) {
  // some statements
}
document.getElementById("demo").innerHTML = i;
</script>

</body>
</html>

Dalam contoh pertama, menggunakan var, variabel yang dideklarasikan dalam loop mendeklarasikan ulang variabel di luar loop.

Dalam contoh kedua, menggunakan let, variabel yang dideklarasikan dalam loop tidak mendeklarasikan ulang variabel di luar loop.

Ketika let digunakan untuk mendeklarasikan variabel i dalam sebuah loop, variabel i hanya akan terlihat dalam loop.

Lingkup Fungsi

Variabel yang dideklarasikan dengan var dan let sangat mirip ketika dideklarasikan di dalam suatu fungsi.

Keduanya akan memiliki Cakupan Fungsi, contoh:

function myFunction() {<br>  var carName = "Volvo";   // Function Scope<br>}
function myFunction() {<br>  let carName = "Volvo";   // Function Scope<br>}

Lingkup Global

Variabel yang dideklarasikan dengan var dan let sangat mirip ketika dideklarasikan di luar blok.

Keduanya akan memiliki Cakupan Global, contoh:

var x = 2; // Ruang lingkup global
misalkan x = 2; // Ruang lingkup global

Variabel Global dalam HTML

Dengan JavaScript, cakupan global adalah lingkungan JavaScript.

Dalam HTML, ruang lingkup global adalah objek jendela.

Variabel global yang ditentukan dengan kata kunci var adalah milik objek jendela.

Contoh:

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Global Variable</h2>

<p>Dalam HTML, variabel global yang ditentukan dengan <b> var </b>, akan menjadi variabel jendela.</p>
<p id="demo"></p>

<script>
var carName = "Volvo";

// code here can use window.carName
document.getElementById("demo").innerHTML = "I can display " + window.carName;
</script>

</body>
</html>

Variabel global yang ditentukan dengan kata kunci let tidak termasuk dalam objek jendela.

Contoh:

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Global Variables</h2>

<p>Dalam HTML, variabel global yang ditentukan dengan <b> let </b>, tidak akan menjadi variabel jendela.</p>
<p id="demo"></p>

<script>
let carName = "Volvo";

// code here can not use window.carName
document.getElementById("demo").innerHTML = "I can not display " + window.carName;
</script>

</body>
</html>

Mendeklarasikan ulang

Mendeklarasikan ulang variabel JavaScript dengan var diperbolehkan letaknya dimanapun dalam program.

Contoh:

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript let</h2>

<p>Mendeklarasikan ulang variabel JavaScript dengan <b> var </b> diperbolehkan di mana saja dalam program.</p>
<p id="demo"></p>

<script>
var x = 2;
// Now x is 2

var x = 3;
// Now x is 3

document.getElementById("demo").innerHTML = x;
</script>

</body>
</html>

Mendeklarasikan ulang variabel var dengan let, dalam lingkup yang sama, atau dalam blok yang sama, tidak diperbolehkan:

var x = 2;       // Allowed
let x = 3;       // Not allowed

{
  var x = 4;   // Allowed
  let x = 5   // Not allowed
}

Mendeklarasikan ulang variabel let dengan let, dalam lingkup yang sama, atau dalam blok yang sama, tidak diperbolehkan:

let x = 2;       // Allowed
let x = 3;       // Not allowed

{
  let x = 4;   // Allowed
  let x = 5;   // Not allowed
}

Mendeklarasikan ulang variabel let dengan var, dalam lingkup yang sama, atau dalam blok yang sama, tidak diperbolehkan:

let x = 2;       // Allowed
var x = 3;       // Not allowed

{
  let x = 4;   // Allowed
  var x = 5;   // Not allowed
}

Mendeklarasikan ulang variabel dengan let, dalam lingkup lain, atau di blok lain, diperbolehkan:

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript let</h2>

<p> Mendeklarasikan ulang variabel dengan <b> let </b>, di lingkup lain, atau di blok lain, diperbolehkan: </p>
<p id="demo"></p>

<script>
let x = 2;   // Allowed

{
  let x = 3;   // Allowed
}

{
  let x = 4;   // Allowed
}
document.getElementById("demo").innerHTML = x;
</script>

</body>
</html>

Hoisting

Variabel yang ditentukan dengan var akan diangkat ke atas dan dapat diinisialisasi kapan saja (jika Anda tidak tahu apa itu Hoisting, baca Bab tentang Hoisting pada tutorial kami).

Artinya: Anda dapat menggunakan variabel sebelum dideklarasikan.

Contoh:

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Hoisting</h2>

<p>Dengan <b> var </b>, Anda dapat menggunakan variabel sebelum dideklarasikan</p>
<p id="demo"></p>

<script>
carName = "Volvo";
document.getElementById("demo").innerHTML = carName;
var carName;
</script>

</body>
</html>

Variabel yang ditentukan dengan let diangkat ke atas blok, tetapi tidak diinisialisasi.

Artinya: Blok kode mengetahui adanya variabel, tetapi tidak dapat digunakan sampai dideklarasikan.

Menggunakan variabel let sebelum dideklarasikan akan menghasilkan ReferenceError.

Variabel berada dalam “zona mati sementara” dari awal blok hingga dideklarasikan.

Contoh
Ini akan menghasilkan ReferenceError:

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Hoisting</h2>

<p> Dengan <b> let </b>, Anda tidak dapat menggunakan variabel sebelum dideklarasikan</p>
<p id="demo"></p>

<script>
// Check the console, this next line will produce an error:
carName = "Volvo";
document.getElementById("demo").innerHTML = carName;
let carName;
</script>

</body>
</html>

Catur Kurnia Sari

Share
Tags: javascriptLet