JavaScript

Saya dulu suka ribet kalau harus ngecek kondisi sebelum assign variabel. Untungnya, JavaScript punya operator &&= yang bikin semuanya lebih ringkas. Gini deh, kalau variabelnya truthy, dia bakal di-update, kalau falsy, tetap aman. Sintaks Dasar Copy variable &&= value; Artinya: assign value ke variable hanya kalau variable truthy. Kalau falsy, dia tetap sama.

Sering banget saya nemu kasus di mana variabel belum diisi, tapi harus ada nilai default supaya kode nggak error. Nah, JavaScript punya operator ||= yang bikin ini gampang. Intinya, kalau variabel falsy (0, '', null, undefined, false), dia bakal di-assign nilai baru. Kalau nggak, dia tetap aman. Sintaks Dasar Copy variable ||= value; Artinya: assign value hanya kalau variable falsy.

Kadang, saya harus nge-handle banyak operasi asinkron sekaligus, ribet kalau salah satu gagal dan bikin seluruh proses berhenti. Nah, Promise.allSettled() hadir buat ngeatasi masalah itu. Dengan ini, kita bisa tahu hasil semua promise, entah sukses atau gagal, tanpa bikin aplikasi berhenti tiba-tiba. Apa Itu Promise.allSettled()? Promise.allSettled() menerima iterable (misal array) berisi promise, lalu mengembalikan satu promise yang selesai setelah semua promise di dalamnya terselesaikan, baik fulfilled maupun rejected. Copy Promise.allSettled([promise1, promise2, promise3]); Hasilnya berupa array objek { status, value/reason }.

Kadang, saya cuma butuh satu hasil sukses dari beberapa operasi asinkron, bukan semua. Kalau pakai Promise.all(), mesti tunggu semuanya atau error. Nah, Promise.any() bikin hidup lebih gampang: selesai segera begitu ada satu promise yang berhasil. Apa Itu Promise.any()? Promise.any() menerima iterable promise, dan: Resolve saat ada satu promise yang berhasil. Reject hanya kalau semua promise gagal, dengan AggregateError. Copy Promise.any([promise1, promise2, promise3]); Contoh Penggunaan 1. Basic Example

Kadang saya harus nge-parse string yang kompleks dan butuh semua match, termasuk grup tangkapan. Sebelumnya pakai match() cuma dapat sebagian info. Untungnya, ada String.matchAll(): mengembalikan iterator semua match lengkap dengan detail grupnya. Apa Itu String.matchAll()? Mengembalikan iterator semua hasil match regex di string. Bisa akses capturing groups, index, dan detail match lainnya. Hanya pakai regex dengan flag g. Copy string.matchAll(regex); Contoh Penggunaan 1. Basic Usage

Kadang saya harus ganti semua kemunculan kata atau pola di string, bukan cuma yang pertama. Sebelumnya pakai replace() mesti pakai trik atau loop, tapi replaceAll() bikin semuanya gampang. Apa Itu String.replaceAll()? Mengganti semua kemunculan substring atau regex pattern di string. Bisa pakai literal string atau regex. Copy string.replaceAll(searchValue, replaceValue); searchValue → substring atau regex. replaceValue → string pengganti, bisa juga fungsi. Contoh Penggunaan 1. Literal Substring

