Membuat Array

Ketika Budi, pemilik toko serba ada, menyiapkan daftar belanja untuk supplier, isinya jarang hanya satu barang: beras, minyak goreng, telur, lalu besok bertambah gula dan kopi. Memakai satu variabel untuk tiap barang — barang1, barang2, barang3, dan seterusnya — membuat program cepat penuh deklarasi, dan memproses daftar itu secara keseluruhan (mencetak semuanya, menghitung jumlahnya) menjadi melelahkan. Yang kita butuhkan adalah satu wadah yang menampung banyak nilai sekaligus dalam urutan yang jelas.

JavaScript menyediakan wadah itu dengan nama array. Chapter ini membedah tiga cara membuat array: array literal [...] yang menjadi pilihan utama sehari-hari, konstructor Array() yang menyimpan satu jebakan klasik, dan Array.of() yang perilakunya konsisten.

Array Literal: Cara Baku Membuat Array #

Aturannya sederhana: tulis elemen-elemen di dalam tanda [ dan ], dipisahkan koma. Di balik layar, engine membentuk koleksi terurut — setiap nilai menempati satu posisi bernama index yang dimulai dari 0 — dan menyimpan jumlah elemennya pada properti length. Berbeda dengan string yang isinya beku, array dirancang untuk diubah: elemen boleh ditambah atau dilepas kapan saja, dan length ikut menyesuaikan.

const daftarBelanja = ["Beras", "Minyak Goreng", "Telur"];
console.log(daftarBelanja);
console.log(daftarBelanja.length);

// Satu array boleh menampung tipe berbeda.
const dataPelanggan = ["Siti", 27, true];
console.log(dataPelanggan.length);

// Array kosong juga sah: wadah siap diisi kemudian.
const keranjang = [];
console.log(keranjang.length);

Output yang Dihasilkan:

[ 'Beras', 'Minyak Goreng', 'Telur' ]
3
3
0

Mari kita telaah baris-baris pentingnya:

1. Baris 1 (const daftarBelanja = ["Beras", ...]): array literal dengan tiga elemen string. Tanda [ dan ] menandai batas array, sedangkan koma memisahkan antarelemen.
2. Baris 2 (console.log(daftarBelanja)): Node mencetak array beserta tanda [ ]-nya, dan setiap string ditampilkan diapit kutip tunggal — itu cara Node menampilkan isi array, bukan bagian dari data.
3. Baris 3 (console.log(daftarBelanja.length)): properti length berisi jumlah elemen, bukan posisi terakhir. Tiga elemen menghasilkan angka 3.
4. Baris 6 (dataPelanggan.length): satu array boleh berisi tipe campuran — string, number, bahkan boolean. Kemampuan ini sah menurut JavaScript, tetapi daftar yang isinya satu jenis (semua nama, semua harga) lebih mudah diproses dengan method yang kita pelajari sepanjang section ini.
5. Baris 10 (keranjang.length): [] tanpa isi menghasilkan array kosong yang sah, dengan length bernilai 0. Pola ini dipakai ketika data baru akan dikumpulkan secara bertahap.

Jebakan Konstructor Array(n) #

Cara kedua memakai konstructor: Array(...). Konstructor ini boleh dipanggil dengan kata new maupun tanpa new — hasilnya sama. Masalahnya ada pada jumlah argumen, karena satu argumen dan banyak argumen punya makna yang berbeda total:

const slotKosong = Array(3); // satu argumen angka
console.log(slotKosong);
console.log(slotKosong.length);
console.log(slotKosong[0]);

const isiLengkap = Array(3, 7); // dua argumen
console.log(isiLengkap);

Output yang Dihasilkan:

[ <3 empty items> ]
3
undefined
[ 3, 7 ]

Berkas di atas memperlihatkan dua wajah Array():

1. Baris 1 (const slotKosong = Array(3)): satu argumen angka berarti “buat array dengan panjang 3”, bukan “buat array berisi angka 3”. Hasilnya array dengan tiga slot kosong.
2. Baris 2 (console.log(slotKosong)): Node menampilkan array itu sebagai [ <3 empty items> ] — panjangnya 3, tetapi tidak ada satu pun elemen berisi. Array seperti ini disebut sparse (berlubang).
3. Baris 4 (console.log(slotKosong[0])): membaca slot kosong menghasilkan undefined, persis seperti membaca index di luar jangkauan. Beberapa method array juga memperlakukan lubang kosong secara berbeda dari elemen biasa.
4. Baris 7 (const isiLengkap = Array(3, 7)): begitu argumennya dua atau lebih, maknanya berubah total — argumen-argumen itu menjadi isi array. Hasilnya [ 3, 7 ].

Dua makna dalam satu constructor inilah sumber kebingungan klasik: Array(3) dan Array(3, 7) terlihat serupa, tetapi satu mengatur panjang dan satunya mengisi data.

Array.of: Selalu Isi, Bukan Jumlah #

Array.of adalah pembuatan array modern yang dirancang untuk menutup ambiguitas tadi. Berapa pun jumlah argumennya, argumen tersebut selalu menjadi isi array:

console.log(Array.of(3));
console.log(Array.of(3, 7, 10));
console.log(Array.of("Siti", "Budi"));

Output yang Dihasilkan:

[ 3 ]
[ 3, 7, 10 ]
[ 'Siti', 'Budi' ]

