Artikel ini akan menunjukkan beberapa trik JavaScript sederhana dan menakjubkan yang dapat Anda gunakan untuk meningkatkan kode Anda.
Trik 1: Menggabungkan Beberapa Objek
Misalkan Anda memiliki tiga objek berbeda:
const obj1 = { a: 1, b: 2 };
const obj2 = { c: 3 };
const obj3 = { d: 4 };
Jika Anda ingin membuat objek yang berisi gabungan properti dari semua objek tersebut, Anda dapat melakukannya dengan kode sederhana berikut:
const objCombined = { ...obj1, ...obj2, ...obj3 };
Jika Anda mencetak objCombined
ke konsol, Anda akan mendapatkan output berikut:
{ a: 1, b: 2, c: 3, d: 4 }
Operator ...
adalah spread operator. Anda dapat membaca lebih lanjut tentangnya di dokumentasi MDN. Objek objCombined
adalah objek yang baru dibuat. Memperbarui nilai dari obj1
, obj2
, atau obj3
tidak akan memengaruhi nilai dari objCombined
. Untuk objek yang bersarang, referensi dari objek dalam akan disalin dan tidak akan membuat yang baru. Spread syntax akan menyalin semua properti objek, tetapi hanya akan membuat objek baru di tingkat teratas. Anda juga dapat menggabungkan objek menggunakan metode Object.assign()
.
Trik 2: Menyisipkan Nilai di Tengah Array
Misalkan Anda memiliki array integer berikut:
const arr = [0, 1, 2, 3, 5, 6, 7, 8];
Bagaimana jika Anda ingin menyisipkan integer 4
di indeks 4
dari array tersebut? Anda dapat melakukannya dengan menggunakan fungsi splice
dalam prototipe Array
. Sintaks fungsi splice
adalah:
arr.splice(index, itemsToDelete, item1ToAdd, item2ToAdd, ...)
Untuk menyisipkan integer 4
di indeks 4
, kita menulis kode berikut:
arr.splice(4, 0, 4);
Ini akan memperbarui array menjadi:
[0, 1, 2, 3, 4, 5, 6, 7, 8]
Untuk menyisipkan beberapa integer di suatu indeks, kita juga dapat menulis:
arr.splice(4, 0, 100, 101, 102);
Ini akan memperbarui array asli menjadi:
[0, 1, 2, 3, 100, 101, 102, 4, 5, 6, 7, 8]
Fungsi splice
akan mengubah array asli, bukan membuat yang baru.
Trik 3: Mendapatkan Stempel Waktu Saat Ini
Untuk mendapatkan stempel waktu saat ini di JavaScript, Anda cukup menjalankan kode berikut:
const timestamp = new Date().getTime();
Ini akan memberikan stempel waktu untuk tanggal tersebut. Ada juga jalan pintas untuk mendapatkan stempel waktu saat ini:
const timestamp = Date.now();
Trik 4: Memeriksa Apakah Suatu Objek Adalah Array
Untuk memeriksa apakah suatu objek adalah array, Anda dapat memanggil metode Array.isArray()
dari objek tersebut. Untuk memeriksa array, gunakan kode berikut:
const isArray = Array.isArray(obj);
Jika obj
adalah array, metode Array.isArray()
akan mengembalikan true
. Jika obj
bukan array, metode Array.isArray()
akan mengembalikan false
.
Trik 5: Destrukturisasi Objek
Misalkan Anda memiliki objek berikut di JavaScript:
const obj = { a: 1, b: 2, c: 3 };
Anda dapat langsung mendapatkan variabel untuk properti objek menggunakan kode berikut:
const { a, b, c } = obj;
Sekarang, Anda memiliki variabel a
, b
, dan c
yang masing-masing berisi nilai properti a
, b
, dan c
dari objek obj
.
Trik 6: Rest Parameter Syntax
Apakah Anda tahu bahwa Anda dapat membuat fungsi yang menerima berbagai jumlah argumen?
Ada sintaks khusus yang disebut sintaks rest parameter untuk membuat fungsi seperti itu.
function jumlah(...nilai) {
console.log(nilai);
}
Memanggil fungsi jumlah akan mengumpulkan nilai-nilai sebagai array dari parameter yang dilewatkan ke fungsi tersebut.
jumlah(1); // [1]
jumlah(1, 2); // [1, 2]
jumlah(1, 2, 3); // [1, 2, 3]
jumlah(1, 2, 3, 4); // [1, 2, 3, 4]
Kita juga dapat menyelesaikan fungsi jumlah dan membuatnya menghitung jumlah dari semua parameter yang dilewatkan ke fungsi tersebut.
function jumlah(...nilai) {
let jumlah = 0;
for (let i = 0; i < nilai.length; i++) {
jumlah += nilai[i];
}
return jumlah;
}
Ini hanyalah beberapa trik JavaScript sederhana dan menakjubkan yang dapat Anda gunakan untuk meningkatkan kode Anda. Masih banyak trik lainnya yang bisa Anda pelajari. Saya harap artikel ini bermanfaat!