JavaScript Number memiliki batas aman (2^53 - 1) untuk integer. Kalau kamu butuh angka lebih besar atau presisi tinggi, BigInt solusinya. 1. Membuat BigInt Copy const bigNumber1 = 123456789012345678901234567890n; // literal const bigNumber2 = BigInt("123456789012345678901234567890"); // constructor 2. Operasi Dasar BigInt mendukung operasi aritmatika: Copy const a = 12345678901234567890n; const b = 98765432109876543210n; console.log(a + b); // 111111111011111111100n console.log(b / a); // 5n (dibulatkan ke nol) 3. Perbandingan Copy console.log(1000n < 2000n); // true console.log(1000n === 1000n); // true 4. Konversi dengan Number Copy const num = 42; const bigIntFromNum = BigInt(num); // 42n Copy const bigIntVal = 12345678901234567890n; const numberVal = Number(bigIntVal); // Hati-hati, bisa kehilangan presisi 5. Hal yang Perlu Diperhatikan Tidak bisa dicampur langsung dengan Number: konversi harus eksplisit. Operasi lebih lambat dibanding Number. JSON: gunakan toString() sebelum serialisasi. Copy JSON.stringify({ value: 9007199254740991n.toString() }); // '{"value":"9007199254740991"}' 6. Kapan Gunakan BigInt? Kriptografi Komputasi ilmiah dengan angka besar Aplikasi finansial untuk angka presisi tinggi 7. Dukungan Browser Didukung di Chrome 67+, Firefox 68+, Safari 14+, Edge 79+. Tidak ada di Internet Explorer.

JavaScript ?? (Nullish Coalescing Operator) memudahkan penanganan null dan undefined, memberikan default value secara aman tanpa memengaruhi falsy values lain seperti 0 atau ''. 1. Dasar Penggunaan Copy let username = null; let name = username ?? 'Guest'; console.log(name); // Guest Mengembalikan operand kanan hanya jika kiri null atau undefined. 2. Perbedaan ?? vs || Copy let count = 0; console.log(count || 10); // 10 → 0 dianggap falsy console.log(count ?? 10); // 0 → 0 bukan null/undefined 3. Default Function Arguments Copy function getPrice(price, discount) { discount = discount ?? 0; return price - (price * discount); } console.log(getPrice(100, 0)); // 100 console.log(getPrice(100, null)); // 100 4. Chaining ?? Copy let val = undefined ?? null ?? 'Default'; console.log(val); // Default 5. Kombinasi dengan Optional Chaining Copy let user = { profile: { name: 'Alice' } }; let bio = user.profile?.bio ?? 'Bio not available'; console.log(bio); // Bio not available 6. Perhatian Harus gunakan parentheses saat dicampur || atau &&: Copy let value = (0 || undefined) ?? 'fallback'; // Benar // 0 || undefined ?? 'fallback'; → Error 7. Dukungan Browser Chrome 80+, Firefox 72+, Safari 13.1+, Edge 80+ Tidak didukung di Internet Explorer Kesimpulan ?? membantu membedakan nullish dari falsy lain, membuat kode lebih bersih, aman, dan mudah dibaca.

JavaScript Numeric Separator (_) membuat angka besar lebih mudah dibaca dengan menambahkan underscore di antara digit. Nilai angka tidak berubah; ini hanya untuk kenyamanan visual. 1. Contoh Dasar Copy const million = 1_000_000; console.log(million); // 1000000 2. Menggunakan pada Desimal Copy const pi = 3.141_592_653; console.log(pi); // 3.141592653 3. Binary, Octal, dan Hexadecimal Copy const bin = 0b1010_1011; // 171 const hex = 0xFF_FF_FF; // 16777215 const oct = 0o123_456; // 42798 4. Aturan Penggunaan _ hanya boleh di antara digit. Tidak boleh di awal/akhir angka, di dekat titik desimal, atau berturut-turut. Contoh Salah:

Kadang saya harus nge-parse string kompleks yang punya pola berulang, misal tanggal atau harga produk. Sebelumnya ribet banget kalau mau ambil semua grup dengan nama sama. Untungnya, JavaScript sekarang punya d modifier untuk RegExp yang bikin hidup lebih gampang. Apa Itu d Modifier? Modifier d (duplicate capturing group names) memungkinkan kita menangkap semua kemunculan dari grup bernama yang sama, bukan cuma yang terakhir. Cocok banget kalau pola berulang harus dianalisis atau debug.

