JavaScript: Bahasanya · 6/12

Object dan array

Cara membentuk data, plus method array yang akan kamu pakai tiap hari.

Baca 35 menit

Setelah pelajaran ini kamu bisa

Memodelkan informasi nyata sebagai object dan array bersarang
Memakai destructuring dan spread untuk membaca dan menyusun ulang data
Memilih method array yang tepat untuk sebuah tugas
Merangkai map, filter, dan reduce untuk mengubah sebuah list

Object menyimpan value bernama. Array menyimpan value berurutan. Hampir semua data yang akan kamu tangani adalah kombinasi keduanya, jadi kelancaran di sini terbayar setiap hari.

Coba sendiri

Hasil

Tekan Jalankan untuk melihat hasilnya.

Ini jalan di browser kamu, di dalam sandbox. Apa pun yang kamu tulis di sini tidak bisa merusak situs.

Destructuring

Destructuring mengeluarkan value ke nama masing-masing dalam satu baris. Kamu akan melihatnya di setiap component React dan setiap codebase modern.

Coba sendiri

Hasil

Tekan Jalankan untuk melihat hasilnya.

Ini jalan di browser kamu, di dalam sandbox. Apa pun yang kamu tulis di sini tidak bisa merusak situs.

Spread

... menyalin isi sebuah object atau array ke dalam yang baru. Inilah cara kamu "mengubah" data tanpa memutasi aslinya — pola yang sepenuhnya diandalkan React.

Coba sendiri

Hasil

Tekan Jalankan untuk melihat hasilnya.

Ini jalan di browser kamu, di dalam sandbox. Apa pun yang kamu tulis di sini tidak bisa merusak situs.

Method array yang kamu butuhkan

Method	Menghasilkan	Dipakai saat
`map`	Array baru, panjang sama	Mengubah setiap item
`filter`	Array baru, lebih pendek	Menyisakan sebagian item
`find`	Satu item, atau undefined	Mencari satu yang cocok
`some`	Sebuah boolean	Bertanya "apakah ada minimal satu?"
`every`	Sebuah boolean	Bertanya "apakah semuanya?"
`reduce`	Apa pun yang kamu bangun	Meringkas list jadi satu value
`sort`	Array yang sama, diurutkan	Mengurutkan — hati-hati, ia memutasi
`includes`	Sebuah boolean	Bertanya "apakah value ini ada?"

Coba sendiri

Transformasi realistis, seperti yang benar-benar akan kamu tulis saat kerja.

Hasil

Tekan Jalankan untuk melihat hasilnya.

Ini jalan di browser kamu, di dalam sandbox. Apa pun yang kamu tulis di sini tidak bisa merusak situs.

Coba sendiri

Hasil

Tekan Jalankan untuk melihat hasilnya.

Ini jalan di browser kamu, di dalam sandbox. Apa pun yang kamu tulis di sini tidak bisa merusak situs.

Tugas praktik

Dengan array bookings di atas, hasilkan: (1) nama-nama guest yang belum bayar sebagai array string, (2) total malam dari semua booking, (3) booking dengan nilai total tertinggi, tanpa memutasi bookings. Pastikan di akhir array aslinya tidak berubah.

Hasil yang diharapkan

["Budi"], 9, dan booking dengan id 3

Tampilkan contoh solusi

Coba dulu minimal sepuluh menit sebelum membuka ini. Bagian yang terasa susah itu justru yang mengajari kamu.

const unpaidNames = bookings.filter((b) => !b.paid).map((b) => b.guest);
const totalNights = bookings.reduce((sum, b) => sum + b.nights, 0);
const biggest = [...bookings]
  .sort((a, b) => b.nights * b.pricePerNight - a.nights * a.pricePerNight)[0];

console.log(unpaidNames);
console.log(totalNights);
console.log(biggest.id);
console.log(bookings.length, "unchanged");