Cara menggunakan ARRAUY pada JavaScript

Tipe atau struktur data array di JavaScript dan bahasa pemrograman umumnya sangat berguna ketika kita ingin menyimpan kumpulan nilai.

Bayangkan kita sedang membuat toko online yang menjual buah-buahan, lalu ingin menampilkan daftar nama buah.

Kita bisa membuat variabel untuk masing-masing buah lalu menampilkannya satu per satu, seperti ini:

const pisang = 'pisang';
const apel = 'apel';
const mangga = 'mangga';

console.log(pisang);
console.log(apel);
console.log(mangga);

Tidak ada yang salah dengan kode di atas.

Tapi, bagaimana jika buah yang ingin ditampilkan sangat banyak, sebut saja 1000.

Kita tentu harus mengulang kode untuk menampilkan masing-masing buah sebanyak jumlah buah.

Ini kurang rapi dan tidak efisien. Oleh karena itu kita butuh array.

Kode di atas dapat dicapai menggunakan array, tapi lebih rapi dan efisien:

const buah = ['pisang', 'apel', 'mangga'];

buah.forEach((item) => console.log(item));

Berikut topik yang akan kita bahas terkait array:

1. Apa Itu Array?
2. Membuat Array
3. Mengakses Elemen Array
4. Mengubah Elemen Array
5. Tambah dan Hapus Elemen Array
   1. Tambah Elemen ke Akhir (push())
   2. Hapus Elemen Akhir (pop())
   3. Tambah Elemen ke Awal (shift())
   4. Hapus Elemen Awal (unshift())
6. Cari Panjang Array

Apa Itu Array?

Array merupakan struktur data yang digunakan untuk menyimpan kumpulan nilai dalam satu tempat atau variabel.

Setiap nilai di dalam array disebut item atau elemen.

Mirip seperti objek.

Bedanya kalau objek menggunakan nama properti sedangkan array menggunakan indeks.

Bayangkan indeks seperti nama properti objek, hanya saja indeks ditambahkan secara otomatis.

Item pertama pada array memiliki indeks 0, item kedua 1 dan seterusnya berurutan.

Jangan sampai tertukar dengan panjang atau length yang dimulai dari 1.

Kita memerlukan pemahaman yang baik saat bekerja dengan array, karena ini akan digunakan ketika memanipulasi array.

Cara Membuat Array

Di JavaScript, array dapat dibuat menggunakan kurung siku [ ... ], kita bisa memasukkan nilai atau item diantara kurung siku.

Contoh:

const buah = [];

Variabel buah sekarang memiliki data berupa array, tapi array kosong tanpa item.

Item atau nilai dimasukkan diantara kurung siku, jika item lebih dari satu dipisahkan dengan koma (,).

Contoh:

const buah = ['pisang', 'apel', 'mangga'];

Di JavaScript, array dapat berisi beragam tipe data termasuk string, number, bigint, boolean, undefined, null, symbol, objek, array, bahkan fungsi.

Contoh:

const a = [
  'pisang',
  1,
  1n,
  true,
  undefined,
  null,
  Symbol(),
  {},
  [],
  function () {},
];

Array di dalam array disebut array multi dimensi.

Contoh:

const buah = ['a', [1, 'b'], 6];

Cara Mengakses Elemen Array

Untuk mengakses elemen di dalam array, kita bisa menggunakan nama array kemudian, nomor indeks dibungkus kurung kurawal.

Ingat, indeks selalu dimulai dari 0.

Contoh:

const buah = ['pisang', 'apel', 'mangga'];

console.log(buah[0]); // pisang
console.log(buah[1]); // apel
console.log(buah[2]); // mangga

Bagaimana dengan array multi dimensi? sama saja menggunakan indeks.

Tapi, indeks array yang ada di dalamnya ditulis dalam kurung siku terpisah.

Contoh:

const  = ['pisang', ['apel', 'mangga'], 'jeruk'];

console.log(buah[1][0]); // apel
console.log(buah[1][1]); // mangga

Cara Mengubah Elemen Array

Sama seperti mengakse array, untuk mengubah atau mengganti item di dalam array kita bisa menggunakan nama array, diikuti indeks elemen yang ingin diubah...

...lalu operator penugasan =, dan nilai baru.

Contoh:

const buah = ['pisang', 'apel', 'mangga'];

