Belajar Javascript #09 : Array

Anak Males – Dalam pemrograman JavaScript, array adalah salah satu struktur data yang paling sering digunakan. Array memungkinkan kita untuk menyimpan dan mengelola beberapa nilai dalam satu variabel, layaknya keranjang yang bisa menampung berbagai jenis item.

Dengan array, Anda bisa mengorganisir data dengan cara yang lebih efisien, serta mengakses dan memanipulasinya sesuai kebutuhan.

Artikel ini akan membahas lebih dalam tentang JavaScript array, mulai dari cara membuat, mengelola, hingga menggunakan berbagai metode array yang penting. Jadi, jika Anda ingin memahami array dengan baik, Anda berada di tempat yang tepat!

Baca Juga : Belajar Javascript #04 : Variabel & Tipe Data

Apa Itu JavaScript Array?

JavaScript array adalah sebuah struktur data yang digunakan untuk menyimpan beberapa nilai dalam satu variabel. Alih-alih membuat banyak variabel terpisah untuk setiap nilai, array memungkinkan kita menyimpan kumpulan nilai dalam satu wadah yang terorganisir. Elemen dalam array dapat berupa tipe data apa saja—seperti angka, string, objek, atau bahkan array lain (dikenal sebagai array multidimensi).

Array dalam JavaScript bekerja dengan indeks, di mana setiap elemen memiliki posisi atau urutan tertentu yang dimulai dari angka nol. Jadi, elemen pertama dari array memiliki indeks 0, elemen kedua memiliki indeks 1, dan seterusnya. Dengan JavaScript array, pengelolaan data menjadi lebih fleksibel dan efisien karena Anda bisa menambah, menghapus, atau mengubah elemen array dengan mudah.

Baca Juga : Belajar Javascript #03 : Fungsi Output di Javascript

Cara Membuat JavaScript Array

Membuat JavaScript array sangatlah mudah dan dapat dilakukan dengan berbagai cara. Pada dasarnya, array di JavaScript dibuat dengan menggunakan tanda kurung siku [] atau dengan menggunakan kata kunci new Array(). Kedua metode ini berfungsi untuk mendeklarasikan dan menyimpan kumpulan nilai dalam satu variabel.

Contoh Membuat JavaScript Array Menggunakan Tanda Kurung Siku

Cara paling umum untuk membuat JavaScript array adalah dengan menggunakan tanda kurung siku dan memisahkan setiap elemen dengan koma. Berikut contohnya:

let buah = ["apel", "pisang", "jeruk"];
console.log(buah); // Output: ["apel", "pisang", "jeruk"]

Pada contoh di atas, kita membuat sebuah array bernama buah yang berisi tiga elemen: “apel”, “pisang”, dan “jeruk”.

Contoh Membuat JavaScript Array Menggunakan new Array()

Selain itu, Anda juga bisa membuat JavaScript array dengan menggunakan konstruktor new Array(). Berikut contohnya:

let angka = new Array(1, 2, 3, 4);
console.log(angka); // Output: [1, 2, 3, 4]

Metode ini juga valid, tetapi sebagian besar developer lebih suka menggunakan tanda kurung siku karena lebih sederhana dan lebih mudah dibaca.

Array Kosong

Anda juga bisa membuat JavaScript array kosong yang bisa diisi nanti:

let daftarBelanja = [];

Setelah membuat array, Anda dapat menambahkan elemen ke dalamnya menggunakan metode seperti push() atau langsung mengakses indeks tertentu.

Membuat JavaScript array adalah dasar penting dalam pengelolaan data di JavaScript, karena memungkinkan Anda untuk menyimpan berbagai nilai dalam satu variabel dan memanipulasinya dengan mudah.

Baca Juga : Belajar Javascript #02 : Cara Menulis Javascript di HTML

Menambahkan dan Menghapus Elemen di JavaScript Array

Setelah membuat JavaScript array, salah satu fitur penting adalah kemampuan untuk menambahkan dan menghapus elemen dari array tersebut. JavaScript menyediakan berbagai metode untuk melakukan ini, baik di awal, akhir, atau bahkan di posisi tertentu dalam array.

Menambahkan Elemen ke JavaScript Array

Ada beberapa cara untuk menambahkan elemen ke JavaScript array. Mari kita lihat metode yang paling umum:

1. Menggunakan push() untuk Menambahkan di Akhir Array

