Array

Di Vue 3, pemrograman reaktif adalah inti dari membangun aplikasi dinamis dan interaktif. Watcher adalah salah satu alat paling kuat dalam sistem reaktif Vue, memungkinkan Anda merespons perubahan data secara real-time. Baik untuk validasi input, panggilan API otomatis, atau logika kustom saat data berubah, watcher memberikan fleksibilitas yang sangat berguna. Panduan ini membahas penggunaan watcher dari dasar hingga teknik lanjutan. 1. Apa itu Watcher? Watcher memungkinkan pengembang menjalankan logika kustom ketika state reaktif berubah. Berbeda dengan properti terkomputasi yang menghasilkan nilai turunan, watcher digunakan untuk efek samping seperti panggilan API atau manipulasi DOM.

Rust dikenal karena kinerja, keamanan, dan kontrol memori yang ketat, menjadikannya bahasa ideal untuk pemrograman tingkat sistem. Salah satu struktur data dasar di Rust adalah array, yaitu koleksi elemen dengan ukuran tetap yang dialokasikan di stack dan memiliki tipe yang sama. Panduan ini membahas manipulasi array di Rust, dari operasi dasar hingga teknik lanjutan. Apa itu Array di Rust? Array di Rust memiliki panjang tetap, artinya ukurannya tidak bisa berubah selama runtime. Semua elemen harus memiliki tipe yang sama. Array sangat berguna ketika koleksi data memiliki ukuran yang dapat diprediksi dan konstan.

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 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 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:

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 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:

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

Kalau kamu ingin mengubah elemen array tanpa mengubah array asli, with() jawabannya. 1. Dasar with() Copy let newArray = array.with(index, value); Membuat array baru dengan elemen di index diganti value. Array asli tetap utuh. Contoh: Copy const colors = ['red','blue','green','yellow']; const updatedColors = colors.with(1,'purple'); console.log(updatedColors); // ['red','purple','green','yellow'] console.log(colors); // ['red','blue','green','yellow'] 2. Gunakan untuk Immutable Updates Copy const items = ['item1','item2','item3']; const updatedItems = items.with(2,'newItem'); console.log(updatedItems); // ['item1','item2','newItem'] console.log(items); // ['item1','item2','item3'] 3. Kombinasi dengan Metode Lain Copy const numbers = [1,2,3,4,5]; const modifiedNumbers = numbers.with(3,100).map(num => num*2); console.log(modifiedNumbers); // [2,4,6,200,10] console.log(numbers); // [1,2,3,4,5] 4. Kegunaan Real-World UI Updates: Update elemen di daftar/tabel tanpa mengubah data asli. State Management: Cocok untuk Redux atau sistem yang memerlukan immutability. Data Processing: Non-destructive updates untuk dataset penting. 5. Catatan Performa Membuat array baru → butuh memory tambahan, jadi perhatikan jika array besar.

Di JavaScript, melakukan iterasi pada array dan koleksi adalah hal yang umum, dan ada beberapa cara untuk melakukannya, termasuk for, forEach, dan map. Setiap metode memiliki kasus penggunaan, keuntungan, dan keterbatasannya masing-masing. Pada panduan ini, kita akan membahas perbedaan ketiga metode tersebut, cara menggunakannya dengan efektif, dan kapan memilih salah satunya. 1. Loop for Tradisional Loop for adalah salah satu metode iterasi tertua dan paling fleksibel di JavaScript. Metode ini memberi kontrol penuh atas proses iterasi.

Bekerja dengan array dan slice di Go itu gampang-gampang susah—apalagi kalau datanya berupa struct. Gini deh, kalau kita punya Person struct: Copy type Person struct { Name string; Age int } people := []Person{ {"Alice", 30}, {"Bob", 25}, {"John", 20}, {"Zara", 35}, } 1. Menambah Elemen Copy people = append(people, Person{"Eve", 28}) 2. Menghapus Elemen Copy func deletePerson(people []Person, name string) []Person { for i, p := range people { if p.Name == name { return append(people[:i], people[i+1:]...) } } return people } people = deletePerson(people, "Bob") 3. Mencari Elemen Copy func searchByName(people []Person, name string) (Person, bool) { for _, p := range people { if p.Name == name { return p, true } } return Person{}, false } p, found := searchByName(people, "John") 4. Memperbarui Elemen Copy func updateAge(people []Person, name string, newAge int) []Person { for i, p := range people { if p.Name == name { people[i].Age = newAge; break } } return people } people = updateAge(people, "Alice", 31) 5. Mengurutkan Array Naik:

Awalnya Go cuma punya satu tipe loop (for) bikin bingung. Tapi gini deh, kalau dipahami, fleksibilitasnya bikin saya bisa handle hampir semua kebutuhan perulangan. 1. For Dasar Copy for i := 0; i < 5; i++ { fmt.Println(i) } Mirip loop di C/Java/JS: mulai dari i=0, lanjut selama kondisi benar, naik tiap iterasi.

