Conquer Javascript #2 | Bedah Tipe data, typeof operator dan boxing

Conquer Javascript | #2 | Bedah Tipe data, typeof operator dan boxing

Hai teman-teman, di kesempatan kali ini kita akan melanjutkan series “Conquer Javascript” di kesempatan ini kita akan belajar mendalami Tipe data, typeof operator dan boxing dalam javascript.

Bagi yang belum mengikuti series ini dari awal, kamu bisa mencoba memulainya dari Conquer Javascript #1 | Yang tidak kamu ketahui tentang javascript, serta bedah increment operator.

Tipe data merupakan fondasi yang sangat penting dalam sebuah bahasa pemrogaman tidak terkecuali javascript. Javascript merupakan bahasa yang Dynamically typed, dengan begitu kita tidak perlu memberitau javascript apa tipe data dari suatu variabel, javascript lah yang akan menyimpulkan apa tipe data yang sesuai berdasarkan value nya.

Di javascript atau bahasa Dynamically typed lainnya, bukan variabel nya yang memiliki tipe data, melainkan value nya sendiri yang memiliki tipe data. Bisa kita sebut sebagai “Value types”.

Specification: ecmascript-data-types-and-values

Tipe data apakah aku?

Karena kita tidak memberitau tipe data nya, bagaimana kita bisa tau apa tipe data nya?. Javascript menyediakan operator typeof , yang bisa kita gunakan untuk untuk mendapatkan tipe data dari suatu variabel atau value.

sebelum ke tipe data apa apa saja, kita pelajari terlebih dahulu operator typeof ini.

Specification: typeof-opearator

ECMAScript specificatpion | The typeof operator

ECMAScript specificatpion | The typeof operator results

Mari kita bedah operator typeof ini berdasarkan specification nya.

1. Mengevaluasi UnaryExpression , yaps typeof merupakan unary operator dimana hanya menerima 1 operand, kita anggap operand tersebut sebagai val .
2. Jika val termasuk ke dalam Reference record maka lakukan pengecekan IsUnresolvableReference(val) untuk mengidentifikasikan apakah val menunjukkan keterkaitan/references tidak dapat diselesaikan, dan akan menghasilkan boolean true jika tidak dapat dan false sebaliknya. Jika IsUnresolvableReference menghasilkan true maka step ini akan mengembalikan “undefined” . Inilah yang terjadi jika kita memberikan operand yang tidak memiliki value ( let x; ).
3. Lalu ambil value dari val dan berikan ke val , sebelumnya nilai val adalah hasil dari mengevaluasi UnaryExpression dan bukan nilai nya maka sekarang kita ambil value/nilai nya.
4. Setelah itu akan mengembalikan string berdasakan tabel 41 di atas, jadi ia akan mencocokan tipe data dari value val dengan tabel (lookup). Dari point ini kita tau bahwa typeof akan selalu mengembalikan string seperti yang ada pada tabel kolom result.

Kita sudah mempelajari bagaimana operator typeof bekerja, dengan begitu kita tau apa yang akan di kembalikan oleh operator ini, mungkin saja kita akan melakukan kesalahan seperti berikut:

const val = undefined;
if(typeof val === undefined){
    // do somethings
}

maka pengkondisian tersebut tidak akan bernilai true karena, operator typeof hanya dan pasti mengembalikan string, jadi kita akan langsung sadar untuk menuliskannya seperti berikut:

const val = undefined;
if(typeof val === 'undefined'){
    // do somethings
}

sekarang mari kita bedah setiap tipe data yang ada.

Undefined

let whoAmI;
typeof whoAmI;        // "undefined"
let whoYouAre = undefined;
typeof whoYouAre;        // "undefined"

Tipe data undefined adalah tipe data yang pasti hanya satu nilai yaitu undefined itu sendiri. setiap variabel yang di buat tanpa memberikan nilai ke dalamnya maka akan bernilai undefined, atau kita dapat memerikan nilai undefined dengan keyword undefined . Seperti yang kita sudah bahas pada pembahasan operator typeof, nilai yang akan di kembalikan oleh operator typeof berupa string yang merepresentasikan tipe data pada kasus init adalah "undefined”.

String

whoAmI = 'an string value';
typeof whoAmI;        // "string"

String pada javascript merupakan tipe data yang hanya berupa karakter valid dengan tanda kutip di awal dan akhir baik petik satu maupun petik dua ataupun backtick. Hasil dari typeof akan menghasilkan "string", berdasarkan tabel sebelumnya

Number

whoAmI = 12;
typeof whoAmI;        // "number"

