Array dan Object JavaScript: Mengelola Sekumpulan Data

Halo, Gabuters!

Pada artikel sebelumnya, kita sudah belajar tentang function JavaScript. Kita memahami cara membuat kode yang bisa digunakan kembali, menerima parameter, dan mengembalikan hasil menggunakan return.

Sekarang bayangkan kita sedang mengembangkan website BapakGabut.

Website kita mempunyai banyak artikel. Setiap artikel memiliki judul, kategori, jumlah pembaca, dan status publikasi.

Kalau setiap informasi disimpan dalam variabel terpisah, kode kita akan cepat menjadi panjang.

Contohnya:

1
const judulArtikel1 = "Belajar HTML";
2
const judulArtikel2 = "Belajar CSS";
3
const judulArtikel3 = "Belajar JavaScript";

Untuk tiga artikel mungkin masih bisa dikelola.

Tetapi bagaimana kalau jumlahnya mencapai 100 artikel?

Kita membutuhkan cara yang lebih praktis untuk menyimpan dan mengolah sekumpulan data.

Di JavaScript, dua struktur yang paling sering digunakan untuk kebutuhan tersebut adalah array dan object.

Pada artikel ini, kita akan mempelajari keduanya dari dasar, kemudian mencoba mengolah daftar artikel menggunakan forEach(), map(), dan filter().

1. Apa Itu Array?#

Array adalah object khusus dalam JavaScript yang digunakan untuk menyimpan kumpulan nilai secara berurutan.

Contohnya:

1
const kategori = ["HTML", "CSS", "JavaScript"];

Dalam satu variabel, kita menyimpan tiga nilai sekaligus.

Nilai-nilai tersebut disebut elemen array.

Kita bisa menampilkan seluruh isinya:

1
console.log(kategori);

Hasilnya akan terlihat seperti:

1
["HTML", "CSS", "JavaScript"]

Array tidak harus berisi string.

Contohnya:

1
const jumlahArtikel = [5, 6, 8];
2
const status = [true, false, true];

JavaScript bahkan memungkinkan satu array berisi beberapa tipe data berbeda.

1
const dataCampuran = ["BapakGabut", 10, true];

Namun, untuk data yang mempunyai tujuan serupa, menggunakan struktur yang konsisten biasanya lebih mudah dipahami dan dipelihara.

2. Mengakses Elemen Array#

Setiap elemen array memiliki posisi yang disebut index.

Index array JavaScript dimulai dari 0, bukan 1.

Contohnya:

1
const kategori = ["HTML", "CSS", "JavaScript"];

Posisinya:

Index	Nilai
0	HTML
1	CSS
2	JavaScript

Untuk mengambil nilai berdasarkan index, gunakan tanda kurung siku.

1
console.log(kategori[0]);
2
console.log(kategori[1]);
3
console.log(kategori[2]);

Hasilnya:

1
HTML
2
CSS
3
JavaScript

Jika kita mencoba mengakses index yang tidak tersedia:

1
console.log(kategori[10]);

Hasilnya:

1
undefined

Ini berbeda dengan beberapa bahasa pemrograman yang langsung menghasilkan error ketika index berada di luar batas.

Mengubah nilai array#

Elemen array juga dapat diubah.

1
const kategori = ["HTML", "CSS", "JavaScript"];
2

3
kategori[1] = "CSS Dasar";
4

5
console.log(kategori);

Hasilnya:

1
["HTML", "CSS Dasar", "JavaScript"]

Walaupun variabel kategori dibuat menggunakan const, elemen di dalam array masih dapat diubah.

const mencegah kita memberikan array baru kepada variabel tersebut, tetapi tidak otomatis membuat isi array menjadi tidak dapat dimodifikasi.

3. Mengenal length dan Method Dasar Array#

Array mempunyai properti length untuk mengetahui panjangnya.

1
const kategori = ["HTML", "CSS", "JavaScript"];
2

3
console.log(kategori.length);

Hasilnya:

1
3

