Cara menggunakan ARROUW pada JavaScript

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 ?
Sintaks array pada JavaScript
Cara penulisan Array di dalam JavaScript
Mengambil Data dari Array pada Javascript
Mencetak isi Array dengan Perulangan
Menambahkan Data ke Dalam Array pada Javascript
- Mengisi dengan indeks
- Method push()
Cara Menghapus Data Array pada Javascript
- Menghapus Data Array dengan delete
- Menghapus Data Array Menggunakan method pop()
- Menghapus Data Array dengan method shift()
- Menghapus Data Array dengan Method splice()
Mengubah isi Array pada Javascript
Method Array pada Javascript
- method filter()
- Metode includes()
- Method sort()

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 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.

Variabel angka berisi sebuah array kosong.

Berikut contoh penulisan Array :

Untuk mengisi data pada array, setiap data harus dipisah dengan tanda koma.

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 Buah2 = " 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:

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

Bagaimana cara penulisan array pada JavaScript?

Cara Membuat Array pada Javascript Pada javascript, array dapat kita buat dengan tanda kurung siku ( [...] ). Contoh: var products = []; Maka variabel products akan berisi sebuah array kosong.

Apa itu tipe data array dan contohnya?

Array merupakan salah satu tipe data terstruktur (structured data type) yang terdiri dari sejumlah komponen-komponen yang mempunyai tipe data yang sama. Misalnya, dalam satu Array hanya terdiri dari bilangan bulat saja atau pun bilangan saja.

Apa fungsi utama dari array?

Array merupakan sebuah tipe data yang dapat menyimpan banyak data dalam satu variabel. Data – data yang ada didalam Array disebut elemen array dan masing-masing elemen dapat diakses melalui indeks array. Array berguna untuk memudahkan dalam membuat kelompok data, serta menghemat penulisan dan penggunaan variabel.

Apa saja jenis jenis array?

Setidaknya ada tiga jenis array yang biasanya digunakan. Ketiga jenis array ini dibedakan dari cara kerjanya dan jumlah dimensi yang terkandung di dalamnya..

Indexed arrays. Ini merupakan jenis array yang paling basic atau mendasar. ... .

Multidimensional arrays. ... .

3. Associative arrays..