“JavaScript adalah satu-satunya bahasa pemrograman yang orang-orang rasa tidak perlu mereka pelajari sebelum mereka mulai menggunakannya.” — Douglas Crockford

Itu memang terasa intuitif tetapi tetap saja, ada dasar-dasar dan hal-hal penting di dalamnya, yang harus Anda ketahui sebagai programmer pemula atau berpengalaman.

Mari kita menggali!

Fungsi Arrow ( => )

Yang ini agak mudah — Fungsi Panah diperkenalkan di ES6, dan Anda mungkin sudah mengetahuinya.

Dibandingkan dengan fungsi biasa, kita dapat menulis fungsi dengan sintaks panah yang lebih pendek.

# Traditional Function
function sum(param1, param2) {
    return param1 + param2;
}
let result = sum(1, 1);

# Arrow Function
let sum = (param1, param2) => param1 + param2;
let result = sum(1, 1);

1. Gunakan rest parameters

# Arrow Function With Rest Parameters
let sum = (param1, param2, ...params) => 
     params.reduce((total, next) => total + next, param1 + param2);let result = sum(1, 1, 2, 3, 4, 5);

2. Anda dapat menentukan nilai default untuk parameter

# Arrow Function With Default Parameters
let sum = (param1, param2 = 2) => param1 + param2;let result = sum(1);

3. Anda dapat menggunakan restrukturisasi

# Arrow Function With Object Destructured Parameters
let sum = ({ param1, param2 }) => param1 + param2;let object = {param1: 5, param2: 15};
let result = sum(object);

Konsep-konsep yang disebutkan di atas layak untuk dilihat sendiri, jadi pastikan untuk membaca tentang:

• Rest Parameters
• Default Parameters
• Destructuring

Pengurangan Array

Contoh sebelumnya membawa saya ke — Array Reduce. Fungsi Reduce bukanlah hal yang harus diketahui, tetapi memahaminya mungkin sangat berharga. Fungsi reduce() mengeksekusi “peredam” yang disediakan pada satu set elemen, mengeksekusi ekspresi dan memberikan hasilnya ke setiap iterasi berikutnya.

Cara termudah untuk mengingat bagaimana Reduce bekerja adalah dengan membayangkan bahwa 1. ia mereduksi sekumpulan elemen menjadi satu nilai — dan 2. mirip dengan rekursi, ia mengulangi setiap elemen, menyediakannya dengan perhitungan sebelumnya yaitu. nilai.

Hasil dari fungsi reduce() adalah nilai tunggal.

# Reduce
# def. reduce(callbackFn(previous, next);
# def. reduce(callbackFn(previous, next), initialValue);const elements = [1, 2, 3, 4, 5];
const sum = elements.reduce((previous, next) => previous + next, 0);

Fungsi reduce() membutuhkan dua argumen. Yang pertama adalah fungsi yang disediakan pengguna dengan dua parameter, satu menjadi nilai pengembalian sebelumnya yaitu dari iterasi elemen sebelumnya, dan yang lainnya menjadi elemen berikutnya dalam array yang akan dihitung.

Dibutuhkan argumen kedua — initialValue, dan seperti yang Anda lihat ini akan digunakan sebagai sebelumnya untuk iterasi pertama, karena tidak ada nilai balik dari iterasi elemen sebelumnya.

Fungsi rekursif seperti pengurangan sangat kuat, tetapi seringkali sulit dibaca dan dipahami. Array Reduce adalah sesuatu yang mungkin berguna untuk dimiliki dalam keahlian Anda, karena akan membuat Anda jauh lebih nyaman ketika Anda benar-benar membutuhkannya atau menemukan fungsi ini, tetapi saat menulisnya, pastikan Anda selalu menimbang manfaat versus pengorbanan keterbacaan, karena seringkali hal yang sama dapat dicapai dengan kode yang jauh lebih sederhana.

Eksekusi Asynchronous

Ada banyak sejarah untuk dibaca tentang eksekusi sinkron, bagaimana komputer utas tunggal menjalankan tugas dalam siklus, mengalokasikan slot waktu singkat untuk setiap tugas, sehingga mencapai apa yang tampak seperti aliran “simultan”.

Sekarang dengan multithreading dalam gambar di arsitektur komputer modern, menjalankan tugas pada saat yang sama adalah mungkin. Namun, bagaimana async masuk ke dalam gambar?

JavaScript sinkron secara default dan single-threaded — tetapi untuk mencapai eksekusi asinkron, kita dapat menggunakan async / menunggu. Menurut definisi, tugas asinkron adalah tugas yang dijalankan di “latar belakang”, dan umumnya berguna untuk tugas yang berjalan lama, seperti permintaan HTTP.

Async / menunggu, dan cara kerjanya di latar belakang meminta posting sendiri, tetapi dalam istilah sederhana — JS menggunakan mesin JS, seperti Node atau mesin Browser mis. V8 Google Chrome. Engine itu sendiri akan memilih tugas asinkron dari utas tunggal JavaScript dan menjalankannya di latar belakang. Ini mungkin masih terjadi pada utas yang sama, tetapi ada beberapa operasi yang sebenarnya akan dijalankan mesin pada utas yang berbeda, misalnya, permintaan HTTP.

