Apa cara yang benar untuk menulis array Javascript

Array adalah variabel kompleks yang memungkinkan kita untuk menyimpan lebih dari satu nilai atau sekelompok nilai di bawah nama variabel tunggal. Array JavaScript dapat menyimpan nilai apa pun yang valid, termasuk string, angka, objek, fungsi, dan bahkan array lainnya, sehingga memungkinkan untuk membuat struktur data yang lebih kompleks seperti array objek atau array dari array.

Misalkan kalian ingin menyimpan nama warna dalam kode JavaScript kalian. Menyimpan nama warna satu per satu dalam sebuah variabel bisa terlihat seperti ini:

var color1 = "Red";
var color2 = "Green";
var color3 = "Blue";

Tetapi apa yang terjadi jika kalian perlu menyimpan nama negara bagian atau kota suatu negara dalam variabel dan kali ini bukan hanya tiga, mungkin ratusan. Cukup sulit dan membosankan untuk menyimpan masing-masing dalam variabel yang terpisah. Juga, menggunakan begitu banyak variabel secara bersamaan dan melacak semuanya akan menjadi tugas yang sangat sulit. Dan di sinilah array berperan. Array menyelesaikan masalah ini dengan menyediakan struktur yang bertujuan untuk menyimpan beberapa nilai atau sekelompok nilai.

Cara paling sederhana untuk membuat array dalam JavaScript adalah melampirkan daftar nilai yang dipisahkan oleh koma dalam tanda kurung ([]), seperti yang ditunjukkan dalam sintaks berikut:

var myArray = [element0, element1, ..., elementN];

Array juga dapat dibuat menggunakan konstruktor Array() seperti yang ditunjukkan pada sintaks berikut. Namun, agar lebih sederhana, sintaksis sebelumnya lebih disarankan.

var myArray = new Array(element0, element1, ..., elementN);

Berikut adalah beberapa contoh array yang dibuat menggunakan sintaks literal array:

var colors = ["Red", "Green", "Blue"]; 
var fruits = ["Apple", "Banana", "Mango", "Orange", "Papaya"];
var cities = ["London", "Paris", "New York"];
var person = ["John", "Wick", 32];

Catatan: Array adalah kumpulan nilai yang diurutkan. Setiap nilai dalam array disebut elemen, dan setiap elemen memiliki posisi numerik dalam array, yang dikenal sebagai indeksnya.

Mengakses Elemen dari Array

Elemen array dapat diakses oleh indeks mereka menggunakan notasi braket persegi. Indeks adalah angka yang mewakili posisi elemen dalam array.

Indeks array berbasis nol. Ini berarti bahwa item pertama dari sebuah array disimpan pada indeks 0, bukan 1, item kedua disimpan pada indeks 1, dan seterusnya. Indeks array mulai dari 0 dan naik ke jumlah elemen minus 1. Jadi, array dari lima elemen akan memiliki indeks dari 0 hingga 4.

Contoh berikut akan menunjukkan kepada kalian cara mendapatkan elemen individual array dengan indeksnya.

var fruits = ["Apple", "Banana", "Mango", "Orange", "Papaya"];
 
document.write(fruits[0]); // Prints: Apple
document.write(fruits[1]); // Prints: Banana
document.write(fruits[2]); // Prints: Mango
document.write(fruits[fruits.length - 1]); // Prints: Papaya

Catatan: Dalam JavaScript, array sebenarnya hanyalah tipe objek khusus yang memiliki indeks numerik sebagai kunci. Operator typeof akan mengembalikan “objek” untuk array.

Mendapatkan Panjang Array

Properti length mengembalikan panjang array, yang dimana merupakan jumlah total elemen yang terkandung dalam array. Panjang array selalu lebih besar dari indeks salah satu elemennya.

var fruits = ["Apple", "Banana", "Mango", "Orange", "Papaya"];
document.write(fruits.length); // Prints: 5

Looping Melalui Elemen Array

