Javascript Game #7: Jurus #5 - Daftar Belanja Ajaib (Array)

Javascript Game #7:
Jurus #5: Daftar Belanja Ajaib (Array)

😂 Joke pembuka: "Kenapa array nggak pernah kesepian? Karena dia selalu punya banyak elemen (temen)!" - Array Lovers 2024

Hai petualang JavaScript! Sejauh ini kita cuma menyimpan satu barang di satu kotak (variabel). Tapi bagaimana kalau kita mau menyimpan banyak barang sekaligus, seperti daftar belanja, daftar musuh di game, atau daftar skor tertinggi? Nah, itu gunanya ARRAY!

📦📦📦

Rak Kotak

Array itu seperti rak yang punya banyak kotak berjajar. Setiap kotak bisa diisi barang berbeda.

📃

Daftar Belanja

Kamu punya daftar belanja: Susu, Roti, Telur. Itu array!

🎮

Daftar Musuh

Di game, kita simpan daftar musuh dalam array.

CARA MEMBUAT ARRAY (DAFTAR AJAIB)

Array dibuat dengan kurung siku [ ], dan isinya dipisah koma.

// Array kosong
let daftarBelanja = [];

// Array berisi beberapa item
let buah = ["apel", "mangga", "jeruk"];
let angka = [10, 20, 30, 40];
let campur = ["Budi", 10, true, "JavaScript"]; // isi bisa campur!

🔍 MENGAKSES ISI ARRAY (NOMOR URUT DIMULAI DARI 0!)

Setiap item punya nomor urut yang disebut indeks. Indeks pertama adalah 0, kedua 1, ketiga 2, dst.

Misal array: let buah = ["apel", "mangga", "jeruk"];

• buah[0] isinya "apel" (indeks 0)
• buah[1] isinya "mangga" (indeks 1)
• buah[2] isinya "jeruk" (indeks 2)

// Cara akses
let buah = ["apel", "mangga", "jeruk"];
console.log(buah[0]); // apel
console.log(buah[1]); // mangga
console.log(buah[2]); // jeruk

// Ganti isi
buah[1] = "pisang"; // sekarang buah[1] jadi "pisang"
console.log(buah); // ["apel", "pisang", "jeruk"]

😂 Joke: "Indeks array itu kayak anak pertama: selalu dimulai dari 0, bukan 1. Jadi yang lahir pertama itu anak ke-0!"

MENAMBAH DAN MENGHAPUS ITEM

Kita bisa menambah item ke belakang dengan push(), menghapus item terakhir dengan pop(), dan masih banyak lagi.

let hewan = ["kucing", "anjing"];

// Tambah item di akhir
hewan.push("kelinci"); // hewan jadi ["kucing", "anjing", "kelinci"]

// Hapus item terakhir
hewan.pop(); // hapus "kelinci", hewan kembali ke ["kucing", "anjing"]

// Lihat panjang array (jumlah item)
console.log(hewan.length); // 2

🧪 LABORATORIUM DAFTAR AJAIB

Kita punya daftar buah awal: apel, mangga, jeruk. Coba mainkan tombol di bawah!

["apel", "mangga", "jeruk"]

Cek juga di console (F12) untuk lihat detail!

CONTOH ARRAY DI GAME

Di game, array digunakan untuk menyimpan daftar musuh, item, atau skor pemain.

// Daftar musuh di level 1
let musuh = ["👾 Goomba", "🐢 Koopa", "🍄 Mushroom"];

// Daftar item yang sudah dikumpulkan
let inventaris = [];
inventaris.push("🏹 Panah");
inventaris.push("🛡️ Perisai");
console.log(inventaris); // ["🏹 Panah", "🛡️ Perisai"]

// Daftar skor tertinggi
let skorTertinggi = [1500, 1200, 900, 700];
let skorBaru = 1350;
// Cek apakah skor baru masuk 3 besar? (kita akan pelajari nanti)

ITERASI ARRAY (MENELUSURI SATU PER SATU)

Kita bisa menelusuri semua isi array dengan perulangan (akan dipelajari di jurus berikutnya). Tapi untuk sekarang, kita coba dengan for sederhana.

let buah = ["apel", "mangga", "jeruk"];

for (let i = 0; i < buah.length; i++) {
  console.log("Buah ke-" + i + ": " + buah[i]);
}

Coba jalankan di console!

😂 Joke: "Array itu setia, dia selalu push dan pop buat kamu, tapi jangan coba-coba shift atau unshift kalau belum belajar!"

PRAKTEK DI CONSOLE

Buka console (F12) dan coba kode berikut.

// Buat array makanan favoritmu
let makanan = ["nasi goreng", "sate", "bakso"];
console.log(makanan[0]); // nasi goreng

// Tambah makanan baru
makanan.push("mie ayam");
console.log(makanan);

// Hapus makanan terakhir
makanan.pop();
console.log(makanan);

// Cek panjang array
console.log(makanan.length);

MISI JAGOAN ARRAY

1. Buat file HTML baru: array_ku.html.
2. Di dalam <script>, buat array let hewanPeliharaan = ["kucing", "anjing", "kelinci"];.
3. Tampilkan hewan pertama dengan alert.
4. Ubah hewan kedua menjadi "hamster".
5. Tambah hewan baru "ikan" dengan push().
6. Tampilkan seluruh isi array dengan console.log() dan juga dengan for (coba looping sederhana).
7. Coba hapus hewan terakhir dengan pop(), lalu tampilkan lagi.

📸 Screenshot hasil console-mu, tunjukkan ke guru atau orang tua!

📝 RANGKUMAN SERU

• Array adalah daftar yang bisa menyimpan banyak data.
• Buat array dengan [], isi dipisah koma.
• Nomor urut (indeks) dimulai dari 0.
• Akses isi: array[indeks].
• Tambahkan item di akhir dengan push(), hapus item terakhir dengan pop().
• Panjang array: array.length.
• Array sangat berguna di game untuk menyimpan daftar musuh, item, skor, dll.

Javascript Game #7 selesai! Besok kita belajar Jurus #6: Si Pengulang Tanpa Bos (Loop). Siap-siap bikin perulangan yang kuat!

Ada pertanyaan? Tulis di komentar atau tanya kakak/guru.