Array — Menambah, Menghapus, dan Mengambil

Kalau item di cart kamu simpan di variable terpisah — item1 / item2 / item3 — maka tiap kali ada produk baru kamu harus menambah variable lagi sekaligus menulis ulang kode yang menghitung jumlahnya. Dengan array (struktur data yang menyimpan banyak value berurutan dalam 1 variable), berapa pun jumlah item cukup ditampung 1 variable, dan urusan menambah atau menghapus item bisa diserahkan ke method bawaan array.

Menyusun Value dalam Array — index dan length

Array dibuat dengan menuliskan value-nya berjajar, dipisah koma, di dalam [ dan ]. Tiap value di dalamnya disebut element (value yang berjajar di dalam array). Kamu bisa mencampur string dan number, tapi dalam praktiknya value yang dideretkan berjenis sama, supaya proses berikutnya seragam.

Element yang berjajar diambil dengan menulis index-nya (posisi element, dihitung dari 0) di dalam []. Kalau kamu menulis cart[1] = "Selotip", maka hanya element di posisi itu yang diganti.

cart[0] adalah item ke-1, cart[1] adalah item ke-2. Karena item pertama ada di index 0, penomorannya selisih 1 dengan cara kita menghitung sehari-hari.

length adalah jumlah element-nya. Tulis tanpa tanda kurung, seperti cart.length. Karena index mulai dari 0, index element terakhir adalah length dikurangi 1.

at(-1) menghitung dari akhir, jadi kamu bisa mengambil element terakhir tanpa lewat length. at(-2) berarti yang ke-2 dari akhir.

Membaca index di luar jangkauan tidak menimbulkan error — yang kembali adalah undefined, value yang menandakan belum ada apa-apa di sana.

const cart = ["Buku Tulis", "Pulpen", "Selotip"];

console.log(cart[0]);        // Buku Tulis
console.log(cart[2]);        // Selotip
console.log(cart.length);    // 3

// Item terakhir ada di length dikurangi 1, atau pakai at(-1)
console.log(cart[cart.length - 1]);   // Selotip
console.log(cart.at(-1));             // Selotip

// Membaca index di luar jangkauan tidak menimbulkan error
console.log(cart[5]);        // undefined

Menambah dan Menghapus di Kedua Ujung — push / pop / shift / unshift

Isi cart berubah tiap kali ada item yang ditambah atau dihapus. Kalau array-nya kamu tulis ulang sendiri tiap kali, maka jumlah item dan tiap index harus kamu urus manual. Array punya method untuk menambah dan menghapus element di ujung depan dan belakang, jadi perhitungan posisinya bisa diserahkan ke method itu.

push(value) menambah element di akhir dan mengembalikan jumlah element setelah penambahan. pop() menghapus element terakhir dan mengembalikan element yang dihapus itu sendiri.

Kalau nama item yang dihapus mau langsung ditampilkan, tampung dulu hasil method ini (return value-nya) ke dalam variable, seperti const removed = cart.pop();.

unshift(value) dan shift() menangani bagian depan. unshift menambah di depan, dan shift menghapus dari depan. Kalau kamu menambah 1 item di depan, maka index semua element di belakangnya bertambah 1.

const cart = ["Pulpen"];

console.log(cart.push("Selotip"));   // 2 (jumlah element setelah ditambah)
console.log(cart.join(", "));           // Pulpen, Selotip

console.log(cart.pop());                // Selotip (element yang dihapus)
console.log(cart.join(", "));           // Pulpen

cart.unshift("Memo");             // tambah di depan
console.log(cart.join(", "));           // Memo, Pulpen

console.log(cart.shift());              // Memo (element yang dihapus)
console.log(cart.join(", "));           // Pulpen

Mungkin terasa aneh kalau isi cart bisa berubah padahal dideklarasikan dengan const. Yang dilarang const adalah memasukkan value lain ke nama itu, seperti cart = someOtherArray; menulis ulang isi array-nya, misalnya lewat cart.push(value), tidak dilarang. Alasan munculnya perbedaan ini dibahas lagi di artikel berikutnya.

Ikuti alurnya: tambahkan 1 item ke cart, lalu hapus lagi item itu. cart sudah dideklarasikan.

① Tambahkan Pena Bulu di akhir cart.

② Tampilkan nama item yang sekarang ada di akhir cart.

③ Tampilkan jumlah item setelah item tadi ditambahkan.

④ Hapus item terakhir, lalu tampilkan nama item yang terhapus.

⑤ Tampilkan sisa isi cart yang digabung dengan ", ".

(Kalau berjalan dengan benar, penjelasan akan muncul.)

Sisipkan tugas mendesak ke bagian depan daftar tugas hari ini. tasks sudah dideklarasikan.

① Tambahkan "Penanganan awal insiden" di depan tasks.

② Tampilkan tugasnya sesuai urutan, digabung dengan " → ".

③ Ambil tugas paling depan, lalu tampilkan nama tugas yang terambil.

④ Tampilkan tugas yang berpindah ke posisi depan setelah tugas tadi diambil.

