Belajar Javascript: Mengenal Variabel dan Tipe Data pada Javascript

Admin・ 25 Juli 2021

18 min read ・ 7571 views

Series: Belajar Javascript

1. Tutorial Lengkap Belajar JavaScript Untuk Pemula

2. Belajar Javascript: Mengenal Variabel dan Tipe Data pada Javascript

Variabel dan Tipe Data Javascript - Dalam dunia programming, variabel dan tipe data merupakan suatu hal yang penting untuk dipelajari dan dipahami, tak terkecuali dalam javascript. Pada artikel ini, kita akan melanjutkan series belajar javascript untuk pemula. Jika pada artikel sebelumnya, kita sudah belajar apa itu javascript, sejarah javascript, penggunaan perintah dasar javascript seperti menggunakan innerHTML, document.write(), window.alert(), menggunakan console.log(), dan lain-lain, maka pada artikel ini saya akan sharing tentang penggunaan variabel dan tipe data pada javascript.

Variabel Javascript
Tipe Data Javascript

Variabel Javascript

Variabel merupakan container atau wadah yang digunakan untuk menyimpan data atau nilai. Di javascript ada 3 cara untuk mendeklarasikan variabel, yaitu:

Menggunakan var
Menggunakan let
Menggunakan const

Semua variabel yang digunakan di javascript harus mempunyai penamaan yang unique yang artinya tidak boleh sama dengan nama variabel yang lain. Nama-nama variabel yang unique ini disebut juga identifiers atau pengidentifikasi. Identifiers atau pengidentifikasi 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, diantaranya:

Nama variabel javascript dapat berisi huruf, angka, garis bawah dan tanda dollar ($).
Nama variabel javascript bisa di awali dengan huruf.
Nama variabel javascript juga bisa diawali dengan tanda dollar ($) dan garis bawah (_). Tapi penamaan variabel javascript seperti ini jarang sekali digunakan.
Nama variabel javascript sangatlah sensitif terhadap huruf besar atau huruf kecil. Jika kita memakai penamaan variabel javascript sepert x dan X maka kedua variabel tersebut bisa dikatakan berbeda.

Menggunakan var

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Belajar Javascript</title>
    <style>
        body {
            font-size: small;
        }
    </style>
</head>
<body>
    <h1>Variabel dan Tipe Data Javascript</h1>
    <p id="demo"></p>

    <script>
    var x = 2000;
    var y = 21;
    var z = x + y;
    document.getElementById("demo").innerHTML = + x + "+"  + y +"=" + z;
    </script>
</body>
</html>

Penggunaan var untuk mendeklarasikan variabel di javascript bisa dilihat pada contoh kode di atas. Dari kode di atas, kita mendeklarasikan var x = 2000, var y = 21 dan di var z = kita dieklrasikan aritmatika untuk menjumlahkan nilai pada var x + var y. Kemudian kita tampilkan menggunakan innerHTML di browser atau tepatnya di element html <p> dengan id="demo".

Menggunakan Let

Penggunaan let diperkenalkan javascript pada versi ES6(2015). Penggunaan let berbeda dengan penggunaan var, jika dengan var dapat dideklarasikan berulang (seperti; var x = "Bebek", x = "Ayam"; maka hasilnya x = Ayam) maka dengan let kita tidak dapat mendeklarasikan variabel secara berulang. Variabel yang menggunakan pendefinisian dengan let harus dideklarasikan sebelum digunakan.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Belajar Javascript</title>
</head>
<body>
    <h1>Variabel dan Tipe Data Javascript</h1>
    <p id="demo"></p>

    <script>
        let x = "John Doe";
        let x = 0;
        
        document.getElementById("demo").innerHTML = x ;
    </script>
</body>
</html>

Kita tidak dapat membuat variabel yang sama atau pendeklrasian berulang seperti contoh di atas. Karena jika tetap memaksakan membuat pendeklrasian variabel berulang dengan let seperti contoh di atas maka hasilnya akan "Uncaught SyntaxError: Identifier 'x' has already been declared" . Tapi jika menggunakan var, maka output dari kode di atas akan bernilai x = 0.