Tidak ada perubahan perilaku ketika jumlah argumen berganti dari satu menjadi banyak. Karena itu, ketika kita memang butuh bentuk constructor — misalnya di dalam kode generik yang meneruskan argumen — Array.of adalah pilihan yang lebih aman daripada Array.

Kapan Literal, Kapan Constructor #

Dengan tiga cara di atas, keputusannya menjadi sederhana bila kita bertanya: apakah isi array sudah diketahui saat kode ditulis?

Tiga baris tabel itu menutupi hampir semua pembuatan array di program nyata. Array(n) tetap punya tempat yang sah — menyiapkan wadah berpanjang tertentu untuk diisi berdasarkan posisi — tetapi risiko salah makna jauh lebih besar daripada manfaatnya pada tahap pembelajaran ini, dan kebutuhan serupa bisa ditunda sampai benar-benar muncul.

Satu kebiasaan penamaan juga membantu: beri array nama bentuk jamak — daftarBelanja, produk, hargaBarang — sehingga pembaca kode langsung tahu bahwa variabel itu menampung banyak nilai. Konvensi kecil ini terasa berguna begitu array mulai disalurkan ke method seperti map dan filter di chapter-chapter berikutnya.

Terakhir, ingat kembali sifat campuran tipe yang kita lihat di awal chapter: JavaScript memperbolehkannya, tetapi array yang isinya satu jenis — semua string, semua angka, semua object produk — memudahkan kita menerapkan operasi yang sama ke seluruh elemen. Array campuran memaksa setiap pemrosesan memeriksa tipe satu per satu, dan kesalahan tipe pun lebih mudah tersembunyi.

Contoh Lengkap: Tiga Cara dalam Satu Berkas #

Berkas berikut merangkum ketiga cara membuat array yang sudah kita bahas:

// membuat-array.js
// Tiga cara membuat array: literal [], konstructor Array, dan Array.of.

// --- 1. Array literal: cara utama yang dipakai sehari-hari ---
const daftarBelanja = ["Beras", "Minyak Goreng", "Telur"];
console.log(daftarBelanja);
console.log(daftarBelanja.length);

// Array kosong juga sah: wadah siap diisi kemudian.
const keranjang = [];
console.log(keranjang.length);

// --- 2. Konstructor Array: dua wajah yang berbeda ---
const hasilJebakan = Array(3); // satu argumen angka -> tiga slot kosong
console.log(hasilJebakan);
console.log(hasilJebakan.length);

const duaNilai = Array(3, 7);  // lebih dari satu argumen -> isinya argumen itu
console.log(duaNilai);

// --- 3. Array.of: perilaku konsisten apa pun jumlah argumennya ---
const dariSatu = Array.of(3);
console.log(dariSatu);

const dariTiga = Array.of(3, 7, 10);
console.log(dariTiga);

Output yang Dihasilkan:

[ 'Beras', 'Minyak Goreng', 'Telur' ]
3
0
[ <3 empty items> ]
3
[ 3, 7 ]
[ 3 ]
[ 3, 7, 10 ]

Mari kita telaah baris-baris pentingnya:

1. Baris 4 (const daftarBelanja = ["Beras", "Minyak Goreng", "Telur"]): array literal, cara baku yang akan kita pakai hampir di semua contoh berikutnya.
2. Baris 10 (const keranjang = []): array kosong; length-nya 0 dan siap diisi lewat method di chapter berikutnya.
3. Baris 14 (const hasilJebakan = Array(3)): satu argumen angka menghasilkan array berpanjang 3 tanpa isi, tercetak sebagai [ <3 empty items> ].
4. Baris 18 (const duaNilai = Array(3, 7)): dua argumen menjadi isi array — [ 3, 7 ]. Bandingkan dengan baris 14 untuk melihat perubahan maknanya.
5. Baris 22 (const dariSatu = Array.of(3)): Array.of konsisten; satu argumen menghasilkan [ 3 ], bukan array berpanjang 3.
6. Baris 25 (const dariTiga = Array.of(3, 7, 10)): banyak argumen tetap menjadi isi, sehingga keluarannya [ 3, 7, 10 ].

Tiga cara membuat array sudah di tangan kita. Wadah yang sudah dibuat sekarang perlu dibaca: chapter berikutnya membahas cara mengambil elemen lewat index, membaca dari belakang dengan at(), dan menelusuri seluruh array dengan loop.

// membuat-array.js
// Tiga cara membuat array: literal [], konstructor Array, dan Array.of.

// --- 1. Array literal: cara utama yang dipakai sehari-hari ---
const daftarBelanja = ["Beras", "Minyak Goreng", "Telur"];
console.log(daftarBelanja);
console.log(daftarBelanja.length);

// Array kosong juga sah: wadah siap diisi kemudian.
const keranjang = [];
console.log(keranjang.length);

// --- 2. Konstructor Array: dua wajah yang berbeda ---
const hasilJebakan = Array(3); // satu argumen angka -> tiga slot kosong
console.log(hasilJebakan);
console.log(hasilJebakan.length);

const duaNilai = Array(3, 7);  // lebih dari satu argumen -> isinya argumen itu
console.log(duaNilai);

// --- 3. Array.of: perilaku konsisten apa pun jumlah argumennya ---
const dariSatu = Array.of(3);
console.log(dariSatu);

const dariTiga = Array.of(3, 7, 10);
console.log(dariTiga);