Cara menggunakan VARAIBLE pada JavaScript

Dalam bahasa pemograman, variabel merupakan hal yang penting untuk dipelajari, termasuk dalam javascript. Jika pada artikel sebelumnya, kita sudah belajar Cara menampilkan output Javascript di HTML, maka pada artikel ini saya akan share cara membuat variabel di Javascript.

Table of Contents Show

Pengertian Variabel dalam bahasa pemograman
Aturan Penamaan Variabel JavaScript
Menampilkan isi variabel
Membuat variabel menggunakan var
Mengganti Variabel pada javascript
Membuat variabel menggunakan let
Membuat variabel Menggunakan Const
Membuat variabel array pada penggunaan const
Bagaimana cara penggunaan variabel pada JavaScript?
Apa yang dimaksud dengan variabel pada JavaScript?
Apa fungsi utama dari sebuah variabel?
Apa saja yang perlu diperhatikan ketika ingin membuat sebuah variabel?

Pengertian Variabel dalam bahasa pemograman
Aturan Penamaan Variabel JavaScript
Menampilkan isi variabel
Cara membuat variabel di Javascript
Membuat variabel menggunakan var
Mengganti Variabel pada javascript
Membuat variabel menggunakan let
Membuat variabel Menggunakan Const
Membuat variabel array pada penggunaan const

Pengertian Variabel dalam bahasa pemograman

Pada bahasa pemograman, variabel adalah ‘penampung’ sebuah nilai. Tergantung dengan ‘nilai’ dari variabel tersebut, sebuah variabel di dalam JavaScript dapat bertipe Angka (Number), String, Boolean, atau yang lainnya.

Tidak seperti bahasa pemograman desktop seperti C++ dan Visual Basic, di dalam JavaScript kita tidak perlu mendeklarasikan jenis tipe data. Seluruh variabel di dalam JavaScript dapat berisi nilai apapun (tipe data apapun), dan dapat diubah menjadi tipe lain sepanjang program. Jenis pemograman seperti ini dikenal juga dengan Typeless Programming Language. Salah satu bahasa pemograman yang juga berjenis Typeless Programming Language adalah PHP.

Aturan Penamaan Variabel JavaScript

Semua variabel yang digunakan di javascript tidak boleh sama dengan nama variabel yang lain. Hal ini disebut dengan ”unique” atau ”Identifiers”. Unique pada javascript dapat berupa nama pendek seperti x dan y atau nama yang lebih deskriptif seperti age, name atau sum. Adapun aturan umum yang harus diikuti untuk membuat nama variabel javascript, antara lain :

Karakter pertama dapat berisi huruf, angka, garis bawah dan tanda dollar ($).
Karakter kedua dan seterusnya diawali dengan tanda dollar ($) dan garis bawah (_). Tapi penamaan variabel seperti ini jarang sekali digunakan.
Nama Variabel bisa di awali dengan huruf, namun sangat sensitif terhadap huruf besar atau huruf kecil. Jika penamaan variabel seperti a dan A, maka kedua variabel tersebut bisa dikatakan berbeda.

Menampilkan isi variabel

Sebelum mengetahui cara membuat variabel di Javascript, langkah pertama yang harus diketahui adalah cara menampilkan isi variabel. Isi variabel pada javascript bisa kita tampilkan menggunakan Fungsi Output Javascript seperti:

console.log() menampilkan output ke console javascript;
document.write() menampilkan output ke dokumen HTML;
alert() menampilkan output ke jendela dialog.

Ada 3 cara dalam membuat variabel di Javascript yaitu :

menggunakan kata kunci var
Menggunakan let
Kata kunci Const

Untuk lebih jelas, langsung saja kita praktekkan ..

Membuat variabel menggunakan var

Secara umum cara membuat variabel pada javascript adalah menggunakan kata kunci var lalu diikuti dengan nama variabel dan nilainya.