buah[0] = 'jeruk';

console.log(buah); // ["jeruk", "apel", "mangga"]

Tambah dan Hapus Elemen Array

Untuk menambahkan item array sebetulnya bisa menggunakan indeks.

Contoh:

const buah = ['pisang', 'apel', 'mangga'];

buah[3] = 'jeruk';

console.log(buah); // ["pisang", "apel", "mangga", "jeruk"]

Tapi cara ini rawan kesalahan karena kita harus tau indeks akhir array.

Kalau kelebihan, JavaScript akan menyisipkan nilai undefined, ini dapat mengacaukan indeks.

Contoh:

const buah = ['pisang', 'apel', 'mangga'];

buah[5] = 'jeruk';

console.log(buah); // ["pisang", "apel", "mangga", empty × 2, 'jeruk']

empty × 2 berarti ada 2 item di tempat tersebut yang bernilai undefined.

Tapi kalau kurang, item yang ada akan ditimpa atau diubah seperti yang sudah dibahas sebelumnya.

Sedangkan kalau menghapus, kita juga bisa menggunakan kata kunci delete.

Tapi nilai yang dihapus sebetulnya diganti dengan undefined, tidak benar-benar dihapus.

Contoh:

const buah = ['pisang', 'apel', 'mangga'];

delete buah[1];

console.log(buah); // ["pisang", empty, "mangga"]

Alih-alih menggunakan indeks, kita bisa menggunakan method Array.

Dengna method, kita bisa menambhakan dan menghapus item array ke awal dan akhir tanpa harus tau indeks-nya.

Mari kita pelajari satu per satu, semua method yang ada di sini akan dibahas secara detail di artikel terpisah.

Tambah Elemen ke Akhir (push())

push() menambahkan item ke akhir array, kita perlu menyertakan satu atau lebih item yang ingin ditambahkan.

Contoh:

const buah = ['pisang', 'apel', 'mangga'];

buah.push('anggur', 'durian', 'alpukat');

console.log(buah); // ["pisang", "apel", "mangga", "anggur", "durian", "alpukat"]

Hapus Elemen Akhir (pop())

Sama seperti method sebelumnya, alih-alih menambahkan, pop() menghapus elemen akhir.

Contoh:

const buah = ['pisang', 'apel', 'mangga'];

buah.pop();

console.log(buah); // ["pisang", "apel"]

Tambah Elemen ke Awal (shift())

Mirip seperti push(), alih-alih menambahkan ke akhir, unshift() menambahkan elemen ke awal array.

Contoh:

const buah = ['pisang', 'apel', 'mangga'];

buah.unshift('anggur', 'durian', 'alpukat');

console.log(buah); // ["anggur", "durian", "alpukat", "pisang", "apel", "mangga"]

Hapus Elemen Awal (unshift())

Sama seperti pop(), alih-alih menghapus item akhir, unshift() menghapus item awal array.

Contoh:

const buah = ['pisang', 'apel', 'mangga'];

buah.shift();

console.log(buah); // ["apel", "mangga"]

Cara Mencari Panjang Array

Saat mengolah data array, terkadang kita ingin mengetahui panjang atau jumlah item di dalamnya.

Kalau hanya berisi puluhan item, kita masih bisa menghitung secara manual.

Bagaimana, kalau ribuan? tentu tidak mungkin dihitung manual satu per satu.

Untuk mengatasi masalah ini, kita bisa menggunakan properti length.

Contoh:

const buah = ['pisang', 'apel', 'mangga'];

console.log(buah.length); // 3

Dalam kondisi tertentu, terkadang kita juga perlu mengetahui indeks akhir dari array.

Indeks akhir array bisa diketahui dengan cara menghitung panjang atau length array dikurangi 1.

Contoh:

const buah = ['pisang', 'apel', 'mangga'];

const indexAkhir = buah.length - 1;

console.log(buah[indexAkhir]); // mangga

Selain itu, properti length juga bisa digunakan sebagai kondisi terminasi dalam perulangan (for) array.

Mengenai perulangan akan kita pelajari lebih lanjut di artikel terpisah.

Contoh:

const buah = ['pisang', 'apel', 'mangga'];

for (let i = 0; i < buah.length; i++) {
  console.log(buah[i]);
}

/* OUTPUT:
pisang
apel
mangga
*/