Tutorial Dasar JavaScript: Variabel dan Tipe Data

Dalam tutorial kali ini, kita akan mempelajari tentang variabel dan tipe data dalam bahasa pemrograman JavaScript. Variabel digunakan untuk menyimpan nilai yang dapat diakses dan diubah selama eksekusi program. Tipe data, di sisi lain, menggambarkan jenis nilai yang dapat disimpan dalam variabel. Mari kita mulai dengan pemahaman dasar mengenai variabel.

Variabel dalam JavaScript

Variabel pada Javascript digunakan untuk menyimpan data yang akan digunakan dalam program. Untuk mendeklarasikan variabel dalam JavaScript, kita bisa menggunakan kata kunci var, let, atau const. Berikut adalah perbedaan mendasar di antara ketiganya:

var: Digunakan untuk mendeklarasikan variabel di tingkat fungsi atau global. Variabel yang dideklarasikan dengan var memiliki cakupan fungsi (function scope) jika dideklarasikan di dalam fungsi, atau cakupan global jika dideklarasikan di luar fungsi.
let: Introduksi EcmaScript 6 atau ES6, digunakan untuk mendeklarasikan variabel dengan cakupan blok (block scope), yang berarti variabel hanya dapat diakses dalam blok di mana variabel tersebut dideklarasikan.
const: Juga diperkenalkan di ES6, digunakan untuk mendeklarasikan variabel yang nilainya tidak akan berubah setelah diberi nilai awal. Seperti let, variabel const juga memiliki cakupan blok.

Berbeda dengan bahasa pemrograman C++ atau Java, JavaScript tidak memerlukan deklarasi tipe data. Setiap variabel dalam JavaScript dapat diisi dengan nilai apa pun dan dapat diubah menjadi tipe lain selama jalannya program. Jenis bahasa pemrograman semacam ini juga dikenal sebagai Typeless Programming Language.

Aturan Penamaan Variabel

Aturan penamaan variabel dalam JavaScript sangat penting untuk memastikan kode yang kita buat mudah dibaca, dipahami, dan dipelihara. Berikut adalah aturan-aturan yang perlu diikuti dalam penamaan variabel dalam JavaScript:

Karakter yang Diperbolehkan:
- Variabel hanya boleh dimulai dengan huruf, garis bawah (_) atau tanda dollar ($). Tidak boleh dimulai dengan angka.
- Setelah karakter pertama, variabel bisa terdiri dari huruf, angka, garis bawah, atau tanda dollar.
Case Sensitivity:
- JavaScript bersifat case sensitive, artinya namaVariabel dan namavariabel dianggap berbeda.
Kata Kunci (Reserved Keywords):
- Anda tidak bisa menggunakan kata-kata yang sudah direservasi oleh JavaScript sebagai nama variabel. Contoh kata kunci: if, else, while, function, var, let, const, dan lainnya.
Konvensi Penamaan (Opsional/Tidak Wajib):
- Gunakan penamaan yang deskriptif dan bermakna, sehingga orang lain dapat dengan mudah memahami tujuan variabel tersebut.
- Gunakan camelCase untuk penamaan variabel, dimana huruf pertama dari kata pertama adalah huruf kecil dan kata berikutnya dimulai dengan huruf besar (contoh: namaDepan, umurSiswa).
- Jika variabel adalah konstanta yang tidak akan berubah, gunakan huruf besar dengan menggunakan underscore untuk memisahkan kata (contoh: NILAI_MAX, PI_CONSTANT).

Tipe Data dalam JavaScript

JavaScript memiliki beberapa jenis tipe data, yang dapat dibagi menjadi dua kategori utama yaitu tipe data primitif dan tipe data objek (bukan primitif).

Berikut adalah beberapa contoh tipe data dalam JavaScript:

Tipe Data Primitif

Number: Digunakan untuk angka, termasuk bilangan bulat dan desimal.
String: Digunakan untuk teks. Diapit oleh tanda kutip tunggal atau ganda.
Boolean: Digunakan untuk mewakili nilai benar (true) atau salah (false).
Null: Digunakan untuk mewakili nilai kosong atau tidak ada nilai.
Undefined: Digunakan untuk mewakili variabel yang belum diberi nilai.
Symbol: Diperkenalkan di ES6, digunakan untuk membuat nilai unik yang berguna dalam konteks objek.

Contoh penggunaan tipe data primitif:

var umur = 25;             // Number
var nama = "John";         // String
var isMahasiswa = true;    // Boolean
var kota = null;           // Null
var nilai;                 // Undefined

var umur = 25; // Number

var nama = "John"; // String

var isMahasiswa = true; // Boolean

var kota = null; // Null

