Array Methods

Setelah menambah dan menghapus, kebutuhan berikutnya biasanya bersifat membaca: ambil tiga nilai teratas untuk ditampilkan, gabungkan dua katalog menjadi satu, cari posisi barang tertentu, atau ubah seluruh daftar menjadi satu baris teks untuk dicetak. Method-method di chapter ini menyelesaikan pekerjaan seperti itu tanpa mengubah array asal — sifat yang menjadikannya aman dirangkai menjadi satu alur pemrosesan.

Kita membahasnya satu per satu dengan potongan kecil, lalu merangkum semuanya dalam satu berkas lengkap di bagian akhir.

slice: Mengambil Potongan Tanpa Mengubah Asal #

slice(start, end) menyalin elemen dari index start sampai sebelum end — batas end tidak ikut disalin. Aturan batas ini sama dengan i < length pada loop: keduanya berhenti sebelum angkanya tercapai. Tanpa argumen, slice() menyalin seluruh array. Argumen negatif dihitung dari belakang, seperti at() di chapter sebelumnya.

const nilaiUjian = [70, 80, 90, 100];
console.log(nilaiUjian.slice(1, 3));
console.log(nilaiUjian.slice(-2));
console.log(nilaiUjian);

Output yang Dihasilkan:

[ 80, 90 ]
[ 90, 100 ]
[ 70, 80, 90, 100 ]

slice(1, 3) mengambil index 1 dan 2 saja — 3 tidak ikut — sehingga hasilnya dua elemen. slice(-2) mengambil dua elemen terakhir. Yang terpenting, baris terakhir menunjukkan nilaiUjian tetap utuh: slice mengembalikan array baru dan asalnya tidak tersentuh.

Ketika argumen kedua ditiadakan, slice menyalin sampai ujung array — slice(1) berarti “semua elemen mulai index 1”:

const nilaiUjian = [70, 80, 90, 100];
console.log(nilaiUjian.slice(1));

Output yang Dihasilkan:

[ 80, 90, 100 ]

slice dan splice: Jangan Tertukar #

Kedua nama ini berbeda dua huruf saja dan sering tertukar, padahal keduanya menjawab kebutuhan yang berbeda:

Cara mengingatnya tidak perlu bermain huruf: slice untuk membaca potongan tanpa risiko, splice ketika array asal memang harus diubah. Kaidah dari chapter Mengubah Array berlaku penuh: bila data asal masih dipakai bagian lain, slice adalah pilihan yang aman, dan menggabungkan keduanya pada data yang sama dalam satu alur program wajib dipikirkan dua kali.

concat: Menggabungkan Array #

concat menggabungkan array pemanggil dengan argumen-argumennya dan mengembalikan array baru. Argumennya boleh array lain maupun nilai tunggal, dan boleh lebih dari satu:

const pagi = ["Siti"];
const siang = ["Budi", "Rina"];
console.log(pagi.concat(siang, "Tono"));
console.log(pagi.length);

Output yang Dihasilkan:

[ 'Siti', 'Budi', 'Rina', 'Tono' ]
1

Nama-nama ketiga sumber tergabung berurutan dalam satu array baru, sementara pagi tetap berisi satu elemen. Sama seperti slice, method ini bekerja pada salinan — sifat yang menjadikannya cara aman menyusun daftar baru dari beberapa sumber tanpa menyentuh katalog asalnya.

indexOf dan includes: Mencari Nilai #

Dua method menjawab pertanyaan “adakah nilai ini di dalam array?”. indexOf mengembalikan index kecocokan pertama, atau -1 bila tidak ditemukan. includes mengembalikan true atau false — pilihan yang lebih terbaca ketika posisinya tidak dibutuhkan. Pencarian keduanya membedakan huruf besar dan kecil:

console.log([NaN].indexOf(NaN));
console.log([NaN].includes(NaN));

Output yang Dihasilkan:

-1
true

