Seperti banyak bahasa pemrograman lainnya, JavaScript memiliki kekurangan dan keunikannya sendiri. Fungsi atau sintaksis bawaan yang menurut Anda seharusnya ada, ternyata tidak ada. Output dari input paling dasar sekalipun bisa mendekati kegilaan (apa itu true + true ?). Bahkan hal-hal dasar seperti loop berperilaku berbeda dari yang diharapkan.
Meskipun JavaScript berperilaku aneh dari waktu ke waktu, JavaScript masih menjadi salah satu bahasa yang paling banyak digunakan saat ini. Terkadang yang kita perlukan hanyalah sedikit bantuan untuk mengerjakan tugas-tugas sederhana dan berulang yang muncul setiap hari. Saya telah menyusun daftar beberapa masalah umum yang harus diselesaikan dengan solusi terkait di JS. Mari kita mulai.
Catatan: banyak dari contoh ini menggunakan ES6 dan bukan JavaScript vanilla biasa. Bergantung pada kerangka kerja yang Anda gunakan, Anda mungkin dapat atau tidak dapat menggunakan sintaks ES6. Lihat tautan ini untuk dokumentasi lebih lanjut tentang ES6.
1. Menemukan objek tertentu dalam array objek
Ini bisa dibilang salah satu tugas paling umum yang harus Anda selesaikan di dunia JS. Mengulangi serangkaian objek untuk menemukan objek tertentu. Metode find adalah teman kita di sini. Cukup masukkan kriteria pemilihan menggunakan fungsi anonim sebagai argumen dan Anda sudah siap:
let customers = [
{ id: 0, name: 'paul' },
{ id: 1, name: 'jeff' },
{ id: 2, name: 'mary' }
];
let customer = customers.find(cust => cust.name === 'jeff');
console.log(customer);
--> { id: 1, name: 'jeff' }
2. Mengulangi kunci dan nilai suatu objek
Terkadang struktur data Anda mungkin berupa objek kompleks yang berisi sekumpulan pasangan kunci/nilai. Mengulangi setiap pasangan pada pandangan pertama agak aneh tergantung pada bahasa apa yang biasa Anda gunakan, tetapi akan mudah dilakukan setelah Anda terbiasa menggunakan fungsi Object.
Setelah Anda mengambil kunci objek, Anda dapat mengulang kunci dan nilai secara bersamaan. Dalam contoh ini Anda memiliki akses ke setiap pasangan menggunakan variabel key dan value selama perulangan.
let myObject = { one: 1, two: 2, three: 3 };
Object.keys(myObject).forEach((key, value) => {
//...do something
console.log(key, value);
});
3. Memfilter array objek berdasarkan suatu kondisi
Jika Anda memiliki sejumlah besar data dan ingin memfilter item berdasarkan kondisi tertentu, Anda cukup menggunakan fungsi filter. Dalam contoh ini kita memiliki serangkaian jalur file. Beberapa file ada di 'dir1' sementara yang lain ada di 'dir2'. Katakanlah kita ingin memfilter hanya untuk direktori tertentu:
let data = [
"files/dir1/file",
"files/dir1/file2",
"files/dir2/file",
"files/dir2/file2"
];
let filteredData = data.filter(path => path.includes('dir2'));
console.log(filteredData);
--> [ 'files/dir2/file', 'files/dir2/file2' ]
Memfilter direktori tertentu dalam rangkaian jalur di atas sangatlah mudah. Dengan menetapkan bahwa string jalur harus menyertakan string 'dir2' Anda akan memfilter setiap jalur yang tidak mengandung 'dir2' di dalamnya. Ingat fungsi apa pun yang Anda teruskan ke filter harus mengembalikan true agar item tersebut disertakan dalam hasil.
4. Penghancuran penugasan variabel
Menetapkan variabel dari array satu per satu memakan waktu dan konyol. Cukup gunakan tugas penghancuran untuk menyelesaikan ini dengan lebih cepat dan mudah:
let profile = ['bob', 34, 'carpenter']; let [name, age, job] = profile; console.log(name); --> 'bob'
5. Tetapkan kunci ke objek dengan nama yang sama
Saat Anda menetapkan kunci ke suatu objek, jika nama kuncinya sama dengan variabel yang menyimpan nilai yang ingin Anda tetapkan, Anda dapat menghilangkan penetapan nilai sama sekali. Hal ini mencegah Anda mengulangi hal yang sama, sesuatu yang kita semua benci lakukan. Mari kita lihat contoh menggunakan beberapa data yang sama dari contoh terakhir kita:
let name = 'bob';
let age = 34;
let job = 'carpenter';
// instead of this
let myObject1 = { name: name, age: age, job: job };
// do this
let myObject2 = { name, age, job };
console.log(myObject2);
--> { name: 'bob', age: 34, job: 'carpenter' }
6. Menggunakan operator spread
Operator spread memungkinkan Anda untuk “menyebarkan” sebuah array. Ini dapat digunakan untuk mengubah array menjadi daftar argumen atau bahkan menggabungkan dua array menjadi satu. Anda juga bisa menggunakannya untuk membentuk daftar argumen pada suatu fungsi juga. Coba lihat:
let data = [1,2,3,4,5]; console.log(...data); --> 1 2 3 4 5 let data2 = [6,7,8,9,10]; let combined = [...data, ...data2]; console.log(...combined); --> 1 2 3 4 5 6 7 8 9 10 console.log(Math.max(...combined)); --> 10
Pada contoh pertama kami menunjukkan bagaimana operator spread bekerja pada array dan mengubah setiap item menjadi elemen individual. Contoh kedua menggabungkan konten dari dua array dengan membuat array sementara baru yang berisi kedua konten. Contoh terakhir mengilustrasikan bagaimana operator spread dapat mengubah array menjadi daftar argumen ke suatu fungsi. Math.max mengembalikan angka tertinggi dalam daftar argumen yang diteruskan ke sana. Salah satu argumen tersebut adalah 10 yang merupakan argumen tertinggi.
Terima kasih sudah membaca! Saya harap Anda menikmati mempelajari lebih lanjut tentang beberapa cuplikan JavaScript umum ini untuk menangani tugas-tugas yang sering dan sering kali membosankan dengan lebih cepat.
