Ads by Yasya El Hakim
Tips dan Trik Array pada JavaScript

Array adalah salah satu konsep yang ada di JavaScript dan dapat kita gunakan untuk menyimpan suatu data. Pada artikel kali ini, saya ingin menunjukan beberapa trik yang mungkin belum kalian ketahui dan saya berharap agar artikel ini bermaanfaat dan dapat membantu kalian dalam Coding. Jadi, langsung saja kita mulai.



Menghapus Duplikat pada Array

Cara ini merupakan salah satu dari beberapa banyak pertanyaan tentang bagaimana kita dapat mengambil suatu nilai pada Array. Berikut adalah solusi yang mudah untuk mengatasinya, disini kalian dapat menggunakan metode Set(). Dan saya ingin menunjukkan kepada kalian dua cara yang mungkin bisa digunakan salah satunya, pertama dengan menggunakan metode .from() dan kedua dengan operator (...).

var buah = ["pisang", "apel", "jeruk", "semangka", "apel", "orange", "anggur", "apel"];

// Metode Pertama
var namaBuah = Array.from(new Set(buah));
console.log(namaBuah); // output ["pisang", "apel", "jeruk", "semangka", "anggur"]

// Metode Kedua
var namaBuah2 = [...new Set(buah)];
console.log(namaBuah2); // output ["pisang", "apel", "jeruk", "semangka", "anggur"]


Mudah Bukan?

Mengubah Suatu Nilai pada Array

Saat menulis kode, terkadang kita perlu untuk mengganti atau mengubah suatu nilai tertentu yang ada di dialam Array, tapi apakah kalian tahu bahwa terdapat metode singkat yang mungkin belum pernah kalian gunakan atau belum pernah kalian ketahui? Disini, kita dapat menggunakan .splice(start, nilaiUntukDihapus, nilaiUntukDitambah) dan berikan ketiga parameter yang dapat menentukan di mana kita ingin dan berapa banyak nilai yang ingin kita ubah atau atau nilai yang ingin kita tambahkan.

var buah = ["pisang", "apel", "jeruk", "semangka", "apel", "jeruk", "anggur", "apel"];

buah.splice(0, 2, "kentang", "tomat");

    console.log(buah); // output ["kentang", "tomat", "jeruk", "semangka", "apel", "jeruk", "anggur", "apel"]


Map Array tanpa .map()

Mungkin semua developer sudah tahu tentang salah satu metode dari Array yaitu .map(), tetapi hal yang harus kalian ketahui bahwasanya terdapat solusi lain yang dapat kita gunakan untuk mendapatkan efek serupa tapi tak sama. Disini kita dapat menggunakan metode .from().

var teman = [
{ nama: 'Yasya', jenisKelamin: 'laki-laki' },
{ nama: 'Agung', jenisKelamin: 'laki-laki' },
{ nama: 'Wahyu', jenisKelamin: 'laki-laki' },
{ nama: 'Ulum', jenisKelamin: 'laki-laki' },
{ nama: 'Imam', jenisKelamin: 'laki-laki' },
{ nama: 'Billy', jenisKelamin: 'laki-laki' },
]

var namaTeman = Array.from(teman, ({nama}) => nama);

console.log(namaTeman); // output [ "Yasya", "Agung", "Wahyu", "Ulum", "Imam", "Billy" ]


Mengosongkan Array

Apakah kalian punya sebuah Array yang penuh dengan elemen? Tapi bagaimana jika kalian harus menghapusnya dan kalian tidak ingin menghapusnya satu per satu? Disini, saya memiliki cara yang sangat mudah untuk melakukan hal tersebut hanya dengan menggunakan satu baris kode. Untuk mengosongkan Array, kalian hanya perlu mengatur length dari array menjadi 0!

var buah = ["pisang", "apel", "jeruk", "melon", "apel", "jeruk", "anggur", "apel"];

buah.length = 0;

console.log(buah); // output []


Mengubah Array Menjadi Object

Jika kita memiliki Array, tetapi hanya ingin kita gunakan untuk beberapa tujuan dan kita membutuhkan objek dari data yang ada di dalam Array. Cara tercepat untuk mengubah array menjadi sebuah objek adalah dengan menggunakan operator yang dikenal dengan spread (...).

var buah = ["pisang", "apel", "jeruk", "semangka"];

var objekBuah = {...buah};

console.log(objekBuah); // output {0: "pisang", 1: "apel", 2: "jeruk", 3: "semangka"}


Memenuhi Array dengan Data

Terdapat beberapa situasi ketika kita ingin membuat sebuah Array dan kita ingin mengisinya dengan beberapa data atau kita membutuhkan sebuah array dengan nilai yang sama. Dalam kasus ini, kita dapat mengatasinya dengan menggunakan metode .fill().

var arrayBaru = new Array(10).fill("1");

console.log(arrayBaru); // output ["1", "1", "1", "1", "1", "1", "1", "1", "1", "1", "1"]