Contoh :

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Belajar Variabel dalam Javascript</title>
    <script>
        // membuat variabel
        var siteName = "Praktek Otodidak";
        var visitorCount = 11321; 
        var isActive = true;
        var url = "https://praktekotodidak.com";
        // menampilkan variabel ke jendela dialog (alert)
        alert("Selamat datang di " + siteName);
        // menampilkan variabel ke dalam HTML
        document.write("Nama Web: " + siteName + "<br>");
        document.write("Jumlah Visitor: " + visitorCount + "<br>");
        document.write("Status Aktif: " + isActive + "<br>");
        document.write("Alamat URL: " + url + "<br>");
    </script>
</head>
<body>
</body>
</html>

Penjelasan program :

Pada kode di atas, simbol plus (+) pada kode di atas bukan berfungsi untuk menjumlahkan, melainkan untuk menggabungkan. fungsi alert() menampilkan output variabel ke jendela dialog yang hasilnya seperti gambar dibawah ini :

Adapun gaya penulisan case dalam program, kita menggunakan camelCase, yaitu huruf besar untuk nama variabel yang terdiri dari dua suku kata. Hal ini karena mayoritas programmer Javascript menggunakan camelCase. Namun, jika ingin menggunakan gaya penulisan lain pun sebenarnya tetap valid.

Contoh gaya penulisan underscore ataupun snake case seperti ini :

var site_name = "Praktek Otodidak";
var_url = "https://praktekotodidak.com";
var visitor_count = 11321;

Mengganti Variabel pada javascript

Setelah membuat variabel di Javascript, kita juga bisa mengganti nilai variabelnya. Hal ini karena variabel pada javascript bersifat mutable, artinya nilai yang tersimpan di dalamnya dapat kita ubah atau diganti.

Contoh:

var siteName = "Praktek Otodidak";
siteName = "Otodidak Praktek"; // mengganti nilai variabel

Penjelasan :

Bila ingin mengganti nilai variabel, kita tidak perlu menggunakan kata kunci var lagi, karena penggunaan var hanya dibutuhkan saat membuat variabel saja. Lain halnya jika ingin membuat variabel baru di Javascript., maka kita bisa menggunakan kata kunci var tersebut.

Membuat variabel menggunakan let

Selain kata kunci var, kita juga bisa membuat variabel dengan kata kunci let atau tanpa awalan apapun. Penggunaan let diperkenalkan javascript pada versi ES6. Penggunaan let berbeda dengan penggunaan var.

Jika dengan var dapat dideklarasikan berulang, maka dengan let kita tidak dapat membuat atau mendeklarasikan variabel secara berulang di javascript, jika tetap memaksakan membuat pendeklrasian variabel berulang dengan maka hasilnya akan bernilai error.

Contoh penggunaan let berulang :

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

Apabila kita tetap memaksakan membuat pendeklrasian variabel berulang dengan maka hasilnya akan bernilai error. Hal ini bisa diketahui jika kita menampilkan Outputnya menggunakan console.

Selain itu, variabel yang menggunakan pendefinisian dengan let harus dideklarasikan sebelum digunakan. Berikut ini merupakan contoh penggunaan let tidak berulang

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Belajar Dasar Javascript</title>
</head>
<body>
    <h2>Cara Membuat Variabel di Javascript</h2>
    <p id="demo"></p>
    <script>
        {
        let x = 10;
        document.getElementById("demo").innerHTML = x ;
        }
    </script>
</body>
</html>

Dari kode diatas, kita menggunakan menggunakan variabel let di dalam block {} menggunakan innerHTML. Maka jika kita console, hasilnya output yang ditampilkan pada browser akan bernilai 10 dan tidak akan ada error seperti gambar dibawah ini :

Namun, jika kita menggunakan innerHTML diluar block. Maka output yang akan dihasilkan pada console akan error dengan pesan “Uncaught ReferenceError: x is not defined”.

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

Membuat variabel Menggunakan Const

Yang terakhir adalah menggunakan kata kunci const. Const diperkenalkan oleh javascript secara public di versi ES6. Sama seperti penggunaan penggunaan let, Variabel yang didefinisikan dengan const tidak dapat dideklarasikan secara berulang. Selain itu Variabel yang didefinisikan dengan const memiliki block scope dan tidak dapat ditugaskan kembali.

