[{"data":1,"prerenderedAt":814},["ShallowReactive",2],{"search-articles":3,"blog-archive":508},[4,466],{"id":5,"title":6,"author":7,"body":8,"date":452,"description":453,"extension":454,"image":455,"meta":456,"navigation":457,"path":458,"seo":459,"stem":460,"tags":461,"__hash__":465},"content\u002F101-javascript.md","JavaScript 101: Membedah Runtime","Laz",{"type":9,"value":10,"toc":436},"minimark",[11,16,25,28,33,48,52,67,71,78,82,93,96,100,107,110,126,129,133,136,139,144,221,224,228,231,234,238,302,306,313,316,320,352,355,359,389,392,432],[12,13,15],"h1",{"id":14},"the-definition","The Definition",[17,18,19,20,24],"p",{},"Jika kita membaca definisi resmi JavaScript, kita mungkin menemukan sederet istilah yang membingungkan: ",[21,22,23],"em",{},"\"JavaScript adalah bahasa high-level yang berjalan di atas runtime berbasis interpreter dan Just-In-Time (JIT) compilation, menggunakan garbage collection, dieksekusi pada single-threaded, bersifat dynamically typed, multi-paradigm, prototype-based, dan menangani I\u002FO non-blocking melalui event loop\"",".",[17,26,27],{},"Terdengar rumit? Jangan khawatir. Mari bedah peta arsitekturnya satu per satu agar kita paham kenapa JavaScript terasa sederhana di permukaan, tetapi sangat powerful dan kuat di level sistem.",[29,30,32],"h2",{"id":31},"_1-high-level","1. High-Level",[17,34,35,36,39,40,43,44,47],{},"\"High-Level\" merujuk pada tingkat abstraksi detail ",[21,37,38],{},"hardware"," komputer. Developer tidak perlu mengelola ",[21,41,42],{},"registry"," CPU, alokasi memori manual, atau ",[21,45,46],{},"call stack"," secara langsung. Karena detail mesin disembunyikan oleh runtime, fokus engineering berpindah ke desain logika aplikasi.",[29,49,51],{"id":50},"_2-interpreted","2. Interpreted",[17,53,54,55,58,59,62,63,66],{},"JavaScript dieksekusi langsung oleh ",[21,56,57],{},"interpreter"," baris demi baris tanpa mengkompilasi program menjadi bahasa mesin seperti file ",[21,60,61],{},"binary"," seperti .exe atau .out. Pola ini menciptakan ",[21,64,65],{},"feedback loop"," sangat cepat: tulis, simpan, jalankan.",[29,68,70],{"id":69},"_3-garbage-collected","3. Garbage Collected",[17,72,73,74,77],{},"Garbage Collection atau sering dikenal GC adalah salah satu bentuk pengelolaan memori secara otomatis. GC akan memberishkan object program yang telah dialokasikan ke memori, tetapi tidak memiliki ",[21,75,76],{},"reference","; memori seperti itu disebut sampah.",[29,79,81],{"id":80},"_4-single-threaded","4. Single Threaded",[17,83,84,85,88,89,92],{},"JavaScript berjalan di ",[21,86,87],{},"thread"," tunggal, ini berarti hanya dapat melakukan satu operasi dalam satu waktu. Hal ini juga berarti setiap proses yang sedang berjalan akan memblokir (",[21,90,91],{},"blocking",") eksekusi kode selanjutnya.",[17,94,95],{},"Bayangkan JavaScript seperti seorang koki seorang diri. Karena hanya ada satu koki saja, maka hanya 1 pesanan saja yang dapat diproses secara berurutan. Lalu bagaimana jika pesanannya sangat banyak? Bukankah koki akan kewalahan dan restoran menjadi lambat? Di sinilah arsitektur Non-blocking Event Loop menyelamatkan JavaScript dari blocking!",[29,97,99],{"id":98},"_5-just-in-time-jit-compiled","5. Just-In-Time (JIT) Compiled",[17,101,102,103,106],{},"Sederhananya JIT adalah cara ",[21,104,105],{},"Runtime"," JavaScript mengubah kode yang kita tulis menjadi kode mesin secara langsung saat program sedang berjalan.",[17,108,109],{},"Sebelumnya, bahasa pemrograman biasanya harus memilih satu dari dua cara:",[111,112,113,120],"ol",{},[114,115,116,119],"li",{},[21,117,118],{},"Interpreter",": Menjalankan kode baris demi baris.",[114,121,122,125],{},[21,123,124],{},"Ahead-of-Time (AOT) Compilation",": Mengubah seluruh kode sebelum program dijalankan.",[17,127,128],{},"JIT menggabungkan keduanya: Ia mulai sebagai interpreter, lalu sambil jalan, ia melakukan kompilasi untuk mempercepat bagian-bagian yang penting.",[29,130,132],{"id":131},"_6-dynamic-language","6. Dynamic Language",[17,134,135],{},"Dalam bahasa pemrograman, istilah \"Dinamis\" mengacu pada fleksibilitas. Artinya, banyak hal yang biasanya diputuskan saat kode sedang ditulis atau dikompilasi, dalam bahasa dinamis hal tersebut baru diputuskan saat kode sedang berjalan (runtime).",[17,137,138],{},"Sederhananya: Bahasa dinamis tidak cerewet di awal. Ia membiarkan kita berkreasi dengan cepat, dan ia akan menyesuaikan diri saat program dijalankan.",[140,141,143],"h3",{"id":142},"karakteristik-utama","Karakteristik Utama",[111,145,146,209,215],{},[114,147,148,152,153],{},[149,150,151],"strong",{},"Dynamic Typing","\nIni adalah ciri yang paling sering ditemukan ketika coding dengan JavaScript. Kita tidak perlu memberitahu komputer apakah sebuah variabel itu ber-tipekan angka, teks, atau array.\nContoh:",[154,155,160],"pre",{"className":156,"code":157,"language":158,"meta":159,"style":159},"language-js shiki shiki-themes ayu-light","let data = \"Hello world\"; \u002F\u002F (string)\ndata = 42; \u002F\u002F (number) - tidak error !\n","js","",[161,162,163,192],"code",{"__ignoreMap":159},[164,165,168,172,176,180,184,188],"span",{"class":166,"line":167},"line",1,[164,169,171],{"class":170},"s3pLu","let",[164,173,175],{"class":174},"sRPfp"," data ",[164,177,179],{"class":178},"sfJSD","=",[164,181,183],{"class":182},"sBGks"," \"Hello world\"",[164,185,187],{"class":186},"sEl0h",";",[164,189,191],{"class":190},"sJSqE"," \u002F\u002F (string)\n",[164,193,195,198,200,204,206],{"class":166,"line":194},2,[164,196,197],{"class":174},"data ",[164,199,179],{"class":178},[164,201,203],{"class":202},"sSx7A"," 42",[164,205,187],{"class":186},[164,207,208],{"class":190}," \u002F\u002F (number) - tidak error !\n",[114,210,211,214],{},[149,212,213],{},"Pengecekan saat Runtime","\nKarena bahasa tidak melakukan pengecekan secara ketat saat compiling, ia akan mengecek \"apakah kode ini masuk akal\" saat kode di jalankan.\nContoh: Jika kita mencoba menjalankan fungsi hitung(), tapi ternyata hitung itu bukan fungsi melainkan sebuah angka, JavaScript baru akan protes (error) saat baris tersebut dijalankan.",[114,216,217,220],{},[149,218,219],{},"Bebas Memodifikasi Object","\nDalam bahasa dinamis, struktur data bersifat \"hidup\". Kita bisa menambah, menghapus, atau mengubah bagian-bagian dari sebuah objek kapan saja.",[17,222,223],{},"Misalnya, kita punya data object buku. Tiba-tiba di tengah program kita ingin menambahkan properti warna, kita bisa langsung melakukannya tanpa harus merombak ulang struktur objek buku dari awal ia dideklarasikan.",[29,225,227],{"id":226},"_7-multi-paradigm","7. Multi-paradigm",[17,229,230],{},"Paradigma pemrograman adalah \"gaya\" kita dalam menyelesaikan masalah dengan kode. JavaScript termasuk Multi-Paradigm karena tidak memaksa kita menggunakan satu gaya saja. Sangat fleksibel.",[17,232,233],{},"Ada banyak paradigma pemrograman, namun JavaScript sering sekali menggunakan 3 paradigma ini, yaitu:",[140,235,237],{"id":236},"paradigma-utama-dalam-javascript","Paradigma Utama dalam JavaScript",[111,239,240,265,284],{},[114,241,242,245,246],{},[149,243,244],{},"Paradigma Imperatif \u002F Prosedural","\nIni adalah gaya paling dasar. Kita memberi tahu komputer langkah-demi-langkah apa yang harus dilakukan.",[247,248,249,255],"ul",{},[114,250,251,254],{},[149,252,253],{},"Fokus:"," Bagaimana cara melakukannya?",[114,256,257,260,261,264],{},[149,258,259],{},"Contoh:"," Menggunakan looping ",[161,262,263],{},"for"," manual untuk menjumlahkan angka di dalam daftar satu per satu.",[114,266,267,270,271],{},[149,268,269],{},"Object-Oriented Programming (OOP)","\nDi sini, kita membungkus data dan fungsi ke dalam satu Objek.",[247,272,273,278],{},[114,274,275,277],{},[149,276,253],{}," Siapa yang melakukan aksi ini?",[114,279,280,283],{},[149,281,282],{},"Konsep:"," Kita membuat \"cetak biru\" (Class) untuk benda, seperti Mobil. Mobil punya data (warna, kecepatan) dan aksi (maju, belok, rem).",[114,285,286,289,290],{},[149,287,288],{},"Functional Programming","\nIni adalah gaya yang sangat populer di JavaScript modern. Kita memperlakukan kode seperti fungsi matematika.",[247,291,292,297],{},[114,293,294,296],{},[149,295,253],{}," Apa hasilnya? (Tanpa mengubah data asli).",[114,298,299,301],{},[149,300,282],{}," Kita tidak mengubah variabel global. Kita memasukkan data ke fungsi, dan fungsi mengeluarkan data baru tanpa merusak yang lama (Immutability).",[29,303,305],{"id":304},"_8-prototype-based","8. Prototype-based",[17,307,308,309,312],{},"Prototype-based adalah style dari paradigma ",[21,310,311],{},"Object-Oriented (OOP)"," dimana classnya tidak didefinisikan secara eksplisit, melainkan menggunakan kembali dari class yang sudah di definisikan atau telah dibuat blueprint (yang dikenal inheritance)",[17,314,315],{},"Contohnya kita mendefinisikan class \"Kendaraan\" yang dapat dikloning dan diperluas. Misal menggunakan class \"Mobil\" sebagai contoh, class \"Mobil\" akan memiliki properti dan method umum dari \"Kendaraan\" dan properti spesifik \"Mobil\" akan ditambahkan.",[29,317,319],{"id":318},"_9-non-blocking-event-loop","9. Non-blocking Event Loop",[17,321,322,323,326,327,330,331,334,335,338,339,342,343,345,346,348,349,351],{},"Runtime JavaScript beroperasi pada arsitektur ",[21,324,325],{},"single-threaded"," dan ",[21,328,329],{},"event-driven"," yang sangat bergantung pada operasi I\u002FO ",[21,332,333],{},"non-blocking"," untuk menangani ",[21,336,337],{},"request"," secara bersamaan secara efisien. Dengan pendekatan ",[21,340,341],{},"event-loop"," seperti ini, memungkinkan Runtime JavaScript yang ",[21,344,325],{}," itu menangani banyak ",[21,347,337],{}," tanpa membuat ",[21,350,87],{}," utama terblock.",[17,353,354],{},"Bayangkan seorang pelayan yang bekerja di sebuah restoran. Dia berkeliling restoran untuk menerima pesanan dari pelanggan dan menyajikannya ketika makanan masing-masing sudah siap. Apa yang terjadi jika pelayan tersebut menerima pesanan dari seorang pelanggan dan menunggu hingga makanan disiapkan, menyajikannya, lalu melanjutkan ke pelanggan berikutnya? Dengan cara ini, waktu tunggu setiap pelanggan akan bertambah dan restoran tersebut akan mengalami kegagalan besar. Yang terakhir mewakili pemrograman sinkron, sedangkan yang pertama mewakili pemrograman asinkron.",[12,356,358],{"id":357},"glossary","Glossary",[247,360,361,367,373,379],{},[114,362,363,366],{},[149,364,365],{},"AOT (Ahead-of-Time):"," Teknik pemrosesan kode yang mengubah seluruh kode sumber menjadi bahasa mesin sebelum program dijalankan.",[114,368,369,372],{},[149,370,371],{},"JIT (Just-In-Time):"," Kebalikan dari AOT. Teknik ini menggabungkan interpreter dan compiler di mana kode diubah ke bahasa mesin ketika program sedang berjalan (berfokus pada bagian kode yang penting saja).",[114,374,375,378],{},[149,376,377],{},"Runtime:"," Lingkungan sistem tempat program atau instruksi dieksekusi secara nyata oleh mesin.",[114,380,381,384,385,388],{},[149,382,383],{},"I\u002FO Non-blocking:"," Kemampuan sistem untuk menjalankan proses ",[21,386,387],{},"Input\u002FOutput"," di belakang layar tanpa menghentikan jalur utama program (thread utama).",[17,390,391],{},"Referensi:",[247,393,394,402,408,414,420,426],{},[114,395,396],{},[397,398,399],"a",{"href":399,"rel":400},"https:\u002F\u002Fen.wikipedia.org\u002Fwiki\u002FHigh-level_programming_language",[401],"nofollow",[114,403,404],{},[397,405,406],{"href":406,"rel":407},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FGlossary\u002FJust_In_Time_Compilation",[401],[114,409,410],{},[397,411,412],{"href":412,"rel":413},"https:\u002F\u002Fwww.educative.io\u002Fanswers\u002Fstatic-vs-dynamic-languages",[401],[114,415,416],{},[397,417,418],{"href":418,"rel":419},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FGlossary\u002FPrototype-based_programming",[401],[114,421,422],{},[397,423,424],{"href":424,"rel":425},"https:\u002F\u002Fen.wikipedia.org\u002Fwiki\u002FPrototype-based_programming",[401],[114,427,428],{},[397,429,430],{"href":430,"rel":431},"https:\u002F\u002Fwww.geeksforgeeks.org\u002Fnode-js\u002Fnon-blocking-event-loop-in-node-js\u002F",[401],[433,434,435],"style",{},"html pre.shiki code .s3pLu, html code.shiki .s3pLu{--shiki-default:#FA8532}html pre.shiki code .sRPfp, html code.shiki .sRPfp{--shiki-default:#5C6166}html pre.shiki code .sfJSD, html code.shiki .sfJSD{--shiki-default:#F2A191}html pre.shiki code .sBGks, html code.shiki .sBGks{--shiki-default:#86B300}html pre.shiki code .sEl0h, html code.shiki .sEl0h{--shiki-default:#5C6166B3}html pre.shiki code .sJSqE, html code.shiki .sJSqE{--shiki-default:#ADAEB1;--shiki-default-font-style:italic}html pre.shiki code .sSx7A, html code.shiki .sSx7A{--shiki-default:#A37ACC}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}",{"title":159,"searchDepth":194,"depth":194,"links":437},[438,439,440,441,442,443,447,450,451],{"id":31,"depth":194,"text":32},{"id":50,"depth":194,"text":51},{"id":69,"depth":194,"text":70},{"id":80,"depth":194,"text":81},{"id":98,"depth":194,"text":99},{"id":131,"depth":194,"text":132,"children":444},[445],{"id":142,"depth":446,"text":143},3,{"id":226,"depth":194,"text":227,"children":448},[449],{"id":236,"depth":446,"text":237},{"id":304,"depth":194,"text":305},{"id":318,"depth":194,"text":319},"2026-04-06","Sebuah dekonstruksi teknis tentang mengapa JavaScript bekerja seperti itu—dari abstraksi high-level.","md",null,{},true,"\u002F101-javascript",{"title":6,"description":453},"101-javascript",[462,463,464],"engineering","javascript","architecture","oLAG3OczN-KpkeL7TYTVG13v8MEzdBH0ZYrxB40sQ1w",{"id":467,"title":468,"author":7,"body":469,"date":497,"description":498,"extension":454,"image":159,"meta":499,"navigation":457,"path":500,"seo":501,"stem":502,"tags":503,"__hash__":507},"content\u002Fon-beginning.md","On Beginning: Introduction",{"type":9,"value":470,"toc":495},[471,474,481,484,487,490],[17,472,473],{},"I have started and abandoned more blogs than I care to admit.",[17,475,476,477,480],{},"Each time, the impulse is the same: ",[21,478,479],{},"I want to think in public."," And each time, the friction wins. The setup, the theme, the question of what I am even supposed to be saying — it accumulates into a kind of confusion, and the words sits there, dated and unsent.",[17,482,483],{},"This time, I am doing it differently. I am writing the first post before I have any audience, any agenda, or any plan. Only the sentences that feel more honest will be accompanied by another sentence.",[485,486],"hr",{},[17,488,489],{},"There will be more. I do not know when, or about what exactly. But the archive is open now, and that is enough to start.",[17,491,492],{},[21,493,494],{},"— Laz",{"title":159,"searchDepth":194,"depth":194,"links":496},[],"2026-04-05","This is not a technical blog. It is a notebook for a developer who cannot stop thinking about how things are made — and why they should be made like that.",{},"\u002Fon-beginning",{"title":468,"description":498},"on-beginning",[504,505,506],"writing","just-say","introduction","CYPCpWVrcvpcnTzLlAOouYle0G9Srw90OKRZAHRu2Sc",[509,533],{"id":467,"title":468,"author":7,"body":510,"date":497,"description":498,"extension":454,"image":159,"meta":530,"navigation":457,"path":500,"seo":531,"stem":502,"tags":532,"__hash__":507},{"type":9,"value":511,"toc":528},[512,514,518,520,522,524],[17,513,473],{},[17,515,476,516,480],{},[21,517,479],{},[17,519,483],{},[485,521],{},[17,523,489],{},[17,525,526],{},[21,527,494],{},{"title":159,"searchDepth":194,"depth":194,"links":529},[],{},{"title":468,"description":498},[504,505,506],{"id":5,"title":6,"author":7,"body":534,"date":452,"description":453,"extension":454,"image":455,"meta":811,"navigation":457,"path":458,"seo":812,"stem":460,"tags":813,"__hash__":465},{"type":9,"value":535,"toc":796},[536,538,542,544,546,554,556,564,566,570,572,578,580,582,586,588,598,600,602,604,606,608,652,654,656,658,660,662,708,710,714,716,718,736,738,740,760,762,794],[12,537,15],{"id":14},[17,539,19,540,24],{},[21,541,23],{},[17,543,27],{},[29,545,32],{"id":31},[17,547,35,548,39,550,43,552,47],{},[21,549,38],{},[21,551,42],{},[21,553,46],{},[29,555,51],{"id":50},[17,557,54,558,58,560,62,562,66],{},[21,559,57],{},[21,561,61],{},[21,563,65],{},[29,565,70],{"id":69},[17,567,73,568,77],{},[21,569,76],{},[29,571,81],{"id":80},[17,573,84,574,88,576,92],{},[21,575,87],{},[21,577,91],{},[17,579,95],{},[29,581,99],{"id":98},[17,583,102,584,106],{},[21,585,105],{},[17,587,109],{},[111,589,590,594],{},[114,591,592,119],{},[21,593,118],{},[114,595,596,125],{},[21,597,124],{},[17,599,128],{},[29,601,132],{"id":131},[17,603,135],{},[17,605,138],{},[140,607,143],{"id":142},[111,609,610,644,648],{},[114,611,612,152,614],{},[149,613,151],{},[154,615,616],{"className":156,"code":157,"language":158,"meta":159,"style":159},[161,617,618,632],{"__ignoreMap":159},[164,619,620,622,624,626,628,630],{"class":166,"line":167},[164,621,171],{"class":170},[164,623,175],{"class":174},[164,625,179],{"class":178},[164,627,183],{"class":182},[164,629,187],{"class":186},[164,631,191],{"class":190},[164,633,634,636,638,640,642],{"class":166,"line":194},[164,635,197],{"class":174},[164,637,179],{"class":178},[164,639,203],{"class":202},[164,641,187],{"class":186},[164,643,208],{"class":190},[114,645,646,214],{},[149,647,213],{},[114,649,650,220],{},[149,651,219],{},[17,653,223],{},[29,655,227],{"id":226},[17,657,230],{},[17,659,233],{},[140,661,237],{"id":236},[111,663,664,680,694],{},[114,665,666,245,668],{},[149,667,244],{},[247,669,670,674],{},[114,671,672,254],{},[149,673,253],{},[114,675,676,260,678,264],{},[149,677,259],{},[161,679,263],{},[114,681,682,270,684],{},[149,683,269],{},[247,685,686,690],{},[114,687,688,277],{},[149,689,253],{},[114,691,692,283],{},[149,693,282],{},[114,695,696,289,698],{},[149,697,288],{},[247,699,700,704],{},[114,701,702,296],{},[149,703,253],{},[114,705,706,301],{},[149,707,282],{},[29,709,305],{"id":304},[17,711,308,712,312],{},[21,713,311],{},[17,715,315],{},[29,717,319],{"id":318},[17,719,322,720,326,722,330,724,334,726,338,728,342,730,345,732,348,734,351],{},[21,721,325],{},[21,723,329],{},[21,725,333],{},[21,727,337],{},[21,729,341],{},[21,731,325],{},[21,733,337],{},[21,735,87],{},[17,737,354],{},[12,739,358],{"id":357},[247,741,742,746,750,754],{},[114,743,744,366],{},[149,745,365],{},[114,747,748,372],{},[149,749,371],{},[114,751,752,378],{},[149,753,377],{},[114,755,756,384,758,388],{},[149,757,383],{},[21,759,387],{},[17,761,391],{},[247,763,764,769,774,779,784,789],{},[114,765,766],{},[397,767,399],{"href":399,"rel":768},[401],[114,770,771],{},[397,772,406],{"href":406,"rel":773},[401],[114,775,776],{},[397,777,412],{"href":412,"rel":778},[401],[114,780,781],{},[397,782,418],{"href":418,"rel":783},[401],[114,785,786],{},[397,787,424],{"href":424,"rel":788},[401],[114,790,791],{},[397,792,430],{"href":430,"rel":793},[401],[433,795,435],{},{"title":159,"searchDepth":194,"depth":194,"links":797},[798,799,800,801,802,803,806,809,810],{"id":31,"depth":194,"text":32},{"id":50,"depth":194,"text":51},{"id":69,"depth":194,"text":70},{"id":80,"depth":194,"text":81},{"id":98,"depth":194,"text":99},{"id":131,"depth":194,"text":132,"children":804},[805],{"id":142,"depth":446,"text":143},{"id":226,"depth":194,"text":227,"children":807},[808],{"id":236,"depth":446,"text":237},{"id":304,"depth":194,"text":305},{"id":318,"depth":194,"text":319},{},{"title":6,"description":453},[462,463,464],1776140171580]