Mengakses Elemen

Siti, kasir di toko Budi, menerima pertanyaan yang sama setiap pagi: apa saja yang ada di rak, dan apa yang tersimpan di posisi paling belakang? Ketika isi rak tersimpan sebagai array, menjawab kedua pertanyaan itu berarti membaca elemen array. Membaca adalah operasi array yang paling sering dilakukan — sebelum menambah, mengubah, atau mengurutkan, kita selalu perlu mengambil nilainya dulu.

Chapter ini membahas cara membaca satu elemen lewat index, cara modern at() untuk posisi yang dihitung dari belakang, properti length untuk mengetahui jumlah isi, lalu dua bentuk loop yang menelusuri seluruh array: for yang sudah kita kenal dan for...of yang baru kita perkenalkan di sini.

Index: Alamat Setiap Elemen #

Aturan dasarnya: index array dimulai dari 0, dan elemen dibaca dengan tanda kurung siku — array[index]. Di balik layar, engine menghitung posisi memori berdasarkan index itu dan mengembalikan nilai yang tersimpan di sana. Yang menarik, JavaScript tidak memberi error ketika index tidak ada; pembacaan di luar jangkauan mengembalikan undefined:

const rakBuku = ["Puisi", "Novel", "Komik", "Ensiklopedia"];
console.log(rakBuku[0]);
console.log(rakBuku[3]);

// Index yang tidak ada menghasilkan undefined, bukan error.
console.log(rakBuku[10]);
console.log(rakBuku[-1]);

Output yang Dihasilkan:

Puisi
Ensiklopedia
undefined
undefined

Dua baris pertama menunjukkan rakBuku[0] menghasilkan "Puisi" dan rakBuku[3] menghasilkan "Ensiklopedia" — empat elemen menempati index 0 sampai 3. Dua baris terakhir sama-sama menghasilkan undefined: index 10 berada di luar panjang array, sedangkan -1 bukan index yang sah karena tidak ada elemen bernomor negatif. undefined yang diam-diam inilah sumber bug halus; nilai yang seharusnya diproses ternyata tidak ada, dan program tetap berjalan tanpa suara.

at() untuk Membaca dari Belakang #

Sering kali yang dibutuhkan bukan posisi dari depan, melainkan elemen terakhir atau elemen kedua dari belakang. Menghitung manual — array[array.length - 2] — sah tetapi ramai. Method at() menyediakan jalan pintas: index negatif dihitung dari akhir array.

const hargaRak = [15000, 25000, 8000];
console.log(hargaRak.at(-1));
console.log(hargaRak.at(-2));
console.log(hargaRak.at(-10));

Output yang Dihasilkan:

8000
25000
undefined

at(-1) membaca elemen terakhir, at(-2) membaca satu posisi sebelum akhir, dan at(-10) — di luar jangkauan — menghasilkan undefined seperti pembacaan index biasa yang tidak ada. Untuk index non-negatif, at() berperilaku sama persis dengan tanda kurung siku; keunggulannya hanya pada dukungan angka negatif. Pertukarannya: tanda kurung siku tetap dipakai ketika index dikomposisi dari variabel dan operasi lain.

length dan Elemen Terakhir #

Properti length berisi jumlah elemen, bukan posisi terakhir. Dua fakta mengikuti aturan itu. Pertama, index terakhir selalu length - 1. Kedua, array kosong memiliki length bernilai 0, sehingga pembacaan apa pun atasnya menghasilkan undefined:

const kosong = [];
console.log(kosong.length);
console.log(kosong[0]);

Output yang Dihasilkan:

0
undefined

Dengan dua aturan itu, seluruh bentuk pembacaan tunggal bisa dirangkum dalam satu tabel — dan setiap barisnya sudah kita buktikan di chapter ini:

Pola array[array.length - 1] — alternatif tanpa at() — akan kita pakai di berkas utama chapter ini. Properti length juga akan muncul terus di loop: batas atas penelusuran hampir selalu ditulis i < array.length.

Menelusuri Array dengan for dan for…of #

Membaca satu per satu dengan index terasa bertele-tele ketika semua elemen perlu diproses. Dua loop menyelesaikannya. Loop for dari section Control Flow memakai pola baku yang sudah kita latih — mulai 0, berhenti sebelum length. Loop for...of adalah bentuk baru untuk kita: engine mengambil satu elemen per putaran, dari awal sampai habis, dan variabel deklarasi langsung berisi elemennya — bukan posisinya. Karena itu for...of tidak menyediakan index; bila posisi dibutuhkan, gunakan for.

// mengakses-elemen.js
// Membaca isi array: index, at(), length, serta loop for dan for...of.

const rakBuku = ["Puisi", "Novel", "Komik", "Ensiklopedia"];

// --- 1. Index dimulai dari 0 ---
console.log(rakBuku[0]);
console.log(rakBuku[3]);

// Index di luar jangkauan bukan error, melainkan undefined.
console.log(rakBuku[10]);
console.log(rakBuku[-1]);

// --- 2. at() menerima index negatif, dihitung dari belakang ---
console.log(rakBuku.at(-1));
console.log(rakBuku.at(-2));

