Menggunakan berbagai tip JavaScript dan pintasan sintaksis, fungsi ini akan membantu Anda memecahkan banyak masalah umum.

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 fleksibel. Dalam jangka panjang, mereka menyederhanakan proses penskalaan dan memelihara basis kode. Oleh membuat dan menggunakan fungsi JavaScript, Anda dapat menghemat banyak waktu pengembangan.

instagram viewer

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 callback untuk fungsi pendengar acara, sehingga terpicu sekali, dan tidak lebih.

Inilah cara Anda mendefinisikan fungsi seperti itu:

const sekali = (fungsi) => {
membiarkan hasil;
membiarkan funcCalled = PALSU;
kembali(... argumen) => {
jika (!funcCalled) {
 hasil = func(...args);
 funcCalled = BENAR;
 }
kembali hasil;
 };
};

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:

// Tentukan fungsi untuk mengambil data dari DB
fungsigetUserData() {
// ...
}
// dapatkan versi fungsi getUserData yang hanya dapat dijalankan sekali
const makeHTTPRequestOnlyOnce = sekali (getUserData);
const penggunaDataBtn = dokumen.querySelector("#btn");
penggunaDataBtn.addEventListener("klik", 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:

// Tentukan fungsi pipa
const pipa = (...fungsi) => {
kembali(arg) => {
 funcs.forEach(fungsi(fungsi) {
 arg = func(arg);
 });
kembali argumen;
 }
}


// Tentukan beberapa fungsi
const addOne = (A) => + 1;
const ganda = (X) => X * 2;
const persegi = (X) => x * x;


// Buat pipa dengan fungsi
const myPipe = pipa (addOne, double, square);
// Uji pipa dengan nilai masukan
menghibur.log (pipasaya(2)); // Keluaran: 36

Fungsi pipa dapat meningkatkan keterbacaan dan modularitas kode dengan memungkinkan Anda menulis logika pemrosesan yang kompleks secara singkat. 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 angka = [1, 2, 3, 4, 5];
const doubledNumber = angka.peta(fungsi(nomor) {
kembali nomor * 2;
});
menghibur.log (doubledNumbers);
// Keluaran: [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 peta menghilangkan kebutuhan untuk menggunakan loop dalam JavaScript, terutama yang tak terbatas—loop tak terbatas dapat menyebabkan beban 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 menyesuaikan dengan mudah laporan berbeda berdasarkan informasi pengguna yang diinginkan dengan secara eksplisit menentukan properti yang ingin Anda sertakan dalam berbagai laporan.

Berikut ini contoh dalam kode:

const memilih = (objek,... kunci) => {
kembali kunci.kurangi((hasil, kunci) => {
jika (objek.hasOwnProperty (kunci)) {
 hasil[kunci] = objek[kunci];
 }
kembali hasil;
 }, {});
};

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 pengguna = {
 nama: 'Martin',
 usia: 30,
 surel: '[email protected]',
};
menghibur.log (pilih (pengguna, 'nama', 'usia'));
// Keluaran: { nama: 'Martin', umur: 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. ritsleting

Fungsi zip ini menggabungkan array menjadi satu array tupel, mencocokkan elemen yang sesuai dari setiap array input.

Berikut adalah contoh penerapan fungsi zip:

fungsiritsleting(... array) {
const maxPanjang = Matematika.min(...array.peta(Himpunan => array.panjang));
kembaliHimpunan.dari(
 { panjang: panjang maksimal },
 (_, indeks) => arrays.map(Himpunan => larik[indeks])
 );
};


const a = [1, 2, 3];
const b = ['A', 'B', 'C'];
const c = [BENAR, PALSU, BENAR];
menghibur.log (zip (a, b, c));
// Keluaran: [[1, 'a', benar], [2, 'b', salah], [3, 'c', benar]]

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.