error penggunaan variabel let berulang

Gambar di atas merupakan contoh hasil dari output kode penulisan variabel berulang dengan let.

Sebelum ES6 (2015), javascript hanya memiliki global scope dan function scope dan di versi ES6, mereka memperkenalkan dua keyword baru yaitu let dan const. Kedua kata kunci ini menyediakan block scope dalam javascript dan variabel yang dideklarasikan di dalam block {} tidak dapat diakses dari luar block {}.

Contoh:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Belajar Javascript</title>
</head>
<body>
    <h1>Variabel dan Tipe Data Javascript</h1>
    <p id="demo"></p>

    <script>
        {
            let x = 2;
        }

        document.getElementById("demo").innerHTML = x ;
        // maka output di console akan "console.html:19 Uncaught ReferenceError: x is not defined";
    </script>
</body>
</html>

Pada contoh di atas, kita coba membuat variabel dengan let di dalam block {} kemudian kita tampilkan menggunakan innerHTML diluar block. Maka output yang akan dihasilkan pada console akan error dengan pesan "Uncaught ReferenceError: x is not defined". Tapi jika kita letakkan "document.getElementById("demo").innerHTML = x ;" di dalam block, maka output yang ditampilkan pada browser akan bernilai 2.

{
var x = 2;
}
document.getElementById("demo").innerHTML = x ;

Berbeda dengan jika menggunakan var seperti pada contoh di atas. Dengan script seperti di atas, output yang dihasilkan akan tetap menampilkan nilai 2 meskipun kita cetak var x dengan innerHTML di luar block {}.

Mendeklrasikan Variabel Secara Berulang

<script>
    var  x = "Bebek";
    
    {  
    var x = "Ayam";
    }
    
    document.getElementById("demo").innerHTML = x;
</script>

Pendeklrasian variabel berulang dengan menggunakan var dan let hasilnya juga akan berbeda. Jika kita membuat pendeklarasian berulang menggunakan var seperti contoh di atas, maka output yang dihasilkan akan "Ayam", itu karena dengan menggunakan var kita bebas melakukan penempatan baik itu di luar atau di dalam block. Tapi jika var pada contoh kode di atas diganti let, maka output yang akan dihasilkan akan bernilai "Bebek", karena yang ada di dalam block hanya let = "ayam" (tidak ada perintah untuk mencetak hasil dari variabel yang ada di dalam block tersebut). Jadi point pentingnya "Mendeklrasikan ulang variabel dengan let di dalam block tidak akan mendeklarasikan ulang variabel di luar block".

Menggunakan Const

Const diperkenalkan oleh javascript secara public di versi ES6(2015). Beberapa point dari penggunaan variabel dengan const antara lain:

Variabel yang didefinisikan dengan const tidak dapat dideklarasikan ulang.
Variabel yang didefinisikan dengan const tidak dapat ditugaskan kembali.
Variabel yang didefinisikan dengan const memiliki block scope.

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

Sama seperti penggunaan variabel javascript dengan let, menggunakan conts untuk mendeklarasikan variabel secara berulang juga tidak diperbolehkan. Contohnya seperti di atas, jika script di atas dijalankan maka akan muncul pesan error di console seperti "Uncaught SyntaxError: Identifier 'x' has already been declared".

<script>
    const x = "Bebek";
    {
        const x = "Ayam";
    }
    
    document.getElementById("demo").innerHTML = x;
    
</script>

Const memperbolehkan kita menggunakan nama variabel yang sama, namun dengan catatan tidak boleh dalam satu block yang sama (artinya; kedua nama variabel tersebut harus dipisahkan dengan block), contohnya seperti script di atas. Jika script javascript di atas dijalankan, maka output yang dihasilkan adalah "Bebek", kenapa ? karena const yang bernilai bebek berada dalam satu block yang sama dengan innerHTML yang kita gunakan untuk menampilkan nilai variabel x ke dalam HTML. Jika ingin menampilkan variabel yang bernilai "Ayam", maka perintah innerHTMLnya pun juga harus diletakkan pada block yang sama dengan const x = "Ayam".

