Setelah mempelajari materi JavaScript sebelumnya, sekarang kita akan belajar tentang tipe data pada JavaScript. Tentunya, tipe data sangatlah penting dan sering digunakan untuk pembuatan website maupun aplikasi.
Sekilas, tipe data adalah sebuah sistem pengelompokkan data yang dengan tujuan untuk mempermudah pemrosesan data nantinya. Misalnya, untuk bilangan bulat memiliki tipe data berbeda dengan pecahan. Sama halnya dengan huruf berbeda dengan angka.
Lalu, apa saja tipe data pada JavaScript?
Tipe Data pada Javascript
Pada penggunaanya, bahasa pemograman javascript ini menggunakan beberapa jenis tipe data. Tipe – tipe data yang digunakan pada bahasa javascript ini adalah
Null
Null merupakan salah satu tipe data yang berarti tidak bernilai atau tidak memiliki nilai. Meskipun demikian, null tidak sama dengan string kosong. String kosong berarti string yang tidak terisi nilai. Jika menggunakan typeof, maka null adalah object. Ini berarti null merupakan sebuah object yang tidak memiliki nilai.
Dalam prosesnya, null ini mirip dengan undefined. Meski demikian, null tidak sama dengan undefined. Null akan diperoleh dalam kondisi normal dan direncanakan sementara undefined dihasilkan dari kesalahan proses yang tidak direncanakan. Nantinya, null harus diganti dengan nilai lain yang bernilai sementara undefined akan diganti dengan proses yang benar.
Undefined
Jika dilihat sekilas, undefined memiliki persamaan dengan null. Kedua tipe data ini berarti tidak memiliki nilai. Namun demikian, pengertian undefined dianggap lebih dalam dari pada null. Jika null merupakan sebuah objek khusus, maka jika menggunakan typeof undefined adalah undefined.
Undefined merupakan sebuah hasil yang didapat dari sebuah proses. Beberapa proses yang akan menghasilkan undefined diantaranya adalah :
- Proses pemanggilan variabel yang belum didefinisikan.
- Proses pemanggilan object yang belum ada
- Proses pemanggilan fungsi yang tidak mengembalikan nilai
Secara mudah, undefined merupakan nilai yang sudah dideklarasi namun belum didefinisikan atau belum diberi nilai
String
String merupakan tipe data untuk menuliskan sebuah karakter. String biasanya memakai tanda kutip baik tunggal maupun ganda pada karakternya. Tipe data ini biasa digunakan untuk membuat sebuah kalimat.
Number
Number merupakan tipe data yang digunakan untuk menunjukan angka, baik positif maupun negatif. Number juga merupakan tipe data yang digunakan untuk menunjukan notasi matematika. Dalam tipe data ini juga mencakup beberapa nilai khusus yang ada pada operasi matematika seperti infinity (∞). Infinity merupakan sebuah nilai yang lebih besar ataupun kondisi dimana nilai menjadi tidak terbatas.
Selain infinity, tipe data number juga bisa mengeluarkan nilai NaN. Nan merupkan Not a Number, sebuah nilai hasil dari operasi matematika yang biasanya tidak valid, salah, ataupun nilai yang tidak terdefinisikan seperti hasil dari membagi dengan angka nol.
Secara lebih spesifik, tipe data ini juga bisa dipecah menjadi dua tipe data lain yaitu integer dan float.
Integer
Tipe data ini hampir mirip dengan tipe data number, hanya saja tipe data ini lebih digunakan saat akan menggunakan bilangan bulat, baik untuk bilangan negatif atau positif.
Float
Tipe data float ini merupakan tipe data yang juga bagian dari number. Tipe data ini biasa digunakan saat akan menggunakan angka yang merupakan bilangan desimal seperti 3.14 atau 0.2.
Boolean
Boolean merupakan tipe data yang hanya akan membuat dua nilai yaitu true atau false. Tipe data ini biasa digunakan untuk memberikan nilai pada pilihan seperti yes dan no, on dan off, benar dan salah, dan lainnya. Intinya tipe data ini hanya digunakan untuk nilai yang berupa 2 pilihan.
Objek
Ini merupakan tipe data yang memungkinkan anda menggunakan tipe data lain di dalamnya. Tipe data ini akan berisi nilai dari tipe data. Contoh penggunaan tipe data ini adalah dalam form formulir dimana mungkin akan ada nilai dari tipe data lain di situ.
Array
Array merupakan tipe data yang digunakan untuk menyimpan banyak nilai pada satu variabel. Setiap nilai, atau pada tipe data ini disebut elemen akan memiliki posisi sendiri yang disebut indeks. Setiap nilai ini juga bisa berisi banyak tipe data lain. Tipe data ini biasa digunakan untuk membuat pilihan dengan banyak objek.
Fungsi
Ini merupakan tipe data yang berisi sebuah perintah untuk melakukan sesuatu. Pada tipe data ini biasa digunakan untuk memperpendek sebuah langkah kerja pada sistem. Tipe data ini juga biasa digunakan untuk membuat fungsi lain.
Date
Ini merupakan tipe data yang digunakan untuk membuat satuan waktu baik tanggal maupun jam. Ini merupakan tipe data yang digunakan untuk membuat hal seperti tahun, bulan, hari, jam, dan lainnya. Tipe data ini juga dibuat untuk membuat satuan waktu bahkan sampai menit dan detik.
Cara Penggunaan Tipe Data JavaScript
Sama dengan HTML dan CSS, javascript merupakan bahasa yang digunakan pada sisi klien. Sehingga penggunaanya pun bisa digabung pada HTML. Untuk membuat javascript dengan menggabungkannya dengan HTML cukup dengan menggunakan tag <script> </script>. Script yang digunakan akan menjadi seperti ini
<script type= “text/javascrip”>
Kode javascript
</script>Ada dua tempat untuk menyimpan tag tersebut. Bisa diantara tag <head> atau diantara tag <body>. Perbedaan penempatan itu akan berpengaruh ke waktu loading dari website. Jika disimpan diantara tag <head> maka javascript terpisah dari HTML namun waktu loading konten website meningkat. Sementara jika disimpan di antara tag <body> maka HTML dan javascript bersatu namum biasanya loading akan sedikit melambat.
Ini adalah beberapa penggunaan dari javascript dengan berbagai tipe data.
Tipe Data Number
Ini merupakan contoh penggunaan dari tipe data number
<!DOCTYPE html>
<html>
<head> <title> Contoh penggunaan tipe data pada javascript </title> </head>
<body>
<h2>Tipe data pada javascript</h2>
<p>Tipe data number merupakan tipe data yang digunakan untuk membuat angka:</p>
<p id="contoh"></p>
<script>
let angka1 = 2020;
let angka2 = 20.20;
let angka3 = 20.20;
document.getElementById("contoh").innerHTML =
angka1 + "<br>" + angka2 + "<br>" + angka3;
</script>
</body>
</html>Script seperti di atas akan menghasilkan hasil seperti ini
Terlihat di atas variabel angka di isi menggunakan tipe data number sehingga meghasilkan tampilan seperti di atas.
Pada contoh seperti di atas, var pertama bisa juga menggunakan tipe data integer sementara pada variabel kedua dan tiga yang merupakan pecahan maka bisa juga menggunakan tipe data float.
Tipe Data String
Biasa digunakan untuk membuat sebuah kalimat. Tipe data ini bisa berisi huruf dan angka. Ini merupakan contoh penggunaan tipe data string.
<!DOCTYPE html>
<html>
<head><title>Contoh Penggunaan Tipe Data</title></head>
<body>
<h2>Tipe Data Pada Javascript</h2>
<p>Ini merupakan contoh penggunaan tipe data string:</p>
<p id="hasil"></p>
<script>
let kata1 = "contoh tipe data string dengan kutip 2";
let kata2 = 'contoh tipe data string dengan kutip 1';
document.getElementById("hasil").innerHTML =
kata1 + "<br>" + kata2;
</script>
</body>
</html>Script di atas akan menghasilkan seperti ini
Terlihat di atas merupakan hasil dari penggunaan tipe data string. Pada penulisanya, tipe data ini bisa menggunakan tanda kutip dua (“) atau pun kutip satu (‘).
Tipe Data Boolean
Ini merupakan tipe data yang hanya memiliki dua nilai yaitu true dan false. Contoh penggunaanya adalah seperti ini
<!DOCTYPE html>
<html>
<head><title>Contoh Penggunaan Tipe Data</title></head>
<body>
<h2>Tipe Data Pada Javascript</h2>
<p>contoh penggunaan tipe data boolean</p>
<p id="hasil"></p>
<script>
let x = 5;
let y = 4;
let z = 6;
document.getElementById("hasil").innerHTML =
(x > y) + "<br>" + (x < z) + "<br>" + (x ==z) + "<br>" + (z < x);
</script>
</body>
</html>
Script di atas akan menghasilkan hasil seperti ini.
Terlihat jika hasil yang ditampilkan hanya lah true ataupun false. Pada pengembangannya, nilai itu bisa diganti menjadi yes dan no atau benar dan salah. Ini merupakan tipe data yang digunakan untuk menilai variabel dalam dua nilai saja.
Tipe Data Arrays
Jika sebelumnya boolean hanya akan menampilkan dua nilai yaitu true dan false, maka untuk menciptakan banyak nilai pada variabel bisa menggunakan tipe data arrays ini. Ini merupakan contoh penggunaan tipe data arrays.
<!DOCTYPE html>
<html>
<head><title>Contoh Penggunaan Tipe Data</title></head>
<body>
<h2>Tipe Data Pada Javascript</h2>
<p>Contoh penggunaan tipe data arrays</p>
<p id="hasil"></p>
<script>
let alamat = ["Jakarta","Bandung","Surabaya","Semarang"];
document.getElementById("hasil").innerHTML = alamat[1];
</script>
</body>
</html>
Script di atas akan menghasilkan seperti ini
Kata Bandung muncul karena kita memilih urutan 1. Jika ingin memunculkan kota lain yang ada di pilhan maka anda hanya tinggal merubah angka atau indeks nya saja. Seperti ini
<!DOCTYPE html>
<html>
<head><title>Contoh Penggunaan Tipe Data</title></head>
<body>
<h2>Tipe Data Pada Javascript</h2>
<p>Contoh penggunaan tipe data arrays</p>
<p id="hasil"></p>
<script>
let alamat = ["Jakarta","Bandung","Surabaya","Semarang"];
document.getElementById("hasil").innerHTML = alamat[2];
</script>
</body>
</html>
Ketika angka indeksnya diganti menjadi 2, maka yang muncul seperti ini
Itu merupakan contoh penggunaan tipe data boolean. Yang perlu diingat adalah indeks pada tipe data arrays dimulai dari 0. Jadi jika kita memilih indeks angka 1 maka yang muncul adalah nilai pada urutan kedua.
Tipe Data Undefined
Secara mudah, tipe data ini merupakan tipe data yang belum terdefinisikan. Akan muncul karena kesalahan proses dan tidak terencana. Jika menggunakan script pada contoh tipe data arrays tadi yang seperti ini
<!DOCTYPE html>
<html>
<head><title>Contoh Penggunaan Tipe Data</title></head>
<body>
<h2>Tipe Data Pada Javascript</h2>
<p>Contoh penggunaan tipe data arrays</p>
<p id="hasil"></p>
<script>
let alamat = ["Jakarta","Bandung","Surabaya","Semarang"];
document.getElementById("hasil").innerHTML = alamat[2];
</script>
</body>
</html>
Tipe data undefined akan muncul ketika kita memasukan nilai yang tidak atau belum terindeks. Pada script di atas hanya ada 4 nilai, maka hanya indeks 0 sampai 3 yang bisa didefinisikan. Jika kita memasukan nilai lebih dari itu maka hasilnya adalah undefined, seperti ini.
<!DOCTYPE html>
<html>
<head><title>Contoh Penggunaan Tipe Data</title></head>
<body>
<h2>Tipe Data Pada Javascript</h2>
<p>Contoh penggunaan tipe data arrays</p>
<p id="hasil"></p>
<script>
let alamat = ["Jakarta","Bandung","Surabaya","Semarang"];
document.getElementById("hasil").innerHTML = alamat[4];
</script>
</body>
</html>
Pada script di atas kita memasukan angka 4 pada indeks. Yang mana indeks 4 tidak memiliki nilai apa – apa. Maka hasilnya akan menjadi seperti ini
Itulah contoh dari munculnya tipe data undefined. Berbeda dengan null, tipe data ini muncul biasanya ketikan terjadi kesalahan pada proses. Pada kasus di atas kesalahan terjadi karena nilai indeks yang dimasukan tidak memiliki nilai. Undefined bisa diperbaiki jika prosesnya diperbaiki.
Tipe Data Objek
Pada penggunaanya, tipe data ini bisa merangkum banyak tipe data lain di dalamnya. Contoh dari penggunaan tipe data object adalah seperti ini
<!DOCTYPE html>
<html>
<head><title>Contoh Penggunaan Tipe Data</title></head>
<body>
<h2>Tipe Data Pada Javascript</h2>
<p>Ini merupakan contoh penggunaan tipe data object</p>
<p id="hasil"></p>
<script>
let Data = {
Nama : "Alex",
Alamat : "Jakarta",
Usia : 30,
};
document.getElementById("hasil").innerHTML =
Data.Nama + " beralamat di " + Data.Alamat + " berusia " + Data.Usia + " tahun.";
</script>
</body>
</html>
Script di atas akan menghasilkan hasil seperti ini
Seperti terlihat di atas, variabel memiliki banyak nilai di dalamnya.
Itu adalah beberapa contoh dari penggunaan berbagai tipe data pada javascript yang digabungkan dengan HTML.
Mengenal tipe data javascript ini berguna karena bahasa javascript ini memiliki beberapa kelebihan.
Kelebihan Javascript
Sebagai salah satu bahasa pemograman dengan pengguna terbanyak, bahasa pemograman ini memilki beberapa kelebihan. Kelebihan dari javascript diantaranya adalah :
- Tidak membutuhkan compiler, web browser mampu mengerti bahasa javascript ini dengan menggunakan HTML.
- Error lebih mudah dicari solusinya
- Bisa digunakan pada berbagai browser dan platform
- Website menjadi lebih menarik dan juga interaktif
- Dibanding dengan bahasa pemograman lain javascript ini lebih cepat dan lebih ringan.
Pada penggunaanya saat ini, javascript menjadi sangat penting karena bisa mempercantik tampilan dari website. Javascript membuat website lebih menarik dan interaktif.
Jika diibararkan rumah, HTML dan CSS adalah rumah dan desainya nya maka Javascript adalah alat elektronik yang membuat rumah menjadi lebih menarik. Itulah mengapa menguasai bahasa javascript menjadi salah satu hal yang wajib dikuasai oleh seorang programmer.
I’m an experienced SEO Specialist who can grow a website through organic channel. I’m also passionate about digital marketing and web development