Metode push() digunakan untuk menambahkan elemen baru di akhir array.

let buah = ["apel", "pisang"];
buah.push("mangga");
console.log(buah); // Output: ["apel", "pisang", "mangga"]

Dalam contoh ini, kita menambahkan “mangga” di akhir array buah.

2. Menggunakan unshift() untuk Menambahkan di Awal Array

Jika Anda ingin menambahkan elemen di awal array, gunakan unshift().

let buah = ["apel", "pisang"];
buah.unshift("jeruk");
console.log(buah); // Output: ["jeruk", "apel", "pisang"]

Sekarang, “jeruk” ditambahkan sebagai elemen pertama dalam array.

Menghapus Elemen dari JavaScript Array

Selain menambahkan elemen, kita juga dapat menghapus elemen dari JavaScript array. Ada beberapa metode untuk melakukannya:

1. Menggunakan pop() untuk Menghapus Elemen Terakhir

Metode pop() menghapus elemen terakhir dari array.

let buah = ["apel", "pisang", "mangga"];
buah.pop();
console.log(buah); // Output: ["apel", "pisang"]

Dalam contoh ini, “mangga” dihapus dari array.

2. Menggunakan shift() untuk Menghapus Elemen Pertama

Metode shift() menghapus elemen pertama dari array.

let buah = ["apel", "pisang", "mangga"];
buah.shift();
console.log(buah); // Output: ["pisang", "mangga"]

Di sini, “apel” dihapus dari posisi pertama.

3. Menggunakan splice() untuk Menambahkan atau Menghapus di Posisi Tertentu

Metode splice() lebih fleksibel karena memungkinkan Anda untuk menambahkan atau menghapus elemen di posisi tertentu dalam array.

• Menghapus Elemen dengan splice():

let buah = ["apel", "pisang", "mangga"];
buah.splice(1, 1); // Hapus 1 elemen di indeks 1
console.log(buah); // Output: ["apel", "mangga"]

Di sini, “pisang” dihapus dari indeks 1.

• Menambahkan Elemen dengan splice():

let buah = ["apel", "mangga"];
buah.splice(1, 0, "pisang"); // Tambahkan "pisang" di indeks 1
console.log(buah); // Output: ["apel", "pisang", "mangga"]

Dengan splice(), kita bisa menambahkan “pisang” di posisi kedua.

Baca Juga : Belajar Javascript #01 : Pengenalan Dasar Javascript

Mengakses Elemen di JavaScript Array

Setelah membuat dan mengisi JavaScript array, langkah berikutnya adalah memahami cara mengakses elemen-elemen di dalamnya. Setiap elemen dalam array memiliki indeks, yang menunjukkan posisinya di dalam array. Di JavaScript, indeks array dimulai dari angka 0, sehingga elemen pertama berada di indeks 0, elemen kedua di indeks 1, dan seterusnya.

1. Mengakses Elemen dengan Indeks

Cara paling sederhana untuk mengakses elemen dalam JavaScript array adalah dengan menggunakan tanda kurung siku [] dan menuliskan nomor indeks elemen yang ingin diakses.

Contoh:

let buah = ["apel", "pisang", "jeruk"];
console.log(buah[0]); // Output: apel
console.log(buah[2]); // Output: jeruk

Dalam contoh ini:

• buah[0] mengakses elemen pertama, yaitu “apel”.
• buah[2] mengakses elemen ketiga, yaitu “jeruk”.

Jika Anda mencoba mengakses indeks yang tidak ada dalam array, hasilnya adalah undefined:

console.log(buah[5]); // Output: undefined

2. Mengakses Elemen Terakhir dalam Array

Untuk mengakses elemen terakhir dari array tanpa mengetahui panjang array, Anda bisa menggunakan properti length. Dengan cara ini, Anda bisa mengakses elemen terakhir dengan mengurangi 1 dari panjang array:

let buah = ["apel", "pisang", "jeruk"];
console.log(buah[buah.length - 1]); // Output: jeruk

Karena buah.length akan menghasilkan angka 3, kita menggunakan buah.length - 1 untuk mengakses elemen terakhir, yaitu “jeruk”.

3. Menggunakan for Loop untuk Mengakses Semua Elemen

Jika Anda ingin mengakses setiap elemen dalam array satu per satu, Anda bisa menggunakan perulangan for. Ini sangat berguna ketika Anda tidak tahu berapa banyak elemen yang ada di dalam array.