Kapan kita menggunakan const javascript? Selalu gunakan const saat kita mendeklarasikan:

Array baru
Function baru
Object baru
RegExp baru

Contoh menggunakan const pada array

<script>
    // Membuat Array:
    const produk = ["sabun", "sampo", "handuk","pasta gigi"];
    
    // Mengubah data pada array dengan id 0:
    produk[0] = "sikat gigi";
    
    // menambahkan data:
    produk.push("sabun wajah");
    
    // memnampilkan data array:
    document.getElementById("demo").innerHTML = produk; 
</script>

Penggunaan const pada array bisa dilihat pada contoh script di atas. Dari script di atas, kita mendeklarasikan bawah const produk terdiri dari sabun, sampo, handuk, pasta gigi. Kemudian kita ubah data pada array dengan id=0 menjadi sikat gigi, lalu kita tambahkan lagi data produk sabun wajah pada array dengan push. Maka output yang dihasilkan dari script di atas akan menampilkan sikat gigi, sampo, handuk, pasta gigi, sabun wajah.

Contoh menggunakan const untuk object

<script>
    // membuat object:
    const hp = {merk:"xiomi", model:"redmi 10", color:"white"};
    
    // mengubah property:
    hp.color = "black";
    
    // menambahkan property:
    hp.owner = "Jack Ma";
    
    // menampilkan property:
    document.getElementById("demo").innerHTML = hp.owner + " punya hp " + hp.merk + " model  " + hp.model + " dan berwarna " + hp.color; 
</script>

Script di atas ini merupakan contoh menggunakan const pada object. Dari script di atas akan menghasilkan output "Jack Ma punya hp xiomi model redmi 10 dan berwarna black".

Tipe Data Javascript

Dalam dunia programming, tipe data merupakan suatu hal yang sangat penting untuk diketahui dan dipahami, tidak untuk javascript saja tapi juga untuk beberapa bahasa pemrograman lainnya. Untuk dapat menggunakan variabel javascript, kita juga perlu mengetahui tentang tipe datanya. Variabel javascript dapat menampung angka seperti 100 dan value text seperti "Hello World". Dalam dunia programming, value text disebut juga dengan istilah string. Javascript dapat menangani banyak sekali jenis data (seperti number/integer, string, object, dll).Value string harus ditulis di dalam tanda kutip ganda atau tunggal. Jika kita memasukkan angka di dalam tanda kutip maka nilai tersebut tetap akan dianggap sebagai string. Sedangkah object harus ditulis di dalam block {} seperti let x = {firstName:"John", lastName:"Doe"};

Tipe Data String Javascipt

let hewan = "Bebek";   // Menggunakan tanda kutip ganda
let tumbuhan = 'Jeruk Bali';   // Menggunakan tanda kutip tunggal

String merupakan tipe data untuk serangkaian teks seperti "Makan Bebek Goreng Haji Slamet". Value dengan tipe data string ditulis menggunakan tanda kutip baik tunggal maupun ganda seperti pada contoh di atas.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Variabel dan Tipe Data Javascript</title>
</head>
<body>
    <h1>Belajar Javascript</h1>
    <p id="demo"></p>
    <script>
        let contoh1 = "You're the best";
        let contoh2 = "Kucingku bernama 'Jack'";
        let contoh3 = 'Kucingku bernama "Jack"';
        
        document.getElementById("demo").innerHTML =
        contoh1 + "<br>" + 
        contoh2 + "<br>" + 
        contoh3;
    </script>
</body>
</html>

Selain itu kita juga bisa menggunakan variasi dalam menggunakan string seperti penggunaan tanda kutip tunggal di dalam tanda kutip ganda atau sebaliknya menggunakan tanda kutip ganda di dalam tanda kutip tunggal. Contohnya bisa dilihat seperti pada script di atas.

tipe data string javascript