Begitu juga dengan number yang merupakan angka yang valid baik bilangan bulat, pecahan, oktal, hex, biner, Infinity , bahkan NaN, dan lainnya. Hasil dari typeof akan menghasilkan "number", berdasarkan tabel sebelumnya.

Ehhh NaN termasuk number? bukannya NaN itu Not A Number ? yaps kita biasa kenal NaN sebagai istilah Not A Number , namun dia bertipe number , cukup membinggungkan bukan? dia bukan number tapi dia number.

NaN lebih cocok kita anggap sebagai Invalid Number dari pada Not A Number. dengan berpikir seperti ini kita lebih mudah memahami apa itu NaN karena Invalid Number termasuk number, namun number yang invalid.

Bagaimana kita membedakan number dan NaN? Cara termudah adalah melihat value nya jika NaN maka sudah pasti dia adalah NaN, selain itu kita bisa memeriksanya menggunakan isNaN atau Number.isNaN , perlu di perhatikan bahwa kedua function tersebut sedikit memiliki perilaku yang sedikit berbeda teman teman bisa melihatnya di specificationnya (di lain kesempatan akan kita coba bahas bersama sama).

FYI: di javascript juga terdapat number -0 , yaps di javascript kita bisa menggunakan -0 walau agak terasa tidak berguna dan aneh tapi ada beberapa kasus yang kita dapat memanfaatkannya. (lain kesempatan akan coba kita pelajari)

Boolean

whoAmI = false;
typeof whoAmI;        // "boolean"

Begitu juga dengan boolean yang merepresentasikan entitas logis yang memiliki nilai antara true atau false . Hasil dari typeof akan menghasilkan "boolean", berdasarkan tabel sebelumnya.

Object

whoAmI = {};
typeof whoAmI;        // "object"

Begitu juga dengan object yang merupakan tipe data yang dapat menyimpan banyak value dan tidak berurut serta bersifatkey-value dimana setiap value memiliki key yang unik. Hasil dari typeof akan menghasilkan "object", berdasarkan tabel sebelumnya.

Array

whoAmI = [];
typeof whoAmI;        // "object"

Bagaimana dengan array? yang merupakan tipe data yang dapat menampung banyak data secara berurutan dimana setiap nilai memiliki index. Hasil dari typeof akan menghasilkan "object", tetapi di tabel sebelumnya tidak ada array , lalu kenapa “object” ? kita pasti berharap hasilnya adalah “array” , namun tidak seperti itu di javascript.

Berdasarkan specification nya array merupakan sebuah object yang memberikan perlakuan khusus, kita bisa sebut array sebagai subtype dari object.

Lalu bagaimana kita jika ingin memeriksa apakah sebuah data itu array atau bukan? kita bisa menggunakan Array.isArray().

Array.isArray([])    // true

Specification : array-objects

BigInt

whoAmI = 10n;
typeof whoAmI;        // "bigint'

BigInt merupakan tipe data yang cukup baru di javascript, diman tipe data ini dapat menampung lebih banyak dari pada number biasanya. BigInt di simbolkan dengan memberikan n di akhir angka/nilai nya. Hasil dari typeof akan menghasilkan "bigint", berdasarkan tabel sebelumnya.

Symbol

whoAmI = Symbol();
typeof whoAmI;        // "symbol"

Symbol merupakan tipe data yang cukup jarang kita gunakan, tipe data ini menghasilkan nilai yang selalu unik, bisanya dipakai untuk membuat object key. Hasil dari typeof akan menghasilkan "symbol", berdasarkan tabel sebelumnya.

Function

whoAmI = function(){};
typeof whoAmI;        // "function"

Function merupakan tipe data yang sering di gunakan dalam javascript. Hasil dari typeof akan menghasilkan "function", berdasarkan tabel sebelumnya.

Eh sebentar bukannya function merupakan object di javascript? yaps.. function di javascript merupakan object kadang di sebut sebagaicallable Object atau object yang bisa di panggil, mari lihat table di atas dengan seksama.

Disana jelas di katakan function merupakan Object yang mengimplementasikan [[Call]] namun di operator typeof mengembalikan “function” . Okei di sini lebih masuk akal, dan sesuai.

Null

whoAmI = null;
typeof whoAmI;        // "object"

Selanjutnya bagaimana dengan null ? null yang biasanya kita gunakan untuk merepresentasikan nilai yang tidak ada yang di sengaja. Hasil dari typeof akan menghasilkan "object", berdasarkan tabel sebelumnya.

Ehh… kenapa "object" ? binggung? mari kita melihat ke specificationnya agar lebih jelas.

Specification: null-value

