Jika kamu memiliki kritik dan saran, hubungi kami melalui Kontak Kami
Beranda
Javascript

Variabel dan Tipe Data dalam Javascript


     Variabel merupakan sebuah nama yang mewakili sebuah nilai. Atau bisa kita sebut juga variabel itu adalah sebuah wadah ataupun tempat dari suatu nilai. Nilai yang diisi di dalam variabel bisa bemacam macam seperti string (teks), number (angka), objek, array dan sebagainya. Jika sudah mengetahui tentang variabel, sekarang kita akan belajar membuat sebuah variabel. Pada artikel sebelumnya kita sudah belajar membuat variabel , namun dalam bahasa python.
     Sekarang kita akan belajar membuat variabel dalam bahasa Javascript. Selain belajar membuat variabel dalam Javascript, kita juga akan membahas tipe tipe data dalam javascript. Bagaimana cara membuat sebuah variabel di dalam javascript ? Simak tutorial nya dibawah ini

Cara Membuat Variabel dalam Javascript
     Dalam pembuatan sebuah variabel dalam javascript, kita bisa menggunakan var. Setelah itu kita bisa memberikan nama variabel. Setelah memberikan nama variabel nya, baru kita masukkan nilai nya langsung. Contohnya seperti dibawah ini
var contoh = "Contoh nilai variabel dalam javascript";
     Pada contoh diatas, saya membuat sebuah variabel dengan nama contoh. Kemudian isi dari variabel contoh tersebut adalah Contoh nilai variabel dalam javascript. Isi dari variabel tersebut berupa string (teks). Selain menggunakan var dalam pembuatan sebuah variabel, kita juga bisa menggunakan let. Jika contoh isi variabel berupa number (angka) bagaimana ? Apakah sama seperti string ? Hanya berbeda pada implementasi nya saja. Berikut ini contoh jika isi variabel nya berupa number (angka).
var tahun = 2023;
     Sudah tau kan letak perbedaan nya ? Sekarang kita akan mencoba membuat variabel dengan nama variabel yang terdiri dari dua suku kata. Bagaimana caranya ? Simak tutorialnya dibawah ini
var blogName = "Freeze Gans";
var postTitle = "Variabel dalam javascript";
var url = "https://freezegans.blogspot.com";
Pada contoh diatas, saya menggunakan huruf kapital (CamelCase) sebagai penanda kalau variabel diatas terdiri dari dua suku kata. Selain menggunakan CamelCase, kita juga bisa menggunakan Underscore. Berikut ini contoh nya jika menggunakan underscore.
var blog_name = "Freeze Gans";
var post_title = "Variabel dalam javascript";
var url_blog = "https://freezegans.blogspot.com";
Jadi, kamu bebas memilih untuk menggunakan CamelCase ataupun menggunakan Underscore. Hal tersebut tidak akan menjadi masalah, karena program masih tetap valid atau berjalan dengan normal. Selain itu, kita juga memberikan variabel dengan tipe Boolean. Boolean bisa kita sebut sebagai kondisi, dan kondisinya hanya memiliki dua nilai, yaitu True (benar) dan False (salah). Berikut ini contoh nya
var isActive = true;
Diatas kita sudah membahas Cara Membuat Variabel dalam Javascript, Sekarang apa langkah selanjutnya ? Langkah selanjutnya adalah Menampilkan Isi Variabel. Apa guna nya jika membuat variabel namun tidak menampilkan nya ? Sama saja seperti mempersiapkan makanan namun tidak untuk dimakan. Untuk menampilkan isi variabel sebenarnya caranya sama seperti artikel sebelumnya, hanya saja ada sedikit penambahan. Bagaimana caranya Menampilkan Isi Variabel ? Simak tutorial nya dibawah ini.

Cara Menampilkan Isi Variabel
     Untuk menampilkan isi variabel, kita bisa menggunakan document.write() yang berfungsi untuk menampilkan output ataupun menampilkan sebuah variabel. Selain itu, kita juga menggunakan alert() yang berfungsi untuk menampilkan output pada jendela dialog. Sekarang saya akan mencoba membuat sebuah variabel, berikut ini adalah variabel nya.
