Seri lanjutan tentang tipe data di Javascript
Mari kita lanjutkan pembahasan sekitar 2 minggu yang lalu tentang tipe data di Javascript. Sebelumnya sedikit recap, di cerita sebelumnya aku ngebahas tentang beberapa tipe data yang primitive values yaitu string, numbers, booleans, dan BigInt. Kali ini aku bakal lanjutin buat bahas tipe data sampe ke function.
Take a seat, everibadeee
Undefined and Null
Sebenarnya undefined dan null itu dua hal yang berbeda, karena undefined ini tipe datanya seperti namanya, undefined , sedangkan null tipe datanya object. Loh? Object? Iya object.
Biar kamu percaya, kamu bisa cek sendiri kok di browser consolemu
typeof undefined; // "undefined"
typeof null; // "object"
Baik undefined ataupun null, biasanya dipakai untuk mendefinisikan value yang falsy, atau supaya ketika dimasukkan ke dalam operasi logika if else akan ditangkap sama si else.
Tapi seperti yang aku bilang tadi keduanya hampir sama tapi sebenernya beda, beda banget, atau beda aja? hmm. By default, ketika kita mendeklarasikan suatu variabel tanpa ngasih value ke dalamnya, variabel itu akan bernilai undefined, tidak terdefinisi, belum didefinisikan, masih wadah kosong. Sedangkan null lebih tepat buat menyatakan kalo suatu variabel ini datanya kosong, enggak ada datanya. Tidak terdefinisi != kosong ya kawanku.
Keduanya juga hampir sama karena ketika kita membandingkan kedua value dengan undefined == nullhasilnya akan true . Maka dari itu kamu perlu hati-hati kalo kamu ngoding dan ingin memastikan bahwa kamu akan mengabaikan undefined tapi enggak mengabaikan null, kamu perlu pake === .
Terus kenapa null bertipe data object? Padahal null.<propName> juga enggak bisa. Menurut Dan Abramov, null ini bertipe data object karena ada sedikit kesalahan ketika dulu ngebikin Javascript ini, tapi karena udah terlalu lama dan udah dipake banyak orang, kesalahan ini enggak dibenerin, enggak bikin tipe data untuk null sendiri sampe sekarang, toh juga sebenernya enggak begitu pengaruh, karena kita sama-sama tau bahwa null ini falsy.
Symbols
Untuk yang satu ini aku belum bisa bahas lebih lanjut, alasannya karena aku juga belum pernah pake Symbol sama sekali. Aku nemu istilah Symbol pun bukan dari Javascript, tapi dari Ruby yang baru tadi pagi aku pelajari.
Jadi untuk saat ini skip dulu guys, aku akan coba bahas di lain waktu ketika udah riset lebih lanjut.
Nah untuk primitive values semuanya udah terbahas tipe datanya, mulai dari string, boolean, numbers, BigInt, undefined, null, dan Symbol (maafkan aku symbol). Sekarang kit move forward ke tipe data object dan function.
Objects and functions
Object
Di beberapa pembahasan sebelumnya aku sempet singgung kalo di Javascript selain primitive values dan function, sisanya adalah object. Array? Object. Set? Object. Date? Object. Object? Ya jelas object, masak object malah string.
Untuk memastikan keabsahan omonganku ini, kamu bisa cek di console mu
typeof {}; // "object"
typeof []; // "object"
typeof new Date(); // "object"
typeof /[a-z]/; // "object"
Bukti lain bahwa tipe data yang aku sebutkan itu sebuah object adalah kita bisa memanggil prototype dari value tersebut dengan . ataupun [] . Karena penggunaan . dan [] biasanya kita pake untuk memanggil property atau prototype dari sebuah object. Misalnya nih
let a = new Date();
a.getFullYear();
let arr = [1, 2, 3];
arr.reverse().join(" ");
arr.map(() => {});
Oh, karena bukan sebuah primitive values, kita bisa ubah-ubah atau bahasa kerennya mutate isi dari object tanpa adanya error, bahkan jika misalnya dia diwrap dalam const sekalipun. Kita akan bahas ini nanti.
let numbers = [1, 2, 3];
numbers[1] = 10; // [1, 10, 3];
let obj = { name: "obj", type: "str" };
obj.type = "object";
Functions
Salah satu non-primitive values yang ada di Javascript. Sebenernya membahasakan function ini agak susah buat aku. Meminjam dari penjelasan Dan Abramov, secara teknis function ini juga object tapi punya kemampuan khusus untuk melakukan berbagai operasi dibandingkan dengan object biasa. Yang pasti, apa yang bisa kamu lakukan di sebuah object, bisa kamu lakukan juga di function.
Ngomong-ngomong, cara ngecek tipe datanya
typeof function() {}; // "function"
Kalau di beberapa pemrograman lain kaya C++ atau Java, kita membedakan method yang mengembalikan suatu value dan yang enggak jadi void dan function, di Javascript mau itu nge-return value mau enggak ngereturn value, semuanya di wrap dalam function.
Javascript tidak diskriminan!!! hei nggak gitu juga.
Cara mendeklarasikan function, sejak muncul EcmaScript6 (ES6), ada dua dengan cara yang sama kaya bahasa pemrograman yang lain atau dengan arrow function.
function ambil () {
// ambil apa nih
}
const ambil = () => {
// ambil apa nih
}
Kedua fungsi di atas bisa dikatakan sama, kok bisa dikatakan? Hmm… sebenernya sama, tapi cara Javascript nge-treat keduanya yang agak beda.
Pertama, hoisting
Di Javascript ada istilah namanya hoisting, yaitu mendorong deklarasi ke atas. Kalo kamu bikin sebuah function pake kata function ()... , kamu bisa melakukan kaya gini
const ambil = kasih;
function kasih() {
// do something
}
kasih();
Javascript bakal ngedorong si function kasih ke atas ambil karena kasih dipake di fungsi ambil . Jadi meskipun posisi dia ditulis dibawah function yang invoke/manggil dia, enggak akan ada masalah ketika kamu bikin function pake function ... .
Sedangkan ketika kamu bikin function pake arrow function, hal kaya gitu enggak bakal berhasil.
const ambil = kasih;
const kasih = () => { ... };
ambil();
Dengan deklarasi di atas, justru bakal ngasih error
Uncaught ReferenceError: Cannot access 'kasih' before initialization
Karena kasih enggak dihoist atau enggak didorong ke atas sama Javascript.
Kedua, this
this adalah salah satu hal paling enggak bisa kita duga di Javascript, kadang kita maksudnya apa malah dapatnya apa dan sebagainya. Deklarasi function menggunakan function... akan support dengan this , sedangkan arrow function enggak support this .
Contoh kasusnya
const buttons = document.querySelectorAll(".button");
button.forEach(button => {
button.addEventListener("click", function () {
this.className = "lorem"; // works fine
});
});
button.forEach(button => {
button.addEventListener("click", () => {
this.className = "lorem"; // akan return error
});
});
Jadi ini juga perlu diperhatikan nantinya ketika mau bikin suatu function, apakah butuh yang bisa akses this atau enggak, kalo kamu mau skip baca this dari suatu block dan mau baca langsung dari class atau global scope, pake arrow function, otherwise, gunakan function… .
No other data types
Dan… Itu tadi semua tipe data yang ada di Javascript sampe sekarang. Enggak ada lagi tapi mungkin akan ada tipe data baru seiring berkembangnya bahasa pemrograman yang ada, bukan cuma Javascript.
Semoga sedikit pembahasa tipe data ini bisa ngebantu kamu ketika ngoding Javascript. See you in the next story.
So sorry for the slow and late update. Aku 2 minggu ini lagi nyobain #100DaysOfCode dan perlu adaptasi dengan kebiasaan baru yang ada, jadi minggu lalu belum sempat buat bahas javascript dan baru minggu ini bisa update lagi. Mungkin juga cerita kali ini agak enggak teratur, karena sebenernya aku juga blank. Hahaha, jangan lupa untuk kasih masukan atau saran biar aku bisa improve pembahasan-pembahasan ke depan.