001: Sebuah Refleksi tentang Event Loop

Suasana hati Dimas yang udah duduk di depan laptop sekitar 30 menit-an langsung berubah saat interviewer mulai menanyakan tentang “Apa itu Event Loop?“

Dimas yang di awal interview cukup percaya diri, sekarang mulai sedikit gugup, telapak tangan nya juga berkeringat, pikiran nya tiba-tiba menjadi blank. "Aduh, kok gue lupa ya? Padahal kayaknya pernah baca deh"

Dimas mencoba untuk diam sejenak untuk mencoba mengingat apa yang ia ketahui tentang Event Loop. Kemudian mencoba menjawab pertanyaan pewawancara dengan:

“OK, jadi Event Loop itu seperti sebuah loop yang berjalan di engine nya Javascript untuk menangani tugas-tugas tertentu…“ jawab Dimas dengan suara nya yang sedikit bergetar.

Pewawancara merespon dengan senyum yang tampak dingin oleh Dimas, kemudian menunjukan gesture untuk menunggu lanjutan dari penjelasan Dimas.

Kemudian Dimas pun menjelaskan sedikit tentang callback queue dan event queue, tapi Dimas semakin ragu karna dia cuma bisa mengingat sedikit saja tentang hal itu.

“Apakah ada lagi yang mau kamu jelaskan, Dimas?“ kata pewawancara kepada Dimas.

“Mhh, Saya rasa.. itu udah menjawab semua hal mengenai Event Loop yang saya ketahui“ Jawab Dimas.

Kemudian orang yang mewancarai Dimas tampak menuliskan sesuatu, sebagai tanda akan dilanjutkan dengan tantangan yang berikutnya.

Tantangan Kedua

Pewawancara sedang meng-aktifkan mode share screen pada komputer nya. Setelah itu Dimas dihadapkan sebuah code snippet yang tampak seperti di bawah ini:

console.log('Start');

setTimeout(() => {
  console.log('Timeout 1');
}, 0);

Promise.resolve().then(() => {
  console.log('Promise 1');
});

new Promise((resolve, reject) => {
  console.log('New Promise 1');
  resolve();
}).then(() => {
  console.log('Promise 2');
});

console.log('End');

“Baik Dimas, coba ketik kan di kolom chat kamu, kira-kira apa output yang akan dihasilkan oleh kode tersebut?“

Dimas pun menarik nafas untuk menenangkan diri selama beberapa detik lalu mencoba untuk menjawab, dengan mulai menulis pada kolom chat yang sudah tersedia di laptop nya.

Setelah menerima jawaban dari Dimas, interview dilanjutkan dengan beberapa pertanyan-pertanyaan lain selama kurang lebih 15 menit. Sampai tibalah waktunya interview dinyatakan selesai. “Baiklah Dimas, selanjutnya tim HR kami akan memberikan update mengenai hasil interview kita kali ini maksimal dalam satu minggu kedepan ya. Terimakasih atas waktunya..“ Dimas pun membalas dengan terima kasih, kemudian Google Meet pun diputus oleh pewawancara.

Refleksi Dimas

Sebelum mematikan aplikasi Google Meet, Dimas yang dari tadi masih penasaran dengan jawaban yang ia berikan mengenai urutan eksekusi Event Loop langsung meng-copy jawaban nya tersebut untuk melihat apakah urutannya sudah benar atau belum.

Sambil mengingat-ngingat soal yang ada di layar tadi, Dimas pun mencoba menjalankan code snippet tersebut di console browser nya.

“Waduhhh, ternyata urutan nya nggak sesuai“ kata Dimas sambil memegang kepala bagian belakang dengan kedua tangan nya.

Hasil copy-an jawaban dimas yang ada di kolom chat itu adalah seperti:

Start
End
Promise 1
New Promise 1
Promise 2
Timeout 1

namun setelah mencoba menjalankan code snippet di console browser milik Dimas, urutan yang benar itu adalah:

Start
New Promise 1
End
Promise 1
Promise 2
Timeout 1

Dimas yang tadi penasaran sekarang berubah menjadi sedikit frustrasi, karena dia merasa tidak dapat menyelesaikan interview-nya dengan baik dan mulai merasa pesimis bahwa dia tidak akan diterima bekerja di perusahaan yang baru saja dia interview.