Menggabungkan Array

Apakah kalian tahu cara untuk menggabungkan Array menjadi satu yang tidak menggunakan metode .concat()? Terdapat cara sederhana untuk menggabungkan bebera Array menjadi satu dengan menggunakan satu baris kode. Seperti yang sudah saya tunjukkan diatas, operator spread (...) sangatlah berguna dan dalam hal ini kita dapat menggunakannya.

var buah = ["apel", "pisang", "jeruk"];
var daging = ["daging sapi", "daging kambing", "daging kerbau"];
var sayuran = ["kentang", "tomat", "timun"];
var makanan = [...buah, ...daging, ...sayuran];

console.log(makanan); // output ["apel", "pisang", "jeruk", "daging sapi", "daging kambing", "daging kerbau", "kentang", "tomat", "timun"]


Menemukan Perbedaan dari Dua Array

Hal ini juga merupakan salah satu pertanyaan yang paling populer karena dapat menunjukkan apakah kalian dapat menggunakan metode Array dan apakah kalian mengetahui logikanya. Untuk menemukan perbedaan pada dua array, disini saya akan menunjukkan salah satu metode yang telah kita gunakan sebelumnya, untuk memastikan bahwa nilai yang ada di dalam array tidak terduplikat, kita dapat menggunakan metode .filter dan .includes. Hasilnya, kita akan mendapatkan Array dengan nilai yang ada di kedua array.

var satu = [0, 2, 4, 6, 8, 8];
var dua = [1, 2, 3, 4, 5, 6];
var nilaiDuplikat = [...new Set(satu)].filter(item => dua.includes(item));

console.log(nilaiDuplikat); // output [2, 4, 6]


Menghapus Nilai yang Salah pada Array

Pertama, mari kita tentukan nilai yang salah. Pada Javascript, nilai yang salah  adalah false, 0, ,,", null, NaN, undefined. Sekarang kita akan bisa mengetahui cara  untuk menghapus nilai-nilai semacam ini dari Array yang kita miliki. Untuk mengatasinya, kita dapat menggunakan metode .filter().

var arrayCampuran = [0, "biru", "", NaN, 9, true, undefined, "putih", false];
var arrayBenar = arrayCampuran.filter(Boolean);

console.log(arrayBenar); // output ["biru", 9, true, "putih"]


Mendapatkan Nilai Acak (Random) pada Array

Terkadang kita perlu memilih suatu nilai yang ada di dalam array secara acak. Untuk mengatasinya dengan cara yang mudah, cepat, dan singkat serta menjaga kode agar tetap clean, kita bisa mendapatkan nomor indeks yang acak sesuai dengan panjang Array.

var warna = ["biru", "putih", "hijau", "biru laut", "pink", "ungu", "orange", "kuning", "hitam", "coklat"];
var warnaAcak = warna[(Math.floor(Math.random() * (warna.length)))]


Membalikkan Array

Ketika kita ingin membalikkan atau memulai array dari bagian akhir ke awal, kita tidak perlu membuatnya dengan menggunakan loop atau fungsi yang rumit karena terdapat metode Array dapat kita gunakan untuk melakukan hal tersebut dengan sangat mudah. Dengan menggunakan satu baris kode, kita bisa membalikkan Array!

var warna = ["biru", "putih", "hijau", "biru laut", "pink", "ungu", "orange", "kuning", "hitam", "coklat"];
var balikWarna = warna.reverse();

console.log(balikWarna); // output ["coklat", "hitam", "kuning", "orange", "ungu", "pink", "biru laut", "hijau", "putih", "biru"]


Metode .lastIndexOf()

Pada JavaScript, terdapat salah satu metode menarik yang dapat kita gunakan untuk menemukan indeks terakhir dari elemen yang diberikan. Misalnya, jika suatu array memiliki nilai duplikat, kita dapat menemukan posisi index terakhirnya. Mari kita cek dengan kode berikut:

var angka = [1, 5, 2, 6, 3, 5, 2, 3, 6, 5, 2, 7];
var indexAkhir = angka.lastIndexOf(5);

console.log(indexAkhir); // output 9


Menjumlahkan Semua Nilai pada Array

Untuk melakukan hal ini, kita dapat menggunakan .reduce() dengan satu baris kode. Langsung cek ke TKP aja deh:

var angka = [1, 5, 2, 6];
var jumlah = angka.reduce((x, y) => x + y);

console.log(jumlah); // output 14


Kesimpulan

Pada artikel kali ini, saya telah menunjukkan beberapa trik dan tips yang mungkin dapat membantu kalian dalam coding dan dapat menjaga kode yang kalian buat agar tetap pendek dan clean. Dan juga, ingatlah bahwa terdapat banyak sekali trik berbeda yang dapat kalian gunakan serta perlu ditelusuri lebih lanjut, tidak hanya tentang Array tetapi juga terdapat tipe data yang berbeda.

0Komentar

Sebelumnya Selanjutnya