// --- 3. length: jumlah elemen yang tersimpan ---
console.log(rakBuku.length);
console.log(rakBuku[rakBuku.length - 1]);

// --- 4. for dengan index: saat posisi dibutuhkan ---
for (let i = 0; i < rakBuku.length; i++) {
  console.log(`Rak ${i}: ${rakBuku[i]}`);
}

// --- 5. for...of: langsung berisi elemennya ---
for (const judul of rakBuku) {
  console.log(`Judul: ${judul}`);
}

Output yang Dihasilkan:

Puisi
Ensiklopedia
undefined
undefined
Ensiklopedia
Komik
4
Ensiklopedia
Rak 0: Puisi
Rak 1: Novel
Rak 2: Komik
Rak 3: Ensiklopedia
Judul: Puisi
Judul: Novel
Judul: Komik
Judul: Ensiklopedia

Mari kita telaah baris-baris pentingnya:

1. Baris 7–8 (console.log(rakBuku[0]) dan rakBuku[3]): pembacaan index paling dasar — elemen pertama ada di 0, elemen keempat ada di 3.
2. Baris 11–12 (rakBuku[10] dan rakBuku[-1]): dua bentuk index yang tidak sah, dan keduanya menghasilkan undefined tanpa error.
3. Baris 15–16 (rakBuku.at(-1) dan rakBuku.at(-2)): at() dengan angka negatif membaca dari belakang — "Ensiklopedia" lalu "Komik" — tanpa perlu menyebut length.
4. Baris 19–20 (rakBuku.length dan rakBuku[rakBuku.length - 1]): length bernilai 4, sehingga length - 1 adalah 3, dan rakBuku[3] menghasilkan elemen terakhir.
5. Baris 23 (for (let i = 0; i < rakBuku.length; i++)): pola baku penelusuran array. Kondisi i < length menjamin index terakhir yang dikunjungi adalah 3, tepat elemen terakhir — hindari <= agar tidak membaca satu posisi lebih.
6. **Baris 24 (console.log(\Rak ${i}: ${rakBuku[i]}`))**: di dalam for, variabel i` tersedia sehingga posisi bisa ditampilkan bersama elemennya.
7. Baris 28 (for (const judul of rakBuku)): for...of membuang urusan index. Setiap putaran, judul berisi satu elemen dari rakBuku, berurutan dari "Puisi" sampai "Ensiklopedia".

for atau for…of: Memilih Bentuk Penelusuran #

Kedua loop mengunjungi elemen yang sama dalam urutan yang sama, sehingga pilihannya menyangkut kejelasan maksud, bukan kebenaran hasil. Loop for paling tepat ketika posisi ikut berperan: menomori daftar untuk manusia, mengganti elemen pada index tertentu, atau melompat dua langkah sekaligus. Loop for...of paling tepat ketika setiap elemen cukup diproses apa adanya — mencetak, menjumlah, atau memeriksa isi.

Ada satu sinyal yang berguna saat membaca ulang kode sendiri: bila loop for di dalam bloknya hanya memakai daftar[i] dan i tidak dipakai untuk tujuan lain, for...of yang lebih pas. Sebaliknya, kebutuhan i + 1 untuk label “Peserta ke-1” adalah alasan sah mempertahankan for, seperti yang sudah kita latih di section Control Flow.

Keduanya berhenti otomatis pada batas array dan keduanya tidak mengubah isi — penelusuran adalah operasi baca. Satu pengecualian yang perlu dihindari: menambah atau melepas elemen dari array yang sedang ditelusuri membuat length berubah di tengah jalan, dan batas loop ikut bergeser tanpa peringatan. Pola yang lebih aman adalah menelusuri dulu, mencatat yang perlu diubah, lalu mengubahnya setelah loop selesai — pendekatan yang method-method chapter berikutnya buat makin mudah.

Membaca sudah lancar. Langkah berikutnya adalah mengubah isi: menambah barang di keranjang, melepas pesanan yang salah, dan menyisipkan tugas di tengah daftar — semuanya topik chapter Mengubah Array.

// mengakses-elemen.js
// Membaca isi array: index, at(), length, serta loop for dan for...of.

const rakBuku = ["Puisi", "Novel", "Komik", "Ensiklopedia"];

// --- 1. Index dimulai dari 0 ---
console.log(rakBuku[0]);
console.log(rakBuku[3]);

// Index di luar jangkauan bukan error, melainkan undefined.
console.log(rakBuku[10]);
console.log(rakBuku[-1]);

// --- 2. at() menerima index negatif, dihitung dari belakang ---
console.log(rakBuku.at(-1));
console.log(rakBuku.at(-2));

// --- 3. length: jumlah elemen yang tersimpan ---
console.log(rakBuku.length);
console.log(rakBuku[rakBuku.length - 1]);

// --- 4. for dengan index: saat posisi dibutuhkan ---
for (let i = 0; i < rakBuku.length; i++) {
  console.log(`Rak ${i}: ${rakBuku[i]}`);
}

// --- 5. for...of: langsung berisi elemennya ---
for (const judul of rakBuku) {
  console.log(`Judul: ${judul}`);
}