Kita juga bisa menggunakan length untuk mengambil elemen terakhir pada array yang tidak kosong.

1
console.log(kategori[kategori.length - 1]);

Hasilnya:

1
JavaScript

Sekarang kita kenal beberapa method dasar.

push(): Menambahkan elemen di akhir#

1
const kategori = ["HTML", "CSS"];
2

3
kategori.push("JavaScript");
4

5
console.log(kategori);

Hasilnya:

1
["HTML", "CSS", "JavaScript"]

pop(): Menghapus elemen terakhir#

1
const kategori = ["HTML", "CSS", "JavaScript"];
2

3
const terakhir = kategori.pop();
4

5
console.log(terakhir);
6
console.log(kategori);

Hasilnya:

1
JavaScript
2
["HTML", "CSS"]

pop() mengembalikan elemen yang dihapus.

includes(): Memeriksa keberadaan nilai#

1
const kategori = ["HTML", "CSS", "JavaScript"];
2

3
console.log(kategori.includes("CSS"));
4
console.log(kategori.includes("Python"));

Hasilnya:

1
true
2
false

includes() berguna ketika kita ingin mengetahui apakah sebuah nilai tersedia dalam array.

Untuk nilai primitif seperti string, pemeriksaannya relatif mudah. Untuk object, kita perlu memahami bahwa perbandingannya berdasarkan identitas referensi.

4. Mengulang Isi Array dengan for#

Pada artikel perulangan JavaScript, kita sudah belajar menggunakan for.

Sekarang kita gunakan untuk mengakses seluruh elemen array.

1
const kategori = ["HTML", "CSS", "JavaScript"];
2

3
for (let i = 0; i < kategori.length; i++) {
4
  console.log(kategori[i]);
5
}

Hasilnya:

1
HTML
2
CSS
3
JavaScript

Perhatikan kondisi:

1
i < kategori.length

Karena index dimulai dari 0, kita menggunakan <, bukan <=.

Jika menggunakan <=, iterasi terakhir akan mencoba mengakses index yang tidak tersedia.

Menggunakan for…of#

Untuk membaca nilai elemen tanpa membutuhkan index, kita bisa menggunakan for...of.

1
const kategori = ["HTML", "CSS", "JavaScript"];
2

3
for (const namaKategori of kategori) {
4
  console.log(namaKategori);
5
}

Hasilnya sama.

for...of sering terasa lebih sederhana ketika kita hanya membutuhkan nilai dari setiap elemen.

5. Mengenal Object#

Sekarang bayangkan satu artikel memiliki beberapa informasi.

Misalnya:

Judul artikel.
Kategori.
Jumlah pembaca.
Status publikasi.

Kita bisa menyimpannya menggunakan object.

1
const artikel = {
2
  judul: "Belajar JavaScript",
3
  kategori: "Programming",
4
  pembaca: 150,
5
  sudahTerbit: true
6
};

Object menyimpan pasangan property key dan value.

Pada contoh tersebut:

judul adalah key dengan nilai "Belajar JavaScript".
kategori adalah key dengan nilai "Programming".
pembaca adalah key dengan nilai 150.
sudahTerbit adalah key dengan nilai true.

Dengan object, informasi yang saling berkaitan dapat dikelompokkan dalam satu struktur.

6. Mengakses dan Mengubah Properti Object#

Ada dua cara umum untuk mengakses properti object.

Dot notation#

1
const artikel = {
2
  judul: "Belajar JavaScript",
3
  pembaca: 150
4
};
5

6
console.log(artikel.judul);
7
console.log(artikel.pembaca);

Hasilnya:

1
Belajar JavaScript
2
150

Bracket notation#

Kita juga bisa menggunakan tanda kurung siku.

1
console.log(artikel["judul"]);

Hasilnya:

1
Belajar JavaScript

Bracket notation berguna ketika nama properti disimpan dalam variabel.

1
const namaProperti = "pembaca";
2

3
console.log(artikel[namaProperti]);

Hasilnya:

1
150

Perhatikan perbedaannya:

1
artikel.namaProperti

Mencari properti yang secara harfiah bernama namaProperti.

Sedangkan:

1
artikel[namaProperti]

Menggunakan isi variabel namaProperti sebagai nama key.

Mengubah properti#

1
const artikel = {
2
  judul: "Belajar JavaScript",
3
  pembaca: 150
4
};
5

6
artikel.pembaca = 200;
7

8
console.log(artikel.pembaca);

Hasilnya:

1
200

Menambahkan properti#

1
artikel.sudahTerbit = true;
2

3
console.log(artikel.sudahTerbit);

Hasilnya:

1
true

Seperti array, object yang disimpan dalam variabel const masih bisa mengalami perubahan pada propertinya.

7. Perbedaan Array dan Object#

Keduanya sama-sama dapat menyimpan kumpulan data, tetapi digunakan untuk kebutuhan yang berbeda.

Array	Object
Menyimpan elemen secara berurutan	Menyimpan properti berdasarkan key
Umumnya diakses menggunakan index	Umumnya diakses menggunakan nama properti
Cocok untuk daftar nilai	Cocok untuk menggambarkan satu entitas
Contoh: daftar kategori	Contoh: detail satu artikel

Misalnya:

1
const kategori = ["HTML", "CSS", "JavaScript"];

Cocok menggunakan array karena berisi daftar kategori.

Sedangkan:

1
const artikel = {
2
  judul: "Belajar JavaScript",
3
  kategori: "Programming"
4
};

Cocok menggunakan object karena menggambarkan satu artikel.

Dalam praktiknya, kita sering menggabungkan keduanya.

8. Array Berisi Object#

Sekarang kita mulai membuat struktur data yang lebih realistis.

Bayangkan website BapakGabut mempunyai beberapa artikel.

Kita bisa menyimpannya seperti ini:

1
const daftarArtikel = [
2
  {
3
    judul: "Belajar HTML",
4
    kategori: "HTML",
5
    pembaca: 120,
6
    sudahTerbit: true
7
  },
8
  {
9
    judul: "Belajar CSS",
10
    kategori: "CSS",
11
    pembaca: 90,
12
    sudahTerbit: true
13
  },
14
  {
15
    judul: "Belajar JavaScript",
16
    kategori: "JavaScript",
17
    pembaca: 0,
18
    sudahTerbit: false
19
  }
20
];

Perhatikan strukturnya.

Bagian terluar menggunakan [], artinya kita mempunyai array.

Setiap elemen di dalamnya menggunakan {}, artinya setiap elemen merupakan object.

Dengan struktur ini, kita bisa menyimpan banyak artikel tanpa harus membuat variabel terpisah untuk setiap artikel.

Untuk mengakses artikel pertama:

1
console.log(daftarArtikel[0]);

Untuk mengambil judul artikel pertama:

1
console.log(daftarArtikel[0].judul);

Hasilnya:

1
Belajar HTML

Struktur array berisi object sangat sering digunakan dalam pengembangan aplikasi.

Nanti, ketika kita mulai mengambil data dari API, bentuk data seperti ini juga akan sering ditemui.

9. Menggunakan forEach()#

Sekarang kita ingin menampilkan judul seluruh artikel.

Kita bisa menggunakan for, tetapi JavaScript menyediakan method array bernama forEach().

Contohnya:

1
const kategori = ["HTML", "CSS", "JavaScript"];
2

3
kategori.forEach(function (namaKategori) {
4
  console.log(namaKategori);
5
});

Hasilnya:

1
HTML
2
CSS
3
JavaScript

forEach() menjalankan callback untuk setiap elemen array yang dikunjungi.

Callback adalah function yang diberikan kepada function atau method lain untuk dijalankan pada waktu tertentu.

Kita juga bisa menuliskannya menggunakan arrow function.

1
kategori.forEach((namaKategori) => {
2
  console.log(namaKategori);
3
});

Hasilnya sama.

Menggunakan forEach pada array object#

