Sifat Single-Threaded JavaScript/TypeScript: Pemrograman Async

Jan 20 2023

Pada artikel pertama saya, saya menulis tentang beberapa perbedaan antara JS dan TS. Sekarang kita akan menjelajahi sifat asinkron sebagai bahasa utas tunggal.

Pada artikel pertama saya , saya menulis tentang beberapa perbedaan antara JS dan TS.

Sekarang kita akan menjelajahi sifat asinkron sebagai bahasa utas tunggal.

Dalam JavaScript & TypeScript, sifat single-threaded berarti hanya satu tugas yang dapat dijalankan pada waktu tertentu.

Di sisi lain, pemrograman async mengacu pada kemampuan bahasa untuk melakukan tugas secara asinkron, memungkinkan utas eksekusi terus berjalan sambil menunggu tugas lain selesai. Hal ini dicapai melalui penggunaan callback , event , promise dan async / await .

Sebelum saya mulai menjelaskan ini dalam istilah pengkodean, saya ingin berbicara tentang referensi yang sangat menarik tentang bagaimana tugas async dari bahasa single-threaded sangat mirip dengan otak kita ketika kita mencoba melakukan multitasking .

Pada bagian ini saya akan meringkas teks / bab panjang yang ditulis dari Kyle Simpson dalam bukunya "You Don't Know Javascript" tentang koneksi Sequential Brain dengan asinkronisasi. Jika Anda hanya tertarik pada bagian pengkodean tentang cara kerjanya, Anda dapat melewati bagian ini.

“ Saya cukup yakin sebagian besar dari Anda pernah mendengar seseorang berkata (bahkan Anda sendiri yang mengklaimnya), “ Saya seorang multitasker. Tapi
apakah kita multitasker? Bisakah kita benar-benar melakukan dua tindakan sadar dan disengaja sekaligus dan berpikir/bernalar tentang keduanya pada saat yang sama? Apakah fungsi otak tingkat tertinggi kita memiliki multithreading paralel?

Jawabannya mungkin mengejutkan Anda yaitu: mungkin tidak.

Itu tidak benar-benar bagaimana otak kita tampaknya diatur. Kami jauh lebih banyak tugas tunggal daripada yang ingin kita akui. Kami benar-benar hanya dapat memikirkan satu hal pada saat tertentu.

Saya tidak berbicara tentang semua fungsi otak kita yang tidak disengaja, tidak disadari, otomatis, seperti detak jantung, pernapasan, dan kelopak mata berkedip. Itu semua adalah tugas vital untuk kelangsungan hidup kita, tetapi kita tidak dengan sengaja mengalokasikan kekuatan otak apa pun untuk itu.

Menurut Simpson, manusia tidak mampu melakukan multitasking dengan cara yang sama seperti komputer. Meskipun benar bahwa otak manusia dapat memproses banyak tugas secara bersamaan, ia tidak mampu memberikan perhatian yang sama pada semua tugas sekaligus. Alih-alih, kami dengan cepat mengalihkan perhatian kami di antara tugas, seperti program berulir tunggal yang hanya dapat menjalankan satu tugas dalam satu waktu.

Syukurlah, sementara kita terobsesi untuk memeriksa umpan jejaring sosial untuk ke-15 kalinya dalam tiga menit, otak kita tetap bekerja di latar belakang (utas!) dengan semua tugas penting itu.

Saat kita memalsukan multitasking, seperti mencoba mengetik sesuatu pada saat yang sama saat berbicara dengan teman atau anggota keluarga di telepon, kemungkinan besar yang sebenarnya kita lakukan adalah bertindak sebagai pengalih konteks cepat . Dengan kata lain, kita beralih bolak-balik antara dua atau lebih tugas secara berurutan, secara bersamaan melanjutkan setiap tugas dalam potongan-potongan kecil yang cepat. Kami melakukannya dengan sangat cepat sehingga bagi dunia luar tampak seolah-olah kami melakukan hal-hal ini secara paralel.

Apakah itu terdengar seperti async evented concurrency (seperti yang terjadi di JS) bagi Anda?!

