Mengenal Array JavaScript

 

Mengenal Array

Masih ingat tentang konsep variabel JavaScript? Kita bahas sedikit ya untuk mengingat kembali.

Variabel JavaScript bisa kita gambarkan sebagai wadah yang bisa menampung barang dengan berbagai macam tipe, tak peduli bentuknya, material pembuatnya, warnanya dan lain-lain. Sama seperti wadah, variabel juga bisa menampung berbagai macam tipe data. Namun, variabel yang kita pelajari kemarin hanya bisa menampung satu data saja, betul?

Bagaimana kalau kita memiliki lebih dari satu data dan ingin ditampung pada wadah, atau di kasus ini, variabel yang sama? Tenang, JavaScript memiliki solusinya. Kita bisa menggunakan array.

Array

Array adalah tipe variabel yang dapat menampung berbagai jenis data dengan tipe yang bermacam-macam, dengan jumlah yang tidak terbatas. Array di JavaScript memiliki ciri khas yaitu data yang ditampung dibungkus dengan sepasang kurung siku [ ].

let namaArray = [ nilai1, nilai2, nilai3, ...];

Di bawah ini adalah perbandingan jika kita menyimpan data di variabel satu-per-satu dengan menyimpan banyak data di satu variabel array:

// Menyimpan data di variabel satu-per-satu
let murid1 = 'Andi';
let murid2 = 'Ratna';
let murid3 = 'Juwita';

// Menyimpan lebih dari satu data dalam satu array
let murid = ['Andi', 'Ratna', 'Juwita'];

Pada contoh di atas, data yang kita miliki hanya berjumlah 3 buah. Bayangkan jika kita memiliki 1000 data! Pasti capek jika harus membuat 1000 variabel dalam satu waktu 😵.

Lebih ringkas bukan menggunakan satu array untuk menampung banyak data dibandingkan harus membuat variabel untuk masing-masing data? Iya dong jelas 👍

Mendeklarasikan Array

Di topik sebelumnya, sebenarnya kalian sudah melihat contoh syntax mendeklarasikan variabel array.

Yap betul, untuk mendeklarasi sebuah array, caranya hampir sama dengan mendeklarasi objek. Perbedaannya adalah data array dibungkus dengan kurung siku [] atau menggunakan kata kunci new Array().

Menggunakan Array Literal

Cara mendeklarasikan array dengan array literal adalah sebagai berikut:

let namaArray = [ element1, element2, element3 ];

Contoh:

let buah = [ 'Mangga', 'Apel', 'Jeruk'];

let hargaBuah = ["20000", 30000, 15000]; // Tipe data di array boleh berbeda

Menggunakan Kata Kunci new

Cara mendeklarasikan array JavaScript dengan kata kunci new adalah sebagai berikut:

let namaArray = new Array(element1, element2, element3);

Contoh:

let buah = new Array( 'Mangga', 'Apel', 'Jeruk');

let hargaBuah = new Array("20000", 30000, 15000); // Tipe data di array boleh berbeda

Nomor Index dan Jumlah Data Array

Kita sudah tau bahwa array bisa menampung lebih dari satu data, bahkan tidak terhingga. Nah, sekarang muncul pertanyaan, bagaimana cara mengakses data-data tersebut?

Sebelum menjawab pertanyaan tersebut, ada baiknya kita telusuri dulu anatomi dari array.

Setiap data di array memiliki nomor index. Nomor index berguna untuk mengakses data suatu array di posisi tertentu. Nomor index di array selalu dimulai dari angka nol 0.

Gambar di bawah ini adalah ilustrasi nomor index di array:

Kemudian, setiap array pasti memiliki jumlah data yang ditampungnya, atau disebut dengan Array Length.

Contoh:

let buah = ['Mangga', 'Apel', 'Jeruk'];
let olahraga = ['basket', 'sepakbola', 'badminton', 'berenang'];
let murid = [];

console.log(buah.length); // Output: 3
console.log(olahraga.length); // Output: 4
console.log(murid.length); // Output: 0

---

Jadi, mohon diingat sekali lagi 🙏🏻:

• Nomor index dari suatu array selalu dimulai dari angka nol 0.

Mengakses Data/Element di Dalam Array