var nilai; // Undefined

Tipe Data Objek (Bukan Primitif):

Object: Digunakan untuk menyimpan kumpulan nilai sebagai pasangan properti dan nilai.
Array: Digunakan untuk menyimpan beberapa nilai dalam satu variabel.
Function: Digunakan untuk mendefinisikan blok kode yang dapat dipanggil.
Date: Digunakan untuk merepresentasikan tanggal dan waktu.

Contoh penggunaan tipe data bukan primitif:

var person = { namaDepan: "Alexander", namaBelakang: "Paijo" }; // Object
var angka = [1, 2, 3, 4, 5];                           // Array

function salam(nama) {
  console.log("Halo, " + nama);
}

var tglSekarang = new Date();                            // Date

var person = { namaDepan: "Alexander", namaBelakang: "Paijo" }; // Object

var angka = [1, 2, 3, 4, 5]; // Array

function salam(nama) {

console.log("Halo, " + nama);

}

var tglSekarang = new Date(); // Date

Contoh Penerapan Variabel dan Tipe Data Pada JavaScript

Berikut adalah contoh penggunaan variabel dan tipe data dalam JavaScript serta cara menjalankannya di browser dengan menggunakan console.log().

Untuk membuatnya silahkan buat file HTML dengan nama latihan_js_001.html, lalu ketikan kode HTML dan Javascript berikut ini:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Latihan JS: Variabel dan Tipe Data</title>
</head>
<body>
    <h1>Latihan Javascript: Variabel dan Tipe Data</h1>
    <p>Membuat Variabel dan Menampilkan hasilnya di console</p>
    <script>
        // Deklarasi variabel dengan tipe data
        var nama = "Alexander Paijo"; // String
        var usia = 28;                // Number
        var isMahasiswa = true;       // Boolean
        var hobi = null;              // Null
        var beratBadan;               // Undefined

        // Objek sebagai tipe data bukan primitif
        var alamat = {
            jalan: "Jl. Pulau Beringin. 123",
            kota: "Bengkulu Tengah",
            kodePos: "38371"
        };

        // Array sebagai tipe data bukan primitif
        var daftarHobi = ["musik", "membaca", "olahraga"];

        // Function sebagai tipe data bukan primitif
        function sapa(nama) {
            return "Halo, " + nama + "!";
        }

        // Menampilkan nilai variabel ke console.log()
        console.log("Nama:", nama);
        console.log("Usia:", usia);
        console.log("Mahasiswa?", isMahasiswa);
        console.log("Hobi:", hobi);
        console.log("Berat Badan:", beratBadan);

        console.log("Alamat:", alamat);
        console.log("Hobi:", daftarHobi);

        console.log(sapa("Agus"));

    </script>
</body>
</html>

<!DOCTYPE html>

<head>

<title>Latihan JS: Variabel dan Tipe Data</title>

</head>

<body>

<h1>Latihan Javascript: Variabel dan Tipe Data</h1>

<p>Membuat Variabel dan Menampilkan hasilnya di console</p>

// Deklarasi variabel dengan tipe data

var nama = "Alexander Paijo"; // String

var usia = 28; // Number

var isMahasiswa = true; // Boolean

var hobi = null; // Null

var beratBadan; // Undefined

// Objek sebagai tipe data bukan primitif

var alamat = {

jalan: "Jl. Pulau Beringin. 123",

kota: "Bengkulu Tengah",

kodePos: "38371"

};

// Array sebagai tipe data bukan primitif

var daftarHobi = ["musik", "membaca", "olahraga"];

// Function sebagai tipe data bukan primitif

function sapa(nama) {

return "Halo, " + nama + "!";

}

// Menampilkan nilai variabel ke console.log()

console.log("Nama:", nama);

console.log("Usia:", usia);

console.log("Mahasiswa?", isMahasiswa);

console.log("Hobi:", hobi);

console.log("Berat Badan:", beratBadan);

console.log("Alamat:", alamat);

console.log("Hobi:", daftarHobi);

console.log(sapa("Agus"));

</script>

</body>

</html>

Jika kita jalankan pada browser dan kita cek di Console, maka hasilnya akan terlihat seperti pada gambar berikut ini:

Variabel dan Tipe Data

Dengan memahami variabel dan tipe data dalam JavaScript, kita dapat menyimpan dan memanipulasi data dengan lebih efisien. Variabel memungkinkan kita untuk menyimpan nilai-nilai ini, sedangkan tipe data memastikan kita menggunakan format yang benar sesuai dengan jenis nilai yang ingin kita simpan.

Tutorial Lengkap Javascript Dari Dasar dapat dilihat pada Index Tutorial Javascript: Belajar Javascript dari Dasar.