Bagaimanapun, tugas async tidak akan memblokir untuk sisa kode JS yang sedang dijalankan, yang membuatnya sempurna untuk permintaan yang berjalan lama dan umumnya, fungsi yang membutuhkan waktu lebih lama untuk diselesaikan.

Async Script

Pertama — sesuatu yang tidak menjadi bingung dengan async / menunggu, adalah tag skrip async. Kita dapat mencapai pemuatan skrip asinkron dengan mendeklarasikan skrip yang disertakan dalam HTML, sebagai async.

# Async script
<script async src="..."></script>

Secara tradisional, browser yang merender HTML akan memuat dan menjalankan skrip secara sinkron, kecuali jika kita menambahkan kata kunci async. Ini akan memberi tahu browser bahwa kita ingin skrip dimuat secara asinkron, tanpa memblokir penguraian HTML yang dimaksud.

Ini tidak sama dengan async / await— karena ini adalah konsep yang berbeda, namun berguna untuk memuat file JavaScript secara asinkron.

Async / await

Eksekusi asinkron dari blok kode dan fungsi JS itu sendiri selalu dirujuk oleh kata kunci async/menunggu.

Untuk mendeklarasikan fungsi asinkron di JS, kami menggunakan kata kunci async.

# Async function
async function sum(param1, param2) {
    return param1 + param2;
}

Sekarang, menghitung hanya jumlah akan menjadi contoh yang buruk, seperti yang telah kami katakan — async terutama berguna dengan tugas yang berjalan lama, tetapi demi contoh, di atas adalah bagaimana kami mendeklarasikan fungsi asinkron. Fungsi ini dapat digunakan seperti yang lain — tetapi, bagaimana fungsi tersebut dijalankan dan bagaimana nilai baliknya digunakan? Kami menggunakan await untuk hal itu.

# Await an asynchronous function
let result = await sum(1, 2);

await hanya dapat digunakan dalam fungsi async. Mungkin sedikit tidak intuitif, tetapi untuk mendapatkan nilai yang dikembalikan dari fungsi async, kita perlu menggunakan Promises.

Singkatnya, jika Anda memeriksa nilai yang dikembalikan dari sum, Anda akan melihatnya sebagai promise. Kita dapat menggunakan nilai komputasi aktual dalam metode then.

# Promise - Then
sum(1, 2).then(result => console.log(result));

Async / await di JavaScript sebenarnya dibangun di atas Promises, yang membawa kita ke yang berikutnya.

Promises

Cara termudah untuk memahami Promisesadalah dengan membayangkan bahwa itu adalah janji literal yang diberikan seseorang kepada Anda — mis. Saya berjanji akan membersihkan rumah.

Tugas itu sendiri akan tidak sinkron untuk Anda, itu tidak akan dijalankan oleh Anda tetapi oleh saya — dan saya akan memberi tahu Anda kembali dengan hasilnya setelah selesai. Satu hal lagi yang perlu diingat adalah bahwa saya mungkin gagal selama tugas tetapi tetap saja, saya akan kembali kepada Anda dengan hasilnya.

Namun, sebuah catatan besar — JavaScript pertama-tama membawa Promises dan kemudian async / await, begitu banyak yang akan berdebat apakah Anda harus mematuhinya, tetapi demi konsep — inilah contoh singkat tentang cara kerja Promises.

let promise = new Promise((resolve, reject) => {
    // Long running task
    let result = someGetFunction();
    if (result.success) {
        resolve(result.data);} else {
        reject(result.error.message);
    }
});promise.then(result => {
    console.log(result);
}).catch(error => {
    console.log(error);
});console.log("Promise has finished, didn't it?");

Blok kode di atas sepertinya pertama-tama akan mencatat hasil atau kesalahan janji sebelum baris terakhir, tetapi sebenarnya, seperti yang dikatakan — tugas asinkron dan dalam hal ini, Janji dimaksudkan untuk eksekusi yang berjalan lama.

Membuat permintaan HTTP untuk mendapatkan data adalah tugas yang sudah berjalan lama, dan pasti akan memakan waktu lebih lama daripada mesin kami untuk mengurai seluruh blok kode termasuk baris log terakhir.

Blok kode di atas juga menggambarkan dengan baik bagaimana tugas dijalankan di latar belakang, tanpa menghalangi parser kita untuk menelusuri sisa kode.

Ada banyak konsep JavaScript yang harus diketahui dan dipelajari pengembang selain yang disebutkan di atas.

Beberapa kurang penting beberapa lebih penting, tapi mudah-mudahan, artikel ini menyoroti dan memfokuskan beberapa dari mereka dan membantu Anda lebih memahami ini.

Jika Anda seorang pengembang yang membaca ini, saya harap ini membantu Anda dalam perjalanan Anda, terlepas dari apakah Anda baru memulai atau Anda sudah memiliki bertahun-tahun di bawah ikat pinggang Anda. Silakan berkomentar dan menyarankan lebih banyak konsep yang mungkin dapat membantu orang lain!

Terima kasih telah membaca artikel Konsep Javascript Yang Semua Programmer Harus Ketahui!

Jangan lupa follow instagram kami di @jasawebsundakreatif