Di topik ini kita akan mempelajari bagaimana caranya untuk dapat mengakses salah satu data/element di dalam sebuah array.

Disinilah kita akan menggunakan nomor index dan array length yang telah kita pelajari dari topik sebelum ini.

Mengakses Element Tunggal

Syntax yang digunakan untuk mengakses data di dalam array seperti ini:

namaArray[nomorIndex]

Contohnya seperti ini:

let namaBuah = ["mangga", "apel", "jeruk", "durian"];

console.log(namaBuah[0]); // Output: mangga
console.log(namaBuah[1]); // Output: apel
console.log(namaBuah[2]); // Output: jeruk
console.log(namaBuah[3]); // Output: durian

Mengakses Element Terakhir di Array

Coba kalian perhatikan contoh sebelumnya. durian adalah element terakhir dari array namaBuah. Untuk mengakses element itu, kita bisa hitung berdasarkan nomor index-nya dan kebetulan array namaBuah hanya memiliki 4 element jadi hitungnya masih gampang.

Coba kalian perhatikan contoh berikut:

let countries = ["Afghanistan","Albania","Algeria","Andorra","Angola","Anguilla","Antigua &Barbuda","Argentina","Armenia","Aruba","Australia","Austria","Azerbaijan","Bahamas","Bahrain","Bangladesh","Barbados","Belarus","Belgium","Belize","Benin","Bermuda","Bhutan","Bolivia","Bosnia & Herzegovina","Botswana","Brazil","British Virgin Islands","Brunei","Bulgaria","Burkina Faso","Burundi","Cambodia","Cameroon","Cape Verde","Cayman Islands","Chad","Chile","China","Colombia","Congo","Cook Islands","Costa Rica","Cote D Ivoire","Croatia","Cruise Ship","Cuba","Cyprus","Czech Republic","Denmark","Djibouti","Dominica","Dominican Republic","Ecuador","Egypt","El Salvador","Equatorial Guinea","Estonia","Ethiopia","Falkland Islands","Faroe Islands","Fiji","Finland","France","French Polynesia","French West Indies","Gabon","Gambia","Georgia","Germany","Ghana","Gibraltar","Greece","Greenland","Grenada","Guam","Guatemala","Guernsey","Guinea","Guinea Bissau","Guyana","Haiti","Honduras","Hong Kong","Hungary","Iceland","India","Indonesia","Iran","Iraq","Ireland","Isle of Man","Israel","Italy","Jamaica","Japan","Jersey","Jordan","Kazakhstan","Kenya","Kuwait","Kyrgyz Republic","Laos","Latvia","Lebanon","Lesotho","Liberia","Libya","Liechtenstein","Lithuania","Luxembourg","Macau","Macedonia","Madagascar","Malawi","Malaysia","Maldives","Mali","Malta","Mauritania","Mauritius","Mexico","Moldova","Monaco","Mongolia","Montenegro","Montserrat","Morocco","Mozambique","Namibia","Nepal","Netherlands","Netherlands Antilles","New Caledonia","New Zealand","Nicaragua","Niger","Nigeria","Norway","Oman","Pakistan","Palestine","Panama","Papua New Guinea","Paraguay","Peru","Philippines","Poland","Portugal","Puerto Rico","Qatar","Reunion","Romania","Russia","Rwanda","Saint Pierre & Miquelon","Samoa","San Marino","Satellite","Saudi Arabia","Senegal","Serbia","Seychelles","Sierra Leone","Singapore","Slovakia","Slovenia","South Africa","South Korea","Spain","Sri Lanka","St Kitts & Nevis","St Lucia","St Vincent","St. Lucia","Sudan","Suriname","Swaziland","Sweden","Switzerland","Syria","Taiwan","Tajikistan","Tanzania","Thailand","Timor L'Este","Togo","Tonga","Trinidad & Tobago","Tunisia","Turkey","Turkmenistan","Turks & Caicos","Uganda","Ukraine","United Arab Emirates","United Kingdom","Uruguay","Uzbekistan","Venezuela","Vietnam","Virgin Islands (US)","Yemen","Zambia","Zimbabwe"];

Tentunya akan lebih sulit untuk mengakses element terakhir dari array countries apabila kita harus menghitung nomor indexnya satu-per-satu dimulai dari element pertama.

Akan tetapi ada cara singkat untuk melakukan semuanya itu!

