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 Kelebihan 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.
Di luar kegunaannya kembali, fungsi sangat serbaguna. 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. once
Fungsi once 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 menyematkan fungsi once sebagai panggilan balik untuk fungsi pendengar acara, sehingga terpicu once, 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 once mengambil fungsi sebagai argumen dan mengembalikan fungsi baru yang hanya bisa Anda panggil once. 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:
// Define a function to fetch data from the DB
function getUserData() {
    // ...
}
// get a version of the getUserData function that can only run once
const makeHTTPRequestOnlyOnce = once(getUserData);
const userDataBtn = document.querySelector("#btn");
userDataBtn.addEventListener("click", makeHTTPRequestOnlyOnce);
Dengan menggunakan fungsi once 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. pipe
Fungsi pipe 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:
// Define the pipe function
const pipe = (...funcs) => {
   return (arg) => {
       funcs.forEach(function(func) {
           arg = func(arg);
       });
       return arg;
   }
}
// Define some functions
const addOne = (a) => a + 1;
const double = (x) => x * 2;
const square = (x) => x * x;
// Create a pipe with the functions
const myPipe = pipe(addOne, double, square);
// Test the pipe with an input value
console.log(myPipe(2)); // Output: 36
Fungsi pipe 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. map
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 map:
const numbers = [1, 2, 3, 4, 5];
const doubledNumbers = numbers.map(function(number) {
    return number * 2;
});
console.log(doubledNumbers);
// Output: [2, 4, 6, 8, 10]
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 map 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. pick
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 pick, 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: '[email protected]',
};
console.log(pick(user, 'name', 'age'));
// Output: { name: 'Martin', age: 30 }
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));
// Output: [[1, 'a', true], [2, 'b', false], [3, 'c', true]]
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 Koding Anda
Fungsi JavaScript sangat meningkatkan kualitas Koding 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 Koding yang baik memungkinkan pembuatan produk yang tidak hanya menyelesaikan masalah tertentu bagi pengguna akhir, tetapi melakukannya dengan cara yang mudah dimodifikasi.