Contoh:

let buah = ["apel", "pisang", "jeruk"];

for (let i = 0; i < buah.length; i++) {
  console.log(buah[i]);
}

Output:

apel
pisang
jeruk

Dengan menggunakan perulangan for, kita bisa mengakses setiap elemen di array berdasarkan indeksnya.

4. Menggunakan forEach() untuk Mengakses Setiap Elemen

Selain for loop, metode forEach() juga bisa digunakan untuk mengakses dan memproses setiap elemen di dalam JavaScript array.

Contoh:

let buah = ["apel", "pisang", "jeruk"];

buah.forEach(function(item, index) {
  console.log(index + ": " + item);
});

Output:

0: apel
1: pisang
2: jeruk

Metode forEach() memberikan akses langsung ke setiap elemen (item) dan indeksnya (index), memungkinkan Anda untuk memproses elemen-elemen dalam array dengan lebih rapi.

Baca Juga : Belajar Javascript #08 : Perulangan

Cara Menggabungkan Dua Array di JavaScript

Menggabungkan dua atau lebih array dalam JavaScript bisa dilakukan dengan sangat mudah menggunakan metode bawaan. JavaScript menyediakan beberapa cara untuk melakukan ini, termasuk menggunakan metode concat() dan operator spread (...). Berikut adalah penjelasan lengkapnya:

1. Menggunakan Metode concat()

Metode concat() adalah cara klasik untuk menggabungkan dua atau lebih array. Metode ini tidak mengubah array asli, melainkan mengembalikan array baru yang merupakan hasil penggabungan dari array yang diberikan.

Contoh:

let array1 = ["apel", "pisang"];
let array2 = ["jeruk", "mangga"];

let gabunganArray = array1.concat(array2);
console.log(gabunganArray); // Output: ["apel", "pisang", "jeruk", "mangga"]

Dalam contoh ini, concat() menggabungkan array1 dan array2, menghasilkan array baru tanpa mengubah array aslinya.

2. Menggunakan Operator Spread (...)

Cara lain yang lebih modern untuk menggabungkan array adalah dengan menggunakan operator spread (...). Operator ini memungkinkan Anda untuk “menyebarkan” elemen-elemen dari satu array ke dalam array lain. Metode ini sangat sederhana dan intuitif.

Contoh:

let array1 = ["apel", "pisang"];
let array2 = ["jeruk", "mangga"];

let gabunganArray = [...array1, ...array2];
console.log(gabunganArray); // Output: ["apel", "pisang", "jeruk", "mangga"]

Operator spread menyebarkan elemen dari kedua array dan menggabungkannya ke dalam satu array baru.

3. Menggabungkan Lebih dari Dua Array

Baik metode concat() maupun operator spread bisa digunakan untuk menggabungkan lebih dari dua array. Anda cukup menambahkan array tambahan yang ingin digabungkan.

Contoh dengan concat():

let array1 = ["apel"];
let array2 = ["pisang"];
let array3 = ["jeruk"];

let gabunganArray = array1.concat(array2, array3);
console.log(gabunganArray); // Output: ["apel", "pisang", "jeruk"]

Contoh dengan operator spread:

let array1 = ["apel"];
let array2 = ["pisang"];
let array3 = ["jeruk"];

let gabunganArray = [...array1, ...array2, ...array3];
console.log(gabunganArray); // Output: ["apel", "pisang", "jeruk"]

Baca Juga : Belajar Javascript #07 : Percabangan

Memfilter Data dengan JavaScript Array

Memfilter data dalam JavaScript array adalah proses untuk mengambil elemen-elemen dari sebuah array yang memenuhi syarat tertentu. JavaScript menyediakan metode bawaan yang sangat berguna untuk melakukan hal ini, yaitu metode filter(). Dengan filter(), kita bisa membuat array baru yang hanya berisi elemen-elemen yang sesuai dengan kondisi tertentu.

Apa Itu filter()?

Metode filter() adalah metode bawaan JavaScript yang digunakan untuk membuat array baru berisi elemen-elemen yang lulus uji berdasarkan kondisi yang diberikan oleh fungsi callback. Metode ini tidak mengubah array asli, melainkan mengembalikan array baru yang berisi elemen-elemen yang memenuhi kriteria.

Sintaks:

array.filter(function(elemen, indeks, array) {
    // kondisi yang harus dipenuhi
});

• elemen: elemen yang sedang diproses dalam array.
• indeks: indeks dari elemen yang sedang diproses.
• array: array asli yang sedang difilter.

Contoh Penggunaan filter()

Mari kita lihat beberapa contoh penggunaan filter() dalam berbagai situasi.

1. Memfilter Angka Genap dari Sebuah Array

Contoh sederhana adalah memfilter angka genap dari sebuah array.

let angka = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

let angkaGenap = angka.filter(function(item) {
    return item % 2 === 0; // hanya angka genap
});

console.log(angkaGenap); // Output: [2, 4, 6, 8, 10]

Dalam contoh ini, filter() hanya mengambil angka yang habis dibagi 2, sehingga menghasilkan array baru yang hanya berisi angka genap.

2. Memfilter Data Berdasarkan Kriteria Objek

Selain bekerja dengan angka atau string, metode filter() juga sangat berguna ketika bekerja dengan array yang berisi objek. Misalnya, kita ingin memfilter data produk berdasarkan harga.

let produk = [
    { nama: "Laptop", harga: 12000000 },
    { nama: "Smartphone", harga: 5000000 },
    { nama: "Tablet", harga: 3000000 }
];

let produkMahal = produk.filter(function(item) {
    return item.harga > 4000000; // memfilter produk dengan harga lebih dari 4 juta
});

console.log(produkMahal);
// Output: [{ nama: "Laptop", harga: 12000000 }, { nama: "Smartphone", harga: 5000000 }]

Di sini, filter() hanya mengambil produk yang memiliki harga lebih dari 4 juta.

3. Memfilter String yang Memenuhi Kondisi Tertentu

Anda juga bisa memfilter string dalam array. Misalnya, kita ingin memfilter nama-nama buah yang panjang karakternya lebih dari 5.

let buah = ["apel", "pisang", "jeruk", "anggur", "nanas"];

let buahPanjang = buah.filter(function(item) {
    return item.length > 5; // memfilter buah dengan nama lebih dari 5 karakter
});

console.log(buahPanjang); // Output: ["pisang", "anggur"]

4. Menggabungkan filter() dengan Metode Lain

Metode filter() sering kali digunakan bersamaan dengan metode lain seperti map() untuk memanipulasi hasil array setelah difilter. Misalnya, kita bisa memfilter angka genap dan kemudian mengalikan setiap angka dengan 2.

let angka = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

let angkaGenapDikalikan = angka
    .filter(function(item) {
        return item % 2 === 0; // filter angka genap
    })
    .map(function(item) {
        return item * 2; // kalikan setiap angka genap dengan 2
    });

console.log(angkaGenapDikalikan); // Output: [4, 8, 12, 16, 20]

Dalam contoh ini, kita memfilter angka genap dan kemudian mengalikan setiap angka hasil filter dengan 2.

Baca Juga : Belajar Javascript #06 : Operator

Mengurutkan Elemen di JavaScript Array

Mengurutkan elemen dalam JavaScript array sering kali diperlukan ketika kita ingin menampilkan data dalam urutan tertentu. JavaScript menyediakan metode sort() yang sangat fleksibel untuk melakukan ini. Dengan sort(), Anda dapat mengurutkan elemen secara alfabetis, numerik, dan bahkan sesuai dengan logika yang lebih kompleks.

Apa Itu sort()?

Metode sort() adalah metode bawaan JavaScript yang digunakan untuk mengurutkan elemen-elemen dalam array. Secara default, sort() akan mengurutkan elemen secara alfabetis atau berdasarkan nilai Unicode jika elemen berupa string. Namun, kita juga bisa menerapkan fungsi perbandingan untuk mengatur cara pengurutan yang lebih spesifik, seperti urutan angka.

Sintaks:

array.sort([fungsiPembanding]);

• fungsiPembanding (opsional): Fungsi yang mendefinisikan urutan elemen. Jika tidak ada, elemen akan diurutkan berdasarkan nilai string.

1. Mengurutkan Array String Secara Alfabetis

Ketika mengurutkan array yang berisi string, metode sort() akan mengurutkan elemen-elemen dalam urutan alfabetis.

Contoh:

let buah = ["jeruk", "apel", "mangga", "pisang"];

buah.sort();
console.log(buah); // Output: ["apel", "jeruk", "mangga", "pisang"]