Di topik terakhir, kita sudah mempelajari tentang array length di mana syntax array.length itu mengembalikan jumlah data dari sebuah array. Di topik yang sama, kita juga diingatkan kalau nomor index dari sebuah array dimulai dari angka nol. Jadi untuk mengakses element terakhir dari sebuah array, kita bisa menggunakan formula sebagai berikut:

nomor index element terakhir array = jumlah data array - 1

Jadi untuk mengakses element terakhir dari array countries di atas bisa menggunakan cara singkat berikut:

// menggunakan formula di atas
let indexElementTerakhir = countries.length - 1;

console.log(countries[indexElementTerakhir]); // Output: Zimbabwe

// atau
console.log(countries[countries.length - 1]); // Output: Zimbabwe

Mengakses Seluruh Element Array

Namun, jika kita ingin mengakses seluruh data yang berada di dalam suatu array, maka kita cukup panggil nama dari array tersebut.

Contoh:

let olahraga = ["Berenang", "Sepak Bola", "Bola Basket"];

console.log(olahraga); // Output: ["Berenang", "Sepak Bola", "Bola Basket"]

Mengubah Data/Element pada Array

Data/element dari suatu array bisa kita ubah dengan syntax seperti ini:

namaArray[nomorIndex] = nilaiBaru;

Contohnya:

let namaBuah = ["Mangga", "Apel", "Jeruk"];

namaBuah[1] = "Semangka";

console.log(namaBuah); // Output: ["Mangga", "Semangka", "Jeruk"]

Apakah kalian masih ingat di beberapa topik sebelumnya, kita sempat membahas tentang penggunaan let dan const di mana variabel yang dideklarasikan dengan menggunakan const tidak bisa diubah datanya terkecuali variabel itu adalah tipe objek atau array.

Jadi untuk array JavaScript, pengubahan nilai element seperti berikut tidak akan memunculkan error walaupun variabel array-nya dideklarasikan dengan const:

const namaArray = [nilaiElement1, nilaiElement2];

// mengubah data di element pertama
namaArray[0] = nilaiElementBaru;

// menambah element baru ke array
namaArray[2] = nilaiElement3;

Array Method

Kenalan dulu yuk sama array method!

Di topik sebelumnya, kita sudah bahas apa itu yang disebut dengan method. Biar kita diingatkan sekali lagi, method adalah sebuah fungsi yang menjadi nilai dari suatu properti objek.

Jadi, array method bisa dibilang adalah kumpulan fungsi yang menjadi nilai dari properti array.

"Ha? Apakah ini artinya array itu sama dengan objek??"

Di JavaScript, hampir semua tipe data yang bukan primitive (primitive contohnya string, number, boolean, bigint, null, undefined, symbol) adalah objek. Jadi karena array bukan tipe data primitive, array termasuk objek dan bisa mempunyai properti dengan nilai fungsi yang kita kenal dengan method.

Di topik ini, kita akan bahas beberapa array method yang umum digunakan.

Mengubah Element Array Menjadi String dengan toString()

Method toString() akan menggabungkan semua element array dan mengubahnya ke tipe data string dengan penghubung tanda koma , di antara element array.

Contoh:

let array = [1, 2, 3, "halo", false, true];

console.log(array.toString()); // Output: 1,2,3,halo,false,true

Bisa dilihat dari contoh di atas, di dalam array terdapat data dengan tipe number, string, bahkan boolean, namun hasil dari method toString() mengubah mereka semua menjadi string.

Menggabungkan Element Array dengan join()

Method join() menggabungkan semua element array, kemudian mengubahnya menjadi string. Konsepnya hampir sama dengan method toString(), namun perbedaannya kita bisa menambahkan karakter tertentu sebagai penghubung antara element array.

array.join(penghubung);

Penjelasan syntax di atas:

• Parameter penghubung adalah optional parameter, yaitu parameter yang boleh diisi, boleh juga dikosongkan. penghubung menentukan karakter apa yang mau ditambahkan sebagai penghubung antara element array. Secara default, apabila dikosongkan, array.join() akan menggunakan tanda koma , sebagai penghubung element array.

Contoh:

let array = [1, 2, 3, "halo", false, true];

