Conquer Javascript #1 | Yang tidak kamu ketahui tentang javascript, serta bedah increment operator

Conquer Javascript series | #1 | Yang tidak kamu ketahui tentang javascript, serta bedah increment operator

Hai teman-teman, di kesempatan kali ini kita akan memulai series baru pertama kita yaitu Conquer Javascript / Taklukan Javascript. Di series ini kita akan belajar menaklukan makhluk yang bernama “ JAVASCRIPT ” ini, yang katanya cukup mengerikan. Mari kita buktikan hal tersebut adalah salah pada series kali ini dengan membedah salah satu operator di javascript yaitu Increment Operator.

Pada series ini diharap teman teman sudah mengenal dasar javascript, kita akan mengenal lebih jauh lagi. Dan membahas topik yang jarang dan sedikit yang mengerti. Dengan memahami core dari javascript diharap kita dapat menggunakan teknologi ini lebih baik lagi.

Apa itu Javascript?

Sedikit mengulang kembali, Javascript merupakan salah satu teknologi yang sangat banyak digunakan saat ini. Javascript merupakan salah satu bagian terpenting dan utama dalam web development terutama pada Front-End / client side. Seiring perkembangannya sekarang Javascript dapat di gunakan hampir di semua platform yang ada, mulai dari Client-side, Server-side, Android, IOS, IoT, Desktop, dan lainnya.

Javascript bukanlah java, mereka adalah dua teknologi yang berbeda ya.

Kita tidak membahas sejarah dari Javascript karena akan cukup panjang, kita akan fokus ke core dari javascript ini. Kepo dengan sejarah, dan informasi lengkapnya nya? silahkan cek wiki di bawah.

JavaScript - Wikipedia

Javascript memiliki standarisasi dan spesification dengan nama “ECMAScript”, jadi jangan binggung jika ada yang menyebutnya javascript atau ecmaScript. Jadi dokumentasi/spesifikasi dari Javascript ada dengan nama ECMAScript atau ECMA-262

Pandangan yang salah dengan Javascript

Sebelum kita belajar lebih jauh, ada beberapa hal yang perlu kita ketahui.

Pandangan yang salah? yapss.. banyak dan sering di jumpai developer yang menganggap javascript adalah bahasa yang cukup aneh, membingungkan dan banyak bug.

Siapa yang seperti itu? Tidak masalah jika kita berpikiran seperti itu, mari kita perbaiki pandangan tersebut.

[en] Whenever there’s a divergence between what your brain thinks is happening. And what the computer does, that’s where bug enter the code

[id] Setiap kali ada perbedaan antara apa yang menurut otak Anda sedang terjadi. Dan apa yang dilakukan komputer, di situlah bug memasukkan kode.

~ Kyle Simpson — You Don’t Know JS

Bug yang kita jumpai adalah hasil dari perbedaan antara apa yang kita harapkan dengan apa yang terjadi oleh komputer kita.

Yang paling sering terjadi dan membuat cukup frustasi adalah ketika kita mendapatkan bugs yang terjadi tidak terduga, dan penyebab terbanyak dari datangnya bugs adalah cara berpikir kita yang salah!

yang perlu kita perhatikan di sini adalah javascript memiliki specification yang menjelaskan bagaiman suatu hal berjalan. Namun sangat banyak developer javascript yang tidak pernah membaca specification tersebut.

Jika apa yang terjadi pada code kita tidak sesuai dengan specification tersebut maka itu adalah bug, jika sama maka bug tersebut berasal dari cara berpikir kita.

Mungkin menurut kita specification javascript ini cukup berbeda dengan bahasa lain. Namun ini merupakan sebuah tools yang sudah jelas spesifikasinya, kita hanya perlu memahami spesifikasi yang ada, bukan karena berbeda dengan bahasa pemrogaman yang lain maka javascript aneh, melainkan kita sebagai developer yang tidak/belum mengenal javascript dengan baik.

Tidak ada yang salah dengan javascript, kita hanya perlu memahami javascript dengan lebih baik lagi, semua yang terjadi yang kita anggap sebagai bugs akan masuk akal ketika kita memahami specification nya.

Mencoba memahami dan berteman dengan Javascript

Kita akan mencoba dan membuktikan statement sebelumnya.

