Array merupakan tipe data yang dapat terdiri lebih dari satu nilai yang berurutan dan ditempatkan dalam sebuah variable.
Data yang disimpan didalam array selalu berurut, sehingga setiap data memiliki index yang nantinya index dapat digunakan untuk mengakses nilai dari Array tersebut. Array dapat menyimpan nilai dengan tipe data apa pun, seperti number, string, dan lain-lainnya.
Oleh karena itu, array bersifat dinamis sehingga kita dapat menambahkan atau mengurangi nilai yang ada di dalam array.
Gambar di atas merupakan ilustrasi dari index di dalam array, index selalu dimulai dari angka 0.
Masih bingung??? Yuk kita coba bahas perlahan hehe... 😄
1. Membuat Array
Ada beberapa cara yang dapat kita gunakan untuk membuat sebuah array pada Javascript.
1.1 Array Literal
Cara yang paling mudah untuk membuat sebuah array adalah menggunakan object literal, untuk membuat sebuah array baru kita cukup menggunakan tanda [].
const animals = []
Dengan baris kode di atas kita sudah berhasil membuat sebuah array kosong dengan nama variable animals. Jika kita ingin memasukkan nilai awal ketika array tersebut dibuat kita cukup memisahkan setiap nilainya dengan tanda ,.
const animals = ['cat', 'dog', 'cow', 'fish']
1.2 Array Constructor
Kita dapat membuat array dengan menggunakan constructor new Array()
const students = new Array()
Pada contoh di atas, kita mendeklarasikan sebuah array kosong dengan nama variable students, jika kita ingin melihat isi dari array tersebut kita dapat menggunakan perintah:
const students = new Array()
console.log(students)
// OUTPUT: []
Kita dapat mementukan panjang awal dari sebuah array:
const teachers = new Array(5)
console.log(teachers)
// OUTPUT: [ <5 empty items> ]
Dengan menambahkan angka di dalam constructor Array kita dapat menentukan panjang / ukuran awal dari array tersebut, pada contoh di atas kita mendefinisikan panjangnya dalah 5, sehingga ketika kita coba lihat isi arraynya maka kita diberitahu bahwa array tersebut memiliki 5 empty items (item kosong). Walaupun kita sudah menentukan panjang dari array tersebut, kita masih dapat menambahkan item melebihi panjangnya serta mengubah dan menghapus nilai di dalam array tersebut.
Jika kita ingin menginisiasikan nilai awal dari array tersebut ketika dibuat, maka kita dapat memasukkan nilainya kedalam constructor array.
const students = new Array('John', 'Doe')
console.log(students)
// OUTPUT: [ 'John', 'Doe' ]
1.3 Array.from()
Selain menggunakan constructor array, kita juga dapat menggunakan perintah Array.from untuk membuat sebuah array, Array.from dapat digunakan untuk membuat sebuah array baru dari array lainnya. Perintah ini diperkenalkan pada ES6.
const numbers = new Array(1, 'satu')
const random = Array.from(numbers)
console.log(random)
// OUTPUT: [ 1, 'satu' ]
Dengan cara di atas, kita membuat sebuah array baru yang nilainya sama dengan array lainnya yaitu numbers.
2. Mengakses Nilai Di Dalam Array
Seperti yang sudah kita ketahui di atas bahwa data yang disimpan di dalam array selalu berurut dan memiliki index, maka kita dapat menggunakan index tersebut untuk mengakses nilai yang ada di dalam array.
const students = ['John', 'Doe', 'Michael']
console.log(students[0])
// OUTPUT: John
Angka 0 di atas menandakan bahwa kita ingin mengambil nilai dari array pada index pertama, ingat bahwa index di dalam array selalu dimulai dari 0.
Bagaimana jika kita mengakses index yang tidak ada di dalam array? Apakah akan terjadi error???
Jawabannya adalah tidak, ketika kita mencoba mengakses index yang tidak ada didalam array maka akan mengembalikan nilai undefined.
const students = ['John', 'Doe', 'Michael']
console.log(students[4])
// OUTPUT: undefined
3. Modifikasi Nilai Di Dalam Array
Selain mengakses nilai yang ada di dalam array, hal yang akan sangat sering kita lakukan ketika berhadapan dengan array adalah memodifikasi nilai yang ada di dalamnya, untuk melakukan hal ini ada beberapa cara yang dapat digunakan.
3.1 Menggunakan index
Sama seperti mengakses nilai di dalam array, index juga dapat kita gunakan untuk memodifikasi (menambah ataupun merubah) nilai yang ada di dalam array tersebut.
const students = ['John', 'Doe', 'Samuel']
students[2] = 'Samantha'
students[3] = 'Sean'
console.log(students)
// OUTPUT: [ 'John', 'Doe', 'Samantha', 'Sean' ]
Pada contoh kode di atas dapat dilihat ketika kita menggunakan index 2, yang mana nilai pada index ke-2 adalah Samuel, ketika kita masukkan nilai baru pada index ke-2 maka Samuel berubah menjadi Samantha. Namun ketika kita mencoba memasukkan index yang belum ada nilainya di dalam array, maka nilai tersebut akan ditambahkan, Sean akan ditambahkan karena nilai pada index ke-3 masih kosong.
Sangat mudah bukan??? Dengan menggunakan index kita sudah bisa mengubah ataupun menambahkan nilai pada array.
3.2 Menggunakan Push
Push dapat digunakan untuk menambahkan nilai baru ke dalam array pada index terakhir, artinya nilai yang kita tambahkan ke dalam array selalu berada di posisi terakhir.
const students = ['John', 'Doe', 'Samuel']
students.push('Sean')
console.log(students)
// OUTPUT: [ 'John', 'Doe', 'Samuel', 'Sean' ]
Dengan menggunakan push, kita dapat menambahkan beberapa nilai ke dalam array sekaligus, tanpa harus menggunakan index satu persatu, kita cukup memisahkan setiap nilainya dengan tanda , (koma).
const students = ['John', 'Doe', 'Samuel']
students.push('Sean', 'Jacob')
console.log(students)
// OUTPUT: [ 'John', 'Doe', 'Samuel', 'Sean', 'Jacob' ]
Lihat??? Sean dan Jacob berhasil ditambahkan pada element terakhir dari array tersebut.
3.3 Menggunakan Unshift
Bagaimana cara kita menambahkan nilai baru ke dalam array tetapi pada element pertama??? Kita dapat menggunakan unshift untuk melakukan ini. Jika menggunakan push akan menambahkan nilai ke dalam array pada element terakhir, maka unshift adalah kebalikannya. Unshift akan menambahkan nilai baru ke dalam array dari awal element.
const students = ['John', 'Doe', 'Samuel']
students.unshift('Sean', 'Jacob')
console.log(students)
// OUTPUT: [ 'Sean', 'Jacob', 'John', 'Doe', 'Samuel' ]
Dari output kode di atas dapat kita lihat bahwa Sean dan Jacob ditambahkan di awal element array.
4. Menghapus Nilai Di Dalam Array
Menghapus nilai atau element di dalam array juga membutuhkan index, ada beberapa cara untuk menghapus element di dalam array.
- Menggunakan Delete
- Menggunakan Splice
- Menggunakan Shift
- Menggunakan Pop
Mari kita lihat lihat satu-satu dari cara menghapus element di dalam array di atas.
4.1 Menggunakan Delete
Nilai di dalam array dapat dihapus menggunakan sintaks delete, ketika menggunakan sintaks delete kita harus tau index dari data yang ingin kita hapus.
const students = ['John', 'Doe', 'Samuel']
delete students[1]
console.log(students)
// OUTPUT: [ 'John', <1 empty item>, 'Samuel' ]
Nilai pada index ke-1 sudah berhasil terhapus, tetapi nilainya menjadi empty, artinya element pada index tersebut masih ada hanya saja nilainya menjadi kosong.
4.2 Menggunakan Splice
Jika menggunakan sintaks delete tidak menghapus elementnya dari array, maka menggunakan splice akan menghapus nilai dan elementnya dari array tersebut. Kita dapat menggunakan sintaks splice dengan format seperti berikut:
array.splice(index, total)
Dimana index merupakan index dari data yang ingin kita hapus, dan total adalah jumlah data atau element yang ingin kita hapus.
const students = ['John', 'Doe', 'Samuel']
students.splice(1, 1)
console.log(students)
// OUTPUT: [ 'John', 'Samuel' ]
Dari kode di atas kita ingin menghapus data pada index ke-1 dengan jumlah data yang ingin di hapus adalah 1. Bagaimana jika kita ingin menghapus 2 data???...
const students = ['John', 'Doe', 'Samuel']
students.splice(1, 2)
console.log(students)
// OUTPUT: [ 'John' ]
Kita cukup menentukan jumlah data yang ingin dihapus, di parameter ke dua pada fungsi splice.
4.3 Menggunakan Shift
Kita juga dapat menghapus element dari array menggunakan shift, shift akan menghapus element pada array pada element pertama.
const students = ['John', 'Doe', 'Samuel']
students.shift()
console.log(students)
// OUTPUT: [ 'Doe', 'Samuel' ]
Dari output di atas dapat dilihat bahwa John yang merupakan element pertama dari array telah berhasil dihapus.
4.4 Menggunakan Pop
Jika shift akan menghapus element pertama pada array, maka pop adalah kebalikannya. Pop akan menghapus element di dalam array dari index paling akhir.
const students = ['John', 'Doe', 'Samuel']
students.pop()
console.log(students)
// OUTPUT: [ 'John', 'Doe' ]
Dari output di atas dapat dilihat bahwa Samuel yang merupakan element pada index terakhir telah dihapus.
5. Method Yang Ada Pada Array
Pada array sendiri tersedia banyak method ataupun fungsi bawaaan yang dapat kita gunakan untuk modifikasi ataupun pengelolaan dari array. Sebelumnya kita sudah menggunakan beberapa method tersebut di atas, pop, shift, unshift, push dan splice merupakan method bawaan yang ada pada array di javascript.
Ada banyak sekali fungsi-fungsi yang dapat kita gunakan, kalian bisa lihat disini untuk semua fungsi bawaan yang tersedia pada array javascript.
Kita hanya akan membahas beberapa method pada array yang sering digunakan.
5.1 Method Filter
Method filter akan menghasilkan sebuah salinan array dengan kodisi yang memenuhi tertentu, filter digunakan untuk menyaring data di dalam array berdasarkan kodisi tertentu.
const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9];
const eventNumbers = numbers.filter(item => item % 2 === 0)
console.log(eventNumbers)
// OUTPUT: [ 2, 4, 6, 8 ]
Pada contoh di atas kita melakukan filter terhadap sebuah array numbers untuk mengembalikan hanya bilangan genap.
5.2 Method Includes
Method includes digunakan untuk mengecek apakah sebuah nilai yang diberikan ada di dalam arrray atau tidak. Fungsi ini akan mengembalikan sebuah nilai boolean true atau false. True jika nilai yang dicari ada di dalam array dan false jika nilai yang dicari tidak ada di dalam array tersebut.
const students = ['John', 'Doe', 'Samuel']
console.log(students.includes('John'))
// OUTPUT: true
Contoh di atas akan mengembalikan nilai true, karena data yang kita cari yaitu John ada di dalam array tersebut.
5.3 Method Map
Method map akan membuat sebuah array baru yang diisi dengan hasil modifikasi atau eksekusi fungsi yang diinginkan pada setiap elemen di dalam array.
const numbers = [1, 4, 9, 16];
const multiplyNumbers = numbers.map((x) => x * 2);
console.log(multiplyNumbers)
// OUTPUT: [ 2, 8, 18, 32]
Dari contoh di atas kita membuat sebuah array baru yang mana isinya adalah nilai pada array numbers yang dikalikan dengan 2.
5.4 Method Sort
Sort adalah method yang digunakan untuk mengurutkan nilai yang ada di dalam array. Loh bukannya nilai di dalam array sudah berurutan???
Yups, benar. Tetapi nilai berurutan yang dimaksud adalah berurutan secara index, dimulai dari 0,1,2, dan seterusnya.
Tetapi terkadang kita juga ingin mengurutkan datanya berdasarkan kodisi tertentu, berdasarkan abjad misalnya, kita dapat menggunakan method sort ini.
const students = ['John', 'Doe', 'Samuel']
students.sort()
console.log(students)
// OUTPUT: [ 'Doe', 'John', 'Samuel' ]
Sekarang data yang ada di dalam array sudah berurutan sesuai dengan abjad.
Kesimpulan
Array akan sangat sering digunakan ketika kita sudah membuat sebuah aplikasi atau program yang sederhana maupun kompleks, untuk itu kita harus benar-benar paham bagaimana cara menggunakan array dan bagaimana melakukan modifikasia atau manipulasi dari array.
Ada banyak sekali fungsi-fungsi bawaan pada array yang dapat kita gunakan, kalian dapat membaca lebih lengkap disini tentang array pada javascript.
Sampai jumpa di artikel-artikel selanjutnya... 😄