console.log(array.join()); // Output: 1,2,3,halo,false,true
console.log(array.join(" ")); // Output: 1 2 3 halo false true
console.log(array.join("#")); // Output: 1#2#3#halo#false#true
console.log(array.join("...")); // Output: 1...2...3...halo...false...true

Menambah dan Mengeluarkan (Menghapus) Element Array dengan pop(), push(), shift(), dan unshift()

• pop(), mengeluarkan element terakhir dari sebuah array.

  Contoh:

    let array = [1, 2, 3, "halo", false, true];
  
    array.pop();
  
    console.log(array); // Output: [1, 2, 3, "halo", false]

• push(), menambah element di bagian akhir dari sebuah array.

  Contoh:

  let array = [1, 2, 3, "halo", false, true];
  
  array.push("Selamat Pagi");
  
  console.log(array); // Output: [1, 2, 3, "halo", false, true, "Selamat Pagi"]

• shift(), mengeluarkan element pertama dari sebuah array.

  Contoh:

  let array = [1, 2, 3, "halo", false, true];
  
  array.shift();
  
  console.log(array); // Output: [2, 3, "halo", false, true]

• unshift(), menambah element di bagian awal array.

  Contoh:

  let array = [1, 2, 3, "halo", false, true];
  
  array.unshift("Selamat Pagi");
  
  console.log(array); // Output: ["Selamat Pagi", 1, 2, 3, "halo", false, true]

Menambah, Menghapus, dan Mengganti Element Array dengan splice()

Digunakan untuk menambah, menghapus, dan mengganti element di sebuah array.

array.splice(index, jumlah, item1, ..., itemX);

Penjelasan syntax di atas:

• Parameter index adalah required parameter, yaitu parameter yang wajib diisi ketika memanggil array method splice. index menjelaskan posisi di mana element harus ditambah atau dihapus.
• Parameter jumlah adalah optional parameter, yaitu parameter yang boleh diisi, boleh juga dikosongkan. jumlah menentukan jumlah element yang mau dihapus di array.
• Parameter item1, ..., itemX adalah optional parameter. item1, ..., itemX merupakan element baru yang mau ditambah ke dalam array.

Contoh:

let buah = ["Pisang", "Jeruk", "Apel", "Mangga"];

buah.splice(2, 0, "Lemon", "Kiwi");

console.log(buah); // Output: ["Pisang", "Jeruk", "Lemon", "Kiwi", "Apel", "Mangga"]

Penjelasan contoh di atas:

• Parameter pertama bernilai 2, mendefinisikan posisi di mana element baru harus ditambahkan, yaitu di index ke 2 atau element ke 3 (ingat, index di array dimulai dari angka 0).
• Parameter kedua bernilai 0, mendefinisikan jumlah element yang harus dihapus, yaitu berjumlah 0 (tidak ada yang dihapus).
• Parameter ketiga, keempat, dan seterusnya di method splice() mendefinisikan element baru yang ingin ditambahkan ke dalam array. Jika parameter ketiga dan seterusnya tidak dituliskan, maka tidak ada element yang ditambahkan. Pada contoh di atas, element ketiga dan keempat adalah "Lemon" dan "Kiwi", maka kedua element tersebut ditambahkan pada array buah.

Menggabungkan Lebih Dari Satu Array dengan concat()

Method concat() digunakan untuk menggabungkan 2 array atau lebih.

array1.concat(array2, array3, ..., arrayX)

Contoh:

let buah = ["pisang", "apel", "jeruk"];
let sayur = ["tomat", "bayam", "wortel"];
let biji = ["kedelai", "kacang tanah", "kacang polong"];

let makanan = buah.concat(sayur, biji);

console.log(makanan); // Output: ["pisang", "apel", "jeruk", "tomat", "bayam", "wortel", "kedelai", "kacang tanah", "kacang polong"]

Mengambil Element Array dengan slice()

Method slice() digunakan untuk mengambil beberapa element pada array, dan menaruhnya pada array baru.

array.slice(mulai, akhir)

Penjelasan syntax di atas:

• Parameter mulai adalah optional parameter. mulai menentukan permulaan index dari element yang akan diambil.
• Parameter akhir adalah optional parameter. akhir menentukan batas akhir index element yang akan diambil (tanpa diikutsertakan). Apabila dikosongkan, maka semua element dimulai dari index mulai sampai ke element terakhir dari array akan diambil.