Sebagai developer independen, saya sering nemuin kasus di mana data harus disimpan dan diolah secara efisien. Awalnya saya bingung bedain kapan pakai list, kapan pakai array, atau NumPy. Setelah nyobain beberapa cara, ternyata masing-masing punya keunggulan sendiri. Gini deh, mari kita bahas lengkap tapi santai. 1. Lists: Array Paling Fleksibel Di Python, list sering dipakai sebagai array karena fleksibel dan gampang banget. Bisa nyimpen berbagai tipe data sekaligus. Copy # List integer numbers = [1, 2, 3, 4, 5] # List campur-campur mixed_list = [1, "Python", 3.14, True] # Akses & ubah elemen numbers[2] = 35 # [1, 2, 35, 4, 5] Kelebihannya: fleksibel, gampang dipakai, cocok buat data campuran. Kekurangannya: nggak seefisien array murni kalau datanya banyak dan homogen.

Kadang-kadang di proyek JavaScript, saya butuh memecah array besar jadi potongan-potongan kecil—entah buat manajemen UI atau pemrosesan data. Meski JavaScript punya banyak metode bawaan, nggak ada yang langsung bilang: “Hei, saya bisa nge-chunk array buat kamu.” Gini deh, kita bisa tambahkan sendiri. Menambahkan Metode chunk kita bisa extend Array.prototype pakai Object.defineProperty biar semua array bisa pakai chunk: Copy Object.defineProperty(Array.prototype, 'chunk', { value: function(size) { let arr = this; return [].concat.apply([], arr.map((el, i) => i % size ? [] : [arr.slice(i, i + size)]) ); } }); Cara Kerjanya this → array yang kita panggil chunk. arr.map + i % size → bikin chunk baru tiap size elemen. [].concat.apply([], …) → merapikan semua chunk jadi satu array. Contoh Penggunaan Copy let numbers = [1,2,3,4,5,6,7,8,9]; console.log(numbers.chunk(3)); // Output: [[1,2,3],[4,5,6],[7,8,9]] Sekarang tinggal panggil .chunk(size) di array mana pun.

Dalam pengembangan software, seringkali kita perlu menghapus elemen duplikat dari array. JavaScript menyediakan beberapa cara untuk melakukannya, tergantung apakah kamu ingin menghapus duplikat berdasarkan satu atau beberapa properti, atau mempertahankan elemen terakhir yang muncul. Di sini kita akan membahas berbagai metode menggunakan filter() dan pendekatan lainnya. 1. Menghapus Duplikat Berdasarkan ID Unik Jika array terdiri dari objek dengan properti ID unik, kita bisa menghapus duplikat berdasarkan ID tersebut. Hanya satu objek dengan ID yang sama yang akan dipertahankan.

Mengelola dan memanipulasi data array adalah tugas umum dalam pengembangan web. Artikel ini akan membahas cara mengurutkan array berisi objek berdasarkan nilai tertentu menggunakan JavaScript, dengan contoh mengurutkan daftar objek berdasarkan properti order. 1. Data Awal saya mulai dengan sekumpulan data berupa array objek. Setiap objek memiliki dua properti: name dan order. Copy let data = [ { name: 'Edward', order: 21 }, { name: 'Sharpe', order: 37 }, { name: 'And', order: 45 }, { name: 'The', order: -12 }, { name: 'Magnetic', order: 13 }, { name: 'Zeros', order: 37 } ] Tujuan saya adalah mengurutkan objek-objek ini berdasarkan nilai order.

Filter array itu hal wajib di web development. Selain filter() dan includes(), ada banyak trik buat filter sesuai kebutuhan. Gini deh, beberapa contohnya. 1. Filter Berdasarkan Kondisi Copy const arr = [1,2,3,4,5,6]; const even = arr.filter(n => n % 2 === 0); console.log(even); // [2,4,6] 2. Filter Unik Copy const arr = [1,2,3,2,4,5,3]; const unique = arr.filter((x,i)=>arr.indexOf(x)===i); console.log(unique); // [1,2,3,4,5] 3. Filter Berdasarkan Properti Objek Copy const users = [ {name:'Alice', age:25}, {name:'Bob', age:30}, {name:'Charlie', age:25} ]; const filtered = users.filter(u=>u.age===25); console.log(filtered); // [{name:'Alice', age:25}, {name:'Charlie', age:25}] 4. Filter + Transform Copy const arr = [1,2,3,4,5]; const result = arr.filter(n=>n%2===0).map(n=>n*2); console.log(result); // [4,8] 5. Filter Dinamis Copy const filterArray = (arr, crit) => arr.filter(n=>n>=crit); console.log(filterArray([1,2,3,4,5],3)); // [3,4,5] Kesimpulan Pada akhirnya, filter() di JavaScript fleksibel banget. Bisa untuk angka, objek, unik, bahkan dinamis. Snippet di atas siap dipakai di proyek mana pun. Gini deh, kadang hal kecil kayak filter ini bikin manipulasi data jauh lebih mudah.