JavaScript: Cara Cepat Format Tanggal

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.