Output yang akan dihasilkan dari contoh script sebelumnya bisa dilihat seperti pada gambar di atas.

Tipe Data Number atau Integer Javascript

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Variabel dan Tipe Data Javascript</title>
</head>
<body>
    <h1>Belajar Javascript</h1>
    <p id="demo"></p>
    <script>
        let berat1 = 4.50;
        let berat2 = 5;
        let berat3 = 3.75;
        
        document.getElementById("demo").innerHTML =
        berat1 + "<br>" + berat2 + "<br>" + berat3;
        </script>
</body>
</html>

Tipe data number atau integer pada javascript harus ditulis tanpa tanda kutip (baik tunggal maupun ganda), jika ditulis di dalam tanda kutip maka data akan terbaca sebagai string meskipun sebenarnya datanya adalah angka. Contoh menggunakan tipe data number atau integer di javascript bisa dilihat pada contoh script di atas. Penulisan tipe data number atau integer pada javascript bisa dituis dengan atau tanpa desimal.

Tipe Data Boolean Javascript

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Variabel dan Tipe Data Javascript</title>
</head>
<body>
    <h1>Belajar Javascript</h1>
    <p id="demo"></p>
    <script>
        let x = "Ayam";
        let y = "Bebek";
        let z = "Ayam";
        
        document.getElementById("demo").innerHTML = (x == y) + "<br>" + (x == z);
    </script>
</body>
</html>

Tipe data boolean merupakan data yang hanya memiliki dua value yaitu true dan false. Tipe data boolean biasanya digunakan untuk semacam kuesioner atau apapun yang terdapat opsi iya atau tidak. Penggunaan boolean pada javascript bisa dilihat seperti pada contoh di atas. Pada contoh script di atas, kita buat variabel x yang mempunyai value "Ayam", variabel y dengan value "Bebek" dan variabel z juga memilik value "Ayam". Kemudian pada outputnya kita ingin menampilkan hasil dari x == y (artinya: apakah value variabel x sama dengan variabel y ?) dan y == z (artinya; apakah value pada variabel x sama dengan value pada variabel z ?) maka output yang akan ditampilkan akan true dan false.

Tipe Data Array Javascript

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Variabel dan Tipe Data Javascript</title>
</head>
<body>
    <h1>Belajar Javascript</h1>
    <p id="demo"></p>
    <script>
        const menu = ["Ayam Geprek","Ayam Bakar","Nasi Padang","Bebek Goreng"];
        
        document.getElementById("demo").innerHTML = menu[3];
    </script>
</body>
</html>

Data dengan tipe data array pada javascript ditulis di dalam tanda kurung siku dan untuk per item array harus dipisahkan dengan koma. Data pada array selalu diawali dengan id [0]. Untuk contoh penggunaan array bisa dilihat seperti pada contoh di atas. Seperti yang sudah kita bahas sebelumnya bahwa untuk data array kita harus menggunakan const untuk membuat variabelnya. Pada contoh script di atas, variabel menu memiliki value Ayam Geprek, Ayam Bakar, Nasi Padang, Bebek Goreng. Kemudian kita tampilkan data dengan id[3] pada variabel menu, maka output yang ditampilkan adalah Bebek Goreng.

Tipe Data Object Javascript

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Variabel dan Tipe Data Javascript</title>
</head>
<body>
    <h1>Belajar Javascript</h1>
    <p id="demo"></p>
    <script>
        const profile = {
          firstName : "Ponidi",
          lastName  : "Karto Toying",
          age     : 70,
          profession  : "petani"
        };
        
        document.getElementById("demo").innerHTML =
        profile.firstName + " seorang " + profile.profession + " berumur " + profile.age + " tahun";
    </script>
</body>
</html>

Object pada javascript ditulis diantara atau didalam tanda kurung kurawal {}. Properti object ditulis sebagai name:value dan pisahkan dengan tanda koma. Contoh object pada javascript bisa dilihat seperti pada contoh di atas. Contoh di atas merupakan object profile seseorang dengan memiliki 4 property yaitu firstName, lastName, age dan profession.