var name = "Freeze Gans";
var url = "https://freezegans.blogspot.com";
var visitorCount = 30000;
var isActive = true;
var age = 18;
Untuk menampilkan isi variabel, kita cukup memanggil nama variabel nya saja. Sekarang saya akan mencoba menampilkan isi variabel yang baru saya buat diatas.
document.write("Nama Blog: " + name + "<br>");
document.write("Alamat Blog: " + url + "<br>");
document.write("Jumlah Pengunjung: " + visitorCount + "<br>");
document.write("Status Aktif: " + isActive + "<br>");
document.write("Usia: " + age + "<br>");
Codingan lengkap nya seperti dibawah ini.
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Menampilkan Isi Variabel dalam Javascript</title>
    <script>
        var name = "Freeze Gans";
        var url = "https://freezegans.blogspot.com";
        var visitorCount = 30000;
        var isActive = true;
        var age = 18;
        document.write("Nama Situs: " + name + "<br>");
        document.write("Alamat Blog: " + url + "<br>");
        document.write("Jumlah Pengunjung: " + visitorCount + "<br>");
        document.write("Status Aktif: " + isActive + "<br>");
        document.write("Usia: " + age + "<br>");
    </script>
</head>
<body>
</body>
</html>
Sekarang kita coba membahas maksud dari codingan diatas. Jika hanya menuliskan codingan tanpa mengetahui maksud nya, sama saja tidak ada artinya. Diatas saya sudah membuat lima buah variabel, yaitu name, url, visitorCount, isActive, dan age. Kemudan jika kita ingin menampilkan isi variabelnya, maka kita cukup mengetikkan nama variabel nya di dalam code document.write(). Namun jika ingin menambahkan beberapa string atau teks, kita harus menggunakan tanda kutip dua. Jika hanya menuliskan teks nya saja, kita dianggap memanggil sebuah variabel. Kemudian tanda plus (+) bukan berarti menjumlahkan, tetapi menggabungkan. Kemudian fungsi "<br>" adalah untuk membuat baris baru atau paragraf.
     Setelah mengetahui tentang variabel dalam javascript, sekarang kita akan melanjutkan pembahasan nya. Apa yang akan kita bahas selanjutnya ? Pembahasan selanjutnya kita akan membahas tentang Tipe Data dalam Javascript. Ada banyak Tipe Data dalam javascript, diantaranya seperti dibawah ini
  • String : Tipe Data berupa teks
  • Integer : Tipe Data berupa angka ataupun bilangan bulat
  • Boolean : Tipe Data yang memiliki dua nilai, True dan Fals
  • Array : Tipe Data yang memiliki banyak nilai
  • Undefined : Tipe Data yang tidak diketahui
  • Objek : Tipe Data yang dapat merangkum lebih dari satu tipe data
Setelah mengetahui jenis jenis Tipe Data dalam Javascript, sekarang kita akan membahasnya satu per satu.

1. Tipe Data String
     Tipe Data String merupakan tipe data yang berupa sebuah teks. Untuk membuat tipe data berupa string, kita bisa menggunakan tanda kutip dua ("") ataupun bisa juga hanya kutip satu (''). Contoh codingan nya seperti dibawah ini
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Tipe Data String</title>
    <script>
        var example = "Selamat Datang di Blog Freeze Gans";
        document.write(example);
    </script>
</head>
<body>
</body>
</html>
Untuk hasilnya dibawah ini


2. Tipe Data Integer
     Tipe Data Integer merupakan tipe data yang berupa angka ataupun bilangan bulat. Biasanya tipe data integer digunakan untuk menampilkan nilai. Untuk membuat tipe data integer, kita bisa langsung menuliskan nilai atau angka nya. Berbeda dengan String yang harus menggunakan tanda kutip. Contoh codingan nya seperti dibawah ini.
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Tipe Data Integer</title>
    <script>
        var number = 12122023;
        document.write(number);
    </script>
</head>
<body>
</body>
</html>
Hasilnya seperti dibawah ini


3. Tipe Data Boolean
     Tipe Data Boolean merupakan tipe data yang memiliki dua nilai, yaitu True dan False. Tipe Data Boolean banyak digunakan untuk sebuah pernyataan. Berikut ini contoh codingan nya.
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Tipe Data Boolean</title>
    <script>
        let a = 15;
        let b = 25;
        let c = 10;
        let d = 50;
        document.write((a < b) + "<br>");
        document.write((b > c) + "<br>");
        document.write((d > a) + "<br>");
        document.write((c > b) + "<br>");
        document.write((b > d) + "<br>");
    </script>