Contoh nya adalah sebagai berikut :

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Belajar Dasar Javascript</title>
</head>
<body>
    <h2>Membuat Variabel di Javascript menggunakan const x </h2>
    <p id="demo"></p>
    <script>
        const x = 10;
        {
        const x = 0;
        }
        document.getElementById("demo").innerHTML = x ;
    </script>
</body>
</html>

Pada kode diatas, kita mengggunakan innerHTML untuk menampilkan nilai variabel x ke dalam HTML. Selain itu kita bisa membuat nama variabel yang sama, namun tidak dapat digunakan dalam satu block, Jika script javascript di atas dijalankan, maka output yang dihasilkan adalah “10”, karena const yang bernilai 10 berada dalam satu block dengan innerHTML

Jika ingin menampilkan variabel yang bernilai “0”, maka perintah innerHTMLnya juga harus diletakkan pada block yang sama dengan const x = 0; Sebaliknya, jika kita ingin mengubah penggunaan ”const” menjadi ”var”, maka output yang dihasilkan adalah “0”. Hal ini karena dengan variabel ”var” kita bebas melakukan penempatan variabelnya di dalam atau di luar block.contoh nya adalah sebagai berikut :

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Belajar Dasar Javascript</title>
</head>
<body>
    <h2>Membuat Variabel di Javascript menggunakan const x </h2>
    <p id="demo"></p>
    <script>
        var x = 10;
        {
        var x = 0;
        }
        document.getElementById("demo").innerHTML = x ;
    </script>
</body>
</html>

Hasilnya :

Dalam membuat variabel di Javascript menggunakan const, biasanya digunakan untuk mendeklarasikan : Array baru, Function baru, Object baru dan RegExp baru

Membuat variabel array pada penggunaan const

Contoh penggunaan const pada array :

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Belajar Dasar Javascript</title>
</head>
<body>
    <h2>Penggunaan const pada array </h2>
    <p id="demo"></p>
    <script>
        const produkrokok = ["sampoerna", "class mild", "surya"]; // Membuat Array:
        produkrokok[2] = "magnum"; // Mengubah data pada array dengan id 0:
        produkrokok.push("dji sam soe"); // menambahkan data:
        document.getElementById("demo").innerHTML = produkrokok; // menampilkan data array:
    </script>
</body>
</html>

Penjelasan program :

Dari kode di atas, kita mendeklarasikan bawah :

const produk rokok yang terdiri dari sampoerna, class mild, surya
setelah itu kita ubah data pada array dengan id=2 yaitu surya menjadi produk rokok magnum
lalu kita tambahkan lagi data produkrokok dji sam soe pada array dengan push.
Maka output yang dihasilkan dari kode program di atas akan menampilkan sampoerna,class mild,magnum,dji sam soe

Begitulah cara membuat variabel di Javascript. Dimulai dari pengenalan variabel, mengganti variabel, hingga cara membuat dan menampilan variabel ke output. Baca juga artikel selanjutnya yaitu Belajar Javascript #4 Macam macam tipe data pada javascript

Bagaimana cara penggunaan variabel pada JavaScript?

Ada beberapa aturan penulisan variabel dalam Javascript:.

Penamaan variabel tidak boleh menggunakan angka di depannya. contoh: ... .

Penamaan variabel boleh menggunakan awal underscore. ... .

Penamaan variabel dianjurkan menggunakan camelCase apabila tediri dari dua suku kata. ... .

Penamaan variabel dianjurkan menggunakan bahasa inggris..

Apa yang dimaksud dengan variabel pada JavaScript?

Pengertian Variabel dalam JavaScript Variabel adalah penanda identitas yang digunakan untuk menampung suatu nilai. Secara teknis, variabel merujuk ke sebuah alamat di memory komputer (RAM). Ketika kita membuat sebuah variabel, satu 'slot' memory akan disiapkan untuk menampung nilai tersebut.

Apa fungsi utama dari sebuah variabel?

Varibel merupakan komponen penting pada pemrograman, Variabel digunakan dalam program untuk menyimpan suatu nilai, dan nilai yang ada padanya dapat dirubah selama eksekusi program berlangsung.