Contoh di atas memperlihatkan satu perbedaan mekanis yang jarang diketahui. indexOf memakai perbandingan ketat === yang menolak NaN — dan NaN memang tidak pernah sama dengan NaN, seperti sudah kita buktikan di section Values dan Types. includes memakai aturan perbandingan yang memperlakukan NaN setara dengan NaN, sehingga tetap menemukannya. Untuk daftar angka yang bisa saja berisi NaN, includes adalah pilihan yang lebih andal.

Pemakaian sehari-hari keduanya juga menjadi penyaring sederhana: menambahkan barang hanya bila includes menjawab false mencegah duplikasi di katalog tanpa perlu loop manual, sedangkan indexOf yang mengembalikan -1 dipakai ketika posisi barang perlu diketahui untuk operasi berikutnya.

join: Merangkai Menjadi Satu String #

join(pemisah) menyambung semua elemen menjadi satu string dengan pemisah di antaranya. Tanpa argumen, pemisah default-nya adalah koma. Elemen yang bukan string dikonversi otomatis:

console.log(["Budi", "Siti"].join());
console.log([25000, 15000].join("+"));

Output yang Dihasilkan:

Budi,Siti
25000+15000

Hasil join adalah string biasa — array-nya tidak berubah. Method ini lazim dipakai saat data array perlu ditampilkan sebagai baris teks, misalnya daftar nama pelanggan atau rincian tagihan. Dalam pekerjaan nyata, join muncul setiap kali isi array harus menjadi satu kalimat: daftar item pesanan pada struk, label rute "A - B - C", atau baris rekap yang disusun dari beberapa kolom. Karena hasilnya string biasa, ia bisa langsung dicetak ke console, disimpan, atau disisipkan ke teks lain tanpa perlakuan khusus.

flat dan flatMap: Meratakan Array Bersarang #

Array bisa saja berisi array lagi — data yang bersarang. flat() mengangkat satu lapis kepinggan menjadi satu array rata; kedalaman bisa diatur lewat argumen, misalnya flat(2) untuk dua lapis:

console.log([1, [2, 3], [4, [5]]].flat());
console.log([1, [2, [3]]].flat(2));

Output yang Dihasilkan:

[ 1, 2, 3, 4, [ 5 ] ]
[ 1, 2, 3 ]

Pada contoh pertama, lapis dalam [5] tetap bersarang karena flat() tanpa argumen hanya meratakan satu lapis. Contoh kedua meratakan dua lapis sehingga hasilnya seluruhnya angka. Pasangannya, flatMap, menjalankan map lalu meratakan satu lapis — praktis ketika satu elemen sumber menghasilkan beberapa elemen baru, dan bentuk flatMap(f) setara dengan map(f).flat() yang ditulis dua langkah.

Kepingan seperti ini lazim ketika satu field data memuat beberapa nilai sekaligus — satu produk dengan beberapa tag, satu pesanan dengan beberapa opsi — atau ketika data JSON dari luar tiba dalam bentuk bertingkat. Setelah diratakan, seluruh nilai bisa diproses dengan method array biasa tanpa memeriksa lapisan di setiap langkah.

Contoh Lengkap: Tujuh Method dalam Satu Berkas #

// array-methods.js
// slice, concat, indexOf, includes, join, flat, dan flatMap.

// --- 1. slice: mengambil potongan tanpa menyentuh array asal ---
const nilaiUjian = [70, 80, 90, 100];
const potongan = nilaiUjian.slice(1, 3);
console.log(potongan);
console.log(nilaiUjian);

// --- 2. concat: menggabungkan beberapa array menjadi array baru ---
const elektronik = ["Kabel", "Charger"];
const atk = ["Buku", "Pulpen"];
const katalog = elektronik.concat(atk);
console.log(katalog);
console.log(elektronik.length);

// --- 3. indexOf dan includes: mencari nilai ---
console.log(katalog.indexOf("Buku"));
console.log(katalog.indexOf("Kacamata"));
console.log(katalog.includes("Charger"));