1
const daftarArtikel = [
2
  { judul: "Belajar HTML", sudahTerbit: true },
3
  { judul: "Belajar CSS", sudahTerbit: true },
4
  { judul: "Belajar JavaScript", sudahTerbit: false }
5
];
6

7
daftarArtikel.forEach((artikel) => {
8
  console.log(artikel.judul);
9
});

Hasilnya:

1
Belajar HTML
2
Belajar CSS
3
Belajar JavaScript

Menggunakan index pada forEach#

Callback forEach() juga dapat menerima index.

1
const kategori = ["HTML", "CSS", "JavaScript"];
2

3
kategori.forEach((namaKategori, index) => {
4
  console.log(`${index + 1}. ${namaKategori}`);
5
});

Hasilnya:

1
1. HTML
2
2. CSS
3
3. JavaScript

Perlu diingat bahwa forEach() tidak menghasilkan array baru dari nilai yang dikembalikan callback.

Jika kita ingin membentuk array baru berdasarkan hasil pengolahan, map() biasanya lebih sesuai.

10. Menggunakan map()#

Method map() digunakan untuk membentuk array baru berdasarkan hasil callback pada elemen-elemen array.

Contohnya:

1
const angka = [1, 2, 3, 4];
2

3
const hasil = angka.map((nilai) => {
4
  return nilai * 2;
5
});
6

7
console.log(hasil);

Hasilnya:

1
[2, 4, 6, 8]

Array asli tetap berisi:

1
[1, 2, 3, 4]

Pada contoh tersebut, map() membuat array baru yang berisi hasil perkalian setiap angka dengan 2.

map pada daftar artikel#

Misalnya, kita ingin mengambil seluruh judul artikel.

1
const daftarArtikel = [
2
  { judul: "Belajar HTML", kategori: "HTML" },
3
  { judul: "Belajar CSS", kategori: "CSS" },
4
  { judul: "Belajar JavaScript", kategori: "JavaScript" }
5
];
6

7
const daftarJudul = daftarArtikel.map((artikel) => {
8
  return artikel.judul;
9
});
10

11
console.log(daftarJudul);

Hasilnya:

1
["Belajar HTML", "Belajar CSS", "Belajar JavaScript"]

Kita juga bisa menggunakan implicit return pada arrow function.

1
const daftarJudul = daftarArtikel.map(
2
  (artikel) => artikel.judul
3
);

Hasilnya sama.

Apakah map selalu membuat data asli aman dari perubahan?#

map() menghasilkan array baru, tetapi tidak otomatis membuat salinan mendalam dari setiap object di dalamnya.

Jika callback mengembalikan referensi object yang sama, perubahan terhadap object tersebut masih dapat memengaruhi data asli.

Jadi, bedakan antara membuat array baru dan membuat salinan seluruh object secara independen.

11. Menggunakan filter()#

Method filter() digunakan untuk membuat array baru yang hanya berisi elemen yang memenuhi kondisi tertentu.

Contohnya:

1
const angka = [1, 2, 3, 4, 5, 6];
2

3
const angkaGenap = angka.filter((nilai) => {
4
  return nilai % 2 === 0;
5
});
6

7
console.log(angkaGenap);

Hasilnya:

1
[2, 4, 6]

Callback mengembalikan kondisi:

1
nilai % 2 === 0

Jika hasilnya truthy, elemen tersebut dimasukkan ke array baru.

Jika falsy, elemen tersebut tidak dimasukkan.

filter pada daftar artikel#

Sekarang kita gunakan untuk mencari artikel yang sudah diterbitkan.

1
const daftarArtikel = [
2
  { judul: "Belajar HTML", sudahTerbit: true },
3
  { judul: "Belajar CSS", sudahTerbit: true },
4
  { judul: "Belajar JavaScript", sudahTerbit: false }
5
];
6

7
const artikelTerbit = daftarArtikel.filter((artikel) => {
8
  return artikel.sudahTerbit === true;
9
});
10

11
console.log(artikelTerbit);

Hasilnya berupa array berisi dua object:

1
[
2
  { judul: "Belajar HTML", sudahTerbit: true },
3
  { judul: "Belajar CSS", sudahTerbit: true }
4
]

Artikel JavaScript tidak ikut karena statusnya masih false.

Menggabungkan filter dan map#

Kita juga bisa menggabungkan keduanya.

Misalnya, mengambil judul artikel yang sudah diterbitkan.

1
const judulArtikelTerbit = daftarArtikel
2
  .filter((artikel) => artikel.sudahTerbit)
3
  .map((artikel) => artikel.judul);
4

5
console.log(judulArtikelTerbit);

Hasilnya:

1
["Belajar HTML", "Belajar CSS"]

Pertama, filter() memilih artikel yang sudah terbit.

Kemudian, map() mengambil judul dari artikel-artikel tersebut.

Pola seperti ini sering digunakan untuk mengolah data aplikasi.

12. Perbedaan forEach, map, dan filter#

Ketiga method ini sama-sama memproses elemen array, tetapi tujuannya berbeda.

Method	Tujuan	Hasil
`forEach()`	Menjalankan callback untuk setiap elemen	`undefined`
`map()`	Mengubah setiap elemen menjadi nilai baru	Array baru
`filter()`	Memilih elemen berdasarkan kondisi	Array baru

Contohnya:

1
const angka = [1, 2, 3];

Menggunakan forEach():

1
angka.forEach((nilai) => {
2
  console.log(nilai);
3
});

Menggunakan map():

1
const hasilMap = angka.map((nilai) => nilai * 2);
2

3
console.log(hasilMap);

Menggunakan filter():

1
const hasilFilter = angka.filter((nilai) => nilai > 1);
2

3
console.log(hasilFilter);

Hasil map():

1
[2, 4, 6]

Hasil filter():

1
[2, 3]

Gunakan forEach() ketika ingin melakukan suatu tindakan pada elemen.

Gunakan map() ketika ingin membentuk array baru dengan nilai hasil transformasi.

Gunakan filter() ketika ingin memilih sebagian elemen.

13. Mengenal Object.keys(), Object.values(), dan Object.entries()#

Selain array, object juga mempunyai beberapa method yang membantu kita membaca datanya.

Contohnya:

1
const artikel = {
2
  judul: "Belajar JavaScript",
3
  kategori: "Programming",
4
  pembaca: 150
5
};

Object.keys()#

Mengambil daftar key properti sendiri yang enumerable dan berupa string.

1
console.log(Object.keys(artikel));

Hasilnya:

1
["judul", "kategori", "pembaca"]

Object.values()#

Mengambil daftar nilai properti sendiri yang enumerable dan berupa string key.

1
console.log(Object.values(artikel));

Hasilnya:

1
["Belajar JavaScript", "Programming", 150]

Object.entries()#

Mengambil pasangan key dan value.

1
console.log(Object.entries(artikel));

Hasilnya:

1
[
2
  ["judul", "Belajar JavaScript"],
3
  ["kategori", "Programming"],
4
  ["pembaca", 150]
5
]

Kita juga bisa mengulang hasil Object.entries() menggunakan for...of.

1
for (const [key, value] of Object.entries(artikel)) {
2
  console.log(`${key}: ${value}`);
3
}

Hasilnya:

1
judul: Belajar JavaScript
2
kategori: Programming
3
pembaca: 150

Penulisan [key, value] pada loop tersebut disebut destructuring.

Untuk sekarang, cukup pahami bahwa kita sedang mengambil dua nilai dari setiap pasangan hasil Object.entries().

14. Praktik: Mengolah Daftar Artikel BapakGabut#

Sekarang kita gabungkan array, object, function, dan berbagai method yang sudah dipelajari.

Kita akan membuat program sederhana untuk:

Menyimpan daftar artikel.
Menampilkan seluruh judul.
Memilih artikel yang sudah terbit.
Menghitung jumlah artikel terbit.
Menampilkan ringkasan.

Buka script.js, kemudian masukkan kode berikut:

1
const daftarArtikel = [
2
  {
3
    judul: "Belajar HTML",
4
    kategori: "HTML",
5
    pembaca: 120,
6
    sudahTerbit: true
7
  },
8
  {
9
    judul: "Belajar CSS",
10
    kategori: "CSS",
11
    pembaca: 90,
12
    sudahTerbit: true
13
  },
14
  {
15
    judul: "Belajar JavaScript",
16
    kategori: "JavaScript",
17
    pembaca: 0,
18
    sudahTerbit: false
19
  },
20
  {
21
    judul: "Mini Project CSS",
22
    kategori: "CSS",
23
    pembaca: 75,
24
    sudahTerbit: true
25
  }
26
];
27

28
function ambilArtikelTerbit(artikel) {
29
  return artikel.filter((item) => item.sudahTerbit);
30
}
31

32
function ambilJudulArtikel(artikel) {
33
  return artikel.map((item) => item.judul);
34
}
35

36
function tampilkanRingkasan(artikel) {
37
  const artikelTerbit = ambilArtikelTerbit(artikel);
38
  const judulArtikel = ambilJudulArtikel(artikelTerbit);
39

40
  console.log("=== Ringkasan BapakGabut ===");
41
  console.log(`Total artikel: ${artikel.length}`);
42
  console.log(`Artikel terbit: ${artikelTerbit.length}`);
43
  console.log("Daftar artikel terbit:");
44

45
  judulArtikel.forEach((judul, index) => {
46
    console.log(`${index + 1}. ${judul}`);
47
  });
48
}
49

50
tampilkanRingkasan(daftarArtikel);

Hasilnya:

1
=== Ringkasan BapakGabut ===
2
Total artikel: 4
3
Artikel terbit: 3
4
Daftar artikel terbit:
5
1. Belajar HTML
6
2. Belajar CSS
7
3. Mini Project CSS

Dari program tersebut, kita sudah menggunakan beberapa konsep sekaligus.

Array digunakan untuk menyimpan kumpulan artikel.

Object digunakan untuk menyimpan informasi setiap artikel.

Function digunakan untuk memisahkan tanggung jawab.

filter() memilih artikel yang sudah diterbitkan.

map() mengambil judul artikel.

forEach() menampilkan daftar judul ke Console.

Ini merupakan contoh sederhana bagaimana JavaScript dapat digunakan untuk mengolah data yang lebih terstruktur.

Data tersebut masih berupa contoh latihan, bukan data artikel sebenarnya dari website BapakGabut.

15. Kesalahan Umum Saat Menggunakan Array dan Object#

Lupa bahwa index array dimulai dari 0#

1
const kategori = ["HTML", "CSS", "JavaScript"];
2

3
console.log(kategori[1]);

Hasilnya adalah:

1
CSS

Bukan "HTML".

Menganggap const membuat object tidak bisa berubah#

1
const artikel = {
2
  judul: "Belajar HTML"
3
};
4

5
artikel.judul = "Belajar CSS";

Kode tersebut valid.

const mencegah assignment ulang terhadap variabel, bukan otomatis membekukan isi object.

Menggunakan map hanya untuk console.log#

1
const angka = [1, 2, 3];
2

3
angka.map((nilai) => {
4
  console.log(nilai);
5
});

Kode tersebut berjalan, tetapi map() membuat array hasil yang berisi undefined karena callback tidak mengembalikan nilai.

Jika tujuannya hanya menjalankan console.log() untuk setiap elemen, gunakan forEach().

Mengira filter mengubah array asli#

1
const angka = [1, 2, 3, 4];
2

3
const hasil = angka.filter((nilai) => nilai > 2);

hasil berisi [3, 4], tetapi array angka tetap berisi [1, 2, 3, 4].

Membandingkan object hanya berdasarkan isi#

1
console.log({ judul: "HTML" } === { judul: "HTML" });

Hasilnya:

1
false

Kedua object merupakan referensi yang berbeda.

16. Latihan Mandiri#

Sekarang giliran Gabuters mencoba.