Contoh:

let cemilan = ["kripik singkong", "kripik kentang", "krupuk ikan", "permen", "coklat", "kue"];
let cemilanGurih = cemilan.slice(0, 3);
let cemilanManis = cemilan.slice(3);

console.log(cemilanGurih); // Output: ["kripik singkong", "kripik kentang", "krupuk ikan"]
console.log(cemilanManis); // Output: ["permen", "coklat", "kue"]

Mengurutkan Array dengan sort()

Method sort() akan mengurutkan element di suatu array, bisa dari nilai yang terkecil hingga yang terbesar, bisa juga sebaliknya. Secara default, sort() mengurutkan element array dari nilai string yang terkecil hingga yang terbesar.

array.sort(fungsiPembanding)

Contoh:

// Contoh array dengan tipe data string
let buah = ["Jeruk", "Apel", "Mangga", "Jambu"];

buah.sort();

console.log(buah); // Output: ["Apel", "Jambu", "Jeruk", "Mangga"]

// Contoh array dengan tipe data number
let bilangan = [30, 1, 2, 3.5, 10, 100];

bilangan.sort();

console.log(bilangan); // Output: [1, 10, 100, 2, 3.5, 30]

Perhatikan contoh kode di atas! Pada tipe data string, method sort() masih aman digunakan. Ia mengurutkan element pada array buah secara benar.

Namun jika digunakan pada tipe data number, aneh sekali urutannya bukan? Kenapa angka 100 diurutkan lebih depan dari angka 2?

Ini dikarenakan method sort() secara default mengurutkan element array berdasarkan nilai string-nya. Element array dengan angka 100 dianggap lebih kecil dari element array dengan angka 2 dikarenakan string "1" di 100 lebih kecil dari string "2" di angka 2.

Nah, untuk mengatasi hal tersebut, kita bisa menggunakan ** compare function** atau fungsi pembanding sebagai parameter di method sort seperti contoh di bawah ini:

let bilangan = [30, 1, 2, 3.5, 10, 100];


let urutDariTerkecil = function(a, b) {
  return a - b;
};

let urutDariTerbesar = function(a, b) {
  return b - a;
};

console.log(bilangan.sort(urutDariTerkecil)); // Output: [1, 2, 3.5, 10, 30, 100]
console.log(bilangan.sort(urutDariTerbesar)); // Output: [100, 30, 10, 3.5, 2, 1]

Penjelasan kode di atas:

Fungsi pembanding akan menghitung apakah a dikurang b akan menghasilkan nilai negatif, positif, atau 0.

• Jika bernilai negatif, maka a akan diurutkan sebelum b.
• Jika bernilai positif, maka b akan diurutkan sebelum a.
• Jika bernilai 0, posisi dari a dan b tidak akan diubah.

Memutar urutan Array dengan reverse()

Method reverse() akan mengurutkan element pada array dari index yang terbesar hingga index yang terkecil, bukan nilai yang terbesar hingga yang terkecil.

array.reverse()

Contoh:

let buah = ["Jeruk", "Apel", "Mangga", "Jambu"];

buah.reverse();

console.log(buah); // Output: ["Jambu", "Mangga", "Apel", "Jeruk"]

Lalu, bagaimana caranya untuk mengurutkan nilai element pada array dari yang terbesar hingga yang terkecil? Caranya adalah menggunakan kombinasi dari method sort() dan reverse().

let buah = ["Jeruk", "Apel", "Mangga", "Jambu"];

buah.sort().reverse();

console.log(buah); // Output: ["Mangga", "Jeruk", "Jambu", "Apel"]

Penjelasan contoh di atas:

Array buah akan diurutkan terlebih dahulu element-elementnya dari nilai yang terkecil, hingga yang terbesar dengan menggunakan sort().

buah.sort(); // output: ["Apel", "Jambu", "Jeruk", "Mangga"]

Kemudian, elementnya akan dibalik urutannya berdasarkan index dari yang terbesar hingga yang terkecil dengan menggunakan reverse().

// posisi setelah sort() ["Apel", "Jambu", "Jeruk", "Mangga"]
buah.reverse(); // Output: ["Mangga", "Jeruk", "Jambu", "Apel"]