// --- 4. join: merangkai elemen menjadi satu string ---
console.log(katalog.join(", "));
console.log(katalog.join(" - "));

// --- 5. flat: meratakan array bersarang satu lapis ---
const bersarang = [1, [2, 3], [4, [5]]];
console.log(bersarang.flat());

// --- 6. flatMap: memetakan lalu meratakan satu lapis ---
const kalimatPesanan = ["kopi susu", "teh tarik"];
const kata = kalimatPesanan.flatMap((item) => item.split(" "));
console.log(kata);

Output yang Dihasilkan:

[ 80, 90 ]
[ 70, 80, 90, 100 ]
[ 'Kabel', 'Charger', 'Buku', 'Pulpen' ]
2
2
-1
true
Kabel, Charger, Buku, Pulpen
Kabel - Charger - Buku - Pulpen
[ 1, 2, 3, 4, [ 5 ] ]
[ 'kopi', 'susu', 'teh', 'tarik' ]

Mari kita telaah baris-baris pentingnya:

1. Baris 6 (const potongan = nilaiUjian.slice(1, 3)): potongan index 1 sampai sebelum 3 menghasilkan [ 80, 90 ], dan baris berikutnya membuktikan nilaiUjian tetap empat elemen.
2. Baris 13 (const katalog = elektronik.concat(atk)): penggabungan menghasilkan array baru; elektronik.length tetap 2.
3. Baris 18–19 (katalog.indexOf(...)): "Buku" ditemukan di index 2, sedangkan "Kacamata" tidak ada sehingga keluarannya -1.
4. Baris 20 (katalog.includes("Charger")): pertanyaan keberadaan dijawab true tanpa perlu mengurus posisi.
5. Baris 23–24 (katalog.join(...)): satu array katalog dicetak dua kali dengan pemisah berbeda — ", " untuk tampilan rapi dan " - " untuk gaya lain — membuktikan pemisah sepenuhnya kita yang menentukan.
6. Baris 28 (console.log(bersarang.flat())): satu lapis kepinggan diratakan; [5] masih bersarang karena kedalaman defaultnya satu.
7. Baris 32 (kalimatPesanan.flatMap((item) => item.split(" "))): setiap kalimat dipecah menjadi array kata lewat split, lalu flatMap meratakan hasilnya — dua kalimat menjadi empat kata dalam satu array.

Perlengkapan baca-saja sudah lengkap. Chapter berikutnya naik satu tingkat: tiga method transformasi yang paling sering dipakai di pekerjaan nyata — map, filter, dan reduce — untuk mengolah satu daftar produk dari awal sampai akhir.

// array-methods.js
// slice, concat, indexOf, includes, join, flat, dan flatMap.

// --- 1. slice: mengambil potongan tanpa menyentuh array asal ---
const nilaiUjian = [70, 80, 90, 100];
const potongan = nilaiUjian.slice(1, 3);
console.log(potongan);
console.log(nilaiUjian);

// --- 2. concat: menggabungkan beberapa array menjadi array baru ---
const elektronik = ["Kabel", "Charger"];
const atk = ["Buku", "Pulpen"];
const katalog = elektronik.concat(atk);
console.log(katalog);
console.log(elektronik.length);

// --- 3. indexOf dan includes: mencari nilai ---
console.log(katalog.indexOf("Buku"));
console.log(katalog.indexOf("Kacamata"));
console.log(katalog.includes("Charger"));

// --- 4. join: merangkai elemen menjadi satu string ---
console.log(katalog.join(", "));
console.log(katalog.join(" - "));

// --- 5. flat: meratakan array bersarang satu lapis ---
const bersarang = [1, [2, 3], [4, [5]]];
console.log(bersarang.flat());

// --- 6. flatMap: memetakan lalu meratakan satu lapis ---
const kalimatPesanan = ["kopi susu", "teh tarik"];
const kata = kalimatPesanan.flatMap((item) => item.split(" "));
console.log(kata);