Kadang saya butuh akses elemen terakhir atau tertentu di array. Array.at() bikin ini gampang dan readable. 1. Dasar Array.at() Copy array.at(index); index → posisi elemen; bisa negatif untuk akses dari akhir array. 2. Contoh Penggunaan Positif index: Copy const fruits = ['apple','banana','cherry']; console.log(fruits.at(0)); // 'apple' console.log(fruits.at(1)); // 'banana' Negatif index:

Sebagai developer, saya selalu nyari cara bikin kode lebih aman dan mudah dipelihara. Kadang ngerasa frustasi kalau properti atau method kelas kebuka ke mana-mana tanpa kontrol. Nah, JavaScript punya solusi: private methods dan fields. Dengan ini, kita bisa sembunyikan data dan fungsi penting di dalam kelas, bikin kode lebih rapi dan aman. Apa Itu Private Methods dan Fields? Sederhananya, ini properti dan metode yang cuma bisa diakses dari dalam kelas itu sendiri. Ditandai pakai #. Coba bayangin kayak lemari rahasia di kelas—kalau nggak punya kunci (#), nggak bisa buka.

Operator ??= di JavaScript adalah operator penugasan logika nullish yang menetapkan nilai hanya jika variabel bernilai null atau undefined. 1. Sintaks Copy variable ??= value; Menetapkan value hanya jika variable nullish (null atau undefined). 2. Contoh Dasar Copy let nama = null; nama ??= 'Tamu'; console.log(nama); // 'Tamu' 3. Default pada Fungsi Copy function sapa(user) { user ??= 'Stranger'; console.log(`Halo, ${user}!`); } sapa('Alice'); // Halo, Alice! sapa(); // Halo, Stranger! 4. Properti Objek Copy let pengaturan = { tema: undefined, fontSize: 16 }; pengaturan.tema ??= 'Light'; console.log(pengaturan.tema); // Light 5. Perbedaan dengan Operator Lain ||= → Menetapkan jika variabel falsy (0, '', false, null, undefined) &&= → Menetapkan jika variabel truthy ??= → Menetapkan jika variabel null atau undefined saja Copy let jumlah = 0; jumlah ||= 10; // 10 (karena 0 adalah falsy) jumlah ??= 10; // 0 (karena 0 bukan nullish) 6. Dukungan Browser Didukung di browser modern (Chrome, Firefox, Safari, Edge) dan ES2021+. Tidak didukung di Internet Explorer.

Operator Optional Chaining (?.) di JavaScript memudahkan akses properti dalam objek yang bersarang tanpa risiko error saat nilai null atau undefined. Fitur ini membuat kode lebih ringkas dan aman. 1. Sintaks Copy const hasil = objek?.properti; const hasil = objek?.properti?.subProperti; const hasil = objek?.properti?.[key]; const hasil = objek?.metode?.(); objek?.properti → Mengembalikan undefined jika objek null atau undefined. objek?.properti?.subProperti → Mengembalikan undefined jika objek atau objek.properti nullish. objek?.properti?.[key] → Mengakses properti secara dinamis dengan aman. objek?.metode?.() → Memanggil metode hanya jika ada. 2. Contoh Penggunaan a. Mengakses Properti Bersarang

Kadang saya masih bingung milih antara arrow function dan fungsi tradisional di JS, padahal keduanya punya kelebihan masing-masing. Gini deh, mari kita bedah dengan cepat. 1. Ringkasan Cara Definisi Fungsi Deklarasi Fungsi Copy function greet(name) { return `Hello, ${name}!`; } Ekspresi Fungsi Copy const greet = function(name) { return `Hello, ${name}!`; }; Arrow Function (ES6) Copy const greet = (name) => `Hello, ${name}!`; 2. Perbedaan Penting Sintaks: Arrow function lebih ringkas. Cocok buat fungsi pendek atau inline.