Ada perbedaan besar yang dapat diamati antara cara kita merencanakan berbagai tugas, dan cara otak kita benar-benar menjalankan tugas tersebut.
Meskipun pada tingkat operasional otak kita tidak sinkron, kita tampaknya merencanakan tugas secara berurutan dan sinkron. "Aku harus pergi ke toko, lalu membeli susu, lalu mengantar cucianku."

Dapatkah Anda benar-benar membayangkan memiliki garis pemikiran yang merencanakan tugas yang harus Anda lakukan seperti ini:

“ Saya harus pergi ke toko (1), tetapi dalam perjalanan saya yakin saya akan mendapat telepon (2) , jadi 'Hai, Bu', dan saat dia mulai berbicara, saya akan melihat ke atas alamat toko (3) di GPS, tapi itu akan memakan waktu sebentar, jadi saya akan mematikan radio (4) agar saya dapat mendengar Ibu dengan lebih baik …
kemudian saya akan menyadari bahwa saya lupa memakai jaket ( 5) dan di luar dingin, tapi tidak masalah, tetap mengemudi dan berbicara dengan Ibu …
dan kemudian sabuk pengaman mengingatkan saya untuk memasang sabuk pengaman (6) , jadi 'Ya, Bu, saya memakai sabuk pengaman, saya selalu melakukannya!'. Ah, akhirnya:

GPS mendapatkan petunjuk arah, sekarang…”

Kedengarannya konyol seperti formulasi tentang bagaimana kita merencanakan hari kita dan berpikir tentang apa yang harus dilakukan dan dalam urutan apa, namun begitulah cara kerja otak kita pada tingkat fungsional. Tapi ingat, itu bukan multitasking, itu hanya pengalihan konteks cepat.

Dengan mengingat hal ini, mari kita lihat lebih dekat cara kerja pemrograman async di JavaScript.

Sekarang untuk pengkodean :

Ada beberapa cara untuk melakukan pemrograman async di JavaScript/TypeScript, seperti yang saya sebutkan di awal artikel ini, termasuk menggunakan: Callbacks , Events, Promises, Async/Await.

Callback adalah fungsi yang diteruskan sebagai argumen ke fungsi lain dan dijalankan setelah fungsi luar selesai. Misalnya:

function greet(name, callback) {
  console.log(`Hello, ${name}!`);
  callback();
}

function sayGoodbye() {
  console.log("Goodbye!");
}

greet("John", sayGoodbye);
// Output: "Hello, John!"
// Output: "Goodbye!"

Suatu peristiwa adalah sinyal bahwa sesuatu telah terjadi, dan pendengar adalah fungsi yang dijalankan sebagai respons terhadap peristiwa itu. Misalnya:

const button = document.querySelector("button");

button.addEventListener("click", () => {
  console.log("Button was clicked!");
});

Janji mewakili hasil operasi async, dan dapat diselesaikan (berhasil) atau ditolak (gagal), seperti janji di kehidupan nyata ; ketika Anda membuat janji, Anda menepati (menyelesaikannya) atau tidak (menolak).
Janji dapat digunakan untuk menyederhanakan proses penggabungan operasi async secara bersamaan. Misalnya:

const promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve("Completed Async Task");
  }, 1000);
});

promise.then((result) => {
  console.log(result);
});
// Output: "Async task completed" (after 1 second)

Async/menunggu: fitur JavaScript yang memungkinkan penggunaan sintaks async/menunggu untuk membuat kode async terlihat dan berperilaku seperti kode yang disinkronkan. Async/menunggu dibangun di atas janji dan membuatnya lebih mudah untuk bekerja dengan kode async.

async function greet(name) {
  return `Hello, ${name}!`;
}

async function main() {
  const greeting = await greet("John");
  console.log(greeting);
}

main();
// Output: "Hello, John!"

Secara keseluruhan, pemrograman async memungkinkan eksekusi banyak tugas sambil mempertahankan sifat bahasa utas tunggal. Ini memungkinkan program yang lebih responsif dan efisien dengan membiarkan utas utama terus berjalan sambil menunggu tugas lain selesai.