Buat array berisi minimal lima object artikel.

Setiap object mempunyai properti:

1
{
2
  judul: "Nama artikel",
3
  kategori: "HTML",
4
  pembaca: 100,
5
  sudahTerbit: true
6
}

Kemudian lakukan latihan berikut:

Tampilkan seluruh judul menggunakan forEach().
Gunakan filter() untuk mengambil artikel yang sudah terbit.
Gunakan map() untuk membuat array berisi judul artikel.
Cari artikel dengan jumlah pembaca lebih dari 100 menggunakan filter().
Tampilkan jumlah artikel yang sudah terbit menggunakan length.

Sebagai tantangan tambahan, buat function bernama cariArtikelKategori() yang menerima dua parameter:

Array daftar artikel.
Nama kategori yang ingin dicari.

Function tersebut harus mengembalikan array artikel yang sesuai dengan kategori menggunakan filter().

Contoh pemanggilan:

1
const artikelCSS = cariArtikelKategori(daftarArtikel, "CSS");
2

3
console.log(artikelCSS);

Coba juga gunakan map() setelah filter() untuk mengambil judul dari artikel pada kategori tertentu.

17. Penutup#

Pada artikel ini, kita sudah belajar menggunakan array dan object untuk menyimpan kumpulan data.

Kita memahami index array, properti object, serta cara mengakses dan mengubah nilainya.

Kita juga mengenal method push(), pop(), includes(), forEach(), map(), dan filter().

Kemudian, kita mencoba menggabungkan array, object, function, dan perulangan untuk mengolah daftar artikel BapakGabut.

Sekarang kita sudah mempunyai fondasi yang cukup untuk membuat program yang mengolah data.

Tetapi sejauh ini, hasil latihan kita masih banyak ditampilkan melalui Console.

Bagaimana kalau kita ingin menampilkan daftar artikel langsung di halaman HTML?

Atau mengubah teks ketika sebuah tombol diklik?

Untuk itulah kita perlu memahami DOM dan event.

Pada artikel berikutnya, kita akan membahas DOM dan Event JavaScript: Membuat HTML Bisa Berinteraksi.

Kita akan belajar memilih elemen HTML, mengubah kontennya, menangani klik tombol, dan membaca input pengguna.

Sampai jumpa di artikel berikutnya, Gabuters!

Array dan Object JavaScript: Mengelola Sekumpulan Data

1. Apa Itu Array?#

2. Mengakses Elemen Array#

Mengubah nilai array#

3. Mengenal length dan Method Dasar Array#

push(): Menambahkan elemen di akhir#

pop(): Menghapus elemen terakhir#

includes(): Memeriksa keberadaan nilai#

4. Mengulang Isi Array dengan for#

Menggunakan for…of#

5. Mengenal Object#

6. Mengakses dan Mengubah Properti Object#

Dot notation#

Bracket notation#

Mengubah properti#

Menambahkan properti#

7. Perbedaan Array dan Object#

8. Array Berisi Object#

9. Menggunakan forEach()#

Menggunakan forEach pada array object#

Menggunakan index pada forEach#

10. Menggunakan map()#

map pada daftar artikel#

Apakah map selalu membuat data asli aman dari perubahan?#

11. Menggunakan filter()#

filter pada daftar artikel#

Menggabungkan filter dan map#

12. Perbedaan forEach, map, dan filter#

13. Mengenal Object.keys(), Object.values(), dan Object.entries()#

Object.keys()#

Object.values()#

Object.entries()#

14. Praktik: Mengolah Daftar Artikel BapakGabut#

15. Kesalahan Umum Saat Menggunakan Array dan Object#

Lupa bahwa index array dimulai dari 0#

Menganggap const membuat object tidak bisa berubah#

Menggunakan map hanya untuk console.log#

Mengira filter mengubah array asli#

Membandingkan object hanya berdasarkan isi#

16. Latihan Mandiri#

17. Penutup#

Bagikan Artikel

Bacaan terkait

Coba jalur lain