Kalau urusan HTTP request di JavaScript, Axios itu lifesaver. Sintaksnya simpel, promise-based, dan lebih bersih dibanding fetch. Gini deh, saya kasih contoh CRUD pakai DummyJSON API. 1. Instalasi Copy npm install axios Atau pakai CDN: Copy <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script> 2. Ambil Semua Produk Copy axios.get('https://dummyjson.com/products') .then(res => console.log(res.data)) .catch(err => console.error('Error:', err)); 3. Ambil Produk Berdasarkan ID Copy axios.get('https://dummyjson.com/products/1') .then(res => console.log(res.data)) .catch(err => console.error('Error:', err)); 4. Cari Produk Copy axios.get('https://dummyjson.com/products/search?q=phone') .then(res => console.log(res.data)) .catch(err => console.error('Error:', err)); 5. Tambah Produk Baru Copy axios.post('https://dummyjson.com/products/add', { title: 'BMW Pencil' }) .then(res => console.log(res.data)) .catch(err => console.error('Error:', err)); 6. Update Produk Copy axios.put('https://dummyjson.com/products/1', { title: 'iPhone Galaxy +1' }) .then(res => console.log(res.data)) .catch(err => console.error('Error:', err)); 7. Hapus Produk Copy axios.delete('https://dummyjson.com/products/1') .then(res => console.log(res.data)) .catch(err => console.error('Error:', err)); 8. Modul Axios Biar rapi, bisa bikin modul:

Fetch API itu modern, clean, dan promise-based—solusi yang jauh lebih enak dibanding XMLHttpRequest. Gini deh, contoh CRUD pakai DummyJSON API. 1. Ambil Semua Produk Copy fetch('https://dummyjson.com/products') .then(res => res.json()) .then(console.log) .catch(err => console.error('Error:', err)); 2. Ambil Produk Berdasarkan ID Copy fetch('https://dummyjson.com/products/1') .then(res => res.json()) .then(console.log) .catch(err => console.error('Error:', err)); 3. Cari Produk Copy fetch('https://dummyjson.com/products/search?q=phone') .then(res => res.json()) .then(console.log) .catch(err => console.error('Error:', err)); 4. Tambah Produk Baru Copy fetch('https://dummyjson.com/products/add', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ title: 'BMW Pencil' }) }) .then(res => res.json()) .then(console.log) .catch(err => console.error('Error:', err)); 5. Update Produk Copy fetch('https://dummyjson.com/products/1', { method: 'PUT', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ title: 'iPhone Galaxy +1' }) }) .then(res => res.json()) .then(console.log) .catch(err => console.error('Error:', err)); 6. Hapus Produk Copy fetch('https://dummyjson.com/products/1', { method: 'DELETE' }) .then(res => res.json()) .then(console.log) .catch(err => console.error('Error:', err)); 7. Tips & Best Practices Error Handling: selalu pakai .catch() atau try/catch. Async/Await: lebih readable untuk kode kompleks: Copy async function fetchProducts() { try { const res = await fetch('https://dummyjson.com/products'); const data = await res.json(); console.log(data); } catch (err) { console.error('Error:', err); } } fetchProducts(); Keamanan: jangan lupa handle data sensitif dengan aman. Kesimpulan Fetch API bikin HTTP request mudah dan fleksibel di JavaScript. CRUD, searching, dan data manipulation jadi simpel tanpa ribet.

Kadang saya harus mengelompokkan array atau objek berdasarkan kategori tertentu. Sebelumnya ribet pakai loop atau reduce, tapi sekarang Map.groupBy() bikin semuanya simpel dan rapi. Apa Itu Map.groupBy()? Mengelompokkan elemen array ke dalam Map. Key → kriteria kelompok, Value → array elemen yang termasuk kelompok itu. Copy const groupedMap = Map.groupBy(array, callback); array → data yang mau dikelompokkan callback → fungsi untuk menentukan key tiap elemen Contoh Penggunaan 1. Group Angka Genap/Ganjil

