5 Fungsi JavaScript Tingkat Lanjut yang Dapat Anda Gunakan untuk Meningkatkan Kualitas Kode Anda
Table of content:
JavaScript adalah bahasa de facto untuk membangun aplikasi web dan seluler modern. Ini memberdayakan berbagai proyek, dari situs web sederhana hingga aplikasi interaktif dan dinamis.
Untuk membuat produk yang akan disukai dan dihargai pengguna, penting bagi Anda untuk menulis kode yang tidak hanya berfungsi tetapi juga efisien dan mudah dipelihara. Kode JavaScript yang bersih sangat penting untuk kesuksesan aplikasi web atau seluler apa pun, baik itu proyek sampingan hobi atau aplikasi komersial yang kompleks.
Apa Bagusnya Fungsi JavaScript?
Fungsi adalah komponen penting untuk menulis kode aplikasi apa pun. Ini mendefinisikan potongan kode yang dapat digunakan kembali yang dapat Anda gunakan untuk melakukan tugas tertentu.
Baca Juga:
Di luar kegunaannya kembali, fungsi sangat fleksibel. Dalam jangka panjang, mereka menyederhanakan proses penskalaan dan memelihara basis kode. Dengan membuat dan menggunakan fungsi JavaScript, Anda dapat menghemat banyak waktu pengembangan.
Berikut adalah beberapa fungsi JavaScript bermanfaat yang dapat meningkatkan kualitas kode proyek Anda secara signifikan.
1. sekali
Fungsi sekali tingkat tinggi ini membungkus fungsi lain untuk memastikan Anda hanya dapat memanggilnya satu kali. Itu harus diam-diam mengabaikan upaya selanjutnya untuk memanggil fungsi yang dihasilkan.
Pertimbangkan situasi di mana Anda ingin membuat permintaan HTTP API untuk mengambil data dari database. Anda dapat melampirkan sekali berfungsi sebagai panggilan balik untuk fungsi pendengar acara, sehingga terpicu sekali, dan tidak lebih.
Inilah cara Anda mendefinisikan fungsi seperti itu:
const once = (func) => {
let result;
let funcCalled = false; return (...args) => {
if (!funcCalled) {
result = func(...args);
funcCalled = true;
}
return result;
};
};
Fungsi sekali mengambil fungsi sebagai argumen dan mengembalikan fungsi baru yang hanya bisa Anda panggil sekali. Saat Anda memanggil fungsi baru untuk pertama kalinya, fungsi asli akan dijalankan dengan argumen yang diberikan dan menyimpan hasilnya.
Setiap panggilan selanjutnya ke fungsi baru mengembalikan hasil yang disimpan tanpa menjalankan fungsi aslinya lagi. Lihatlah penerapannya di bawah ini:
function getUserData() {
}
const makeHTTPRequestOnlyOnce = once(getUserData);
const userDataBtn = document.querySelector("#btn");
userDataBtn.addEventListener("click", makeHTTPRequestOnlyOnce);
Dengan menggunakan fungsi sekali Anda dapat menjamin kode hanya mengirimkan satu permintaan, bahkan jika pengguna mengklik tombol beberapa kali. Ini menghindari masalah kinerja dan bug yang mungkin timbul dari permintaan yang berlebihan.
2. pipa
Fungsi pipa ini memungkinkan Anda menggabungkan beberapa fungsi secara berurutan. Fungsi dalam urutan akan mengambil hasil dari fungsi sebelumnya sebagai input dan fungsi terakhir dalam urutan akan menghitung hasil akhir.
Berikut adalah contoh dalam kode:
const pipe = (...funcs) => {
return (arg) => {
funcs.forEach(function(func) {
arg = func(arg);
}); return arg;
}
}
const addOne = (a) => a + 1;
const double = (x) => x * 2;
const square = (x) => x * x;
const myPipe = pipe(addOne, double, square);
console.log(myPipe(2));
Fungsi pipa dapat meningkatkan keterbacaan dan modularitas kode dengan memungkinkan Anda menulis logika pemrosesan yang kompleks secara ringkas. Ini dapat membuat kode Anda lebih mudah dipahami, dan lebih mudah dipelihara.
3. peta
Fungsi map adalah metode dari kelas Array JavaScript bawaan. Itu membuat larik baru dengan menerapkan fungsi panggilan balik ke setiap elemen larik asli.
Itu mengulang setiap elemen dalam array input, meneruskannya sebagai input ke fungsi panggilan balik, dan menyisipkan setiap hasil ke dalam array baru.
Yang penting untuk diperhatikan adalah bahwa larik asli tidak diubah dengan cara apa pun selama proses ini.
Berikut adalah contoh cara menggunakan peta:
const numbers = [1, 2, 3, 4, 5];const doubledNumbers = numbers.map(function(number) {
return number * 2;
});
console.log(doubledNumbers);
Dalam contoh ini, fungsi peta mengulang setiap elemen dalam larik angka. Ini mengalikan setiap elemen dengan 2 dan mengembalikan hasilnya dalam array baru.
Secara umum, fungsi peta menghilangkan kebutuhan untuk menggunakan loop dalam JavaScript, terutama loop tak terbatas—loop tak terbatas dapat menyebabkan overhead komputasi yang signifikan, yang menyebabkan masalah kinerja dalam aplikasi. Ini membuat basis kode lebih ringkas dan lebih sedikit rawan kesalahan.
4. memilih
Fungsi pick ini memungkinkan Anda mengekstrak properti tertentu secara selektif dari objek yang ada dan menghasilkan objek baru dengan properti tersebut sebagai hasil perhitungan.
Misalnya, pertimbangkan fitur laporan dalam aplikasi, dengan menggunakan fungsi pilih, Anda dapat dengan mudah menyesuaikan berbagai laporan berdasarkan informasi pengguna yang diinginkan dengan secara eksplisit menentukan properti yang ingin Anda sertakan dalam berbagai laporan.
Berikut ini contoh dalam kode:
const pick = (object, ...keys) => {
return keys.reduce((result, key) => {
if (object.hasOwnProperty(key)) {
result[key] = object[key];
} return result;
}, {});
};
Fungsi pick mengambil objek dan sejumlah kunci sebagai argumen. Kunci mewakili properti yang ingin Anda pilih. Itu kemudian mengembalikan objek baru yang hanya berisi properti dari objek asli dengan kunci yang cocok.
const user = {
name: 'Martin',
age: 30,
email: 'Martin@yahoo.com',
};console.log(pick(user, 'name', 'age'));
Pada dasarnya, fungsi pick dapat mengenkapsulasi logika pemfilteran kompleks ke dalam satu fungsi, membuat kode lebih mudah dipahami dan di-debug.
Itu juga dapat mempromosikan penggunaan kembali kode, karena Anda dapat menggunakan kembali fungsi pick di seluruh basis kode Anda, mengurangi duplikasi kode.
5. zip
Fungsi zip ini menggabungkan array menjadi satu array tupel, mencocokkan elemen yang sesuai dari setiap array input.
Berikut adalah contoh penerapan fungsi zip:
function zip(...arrays) {
const maxLength = Math.min(...arrays.map(array => array.length)); return Array.from(
{ length: maxLength },
(_, index) => arrays.map(array => array[index])
);
};
const a = [1, 2, 3];
const b = ['a', 'b', 'c'];
const c = [true, false, true];
console.log(zip(a, b, c));
Fungsi zip menerima array input dan menghitung panjang terpanjangnya. Itu kemudian membuat dan mengembalikan satu array menggunakan metode JavaScript Array.from. Larik baru ini berisi elemen dari setiap larik masukan.
Ini sangat berguna jika Anda perlu menggabungkan data dari berbagai sumber secara instan, menghilangkan kebutuhan untuk menulis kode berlebihan yang jika tidak akan mengacaukan basis kode Anda.
Bekerja Dengan Fungsi JavaScript di Kode Anda
Fungsi JavaScript sangat meningkatkan kualitas kode Anda dengan menyediakan cara yang disederhanakan dan ringkas untuk menangani banyak logika pemrograman untuk basis kode kecil dan besar. Dengan memahami dan menggunakan fungsi-fungsi ini, Anda dapat menulis aplikasi yang lebih efisien, mudah dibaca, dan dapat dipelihara.
Menulis kode yang baik memungkinkan pembuatan produk yang tidak hanya menyelesaikan masalah tertentu bagi pengguna akhir, tetapi melakukannya dengan cara yang mudah dimodifikasi.
Artikel Terkait
