4. Type Coercion & Metaprogramming

• Sumber: Closure, Async, and OOP: The Hard Parts of JavaScript | Frontend Masters
• Jumlah video: 9
• Jumlah kartu anki: 32

---

Chapter keempat di course Will Sentance, membahas Type Coercion dan Metaprogramming. Proses distilasi akan langsung per video karena pendekatannya sedikit berubah — jadi per 3 video alih-alih satu chapter secara penuh, sehingga pendahuluan distilasi tidak bisa dilakukan dengan baik.

Berikut hasil distilasi dari tiap video pada Chapter ini:

Math operators & User-submitted data

Ini adalah video pertama dari chapter keempat. Video dibuka dengan pengenalan singkat terkait Type Coercion; seperti alasan pengadaannya, kaitannya dengan simbol, manfaatnya secara singkat, dll. Walaupun begitu, Will Sentance tidak secara eksplisit mengabarkan apa pengertian Type Coercion, namun dia memang secara lugas dan jelas menjelaskannya langsung dengan studi kasus. Dan tampak juga bahwa dia menekankan pengertiannya langsung pada istilahnya — coerce dalam bahasa inggris berarti ‘memaksa’.

Dia juga menerangkan bagaimana cara kerjanya, tapi masih secara khusus menyorot pada operator matematika. Pada video ini juga dia menjelaskan perbedaan cara menerima input antara operator dan fungsi walau mereka punya kesamaan fungsional — yaitu untuk mengolah data.

Math operator & type coercion

Video kedua ini melanjutkan pembahasan dari video pertama, tapi kali ini fokus pada operator pertambahan pada Javascript. Will Sentance menjelaskan kalau fenomena type coercion pada operator pertambahan sedikit berbeda dengan operator matematika yang lain.

Kesimpulannya, semua operator matematika akan melakukan type coersion toNumber() ke operandnya — jika mereka menemukan operand tersebut bertipe data string, kecuali untuk operator pertambahan.

Operator pertambahan akan melakukan type coercion toString() jika menemukan salah satu operandnya bertipe data string. Dia hanya akan melakukan operasi matematika jika kedua operand sudah dalam tipe data angka.

Di akhir video, dia menjelaskan strategi untuk menyikapi perbedaan yang dimiliki operator pertambahan tersebut.

ToBoolean Coercion

Video ketiga untuk chapter ini, membahas type coercion yang terjadi pada operator comparison khususnya equality. Type coercion yang terjadi pada operator comparison adalah toBoolean(). Video fokus membahas operator equality, yaitu double equals dan triple equals — walau sempat membicarakan operator comparison lain seperti >/</!=/≤/≥. Instruktor menjelaskan perbedaan antara dua jenis operator equality tersebut di kasus nilai 0 dan empty string.

Di akhir video, Will Sentance menyarankan untuk menggunakan opsi strict equality operator (===) supaya proses perbandingan jalan secara literal pada nilai dan tipe data kedua operandnya. Itu membuat hasil dapat diperkirakan dengan lebih baik.

Coercion Rules & Operators

Pada awal video, diperlihatkan slide powerpoint yang menunjukkan tiga flow utama type coercion dan hubungannya dengan berbagai operator atau aksi. Will sentance fokus menjelaskan slide tersebut sepanjang video, kemudian memberikan pembuka untuk bahasan pada video berikutnya sebagai penutup — dia bertanya apa yang terjadi saat sebuah object dibandingkan dengan object.

Stack Memory vs. Heap Memory

Video ini melajutkan apa yang sudah dibuka di akhir video sebelumnya, Will Sentance membuktikan kalau operasi perbandingan antar dua object dengan konten yang sama akan mengembalikan nilai false. Keunikan itu berhubungan dengan cara struktur data non-primitive (object, array, dan function) disimpan.

Alih-alih disimpan seperti struktur data primitive (number, string, dan boolean) pada Stack Memory, struktur data non-primitive disimpan di area memori yang disebut Heap. Heap lebih fleksibel untuk menangani struktur data dengan ukuran yang bervariasi.

Tidak hanya itu, perlakuan berbeda juga terjadi pada variabelnya. Struktur data primitive akan langsung disimpan dimana dia didefinisikan, sedangkan struktur data non-primitive tidak akan disimpan di variabelnya, variabelnya hanya akan menyimpan reference/pointer yang menunjuk alamat lokasi dari struktur data tersebut di Heap memory.

Sehingga disini jelas; saat kita membandingkan dua variabel yang berisi object, sebenenarnya kita membandingkan reference/pointer yang mereka simpan dan bukan konten objectnya — dua object yang berbeda berarti dua lokasi yang berbeda maka akan selalu menghasilkan false. Jadi untuk membandingkan konten dari dua object, kita perlu memanfaatkan dot notation dan membandingkan propertinya satu per satu.

Date Objects

Masih berkaitan dengan object, tapi video ini fokus pada Date() object di Javascript. Will Sentance menjelaskan cara pakainya, tanggal epochnya (titik nol), studi kasus implementasinya, dan bentuk dasar objectnya — objectnya akan menyimpan properti tersembunyi bernama [[DateValue]].

Sebenarnya dia ingin menunjukkan bagaimana caranya dua Date Object itu bisa dibandingkan — kita tahu kalau object tidak bisa dibandingkan secara langsung —, tapi di akhir video dia malah menunjukkan bagaimana cara kerja square bracket notation untuk membuat properti baru di sebuah object, tapi itu bukan karena lupa — dia sudah meminta maaf beberapa kali untuk ini — namun karena cara yang akan dipakai berkaitan dengan bahasan pada video berikutnya.

Jadi studi kasus yang dikenalkan pada video ini menjadi pembuka untuk video berikutnya.

toPrimitive Coercion

Video ini melanjutkan masalah yang dikenalkan dari video sebelumnya terkait apakah kita bisa melakukan operasi matematika pada Date object — yang secara teori melakukan operasi matematika pada dua struktur data non-primitive itu tidak mungkin. Disini Will Sentance menunjukkan bahwa operasi matematika dapat dilakukan pada Date Object, dengan bantuan type coercion toPrimitive. Operator matematika seperti pengurangan secara otomatis memicu perilaku type coercion, dan karena ditemui operandnya adalah struktur data non-primitive maka terjadilah koersi toPrimitive. Kemudian instruktor lanjut menjelaskan cara kerjanya dan mengenalkan hidden property bernama @@toPrimitive pada objek yang punya peran dalam fitur ini..

Implement @@toPrimitive

Pada awal video, ada penjelasan sedikit soal perilaku tipe data NaN yang cukup unik ketika dibandingkan. Video lanjut dengan masuk ke pembahasan bagaimana cara mengakses @@toPrimitive sambil mengenalkan ke batasan-batasannya, lalu dikenalkan lah dengan built-in object bernama Symbol yang dapat membantu kita mengakses @@toPrimitive secara implisit — karena kita benar-benar tidak bisa mengaksesnya secara langsung, bahkan kita tidak bisa memunculkannya ke console.

Symbols & Metaprogramming

Pembahasan lebih dalam terkait Symbols dan cara kerja @@toPrimitive. Ditunjukkan bahwa fungsi yang disimpan pada @@toPrimitive dapat menerima argumen dan itu bekerja secara otomatis ketika perilaku type coercion terjadi, sehingga bisa membantu koersi toPrimitive menentukan tipe data yang dapat dikembalikan. Di titik ini maka kita bisa memanfaatkan percabangan if untuk menentukan nilai yang dikembalikan. Argumen itu disebut hint dan itu adalah sebuah enum dengan nilai string; ‘number’, ‘string’, 'default'.