Kadang saya perlu membalik array tapi tetap menjaga array asli utuh. Nah, toReversed() bikin ini gampang. 1. Dasar toReversed() Copy let newArray = array.toReversed(); Mengembalikan array baru yang terbalik. Array asli tidak berubah. Contoh: Copy const originalArray = [1,2,3,4,5]; const reversedArray = originalArray.toReversed(); console.log(reversedArray); // [5,4,3,2,1] console.log(originalArray); // [1,2,3,4,5] 2. Kenapa toReversed() lebih bagus dari reverse()? reverse() → memodifikasi array asli. toReversed() → tetap immutable, aman untuk data asli. 3. Kombinasi dengan Metode Lain Copy const numbers = [1,2,3,4,5]; const reversedAndDoubled = numbers.toReversed().map(n => n*2); console.log(reversedAndDoubled); // [10,8,6,4,2] 4. Kegunaan Real-World UI Rendering: Menampilkan daftar terbalik tanpa merusak data asli. Data Analysis: Analisis kronologis dataset tanpa mengubah array asli. Algoritma: Membutuhkan array terbalik sementara input tetap utuh. Kesimpulan toReversed() mempermudah manipulasi array dengan cara immuatable, menjaga data asli tetap utuh. Gini deh, fitur kecil tapi bikin kode lebih bersih dan aman.

Kalau kamu butuh array yang terurut tapi tidak ingin mengubah array asli, toSorted() jawabannya. 1. Dasar toSorted() Copy let sortedArray = array.toSorted([compareFunction]); Mengembalikan array baru yang sudah terurut. Array asli tetap utuh. compareFunction opsional, bisa untuk menentukan urutan custom. Contoh: Copy const numbers = [5,3,8,1]; const sortedNumbers = numbers.toSorted(); console.log(sortedNumbers); // [1,3,5,8] console.log(numbers); // [5,3,8,1] 2. Mengurutkan Objek Copy const students = [ { name: 'Alice', grade: 85 }, { name: 'Bob', grade: 92 }, { name: 'Charlie', grade: 88 } ]; const sortedByGrade = students.toSorted((a,b) => b.grade - a.grade); console.log(sortedByGrade); /* [ { name: 'Bob', grade: 92 }, { name: 'Charlie', grade: 88 }, { name: 'Alice', grade: 85 } ] */ console.log(students); // array asli tetap sama 3. Menggunakan Custom Compare Function Copy const words = ['banana','apple','cherry']; const sortedWords = words.toSorted((a,b) => a.length - b.length); console.log(sortedWords); // ['apple','banana','cherry'] 4. Kegunaan Real-World UI Rendering: Tampilkan daftar atau tabel terurut tanpa mengubah data asli. Data Analysis: Analisis dataset sambil menjaga versi original. Functional Programming: Mendukung prinsip immutable data structures. 5. Catatan Performa toSorted() membuat array baru → butuh memory tambahan. Perhatikan saat array sangat besar.

Kalau kamu ingin memodifikasi array tapi tetap menjaga array asli, toSpliced() jawabannya. 1. Dasar toSpliced() Copy let newArray = array.toSpliced(start[, deleteCount[, ...items]]); Membuat array baru dengan elemen dihapus atau diganti. Array asli tetap utuh. start: indeks mulai perubahan. deleteCount: jumlah elemen yang dihapus. ...items: elemen yang ditambahkan. Contoh:

Kadang di proyek web, saya butuh format tanggal yang rapi. JavaScript punya banyak cara, dari built-in sampai library. 1. toLocaleDateString() Copy const date = new Date(); console.log(date.toLocaleDateString()); // "8/28/2024" (tergantung locale) const options = { year:'numeric', month:'long', day:'numeric' }; console.log(date.toLocaleDateString('en-US', options)); // "August 28, 2024" 2. toISOString() (ISO 8601) Copy console.log(new Date().toISOString()); // "2024-08-28T12:34:56.789Z" 3. Format Manual Copy const d = new Date(); const year = d.getFullYear(); const month = String(d.getMonth()+1).padStart(2,'0'); const day = String(d.getDate()).padStart(2,'0'); console.log(`${year}-${month}-${day}`); // "2024-08-28" 4. Intl.DateTimeFormat Copy const formatter = new Intl.DateTimeFormat('en-GB', { year:'numeric', month:'short', day:'numeric', weekday:'long' }); console.log(formatter.format(new Date())); // "Wednesday, 28 Aug 2024" 5. Library Moment.js Copy import moment from 'moment'; console.log(moment().format('MMMM Do YYYY, h:mm:ss a')); // "August 28th 2024, 12:34:56 pm" date-fns Copy import { format } from 'date-fns'; console.log(format(new Date(),'do MMMM yyyy')); // "28th August 2024" Tips Gunakan library ringan kalau perlu. Perhatikan time zone. Pertahankan format konsisten di seluruh aplikasi. Kesimpulan Pada akhirnya, dari built-in sampai library, JavaScript fleksibel buat format tanggal. Gini deh, kadang hal kecil kayak ini bikin tampilan data jauh lebih rapi dan profesional.

Kadang di proyek JS, saya perlu mengelompokkan data biar lebih mudah diproses. Object.groupBy() bikin hidup lebih gampang. 1. Dasar Object.groupBy() Copy Object.groupBy(array, callback); array → data yang mau dikelompokkan callback → menentukan key tiap elemen 2. Contoh Sederhana: Genap/Ganjil Copy const numbers = [1,2,3,4,5,6,7,8,9,10]; const grouped = Object.groupBy(numbers, n => n % 2 === 0 ? 'even' : 'odd'); console.log(grouped); // { even:[2,4,6,8,10], odd:[1,3,5,7,9] } 3. Mengelompokkan Objek Berdasarkan Properti Copy const products = [ {name:'Laptop', category:'Electronics'}, {name:'Shirt', category:'Clothing'}, {name:'Phone', category:'Electronics'} ]; const groupedProducts = Object.groupBy(products, p => p.category); console.log(groupedProducts); // { Clothing:[{…}], Electronics:[{…},{…}] } 4. Grup Berdasarkan Kriteria Kompleks Copy const numbers = [1,5,10,15,20,25,30]; const groupedByRange = Object.groupBy(numbers, n => n <=10 ? '1-10' : n <=20 ? '11-20' : '21-30'); console.log(groupedByRange); 5. Menangani Nilai Kosong atau Tidak Valid Copy const items = [null,'apple',undefined,'banana','']; const groupedItems = Object.groupBy(items, item => item || 'unknown'); console.log(groupedItems); // { apple:['apple'], banana:['banana'], unknown:[null,undefined,''] } 6. Tips & Catatan Simpel & fleksibel: Bisa grup berdasarkan apa saja. Tidak mengubah array asli → aman untuk data asli. Perlu cek kompatibilitas browser → gunakan polyfill jika perlu. Kesimpulan Pada akhirnya, Object.groupBy() bikin pengelompokan data lebih gampang dan readable. Dari angka sampai objek kompleks, tinggal tentukan key, semua otomatis rapi. Gini deh, kadang hal kecil kayak ini bikin manipulasi data jauh lebih efisien.

Kadang saya perlu cari elemen terakhir yang memenuhi kondisi tertentu di array. findLast() bikin ini gampang tanpa harus reverse array dulu. 1. Dasar findLast() Copy array.findLast(callback(element[, index[, array]])[, thisArg]) callback → fungsi yang dijalankan di tiap elemen sampai cocok. thisArg → opsional, untuk konteks this. Return → elemen terakhir yang cocok, atau undefined. 2. Contoh Dasar Copy const numbers = [1,3,5,8,10,12,7,6]; const lastEven = numbers.findLast(num => num % 2 === 0); console.log(lastEven); // 6 3. Contoh Real-World Transaksi terakhir > 200: