Mengenal Variabel JavaScript (var let dan const)

Hallo pembaca sekalian, kali ini kita akan membahas variabel JavaScript. Seperti yang kita ketahui Variabel digunakan untuk menyimpan data sementera. Dengan menggunakan variabel kita menempatkan data di memori untuk kemudian disimpan atau ditampilkan.

Variabel yang dimaksud meski hanya disimpan sementara di memori namun memiliki peran yang cukup besar dalam program yang kita buat. Oleh karenanya memahami variabel adalah sebuah hal penting.

Bagi yang sudah belajar php tentu telah mengetahui apa itu variabel dan bagamana cara deklarasi sebuah variabel. Dengan mengenal variabel di bahasa php akan diketahui bahwa ada perbedaan cara membuat variabel di php dan JavaScirpt. Perbedaan deklarasi ini juga terdapat pada java dan bahasa pemrograman lainnya karena setiap bahasa pemrograman memiliki cara-cara tertentu untuk mendeklarasikan sebuah variabel.

Di JavaScript kita membuat variabel dengan mengunakan var let dan const, silahkan baca lebih lanjut pembahasan di bawah ini mengenai variabel JavaScript:

[toc]

Cara Membuat Variabel JavaScript

1. Menggunakan var

Deklarasi variabel menggunakan var dapat dilakukan dengan cara berikut:

<html>

<head>
    <title>Belajar JavaScript - Variabel </title>
</head>
<body>
    <script type="text/javascript">
        var a = 'Test';        
        console.log('Nilai Variabel a = ' +a);
    </script>
   
</body>

</html>

Output

Operasi Aritmatika variabel dengan Var

<html>

<head>
    <title>Belajar JavaScript - Variabel </title>
</head>
<body>
    <script type="text/javascript">
        var a = 10,
            b = 10, 
            c = a+b;                   
        console.log('Nilai a + b = '+c);    

    </script>
   
</body>

</html>

Output:

Membuat Variabel Aritmatika dengan Var
Membuat Variabel Aritmatika dengan Var

Script di atas juga dapat ditulis dalam bentuk berikut:

<html>

<head>
    <title>Belajar JavaScript - Variabel </title>
</head>
<body>
    <script type="text/javascript">
        var a = 10;
        var b = 10; 
        var c = a+b;
                    
        console.log('Nilai a + b = '+c);        

    </script>
   
</body>

</html>

Kedua contoh script deklarasi variabel di atas memiliki ouput yang sama meskipun terdapat sedikit perbedaan dalam penulisannya.

Selain dapeat menampung number. var javascript juga digunakan untuk menampung string.

2. Menggunakan let

let juga merupakan salah satu yang dapat digunakan untuk mendeklarasikan variabel di javascript.

contoh pengunaan let

<html>

<head>
    <title>Belajar JavaScript - Variabel </title>
</head>
<body>
    <script type="text/javascript">
        let a = 5;
        let b = 10; 
        let c = a+b;                    
        console.log('Nilai a + b = '+c);                
    </script>
   
</body>

</html>

Output

Contoh Penggunaan let JavaScript

let juga dapat menampung number dan string. Dalam hal bentuk data yang ditampung let dan var memiliki kesamaan.

3. Deklarasi const Variabel JavaScript

<html>

<head>
    <title>Belajar JavaScript - Variabel </title>
</head>
<body>
    <script type="text/javascript">
        const a = 10;
        console.log('Hasil: ' +  a);                                             
    </script>
   
</body>

</html>

const dapat digunakan untuk menyimpan data yang nilainya tetap seperti phi=3.14. Berdasarkan karakternya tersebut di sebuah scope program, const hanya dapat di deklarasikan 1 kali.

Perbedaan Deklarasi Variabel JavaScript var, let dan const

var vs let

Variabel di javascript dapat ditulis sebagai global scope variable, function scope dan block scope variable.

Variabel global scope dapat di akses dimanapun pada file yang kita buat, variabel function scope dibuat di dalam function dan block scope di tulis di dalam blok kode seperti if, while atau for.

Perbedaan antara var dan let saat digunakan terdapat pada akses terhadap variabel scope yang ada.

<html>

<head>
    <title>Var vs Let</title>
</head>

<body>
    <h3>Var VS Let</h3>
    Skor : <input type="text" id="skor"><br>    
    <button  onclick="hasil()">Hasil</button>
   
    <script type="text/javascript">        
        function hasil() {                        
            if (document.getElementById("skor").value >= 80) {
                var a1 = "Lulus"; 
                let a2 = "Selamat Nilai >= 10"                                               
            }          
            console.log(a1); //output : Lulus            
            console.log(a2); //output : a2 is not defined
        }               
    </script>
</body>

</html>

Perbedaan antara var dan let dari contoh kasus di atas adalah variabel var dapat di akses dari luar scope if sedangkan variabel let tidak dapat di akses di luar scope.

var vs const

Perbedaan antara var dan const adalah variabel global var dapat di assign (ditetapkan nilai ulang) di global scope, sedangkan const hanya dapat di ditetapkan nilainya 1 kali.

ins_var_vs_const.html

<html>

<head>
    <title>Var vs Let</title>
</head>

<body>

    <script type="text/javascript">
      var a = 10;
      const   b = 30;

      a = 20;
      b = 40;
      console.log(a);
      console.log(b); // Output : Uncaught TypeError: Assignment to constant variable.
                   
    </script>
</body>

</html>

Output

ins_var_vs_const.html:14 Uncaught TypeError: Assignment to constant variable.
at ins_var_vs_const.html:14

const tidak dapat di Reassign karena saat nilainya tetap. Reassign const dapat di lakukan jika scopenya berbeda sperti di bawah ini.

 <script type="text/javascript">
      var a = 10;
      const   b = 30;


    function test(){        
        const b = 40;
        console.log (b);
    }
      a = 20;
      console.log(a); // ouput 20 setelah reassign      
      console.log(b); // ouput 30  nilai const b global scope
      test();      // nilai 40 const reassign in scope
                   
    </script>

Leave a comment