Flatburger

⚙️ Tentang Javascript single thread dan asynchronus

December 23, 2019 • ☕️ 5 min read

🏃🏻‍♂️Permulaan

Javascript merupakan single thread language dimana memiliki 1 buah stack dan sebuah memory heap, seperti pada umumnya pemrosesan baris kode akan dieksekusi secara berurutan[1], ketika baris-1 selesai diekseskusi maka akan lanjut kebaris ke-2 apabila baris ke-2 selesai dieksekusi maka akan melanjutkan ke baris selanjutnya oleh karena itu si javascript ini secara default memang secara synchronus tetapi terkenal denga ke-asynchronusannya.

Loh kan si jevescript ini synchronus kok terkenal asynchronus nya terus gimana dong? 😭

tenang bujank, bakal tajabarin satu satu

🛠 Javascript Engine & Runtime

Yap, pertama bahas runtime dan engine nya dulu biar tau asal muasal sebuah kode JS dapat dijalankan, biar ngga langsung bikin app TODO LIST / CRUD doang 🙂. Javascript runtime mengacu pada dimana kode javascript tersebut dieksekusi seperti halnya berjalan diatas browser Chrome, sedangkan javascript engine bertugas menerjemahkan source code kedalam mesin yang akan dipahami oleh si mesin. Nah disinilah peran dari engine seperti V8(Chrome), SpiderMonkey(Firefox), Nitro(Safari) melakukan penerjemahan kode javascript kedalam bahasa mesin secara efisien dengan cara intepreter.

⚗️ Synchronus dan Asynchronus

🦹🏼‍♂️ Synchronus

Sudah disinggung sebelumnya bahwa si javascript ini synchronus by default, istilah dari synchronus dan asynchronus merupakan istilah untuk membedakan tentang urutan-urutan operasi perintah yang ada dalam sebuah kode. Si synchronus ini paling sering dijumpai dan mudah dimengerti ketika menulis kode semisal ph.. hmm python, kemudian kode akan dieksekusi satu persatu sesuai urutan.

Contoh seperti berikut :

console.log('Penulis')
console.log('Mbois')
console.log('Sekali')

Kurang lebih akan dieksekusi seperti ini : sync image

Hasil dari eksekusi kode :

Penulis
Mbois
Sekali

Kode diatas dieksekusi suda terjamin akan dieksekusi sesuai urutan dikarenakan setiap eksekusi harus menunggu eksekusi sebelumnya selesai dan proses ini disebut blocking. Hmmm analoginya begini, mirip seperti antrian rawon ketika ada 5 pembeli maka kita akan dilayani oleh penjual ketika antrian 1-4 sampe selesai.

🧟‍♂️ Asynchronus

Kemudian asynchronus, si asynchronus sangat berbeda dari synchronus dimana tidak menunggu operasi sebelumnya selesai untuk mengeksekusi operasi setelahnya. Jadi asynchronus tidak melakukan blocking melainkan eksekusi berdasarkan waktu proses, proses akan terus berlanjut sesuai dengan kecepatan proses 🤔(mulai ga masuk akal). Memang sebagian besar proses di javascript itu synchronus namun beberapa operasi berjalan secara asynchronus seperti Akses database, membaca file, ajax call, websocket, worker.

Dikarenakan tidak bisa membuat proses asynchronus secara murni, maka kita akan mendemonstrasikan menggunakan setTimeout untuk proses asynchronusnya pada kode. Contoh :

console.log('Penulis')
setTimeout(() => {
    console.log('Mbois')
}, 1000);
console.log('Sekali')

Visualisai akan ditampilkan seperti berikut:

async image

Hasil dari eksekusi kode :

Penulis
Sekali
Mbois

Fungsi dari setTimeout pada baris kode diatas bentuk implementasi dari proses asynchronus yang digunakan untuk menjeda proses baris kode, karena cara kerja asynchronus berdasarkan waktu proses maka akan mengeksekusi proses yang cepat terlebih dahulu kemudian mengeksekusi perintah selanjutnya alhasil output menampilkan yang tidak sesuai dengan inputan kode dan output tidak berurutan. Analoginya begini

Proses Asyncrhonous bisa disamakan dengan sistem pemesanan pada restoran, Meja A memesan pada waktu 12.00, tanpa menunggu makanan Meja A tiba, Meja B bisa memesan makanan pada waktu 12.15, namun hasil yang didapatkan sesuai apa yang dipesan oleh Meja A dan Meja B. Jika Meja A memesan nasi goreng 2 piring, sementara Meja B hanya memesan nasi telor, maka Meja B bisa mendapatkan makanan lebih dulu dari pada Meja A[2].

Untuk lebih mendalam, nantinya untuk menanggulangi asynchronus membutuhkan hal semacam callback,promise, async / await dst

🚀 Penutup

Oke, diatas merupakan konsep dasar yang harus dipahami ketika ingin terjun ke dunia js-js-an itu yang seringkali diabaikan, terkadang orang terjun langsung tanpa memiliki konsep dasar yang jelas tiba-tiba belajar react,express, dan antek-antek yang lain tanpa tau bagaimana proses sebuah sistem tersebut bekerja, atau emang sebelumnya dikampus asal mengerjakan dan mencari nilai sempurna? 🤔 (oh tida, saya tak mau julid).

Ya ini merupakan tulisan yang dibuat untuk pengingat saya pribadi berhubung saya orangya pelupa, maklum pengangguran 🌝. Kalo bermanfaat bagi kalian pembaca ya alhamdulillah selamat anda salah satu penyelamat dari indonesia darurat membaca, kalo mau traktir mekdi ato eskopi bisa banget kok via https://trakteer.id/ffadilaputra ato offline juga gapapa wkwk.

📚 Kutipan

📝 Bacaan terkait