Dalam contoh ini, sort() mengurutkan elemen-elemen dalam urutan abjad dari A sampai Z.

2. Mengurutkan Array Numerik

Mengurutkan angka di JavaScript memerlukan sedikit perhatian, karena sort() secara default akan memperlakukan angka sebagai string. Untuk mengurutkan angka dengan benar, kita perlu menyediakan fungsi pembanding.

Contoh:

let angka = [40, 100, 1, 5, 25, 10];

angka.sort(function(a, b) {
    return a - b; // urutkan secara naik (ascending)
});
console.log(angka); // Output: [1, 5, 10, 25, 40, 100]

Dalam fungsi pembanding ini, kita mengurangi a dengan b untuk mengurutkan angka dari kecil ke besar. Jika ingin mengurutkan dari besar ke kecil, cukup ubah menjadi b - a.

3. Mengurutkan Secara Descending (Menurun)

Jika Anda ingin mengurutkan array dalam urutan menurun, Anda bisa menggunakan metode reverse() setelah sort(), atau membalik fungsi pembanding untuk angka.

Contoh untuk angka:

let angka = [40, 100, 1, 5, 25, 10];

angka.sort(function(a, b) {
    return b - a; // urutkan secara menurun (descending)
});
console.log(angka); // Output: [100, 40, 25, 10, 5, 1]

Contoh untuk string:

let buah = ["jeruk", "apel", "mangga", "pisang"];

buah.sort().reverse(); // urutkan dari Z ke A
console.log(buah); // Output: ["pisang", "mangga", "jeruk", "apel"]

4. Mengurutkan Objek dalam Array

Mengurutkan array objek sedikit lebih rumit, karena kita harus menentukan properti yang akan digunakan sebagai dasar pengurutan. Misalnya, jika kita memiliki array objek produk yang memiliki properti harga, kita bisa mengurutkannya berdasarkan harga.

Contoh:

let produk = [
    { nama: "Laptop", harga: 12000000 },
    { nama: "Smartphone", harga: 5000000 },
    { nama: "Tablet", harga: 3000000 }
];

produk.sort(function(a, b) {
    return a.harga - b.harga; // urutkan berdasarkan harga secara naik
});
console.log(produk);
// Output:
// [
//   { nama: "Tablet", harga: 3000000 },
//   { nama: "Smartphone", harga: 5000000 },
//   { nama: "Laptop", harga: 12000000 }
// ]

Dalam contoh ini, kita menggunakan properti harga dari setiap objek untuk menentukan urutannya.

5. Menggunakan localeCompare() untuk Pengurutan Alfabetis yang Lebih Kompleks

Untuk pengurutan string yang lebih canggih, misalnya ketika Anda harus memperhitungkan aksen atau urutan alfabet lokal, Anda bisa menggunakan metode localeCompare().

Contoh:

let kata = ["éclair", "apple", "Éclair", "banana"];

kata.sort(function(a, b) {
    return a.localeCompare(b);
});
console.log(kata); // Output: ["apple", "banana", "éclair", "Éclair"]

localeCompare() memungkinkan pengurutan string sesuai dengan aturan bahasa yang lebih spesifik.

Baca Juga : Belajar Javascript #05 : Jendela Dialog Untuk Input

Kesimpulan

Dalam pemrograman JavaScript, array merupakan salah satu struktur data yang paling esensial dan sering digunakan. Dengan array, kita dapat menyimpan dan mengelola beberapa nilai dalam satu variabel, yang membuat pengelolaan data menjadi lebih efisien dan terorganisir.

Artikel ini telah membahas berbagai aspek penting mengenai JavaScript array, termasuk cara membuat, mengelola, serta menggunakan berbagai metode yang tersedia. Kami telah melihat bagaimana cara menambahkan dan menghapus elemen, mengakses nilai berdasarkan indeks, serta menggabungkan dan memfilter array dengan mudah. Selain itu, pengurutan elemen dalam array juga telah dijelaskan, baik untuk string maupun angka, serta bagaimana mengurutkan objek berdasarkan properti tertentu.

Dengan pemahaman yang baik tentang array, Anda dapat meningkatkan kemampuan pemrograman JavaScript Anda, menjadikan proses pengolahan data lebih intuitif dan efektif. Semoga artikel ini bermanfaat dalam perjalanan belajar Anda di dunia JavaScript!