ARRAY DALAM JAVASCRIPT

Array merupakan struktur data yang digunakan untuk menyimpan sekumpulan data dalam satu tempat. Setiap data dalam Array memiliki indeks, sehingga akan mempermudah dalam memprosesnya.

Contoh kasus penggunaan array ketika sedang membuat aplikasi web, lalu ingin menampilkan daftar nama-nama produk, dapat dibuat seperti berikut:

var siswa1 = “Andriyani”;
var siswa2 = “Romeo”;
var siswa3 = “Yuliet”;
document.write(${siswa1}<br>);
document.write(${siswa2}<br>);
document.write(${siswa3}<br>);

Cara diatas dapat digunakan, namun kurang efektif, misalnya siswa sejumlah 1000, tentunya akan dibuat variabel sebanyak 1000 dan melakukan echo sebanyak 1000x? agar lebih mudah dan efektif digunakan Array

A. Membuat Array pada JavaScript

Array dapat dibuat dengan tanda kurung siku ([…]).
var siswa = [];

Variabel siswa akan berisi sebuah array kosong. Kita bisa mengisi data ke dalam array, lalu setiap data dipisah dengan tanda koma (,).

Contoh
var siswa = [“Andriyani”, “Romeo”, “Yuliet”];

Javascript merupakan bahasa pemrograman yang dynamic typing, sehingga bisa menyimpan dan mencampur apapun di dalam array.

Contoh:
var myData = [78, 2.1, true, ‘C’, “Tujuh”];

B. Mengambil Data dari Array

Array akan menyimpan sekumpulan data dan memberinya nomer indeks agar mudah diakses. Indeks array selalu dimulai dari nol 0.

Contoh :
var siswa = [“Andriyani”, “Romeo”, “Yuliet”];

Bagaimana cara mengambil nilai “Romeo”? Jawabannya seperti ini:
siswa[1] //-> “Romeo”

Contoh

• Demo File Klik Disini
• Download File Klik Disini

C. Array dengan Perulangan

Contoh kasus ketika mencetak semua isi array satu-per-satu seperti ini

document.write(products[0]); document.write(products[1]); document.write(products[2]); document.write(products[3]); document.write(products[4]);

Bagaimana kalau nanti isi array-nya ada 1000? Tentu jika dicetak 1000 baris tidak efisien, agar lebih efisien Solusinya dapat digunakan perulangan.

Properti length untuk mengambil panjang array. Terdapat 4 data di dalam array products, maka properti length akan bernilai 4.
Gunakan properti ini untuk membatasi jumlah perulangan di dalam for. dan di dalam blok for, kita mencetak isi produk dengan indeks yang mengacu pada variabel i

Demo File disini
Download File disini

D. Metode Array pada Javascript

Dalam metode pengulangan diatas (sub C) dapat menggunakan perulangan dengan method forEach(). Sehingga codenya menjadi seperti berikut

• Demo File disini
• Download File disini

Metode-metode lain yang serupa

1. forEach(), Metode ini berfungsi untuk melakukan pengulangan di dalam array.
   const array = [1, 2, 3, 4, 5]
   array.forEach(item => {
   console.log(item); // Output: 1 2 3 4 5
   });
2. filter(), Metode ini berfungsi untuk membuat sebuah array baru dengan memperhatikan kondisi tertentu pada setiap elemen dari array yang sudah ada.
   const angka = [1, 2, 3, 4, 5, 6, 7, 8, 9]
   // membuat array baru dari array angka yang isinya adalah bilangan habis dibagi 2
   const filteredArray = angka.filter(item => item % 2 === 0);
   console.log(filteredArray) // Output: [2, 4, 6, 8]
3. map(), Metode ini berfungsi untuk membuat array baru sambil mengecek/melakukan operasi terhadap setiap elemen array.
   const angka = [1, 2, 3, 4, 5, 6, 7, 8, 9]
   // membuat array baru dari array angka untuk memeriksa apakah setiap elemennya bernilai habis dibagi 2 atau tidak
   const mapedArray = angka.map(item => item % 2 === 0);
   console.log(mapedArray); // output: [false, true, false, true, false, true, false, true, false]
   // membuat array baru dari array angka untuk melakukan operasi perkalian 2 pada setiap elemennya
   const multipleOfTwo = angka.map(e => e * 2);
   console.log(multipleOfTwo); // Output: [2, 4, 6, 8, 10, 12, 14, 16, 18]
4. includes(), Metode ini berfungsi untuk mengecek apakah pada elemen array memenuhi suatu kondisi atau tidak.
   const angka = [1, 2, 3, 4, 5, 6, 7, 8, 9]
   const something = angka.includes(2);
   const any = angka.includes(10);
   console.log(something); // Output: true
   console.log(any); // Output: false
5. some(), Metode ini berfungsi untuk mengecek sekurang kurangnya salah satu elemen array memenuhi kondisi.
   const angka = [1, 2, 3, 4, 5]
   // mengecek apakah dalam array angka terdapat elemen yang habis dibagi 2
   const some = angka.some(item => item % 2);
   console.log(some); // Output: true
   // mengecek apakah dalam array angka terdapat elemen yang kurang dari 0
   const thing = angka.some(item => item < 0);
   console.log(thing); // Output: false