Sering menggunakan operator increment ataupun decrement? baik postfix maupun prefix? mari kita lihat contoh.

let x = 1
x++ // 1
x // 2

dari code di atas, apa yang anda pikirkan akan terjadi? apakah kalian berpikiran bahwa yang terjadi adalah x = x + 1 atau x += 1 ? secara kasat mata bisa dibilang benar. Yang kita pikirkan adalah yang dilakukan oleh operator tersebut adalah mengembalikan nilai x lalu melakukan increment.

Jika kita berpikiran seperti itu, coba kita tes pada usecase yang lain!

let x = '1'
x = x + 1
x // '11'

Pernah menjumpai kasus seperti di atas? yaps ini seperti yang kita anggap sebelumnya x = x + 1 , namun niali x berupa string, Yang terjadi adalah string concatenation / Penggabungan string.

Terus bagaimana dengan operator ++ ? mari kita lihat!

let x = '1'
x++
x // 2

Ooops hasilnya 2 , berarti statement yang kita pikirkan sebelumnya tidak tepat bukan? kalau seperti ini apa yang kita lakukan? Kembali memahami specification nya !

untuk postfix increment operator bisa kita lihat di sini: https://tc39.es/ecma262/#sec-postfix-increment-operator

ECMAScript specificatpion | Postfix Increment Operator

dari specification di atas sangat jelas apa yang terjadi mari kita baca.

1. Operator tersebut akan mengevaluasi lsh (LeftHandSideExpression) atau expresi yang ada di sebelah kiri operator jika x++ maka lsh adalah x .
2. Nilai lama / oldValue akan dilakukan operasi ToNumeric (ini merupakan abstact operation di javascript, kita akan bahas di lain waktu), secara singkat ToNumeric akan mengubah lsh menjadi number atau BigInt. Jika lsh merupakan numeric yang tidak valid maka akan mengembalikan NaN .
3. Jika oldValue tersebut bertipe data number maka newValue akan berisikan hasil dari Number::add(oldValue, 1) atau sederhananya oldValue + 1 .
4. Jika oldValue bukan string melainkan BigInt, maka akan nilai dari newValue adalah hasil dari BigInt::add(oldValue, 1) atau sederhananya BigInt(oldValue) + BigInt(1).
5. Selanjutkan akan dilakukan peletakan nilai dengan operasiPutValue(lsh, newValue) untuk nilai lsh atau sederhananya mengubah nilai dari lsh dengan nilai baru hasil dari proses point 3 atau 4.
6. Lalu terakhir akan mengembalikan nilai dari oldValue sebelumnya.

What cukup kompleks dan panjang ya, dengan seperti ini kita paham bagaimana operator tersebut bekerja.

Dengan demikian kita tidak hanya menebak nebak seperti seorang peramal, dengan memahami hal seperti ini kita mengetahui apa yang terjadi setiap baris code kita.

Jika sudah paham mari kita lihat contoh yang sedikit berbeda:

let val = ['12'];
val++ // 12
val // 13

Bagaimana? tau kenapa seperti itu? jika belum silahkan membaca kembali ECMAScript specification nya ya..

Masih banyak lagi yang dapat kita bahas, untuk kesempatan kali ini kita sudah mencoba berteman dengan javascript, dan menyatukan cara berpikir kita dengan javascript. Mungkin masih banyak kata-kata/syntax yang asing bagi kita, di kesempatan selanjutnya kita akan membahas lebih dalam lagi mengenai javascript.

Jangan lupa untuk membaca ECMAScript specification agar kita lebih memahami javascript. Mungkin agak sedikit susah untuk membaca specification nya, namun akan sangat bermanfaat.

dengan memahami specification yang ada dan bagaimana javascript bekerja, kita akan lebih mudah menghindari bugs yang kita buat sendiri karena adanya perbedaan antara yang kita pikirkan dan yang komputer/javascript lakukan.

Mungkin ada yang menyarankan ke MDN, atau W3School, kedua tempat tersebut cukup mudah di pahami, namun tidak begitu lengkap dan tepat. Satu satunya tempat untuk mendapatkan kebenaran adalah di specification nya.

Akhir kata

Tidak terasa sudah di akhir, semoga apa yang dapat saya sampaikan dapat bermanfaat, mohon maaf jika ada salah kata. 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!