Tipe Data Undefined Javascript

<script>
        let x;
       console.log(x);
</script>

Undefined merupakan tipe data untuk variabel yang tidak mempunyai value, dimana sebenarnya untuk variabelnya sudah ada namun tidak ada value di variabel tersebut. Undefined pada javascript bisa dilihat seperti pada contoh di atas. Jika script di atas dijalankan, maka output yang ditampilkan pada console akan "undefined".

Menggunakan Type Data Integer dan String

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Belajar Javascript</title>
    <style>
        body {
            font-size: small;
        }
    </style>
</head>
<body>
    <h1>Variabel dan Tipe Data Javascript</h1>
    <p id="demo"></p>

    <script>
        var jumlah = 20;
        var hewan = "Bebek";
        
        document.getElementById("demo").innerHTML = jumlah + "<br>" + hewan;
    </script>
</body>
</html>

Contoh penggunaan tipe data integer dan string javascript dalam HTML bisa dilihat seperti pada potongan kode di atas. Pada variabel "jumlah", karena nilainya merupakan integer jadi penulisannya pun tidak dalam tanda kutip. Dan untuk variabel hewan, karena bertipe data string, maka penulisannya harus di dalam tanda kutip.

Sebenarnya kita juga bisa menyingkat penulisan variabel dengan satu statement banyak variabel seperti var jumlah = 20, hewan = "Bebek"; maka hasilnya akan sama saja dengan penulisan variabel seperti contoh di atas.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Variabel dan Tipe Data Javascript</title>
</head>
<body>
    <h1>Belajar Javascript</h1>
    <p id="demo"></p>
<script>
    let x = 20 + "Ayam";
    document.getElementById("demo").innerHTML = x; 
</script>
</body>
</html>

Saat menambahkan angka dan string dalam satu variabel seperti contoh di atas, maka tetap saja javascript akan memperlakukan atau menganggapnya sebagi string.

<!DOCTYPE html>
<html>
<body>
<h2>Belajar Type Data JavaScript</h2>
<p id="demo"></p>
<script>
let x = 16 + 21 + "ayam";
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>

Dari contoh kode di atas, output seperti apa yang akan ditampilkan ? ya benar, output yang akan ditampilkan dari script di atas adalah 37 ayam.

<!DOCTYPE html>
<html>
<body>
<h2>Belajar Type Data JavaScript</h2>
<p id="demo"></p>
<script>
let x = "ayam"+16 + 21;
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>

Kemudian, dengan contoh script di atas, output seperti apa yang akan ditampilkan ? bukan, output yang ditampilkan bukan ayam37 tapi ayam1621. Kenapa seperti itu ? Karena javascript akan mengevaluasi expressions dari kiri ke kanan. Urutan yang berbeda maka hasilnya pun juga akan berbeda. Pada contoh pertama, javascript akan memperlakukan nilai 16 dan 21 sebagai number atau integer sampai membaca ayam. Sedangkah pada contoh kedua, karena urutan data yang pertama merupakan string maka semua data diperlakukan sebagai string (angka termasuk 16 dan 21).

Web illustrations by Storyset

Javascript

Artikel Sebelumnya

Tutorial Lengkap Belajar JavaScript Untuk Pemula

Artikel Selanjutnya

Cara Menambahkan Google ReCaptcha di Laravel 8

Tinggalkan Komentar

Loading Comments

Favorit See All

Cara Mengatasi Error XAMPP: MySQL shutdown unexpectedly
23 Oktober 2021 63188 views
Laravel 8: REST API Authentication dengan Sanctum
17 September 2021 30881 views
Membuat REST API CRUD di Laravel 8 dengan Sanctum
18 September 2021 27871 views
Tutorial CRUD (Create, Read, Update & Delete) Codeigniter 4 dengan Bootstrap
14 Oktober 2021 27552 views
Contoh Cara Menggunakan Sweet Alert di Laravel 8
27 Agustus 2021 26626 views