JavaScript memiliki banyak fitur tersembunyi dan jarang digunakan yang bisa sangat berguna dalam situasi tertentu. Berikut beberapa fungsi dan fitur yang jarang diketahui namun bisa bermanfaat.
1. Object.hasOwn() (ES2022)
Alih-alih menggunakan hasOwnProperty(), sekarang ada cara lebih aman untuk mengecek properti dalam objek.
const obj = { name: "Agung" };
console.log(Object.hasOwn(obj, "name")); // true
console.log(Object.hasOwn(obj, "age")); // false
🔹 Mengapa ini berguna?
Lebih aman dibandingkan obj.hasOwnProperty() karena bisa terjadi konflik jika objek memiliki properti hasOwnProperty.
2. Array.prototype.toSorted() (ES2023)
Mirip dengan sort(), tetapi tidak mengubah array asli, melainkan mengembalikan array baru.
const numbers = [3, 1, 4, 2];
const sortedNumbers = numbers.toSorted((a, b) => a - b);
console.log(sortedNumbers); // [1, 2, 3, 4]
console.log(numbers); // [3, 1, 4, 2] (tidak berubah)
🔹 Mengapa ini berguna?
Menghindari efek samping pada array asli.
3. Array.prototype.toSpliced() (ES2023)
Versi immutable dari splice(), tidak mengubah array asli.
const arr = ["A", "B", "C", "D"];
const newArr = arr.toSpliced(1, 2); // Hapus 2 item mulai dari index 1
console.log(newArr); // ["A", "D"]
console.log(arr); // ["A", "B", "C", "D"] (tetap sama)
4. navigator.clipboard.writeText()
Salin teks ke clipboard tanpa perlu menggunakan document.execCommand.
navigator.clipboard.writeText("Halo Dunia!")
.then(() => console.log("Teks disalin!"))
.catch(err => console.error("Gagal menyalin:", err));
🔹 Mengapa ini berguna?
Lebih modern dan lebih kompatibel dengan browser.
5. structuredClone()
Membuat deep copy dari objek tanpa perlu menggunakan JSON.parse(JSON.stringify()).
const obj = { name: "Agung", details: { age: 25 } };
const clone = structuredClone(obj);
clone.details.age = 30;
console.log(obj.details.age); // 25 (tidak ikut berubah)
🔹 Mengapa ini berguna?
Membantu menghindari perubahan tidak disengaja pada objek asli.
6. Intl.NumberFormat (Format Mata Uang)
Memformat angka dengan cara yang benar sesuai lokal.
const formatter = new Intl.NumberFormat("id-ID", { style: "currency", currency: "IDR" });
console.log(formatter.format(1000000)); // Rp1.000.000,00
🔹 Mengapa ini berguna?
Menghindari pembuatan fungsi custom untuk format angka.
7. Intl.RelativeTimeFormat (Waktu Relatif)
Menampilkan waktu dalam format relatif.
const rtf = new Intl.RelativeTimeFormat("id", { numeric: "auto" });
console.log(rtf.format(-1, "day")); // "kemarin"
console.log(rtf.format(1, "week")); // "minggu depan"
8. document.startViewTransition() (Animasi Halus, Chrome 111+)
Membantu melakukan transisi halaman dengan efek animasi bawaan.
if (document.startViewTransition) {
document.startViewTransition(() => {
document.body.style.background = "black";
});
}
🔹 Mengapa ini berguna?
Bisa membuat efek transisi yang lebih mulus dalam perubahan UI.
9. AbortController (Membatalkan Fetch)
Memungkinkan untuk membatalkan request fetch() yang sedang berjalan.
const controller = new AbortController();
const signal = controller.signal;
fetch("https://jsonplaceholder.typicode.com/todos/1", { signal })
.then(response => response.json())
.then(data => console.log(data))
.catch(err => console.error("Fetch dibatalkan:", err));
controller.abort(); // Membatalkan request
🔹 Mengapa ini berguna?
Mencegah request yang tidak diperlukan, menghemat resource.
10. performance.now() (Pengukuran Waktu yang Akurat)
Menampilkan waktu dengan presisi tinggi.
const start = performance.now();
for (let i = 0; i < 1000000; i++) {} // Simulasi tugas berat
const end = performance.now();
console.log(`Kode dieksekusi dalam ${end - start} ms`);
🔹 Mengapa ini berguna?
Lebih akurat daripada Date.now() untuk mengukur performa kode.
Kesimpulan
Fungsi-fungsi ini sering kali diabaikan tetapi sangat berguna dalam pengembangan JavaScript modern. Beberapa fitur seperti structuredClone(), Object.hasOwn(), dan AbortController dapat membantu menulis kode yang lebih aman dan efisien.
Mana yang menurutmu paling menarik? 🚀
Posting Komentar
0Komentar