</head>
<body>
</body>
</html>
Codingan diatas merupakan contoh pernyataan suatu bilangan. Jika di jalankan, maka hasilnya sesuai perbandingan diantara kedua bilangan. Hasilnya seperti dibawah ini


4. Tipe Data Array
     Tipe Data Array hampir sama dengan Tipe Data Boolean. Meskipun hampir sama, tetaplah memiliki perbedaan antara Tipe Data Array dengan Tipe Data Boolean. Perbedaan nya adalah Tipe Data Array dapat menampung banyak nilai, berbeda dengan Tipe Data Boolean yang hanya bisa menampung dua nilai. Contohnya seperti codingan dibawah ini.
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Tipe Data Array</title>
    <script>
        var city = ["Jakarta", "Surabaya", "Solo", "Semarang", "Palembang", "Bali"];
        document.write(city[3]);
    </script>
</head>
<body>
</body>
</html>
Hasilnya seperti dibawah ini


Coba kita perhatikan contoh array diatas, mengapa saya menuliskan city[3] ? Jadi, city itu adalah nama variabel nya. Dan saya ingin menampilkan data ke 3, jadi menuliskan nya city[3]. Jika saya ingin menampilkan nilai ke tiga, kenapa yang muncul nilai ke empat (Semarang) ? Di dalam bahasa pemrograman, nilai itu dimulai dari 0 atau bisa kita sebut index nya dimulai dari 0. Jadi yang dihitung data ke satu adalah Surabaya, bukan Jakarta. Sekarang saya ingin coba ingin menampilkan nilai ke lima (Bali). Berikut ini contoh codingan nya.
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Tipe Data Array</title>
    <script>
        var city = ["Jakarta", "Surabaya", "Solo", "Semarang", "Palembang", "Bali"];
        document.write(city[5]);
    </script>
</head>
<body>
</body>
</html>
Hasilnya seperti dibawah ini.


Bagaimana ? Sudah paham tentang Array kan ? Di artikel selanjutnya, kita akan membahas lebih dalam lagi tentang Array. Sekarang kita lanjut ke tipe data selanjutnya.

5. Tipe Data Undefined
     Tipe Data Undefined merupakan tipe data yang nilai nya belum terdefinisikan. Biasanya data undefined muncul ketika kita memanggil sebuah variabel yang tidak ada isinya, atau bisa juga isinya yang belum terindeks. Agar lebih jelasnya, perhatikan codingan dibawah ini
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Tipe Data Undefined</title>
    <script>
        var fruit = ["Apel", "Anggur", "Pisang", "Salak", "Mangga", "Jeruk"];
        document.write(fruit[8]);
    </script>
</head>
<body>
</body>
</html>
Hasilnya seperti ini


Hasilnya Undefined kan ? Mengapa bisa seperti itu ? Sedangkan saya memasukkan nilai berupa buah buahan. Jawaban nya cukup mudah, karena yang kita panggil adalah index ke 8. Sedangkan pada variabel fruit hanya ada 5 index. Seperti itulah contoh sederhana dari Data Undefined.

6. Tipe Data Objek
     Tipe Data Objek adalah Tipe Data yang dapat merangkum beberapa jenis data di dalam satu variabel. Jadi dengan menggunakan Tipe Data Objek, kita dapat menggabungkan beberapa jenis data menjadi satu di dalam satu variabel. Kalau yang diatas, kita menggabungkan data yang berbeda dengan cara memanggil variabel nya satu per satu. Contoh codingan nya dibawah ini
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Tipe Data Objek</title>
    <script>
        var objek = { name : "Freeze Gans", site : "https://freezegans.blogspot.com", age : 18}; 
        document.write(" Nama saya " + objek.name + "<br>" + " Situs saya " + objek.site + "<br>" + "Usia saya " + objek.age + " tahun");
    </script>
</head>
<body>
</body>
</html>
Hasilnya seperti dibawah ini



Coba perhatikan codingan diatas, saya hanya memanggil satu variabel, yaitu variabel objek. Kemudian di dalam variabel tersebut, memiliki berbagai jenis dan nilai data. Tipe Data Objek bisa di definisikan sebagai pasangan kunci dan nilai (key dan value). Jika ingin menampilkan isi variabelnya, kita harus memanggil nama variabel dan key nya. Contoh pada codingan diatas name adalah key dan Freeze Gans adalah value nya. Bagaimana ? Mudah kan ? Jika kamu masih bingung, silahkan bertanya di kolom komentar. Sekian dan Terimakasih.