Kalian bisa menggunakan loop untuk mengakses setiap elemen dari array secara berurutan, seperti ini:

var fruits = ["Apple", "Banana", "Mango", "Orange", "Papaya"];
 
// Iterates over array elements
for(var i = 0; i < fruits.length; i++) {    
    document.write(fruits[i] + "<br>"); // Print array element
}

ECMAScript 6 telah memperkenalkan cara yang lebih sederhana untuk beralih ke elemen array, yang merupakan for-of loop. Dalam loop ini kalian tidak perlu menginisialisasi dan melacak variabel counter loop (i).

Berikut contoh yang sama ditulis ulang menggunakan for-of loop:

var fruits = ["Apple", "Banana", "Mango", "Orange", "Papaya"];
 
// Iterates over array elements
for(var fruit of fruits) {    
    document.write(fruit + "<br>"); // Print array element
}

Kalian juga dapat mengulangi elemen array menggunakan for-in loop, seperti ini:

var fruits = ["Apple", "Banana", "Mango", "Orange", "Papaya"];
 
// Loop through all the elements in the array 
for(var i in fruits) {  
    document.write(fruits[i] + "<br>");
}

Menambahkan Elemen Baru ke dalam Array

Untuk menambahkan elemen baru di akhir array, cukup gunakan metode push(), seperti ini:

var colors = ["Red", "Green", "Blue"]; 
colors.push("Yellow");
 
document.write(colors); // Prints: Red,Green,Blue,Yellow
document.write(colors.length); // Prints: 4

Demikian pula, untuk menambahkan elemen baru di awal array gunakan metode unshift(), seperti ini:

var myArray = [element0, element1, ..., elementN];

Kalian juga dapat menambahkan beberapa elemen sekaligus menggunakan metode push() dan unshift(), seperti ini:

var myArray = [element0, element1, ..., elementN];

Menghapus Elemen dari Array

Untuk menghapus elemen terakhir dari array, kalian dapat menggunakan metode pop(). Metode ini mengembalikan nilai yang muncul. Berikut contohnya:

var myArray = [element0, element1, ..., elementN];

Demikian pula, kalian dapat menghapus elemen pertama dari array menggunakan metode shift(). Metode ini juga mengembalikan nilai yang digeser keluar. Berikut contohnya:

var myArray = [element0, element1, ..., elementN];

Menambah atau Menghapus Elemen di Posisi Manapun

Metode splice() adalah metode array yang sangat serbaguna yang memungkinkan kalian untuk menambah atau menghapus elemen dari indeks apa pun, menggunakan sintaks ar.splice (startIndex, deleteCount, elem1, …, elemN).

Metode ini membutuhkan tiga parameter: parameter pertama adalah indeks untuk memulai penyambungan array, hal ini diperlukan; parameter kedua adalah jumlah elemen yang akan dihapus (gunakan 0 jika kalian tidak ingin menghapus elemen apa pun), hal ini opsional; dan parameter ketiga adalah serangkaian elemen pengganti, hal ini juga opsional. Contoh berikut menunjukkan cara kerjanya:

var myArray = [element0, element1, ..., elementN];

Metode splice() mengembalikan array elemen yang dihapus, atau array kosong jika tidak ada elemen yang dihapus, seperti yang kalian lihat pada contoh di atas. Jika argumen kedua dihilangkan, semua elemen dari awal hingga akhir array dihapus. Tidak seperti metode slice() dan concat(), metode splice() memodifikasi array yang dipanggil.

Membuat String dari Array

Mungkin ada situasi di mana kalian hanya ingin membuat string dengan menggabungkan dengan elemen array. Untuk melakukan ini, kalian dapat menggunakan metode join(). Metode ini mengambil parameter opsional yang merupakan string pemisah yang ditambahkan di antara setiap elemen. Jika kalian menghilangkan pemisah, maka JavaScript akan menggunakan koma(,) secara default. Contoh berikut menunjukkan cara kerjanya:

var myArray = [element0, element1, ..., elementN];