6. every(), Metode ini berfungsi untuk mengecek apakah setiap elemen dalam array memenuhi kondisi.
   const angka = [1, 2, 3, 4, 5, 6, 7, 8, 9];
   // mengecek apakah semua elemen lebih dari 5
   const greaterFive = angka.every(item => item > 4);
   console.log(greaterFive); // Output: false
   // mengecek apakah semua element kurang dari 10
   const lessTen = angka.every(item => item < 10);
   console.log(lessTen); // Output: true
7. reduce(), Metode ini berfungsi untuk mereduce elemen array menjadi single value dengan menjumlah setiap elemen (dari kiri ke kanan).
   const angka = [1, 2, 3, 4, 5];
   const sum = angka.reduce((total, value) => total + value, 0); // kita dpt mengganti 0 dengan angka lain untuk mendapatkan hasil penjumlahan yang berbeda
   console.log(sum); // Output: 15
8. sort(), Metode ini berfungsi untuk mengurutkan elemen pada array baik secara ascending atau descending.
   const angka = [20, 10, 3, 30, 58, 42, 6, 9]
   const huruf = [‘z’, ‘a’, ‘c’, ‘g’, ‘p’]
   // ascending order
   const descOrder = angka.sort((a, b) => a > b ? 1 : -1);
   console.log(descOrder); // Output: [3, 6, 9, 10, 20, 30, 42, 58]
   // descending order
   const ascOrder = huruf.sort((a, b) => a > b ? -1 : 1);
   console.log(ascOrder); // Output: [‘z’, ‘p’, ‘g’, ‘c’, ‘a’]
9. concat(), Metode ini berfungsi untuk menggabungkan 2 array menjadi 1 array.
   const fruits = [‘apel’, ‘banana’, ‘mango’]
   const number = [1, 2, 3]
   const newArray = fruits.concat(number);
   console.log(newArray); // Output: [“apel”, “banana”, “mango”, 1, 2, 3]
10. Array.of(), Metode ini berfungsi untuk membuat array dari setiap argumen yang dipassing
    const angka = Array.of(1, 2, 3, 4, 5, 6);
    console.log(angka); // Output: [1, 2, 3, 4, 5, 6]

E. Menambahkan Data ke Dalam Array

Ada dua cara yang bisa dilakukan untuk menambah data ke dalam array:

• Mengisi dengan indeks
  Misal kita punya array dengan isi sebagai berikut:
  var buah = [“Apel”, “Jeruk”, “Manggis”];
  Jika akan ditambah indeks ke-3, maka kita bisa melakukannya seperti ini:
  buah[3] = “Semangka”;

• Demo File
  Download File

• Mengisi menggunakan method push().
  Kekurangan cara pertama Kita harus tahu jumlah data atau panjang array-nya, barulah kita bisa menambahkan, Apabila dimasukkan nomer indeks sembarangan, maka yang akan terjadi adalah data yang ada di dalam indeks tersebut akan ditindih.

• Demo File
  Download File

Cara diatas dapat juga digabung menjadi
products.push(“Alarm”, “Gembok”, “Paku”);

F. Menghapus Data Array

Menghapus data juga memiliki dua cara:

1. Menggunakan delete;
2. Menggunakan method pop().

Menghapus data Menggunakan delete
Menghapus data dengan nomer indeks tertentu dengan delete, Kekurangan dari delete, ia akan menciptakan ruang kosong di dalam array.
delete buah[2];

Menghapus data Menggunakan pop
Cara kedua menggunakan method pop(), kebalikan dari method push(). Menghapus data Menggunakan pop.
Method pop() akan menghapus array yang ada di paling belakang. Array pada javascript dapat kita pandang sebagai sebuah stack (tumpukan), yang mana memiliki sifat LILO (Last in Last out).

Method pop() akan menghapus array yang ada di paling belakang. Array pada javascript dapat kita pandang sebagai sebuah stack (tumpukan), yang mana memiliki sifat LILO (Last in Last out).

Menghapus Data dari Depan
Untuk menghapus data dari depan dengan menggunakan method shift().
var bunga = [“Mawar”, “Melati”, “Anggrek”, “Sakura”];
// hapus data dari depan
bunga.shift();
Maka data yang terhapus adalah "Mawar"

Menghapus Data pada Indeks Tertentu
Apabila kita ingin menghapus data pada indeks tertentu, maka fungsi atau method yang digunakan adalah splice(). Fungsi ini memiliki dua parameter yang harus diberikan:
array.splice(<indeks>, <total>);
<indeks> adalah indeks dari data di dalam array yang akan dihapus;
<total> adalah jumlah data yang akan dihapus dari indeks tersebut.
Biasanya kita berikan nilai total dengan nilai 1 agar hanya menghapus satu data saja.
Contoh:
var bunga = [“Mawar”, “Melati”, “Anggrek”, “Sakura”];
// hapus Anggrek
bunga.splice(2, 1);

G. Mengubah isi Array

Contoh kasus Untuk mengubah isi array, kita bisa mengisi ulang seperti ini:
var bahasa = [“Javascript”, “Kotlin”, “Java”, “PHP”, “Python”];
bahasa[1] = “C++”;
Maka "Kotlin" akan diganti dengan "C++"