Mengecek Apakah Sebuah Value Ada di Array — includes dan indexOf

Kalau produk yang sama kamu tambahkan lagi ke daftar favorit dengan push biasa, maka nama yang sama akan terdaftar dua kali. Kalau kamu cek dulu apakah value-nya sudah ada di array sebelum ditambahkan, duplikat seperti ini bisa dicegah.

includes(value) mengembalikan true kalau value itu ada di array, dan false kalau tidak ada. Kalau posisinya juga perlu diketahui, pakai indexOf(value), yang mengembalikan index dari kecocokan pertama. Kalau tidak ada yang cocok, hasilnya `-1`.

Cara kerjanya sama seperti includes / indexOf pada string — yang dicari element, bukan karakter.

Keduanya membandingkan value beserta type-nya, sama seperti ===, jadi value dengan type berbeda dianggap berbeda. Kalau kamu mencari string "2" di dalam array berisi number, hasilnya tetap dianggap tidak cocok.

const favorites = ["Memo", "Papan Jepit"];

console.log(favorites.includes("Memo"));   // true
console.log(favorites.includes("Penghapus"));  // false

console.log(favorites.indexOf("Papan Jepit"));   // 1
console.log(favorites.indexOf("Penghapus"));   // -1

// Membandingkan seperti ===, jadi type berbeda tidak pernah cocok
const quantities = [1, 2, 3];
console.log(quantities.includes("2"));           // false

Jangan Langsung Menaruh Hasil indexOf ke dalam Kondisi

Kalau yang cocok ditemukan di posisi paling depan, return value indexOf adalah 0. Karena 0 itu falsy, menulis if (favorites.indexOf(name)) justru membuat element paling depan dianggap "tidak ada". Kalau kamu cuma butuh jawaban ya/tidak, pakai includes; kalau memang memakai indexOf, bandingkan hasilnya secara eksplisit, misalnya !== -1.

Cek apakah produk yang mau ditambahkan ke daftar favorit sudah terdaftar. favorites / selected / newItem sudah dideklarasikan.

① Tampilkan apakah selected ada di dalam favorites.

② Tampilkan apakah newItem ada di dalam favorites.

③ Tampilkan posisi selected di dalam favorites.

④ Tampilkan posisi yang dikembalikan saat newItem dicari.

Mengambil atau Mengganti Sebagian Array — slice dan splice

Ada kalanya kamu cuma mau menampilkan 3 besar dari peringkat penjualan, atau menukar 1 entri di daftar jadwal pengiriman. Yang membedakan keduanya adalah apakah kamu mengambil sebagian tanpa mengubah array aslinya, atau justru menulis ulang array aslinya.

slice(start, end) mengembalikan array baru berisi element dari index start sampai sebelum index end. Array aslinya tidak berubah.

Kalau end dihilangkan, maka isinya diambil sampai akhir array. Cara menghitungnya sama seperti slice pada string.

splice(start, deleteCount, itemsToAdd) menulis ulang array aslinya. Sebanyak deleteCount element dihapus mulai dari start, dan kalau kamu menuliskan item tambahan, item itu disisipkan tepat di posisi tersebut.

Yang dikembalikan adalah array berisi element yang dihapus, jadi kalau yang dihapus cuma 1, isinya dibaca dengan [0].

const ranking = ["Pulpen", "Selotip", "Memo", "Papan Jepit"];

// slice mengembalikan array baru; ranking tidak berubah
const top2 = ranking.slice(0, 2);
console.log(top2.join(", "));       // Pulpen, Selotip
console.log(ranking.length);        // 4

// splice menulis ulang ranking itu sendiri
const removed = ranking.splice(1, 2, "Penghapus");
console.log(removed.join(", "));    // Selotip, Memo
console.log(ranking.join(", "));    // Pulpen, Penghapus, Papan Jepit
console.log(ranking.length);        // 3

slice dan splice Cuma Beda 1 Huruf, Tapi Hasilnya Berbeda

Namanya mirip, tapi slice menyisakan array aslinya dan mengembalikan array baru, sementara splice menulis ulang array aslinya. Kalau splice dipanggil cuma untuk menampilkan sebuah daftar, maka data aslinya berkurang sedikit tiap kali daftar itu ditampilkan. Untuk sekadar mengambil, pakai slice.

Potong rentang yang mau ditampilkan dari peringkat penjualan. ranking sudah dideklarasikan dengan 5 entri.

① Ambil 3 besar, lalu tampung ke variable terpisah.

② Tampilkan 3 entri yang diambil tadi, digabung dengan ", ".

③ Ambil semua entri mulai dari peringkat ke-4, lalu tampilkan jumlahnya.

④ Tampilkan jumlah entri di ranking aslinya.

Tukar 1 entri di daftar jadwal pengiriman. shipping sudah dideklarasikan.

① Ganti opsi ke-2 dengan "Pengiriman sore", lalu tampung element yang dihapus.

② Tampilkan nama opsi yang terhapus.

③ Tampilkan daftarnya setelah ditukar, digabung dengan ", ".

④ Tampilkan jumlah entri setelah ditukar.