Kalian juga dapat mengubah array menjadi string yang dipisahkan koma menggunakan toString(). Metode ini tidak menerima parameter pemisah seperti join(). Berikut contohnya:

var myArray = [element0, element1, ..., elementN];

Mengekstrak Bagian dari Array

Jika kalian ingin mengekstrak sebagian array (mis. Subarray) tetapi tetap mempertahankan array asli tetap utuh, maka kalian bisa menggunakan metode slice(). Metode ini menggunakan 2 parameter: indeks awal (indeks untuk memulai ekstraksi), dan indeks akhir opsional (indeks sebelum yang mengakhiri ekstraksi), seperti arr.slice(startIndex, endIndex). Berikut contohnya:

var myArray = [element0, element1, ..., elementN];

Jika parameter endIndex dihilangkan, semua elemen ke ujung array diekstraksi. kalian juga dapat menentukan negative indeks atau offset — dalam hal ini metode slice() mengekstrak elemen-elemen dari akhir sebuah array, daripada memulai. Sebagai contoh:

var myArray = [element0, element1, ..., elementN];

Menggabungkan Dua Array atau Lebih

Metode concat() dapat digunakan untuk menggabungkan atau menggabungkan dua atau lebih array. Metode ini tidak mengubah array yang ada, melainkan mengembalikan array baru. Sebagai contoh:

var myArray = [element0, element1, ..., elementN];

Metode concat() dapat mengambil sejumlah argumen array, sehingga kalian dapat membuat array dari sejumlah array lainnya, seperti yang ditunjukkan pada contoh berikut:

var myArray = new Array(element0, element1, ..., elementN);

Mencari Melalui Array

Jika kalian ingin mencari array untuk nilai tertentu, kalian cukup menggunakan indexOf() dan lastIndexOf(). Jika nilai ditemukan, kedua metode mengembalikan indeks yang mewakili elemen array. Jika nilai tidak ditemukan, -1 dikembalikan. Metode indexOf() mengembalikan yang pertama ditemukan, sedangkan lastIndexOf() mengembalikan yang terakhir ditemukan.

var myArray = new Array(element0, element1, ..., elementN);

Kedua metode tersebut juga menerima parameter integer opsional from index yang menentukan indeks pada array untuk memulai pencarian. Berikut contohnya:

var myArray = new Array(element0, element1, ..., elementN);

Kalian juga dapat menggunakan metode include() untuk mengetahui apakah array menyertakan elemen tertentu atau tidak. Metode ini menggunakan parameter yang sama dengan metode indexOf() dan lastIndexOf(), tetapi mengembalikan true atau false sebagai ganti nomor indeks. Berikut contohnya:

var myArray = new Array(element0, element1, ..., elementN);

Jika kalian ingin mencari array berdasarkan kondisi tertentu maka kalian dapat menggunakan metode JavaScript find() yang baru saja diperkenalkan di ES6. Metode ini mengembalikan nilai first element dalam array yang memenuhi fungsi pengujian yang disediakan. Jika tidak kembali maka menjadi undefined.

var myArray = new Array(element0, element1, ..., elementN);

Ada satu lagi metode yang mirip dengan find() yaitu metode findIndex(), yang dimana mengembalikan indeks elemen yang ditemukan dalam array sebagai nilainya. Sebagai contoh:

var myArray = new Array(element0, element1, ..., elementN);

Metode find() hanya mencari elemen pertama yang memenuhi fungsi pengujian yang ada. Namun, jika kalian ingin mengetahui semua elemen yang cocok, kalian dapat menggunakan metode filter().

Metode filter() membuat array baru dengan semua elemen yang berhasil melewati tes yang diberikan. Contoh berikut akan menunjukkan kepada kalian bagaimana hal ini bekerja:

Apa itu Javascript array?

Apa itu tipe data array dan contohnya?

Method apa yang dapat kita gunakan untuk memilah elemen array berdasarkan kondisi tertentu dan akan membuat sebuah array baru?

Apa saja jenis jenis array?