Di sana di beritaukan bahwa null merupakan nilai primitif yang mewakili ketidak hadiran yang disengaja dari nilai objek apa pun.

Jadi null digunakan untuk merepresentasikan nilai object yang tidak ada. Jadi null di anggap merupakan tipe data object.

Bedah anggapan semua di javascript adalah Object

Pasti teman teman sering mendengar bahwa semua di javascript itu adalah object , anggapan ini tidak sepenuhnya salah namun sedikit kurang tepat karena tidak semua di javascript adalah object!.

Sesuatu dapat berperilaku seperti object belum tentu di adalah object di javascript, lah kok bisa gitu? mari kita bedah.

Tidak semua di javascript adalah object!

Yaps tidak semua, primitive type adalah salah satunya. Tapi… bukannya di primitive type seperti ( string, number, boolean, null, undefined, bigint dan symbol) kita dapat memperlakukan mereka seperti object? contohnya seperti memanggil method yang tersedia di tipe data tersebut?

const val = 'conquer javascript!';
val.toUpperCase();    // 'CONQUER JAVASCRIPT!'

yap kita bisa lakukan hal tersebut, tapi bukan berarti dia berperilaku seperti object lalu kita anggap dia adalah object.

Pada javascript ada yang namanya Boxing , mari kita bedah lagi Boxing ini.

Boxing

Eiits bukan boxing tinju ya… Boxing pada javascript merupakan suatu perilaku di javascript dimana ketika kita mengakses peroperty/method pada primitive type, namun karena pada primitive type tidak memiliki property/method maka kita memerlukan wrapper/pembungkus objek di sekitar nilai primitive tersebut untuk berperilaku seperti object.

Untungnya, Javascript akan secara otomatis membungkus nilai primitif menjadi object untuk memenuhi akses ke property/method tersebut.

Dalam javascript, memaksa merubah tipe data memiliki istilah Coercion (lain kali akan kita bedah mengenai Coercion) / paksaan. Ini merupakan hal yang cukup wajib di pahami di javascript.

Jadi bukan berarti dia berperilaku sebagai object maka kita sebut string, dan lainnya itu merupakan object ya, string tetap lah string yang hanya berisi data/karakter yang di apit dengan tanda kutip.

perhatikan contoh berikut:

const val = 'conquer javascript!';
Object(val);    // String{'conquer javascript!'}

contoh di atas lebih kurang akan menggambarkan bagaimana boxing terjadi, di atas hanya cara manual kita untuk mengubah menjadi object, pada contoh javascript akan langsung mengubah string menjadi object string yang terikat dengan method dan property yang dimiliki oleh object string seperti length , toUpperCase dan lainnya.

selain Boxing, ada juga yang UnBoxing dimana kita melakukan hal sebaliknya, yaitu mengubah object menjadi primitive type dengan cara menggunakan method valueOf() .

const val = 'conquer javascript!';
Object(val);    // String{'conquer javascript!'}
val.valueOf()   // 'conquer javascript!'

Karena Boxing ini lah yang membuat banyak pengguna javascript menafsirkan bahwa semua adalah object, tidak salah juga karena di javascript banyak dan sering dijumpai adalah object.

Masih banyak pengguna javascript yang menghiraukan mendalami tipe data di javascript, karena di rasa kurang berguna buat di pelajari lebih jauh, ini merupakan pandangan yang salah dan fatal, dengan memahami tipe data di javascript lebih baik lagi maka kita dapat mengurangi resiko bugs yang kita buat dan memprediksi hasil yang akan terjadi dengan baik.

Dengan mengetahui bagaimana sesuatu bekerja di javascript kita akan dapat meminimalisair bugs yang datang karena perbedaan apa yang kita pikirkan dengan apa yang komputer/javascript lakukan.

Akhir kata

Javascript is easy to learn, but hard to master

Pernah dengar kata kata di atas? yaps saya rasa itu sangat menggambarkan javascript, semua orang dapat dengan mudah mempelajarinya dan menggunakannya, namun untuk menguasainya sangat cukup sulit, oleh karena itu tulisan ini saya buat sebagai sarana belajar saya dan untuk berbagi kepada teman teman yang lain agar sama sama menguasai javascript.

Tidak terasa sudah di akhir, semoga apa yang dapat saya sampaikan dapat bermanfaat, mohon maaf jika ada salah kata, jangan sungkan untuk membuka diskusi hingga memberi saran dan kritik, agar kita sama sama belajar.

Terima kasih, sampai jumpa di kesempatan berikutnya.

Terhubung dengan saya dan teman teman komunitas lainnya di Devsantara discord server berikut:

Join the Devsantara Discord Server!