Masih mengenai pembahasan Javascript, pada artikel kali ini kita akan membahas Struktur Data Array, meliputi : pengertian
cara penulisan,mengambil data, mencetak,menambahkan data, menghapus,mengubah isi dan method method pada array.
Apa itu Struktur Data Array ?
Struktur Data Array menurut pengertiannya terdiri dari dua kalimat “struktur data” dan “array”.
Struktur data adalah metode yang digunakan untuk menyimpan data di dalam memori komputer, salah satu struktur data yang sering digunakan dalam pemrograman adalah Array.
Sedangkan Array merupakan struktur data yang digunakan untuk menyimpan sekumpulan data dalam satu tempat. Setiap data dalam Array memiliki indeks, sehingga kita akan mudah memprosesnya.
Array di dalam JavaScript tidak bertipe (untyped array). Elemen dari array bisa bertipe data string, number dan boolean dalam sebuah array yang sama, bahkan elemen dari array bisa berupa objek atau array yang lain.
Sintaks array pada JavaScript
Sintaks untuk membuat array pada JavaScript mirip dengan variabel JavaScript biasa. Yang harus Anda lakukan adalah:
- Deklarasikan variabel (var).
- Beri nama variabel (array_name).
- Beri tanda sama dengan (=).
- Buka braket persegi ([).
- Buat daftar nilai (item) ([“item1”, “item2”, …]).
- Tutup tanda kurung siku (]).
Catatan : Gunakan tanda kutip jika nilainya adalah string (teks), karena item yang tidak menggunakan tanda kutip maka akan dibaca oleh JavaScript sebagai nilai, melainkan variabel lain. Namun aturan ini tidak berlaku untuk angka.
Cara penulisan Array di dalam JavaScript
Ada 2 cara penulisan array pada JavaScript, yaitu menggunakan kurung siku [ ] dan menggunakan keyword new Array(). Perintah new ini akan membuat ‘objek’ array.
var angka = [];
Variabel angka berisi sebuah array kosong.
Berikut contoh penulisan Array :
Untuk mengisi data pada array, setiap data harus dipisah dengan tanda koma.
var angka = [1, 2, 3];
Array pada JavaScript bersifat dinamis, jadi kita dapat menyimpan dan mencampur apapun di dalam array.
var data = [1, 2.3, “Komputer”, ‘X’, true];
atau
var data = new Array(1, 2.3, “Komputer”, ‘X’, true);
Mengambil Data dari Array pada Javascript
Ketika kita ingin mendeskripsikan daftar dari suatu item, maka kita harus membuat item tersebut dalam variabel yang berbeda. contoh :
var Buah1 = " apel ";
var Buah2 = " nanas ";
var Buah3 = " jeruk ";
var Buah4 = " pisang";
Namun cara ini tidak direkomendasikan jika kita membutuhkan item yang jauh lebih banyak. Hal ini dikarenakan akan sangat sulit untuk membuat antara banyak variabel dan objek yang berbeda
Untuk mengatasi masalah diatas, kita bisa menggunakan array pada JavaScript.
Array tersebut dapat menampung lebih dari satu nilai. selain itu, array dapat memberi nomor indeks dimulai dari nol (0).
var Buah = ["apel", "nanas", "jeruk", "pisang"];
- ”apel” = index array 0
- “nanas” = index array 1
- ”jeruk” = index array 2
- “pisang” = index array 3
Contoh :
<!DOCTYPE html>
<html lang="en">
<head>
<title>Mengambil data array</title>
</head>
<body>
<script>
// membuat array
var Buah = ["apel", "nanas", "jeruk", "pisang"];
// mengambil jeruk
document.write(Buah[2]);
</script>
</body>
</html>
Hasilnya :
Mencetak isi Array dengan Perulangan
Mencetak isi array bisa dilakukan satu persatu, namun jika ada banyak isi array tersebut maka kita bisa menggunakan perulangan / looping. Contoh :
<!DOCTYPE html>
<html lang="en">
<head>
<title>Array dan perulangan</title>
</head>
<body>
<script>
// membuat array
var Buah = ["apel", "nanas", "jeruk", "pisang"];
document.write("<h3>Daftar Buah:</h3>");
document.write("<ol>");
// menggunakan perulangan untuk mencetak semua isi array
for(let i = 0; i < Buah.length; i++){
document.write(`<li>${ Buah[i] }</li>`);
}
document.write("</ol>");
</script>
</body>
</html>
Hasilnya :
Pada contoh di atas, kita menggunakan properti length untuk mengambil panjang array. Ada 4 data di dalam array Buah, maka properti length akan bernilai 4. Setelah itu kita gunakan properti ini untuk membatasi jumlah perulangan di dalam for.
for(let i = 0; i < Buah.length; i++)
{
document.write(`<li>${ Buah[i] }</li>`);
}
Di dalam blok for, kita mencetak isi produk dengan indeks yang mengacu pada variabel i.
Menambahkan Data ke Dalam Array pada Javascript
Ada dua cara yang bisa dilakukan untuk menambah data ke dalam array:
- Mengisi menggunakan indeks;
- menggunakan method push().
Mengisi dengan indeks
Misal kita punya array dengan isi sebagai berikut:
var Rokok = ["sampoerna", " class mild", " evolution"];
Terdapat tiga data di dalam array buah dengan indeks:
0: “sampoerna”
1: “class mild”
2: “evolution”
Kita ingin menambahkan data lagi pada indeks ke-3, maka kita bisa melakukannya seperti ini:
Rokok[3] = "surya";
Maka array Rokok akan berisi 4 data. Berikut contohnya :
<!DOCTYPE html>
<html lang="en">
<head>
<title>Mengisi data array dengan indeks </title>
</head>
<body>
<script>
// Terdapat tiga data di dalam array Rokok dengan indeks
var Rokok = ["sampoerna", "class mild", "evolution"];
// menambahkan data lagi pada indeks ke-3
Rokok[3] = "surya";
document.write(Rokok);
</script>
</body>
</html>
Hasilnya :
Berdasarkan contoh diatas maka “surya” berhasil di tambahkan ke dalam array Rokok. Namun kekurangan dari cara ini adalah kita harus mengetahui jumlah data atau panjang array tersebut. Jika kita memasukan nomor indeks asal-asalan, maka data yang ada di daalam indeks tersebut akan menumpuk.
Method push()
Berbeda dari index, jika menggunakan method push maka kita tidak perlu tahu berapa panjang array-nya, karena method push() akan menambahkan data ke dalam array dari belakang.
Contoh :
<!DOCTYPE html>
<html lang="en">
<head>
<title>Mengisi data array dengan indeks </title>
</head>
<body>
<script>
// Terdapat tiga data di dalam array Rokok dengan indeks
var Rokok = ["sampoerna", "class mild", "evolution"];
// menambahkan tv ke dalam array products
Rokok.push("surya");
// menapilkan isi array
document.write(Rokok);
</script>
</body>
</html>
Hasilnya :
Cara Menghapus Data Array pada Javascript
Untuk menghapus data juga memiliki empat cara yaitu :
- Menghapus data menggunakan delete;
- Dengan menggunakan method pop()
- Menggunakan method shift().
- Menghapus data menggunakan Method splice()
Sekarang kita akan coba ke empat cara tersebut satu persatu.
Menghapus Data Array dengan delete
Kita dapat menghapus data dengan nomer indeks tertentu dengan delete. Kekurangan dari delete, ia akan menciptakan ruang kosong di dalam array. Contoh :
<!DOCTYPE html>
<html lang="en">
<head>
<title>Menghapus Data Array dengan delete</title>
</head>
<body>
<script>
// Terdapat tiga data di dalam array buah dengan indeks
var Buah = ["apel", "nanas", "jeruk"];
// delete data pada indeks ke-2
delete Buah [2];
document.write(Buah);
</script>
</body>
</html>
Hasilnya :
Menghapus Data Array Menggunakan method pop()
Cara kedua menggunakan method pop(), Method ini akan menghapus array yang ada di paling belakang.Contoh :
<!DOCTYPE html>
<html lang="en">
<head>
<title>Menghapus Data Array dengan pop() </title>
</head>
<body>
<script>
// Terdapat tiga data di dalam array buah dengan indeks
var Buah = ["apel", "nanas", "jeruk"];
// delete data lagi pada indeks ke-2
Buah.pop();
document.write(Buah);
</script>
</body>
</html>
Hasilnya :
Menghapus Data Array dengan method shift()
Kita juga dapat menghapus data array dari depan dengan menggunakan method shift().
Contoh:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Menghapus Data Array dengan shift; </title>
</head>
<body>
<script>
var Buah = ["apel", "nanas", "jeruk"];
var foo = Buah.shift();
document.write(Buah);
</script>
</body>
</html>
Berdasarkan contoh diatas, maka data yang terhapus adalah ” apel “.
Lihat hasilnya dibawah ini :
Menghapus Data Array dengan Method splice()
Method splice() berfungsi untuk menghapus data pada indeks tertentu. Fungsi ini memiliki dua parameter yaitu :
array.splice(<indeks>, <total>);
Keterangan:
- <indeks> merupakan data di dalam array yang akan dihapus;
- <total> jumlah data yang akan dihapus dari indeks tersebut.
Biasanya kita berikan nilai total dengan nilai 1 agar hanya menghapus satu data saja.
Contoh:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Menghapus Data Array dengan splice; </title>
</head>
<body>
<script>
var Buah = ["apel", "nanas", "jeruk", "pisang"];
Buah.splice(3, 1);
document.write(Buah);
</script>
</body>
</html>
Maka data yang terhapus adalah index 3 yaitu ” pisang “.
Hasilnya :
Mengubah isi Array pada Javascript
Untuk mengubah isi array, kita bisa membuat ulang seperti contoh dibawah ini:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Mengubah isi Array </title>
</head>
<body>
<script>
var Buah = ["apel", "nanas", "jeruk", "pisang"];
Buah[2] = "mangga";
document.write(Buah);
</script>
</body>
</html>
Berdasarkan pada contoh diatas, maka indeks 2 yaitu jeruk kita ganti dengan mangga.
Hasilnya :
Method Array pada Javascript
Selain method atau fungsi yang sudah kita coba di atas, terdapat beberapa method lain dalam Array yang perlu kita ketahui.
method filter()
Method filter() berfungsi untuk menyaring data dari array. Parameter yang harus diberikan pada method ini sama seperti method forEach(), yaitu: sebuah fungsi callback.
Contoh :
<!DOCTYPE html>
<html lang="en">
<head>
<title>Method filter</title>
</head>
<body>
<script>
const angka = [1, 2, 3, 4, 5, 6];
// ambil data yang hanya habis dibagi tiga
const filteredArray = angka.filter(item => item % 3 === 0);
console.log(filteredArray)
document.write(filteredArray);
</script>
</body>
</html>
Pada contoh di atas, kita memberikan arrow function sebagai fungsi callback yang akan melakukan penyaringan terhadap array.
Hasilnya :
Metode includes()
Method ini berfungsi untuk mengecek apakah sebuah data ada di dalam array atau tidak.
Contoh:
var Buah = ["apel", "nanas", "jeruk", "pisang"];
// apakah apel sudah ada di dalam array Buah?
var adaapel = Buah.includes("apel");
console.log(adaapel); // -> true
// apakah anggur ada?
var adaanggur = Buah.includes("anggur");
console.log(adaanggur); // -> false
Hasilnya :
Method sort()
Method sort() berfungsi untuk mengurutkan data pada array.
Contoh:
var alfabet = ['e','f','d','c','b','a'];
var angka = [5,6,8,1,2,3,9,4,7];
console.log(alfabet.sort()); //-> ["a", "b", "c", "d", "e", "f"]
console.log(angka.sort()); // -> [1, 2, 3, 4, 5, 6, 7, 8, 9]
Hasilnya :
Begitulah pembahasan Struktur Data Array pada Javascript, meliputi : pengertian cara penulisan,mengambil data, mencetak,menambahkan data, menghapus,mengubah isi dan method method pada array. sekian untuk artikel kali ini semoga bermanfaat. Baca juga artikel selanjutnya yaitu Belajar Javascript #9 Cara membuat function Javascript