Sambil menghela nafas, dimas pun mengingat bahwa persiapan interview yang kemarin dilakukannya itu belum maksimal, ditambah lagi dengan waktu belajar nya juga sangat terbatas. Sehingga Dimas tidak bisa menjawab pertanyaan saat interview dengan baik.

Setelah tau titik permasalah nya dimana, Dimas mulai berusaha untuk memantapkan niat untuk belajar lebih dalam lagi mengenai konsep penting yang ada pada Javascript tersebut yaitu Event Loop.

“Saya akan buat strategi baru dalam belajar konsep Event Loop, pada Javascript ini“ gumam Dimas dalam hati nya.

The Why

Sebelum memulai strategi baru, Dimas memiliki satu pertanyaan dari lubuk hatinya, apakah worthed untuk mempelajari konsep ini? apa jadinya jika seorang software developer tidak memahami cara kerja Event Loop?

Dengan pertanyaan tersebut, Dimas memberanikan diri untuk mulai bertanya di forum-forum online, membaca artikel-artikel dan bahkan bertanya kepada senior nya. Ada jawaban yang memuaskan dan ada pula yang tidak seperti jawaban yang tampak abstrak.

Namun dengan jawaban-jawaban yang di kumpulkan tersebut, Dimas mulai menemukan cahaya baru sekaligus sebagai motivasi yang lebih kuat untuk memahami Event Loop ini, selain dari agar lolos menghadapi interview berikutnya. Ternyata jika seorang Javascript developer bisa memahami konsep ini, developer tersebut akan mampu menghindari masalah-masalah umum yang sering terjadi pada aplikasi skala besar. Seperti:

1. Performance Issue yang dikarenakan sinkronus (sync) function yang mengerjakan suatu task yang berat atau cara handling async function yang tidak efektif sehingga mengakibatkan Blocking terhadap Event Loop.

2. Race Condition yang dikarenakan tidak memahami bagaimana Event Loop mengatur urutan eksekusinya sehingga di saat ada beberapa task yang memiliki ketergantungan pada suatu resource yang sama akan menimbulkan data yang tidak konsisten.

3. Concurrency issue jika sebuah aplikasi nodejs yang mempunyai beban kerja yang tinggi, seperti ribuan request dalam satu menit. Kemampuan developer dalam memprioritas kan task sangat dipertanyakan agar aplikasi nya bisa tetap responsive.

Dengan tiga masalah yang umum terjadi tersebut, tekad Dimas pun semakin bulat dan membara, untuk bisa mendalami konsep Event Loop tersebut. Tidak hanya untuk lulus mengahadapi interview selanjutnya, namun juga bisa bermanfaat yang mengahasilkan cara pandang baru dalam membangun aplikasi yang scalable dengan performa yang baik menggunakan Javascript.

Langkah Selanjutnya

Dimas mulai mencari referensi-referensi yang bisa menambah pemahaman nya mengenai Event Loop tersebut, seperti dari:

• MDN Web Docs: Concurrency model and the event loop

• Node.js Documentation: The Node.js Event Loop, Timers, and process.nextTick()

• Video Philip Robert di JS Conf: What the heck is the event loop anyway?

• Buku: Advanced Javascript

• Dan masih banyak artikel atau video lainnya yang sangat bagus dan membantu dalam mempelajari topik ini..

Dari situ dimulailah perjalanan Dimas dalam menambah pemahaman nya mengenai Event Loop dan beberapa topik penting lainnya.

Setelah belajar selama kurang lebih satu minggu, Dimas pun mencoba merangkum catatan nya sendiri untuk dijadikan bahan belajar untuk dirinya dikemudian hari atau bisa juga membagikan nya kepada teman-teman yang memiliki motivasi yang sama dengan dirinya.

Adapun rangkuman catatan yang Dimas coba buat berisi topik-topik seperti dibawah ini:

• Apa itu Single Thread?

• Sync dan Async pada JavaScript

• Komponen-komponen penting yang perlu diketahui saat JavaScript meng-eksekusi suatu program

• Penanganan Task dan Microtask pada Event Loop

• Urutan eksekusi atau priority task

• Visualisasi dan latihan code challenge Event Loop

Sejak saat itu, setiap Dimas akan menghadapi interview lagi. Dimas selalu membuka catatan nya dan melakukan mock interview dengan beberapa code challenge yang sudah dipersiapkan.

Dengan semangat dan tekad yang baru, Dimas siap menghadapi tantangan berikutnya dan meraih impiannya menjadi seorang software developer yang handal.

* Cover Image generated using Bing Image Creator