Operasi Array dan Object dengan Plain Vanilla Javascript

Dengan semakin matangnya standar JavaScript saat ini berkat hadirnya edisi ke-enam dari standar ECMAScript 2015 dan dukungan berbagai browser modern, pemrograman web dengan Javascript menjadi semakin mudah. Salah satu operasi pemrograman yang sering saya lakukan adalah operasi yang melibatkan Array dan Object (utamanya JSON). Berikut ini adalah beberapa code snippet yang saya coba dokumentasikan yang mungkin bermanfaat bagi teman-teman yang membaca artikel ini. Karena fungsi-fungsi/metode-metode object yang digunakan dalam artikel ini adalah standar, walaupun snippet yang saya contohkan untuk digunakan pada browser (client-side), maka kemungkinan besar snippet kode-kode ini juga bisa berjalan pada NodeJS a.k.a JavaScript di server-side. Karena artikel ini tidak mencakup dasar-dasar pemrograman Javascript, ada baiknya teman-teman yang belum mengenal JavaScript mempelajari terlebih dahulu dasar-dasar pemrograman JavaScript sebelum membaca artikel ini.

Iterasi Array dengan method forEach

Untuk melakukan iterasi terhadap isi dari Array biasanya kita menggunakan loop construct seperti for, alternatifnya kita bisa juga menggunakan forEach yang relatif lebih praktis.

<!doctype html>
<html><head><title>Plain Vanilla JavaScript</title><meta charset="UTF-8"></head>
<body>
<script>
    // sebuah Array berisi daftar nama teman-teman
    var temanTeman = ['Asri', 'Budi', 'Choirul', 'Deni', 'Erma'];
    temanTeman.forEach(function(teman) {
      // tampilkan ke console JavaScript
      console.log(teman);
      // tampilkan pada body dokumen HTML
      document.writeln(teman + '<br/>');
    });
</script>
</body>
</html>

Iterasi Object dengan method forEach

Untuk melakukan iterasi terhadap property dan nilai yang ada dalam sebuah Object kita bisa juga menggunakan forEach dengan cara sedikit berbeda seperti berikut ini:

<!doctype html>
<html><head><title>Plain Vanilla JavaScript</title><meta charset="UTF-8"></head>
<body>
<script>
    var sebuahObject = {nama: 'Ari', pekerjaan: 'Mahasiswa', usia: 36}    
    Object.keys(sebuahObject).forEach(function(prop) {
      // ambil nilai untuk prop ini
      const propVar = Object.getOwnPropertyDescriptor(sebuahObject, prop);
      // tampilkan pada body dokumen HTML
      document.writeln(prop + ': ' + propVar.value + '<br/>');
    });
</script>
</body>
</html>

Mencari tahu apakah sebuah nilai ada pada sebuah Array dengan method includes

Untuk mengetahui apakah sebuah nilai ada pada sebuah Array kita bisa menggunakan includes, seperti contoh berikut ini:

<!doctype html>
<html><head><title>Plain Vanilla JavaScript</title><meta charset="UTF-8"></head>
<body>
<script>
    // sebuah Array berisi daftar nama teman-teman
    var temanTeman = ['Asri', 'Budi', 'Choirul', 'Deni', 'Erma'];
    // apakah "Budi" ada dalam daftar-daftar teman-teman kita?
    const yangKitaCari = 'Budi'
    if (temanTeman.includes(yangKitaCari)) {
      // tampilkan ke console JavaScript
      console.log(yangKitaCari+' ada dalam daftar!');
      // tampilkan pada body dokumen HTML
      document.writeln('<p>'+yangKitaCari+' ada dalam daftar!</p>')
    } else {
      // tampilkan ke console JavaScript
      console.log(yangKitaCari+' TIDAK ADA dalam daftar!');
      // tampilkan pada body dokumen HTML
      document.writeln('<p>'+yangKitaCari+' TIDAK ADA dalam daftar!</p>')      
    }
</script>
</body>
</html>

Menggabungkan dua atau lebih Array menjadi satu dengan method concat

Kita bisa dengan mudah menggabungkan dua atau lebih Array menjadi satu dengan menggunakan concat, seperti contoh berikut ini:

<!doctype html>
<html><head><title>Plain Vanilla JavaScript</title><meta charset="UTF-8"></head>
<body>
<script>
    // menggabungkan dua atau lebih Array menjadi satu
    var temanKu  = ['Asri', 'Budi', 'Choirul', 'Deni', 'Erma'];
    var temanDia = ['Ferry', 'Giri', 'Helmi', 'Iman'];
    // gabungkan Array menjadi Array baru
    var temanKudanDia = temanKu.concat(temanDia);
    console.log(temanKudanDia);
    temanKudanDia.forEach(function(teman) {
      // tampilkan pada body dokumen HTML
      document.writeln(teman + '<br/>');
    });
</script>
</body>
</html>

Melakukan filter isi Array berdasarkan kriteria tertentu dengan method filter

Untuk melakukan filter terhadap isi dari Array kita bisa menggunakan filter. Callback dari method filter harus mengembalikan nilai true apabila elemen tersebut ingin dipertahankan dalam Array atau sebaliknya. Bisa dilihat pada contoh berikut ini:

<!doctype html>
<html><head><title>Plain Vanilla JavaScript</title><meta charset="UTF-8"></head>
<body>
<script>
    // mem-filter Array sesuai dengan kriteria tertentu
    var temanKu  = ['Asri', 'Budi', 'Choirul', 'Deni', 'Erma', 'Kampret', 'Kecebong'];
    var benarBenarTemanKu = temanKu.filter(teman => teman!='Kampret'&&teman!='Kecebong');
    console.log(benarBenarTemanKu);
    benarBenarTemanKu.forEach(function(teman) {
      // tampilkan pada body dokumen HTML
      document.writeln(teman + '<br/>');
    });
</script>
</body>
</html>

Mengubah isi Array menjadi Array baru dengan isi yang sudah dimodifikasi dengan method map

Ada kalanya kita ingin memodifikasi/mengubah isi sebuah Array. Hal tersebut bisa dilakukan dengan mudah dengan map:

<!doctype html>
<html><head><title>Plain Vanilla JavaScript</title><meta charset="UTF-8"></head>
<body>
<script>
    // membuat Array baru yang isi merupakan hasil modifikasi dari isi Array sebelumnya
    var stringTemanKu  = ['Asri', 'Budi', 'Choirul', 'Deni', 'Erma'];
    // stringTemanKu sebelumnya adalah Array berisi string
    // sekarang kita ubah menjadi Array baru berisi object
    var objectTemanKu = stringTemanKu.map(teman => {
      var objectTeman = {nama: teman, status: 'teman'};
      return objectTeman;
    });
    console.log(objectTemanKu);
    // bisa juga sebaliknya, dari Array berisi object menjadi Array berisi string
    var stringTemanKuJuga = objectTemanKu.map(teman => teman.nama+' adalah seorang '+teman.status);
    console.log(stringTemanKuJuga);
    stringTemanKuJuga.forEach(function(teman) {
      // tampilkan pada body dokumen HTML
      document.writeln(teman + '<br/>');
    });
</script>
</body>
</html>

Mengubah string menjadi Array elemennya adalah setiap huruf dari string tersebut dengan function Array.from

Bagaimana apabila kita ingin mengubah sebuah string dan memecahnya menjadi Array yang berisikan setiap huruf dari string tersebut? Mudah!:

<!doctype html>
<html><head><title>Plain Vanilla JavaScript</title><meta charset="UTF-8"></head>
<body>
<script>
    // membuat Array dari string
    var deretanHuruf = 'ABCDEFGHIJKLM';
    var deretanHurufArray = Array.from(deretanHuruf);
    deretanHurufArray.forEach(function(huruf) {
      // tampilkan pada body dokumen HTML
      document.writeln('Ini huruf '+ huruf + '!<br/>');
    });
</script>
</body>
</html>

Mengubah Array menjadi string dengan method join

Bagaimana sebaliknya apabila kita ingin mengubah sebuah Array menjadi sebuah string? Mudah!:

<!doctype html>
<html><head><title>Plain Vanilla JavaScript</title><meta charset="UTF-8"></head>
<body>
<script>
    // membuat string dari Array
    var temanKu  = ['Asri', 'Budi', 'Choirul', 'Deni', 'Erma'];
    // kita persatukan teman-teman kita dengan sebuah koma
    var stringTemanKu = temanKu.join(', ');
    // tampilkan pada body dokumen HTML
    document.writeln('Teman-temanku adalah: '+ stringTemanKu);
</script>
</body>
</html>

Melakukan tes pada setiap isi Array apakah sudah memenuhi kriteria dengan method every

Adakalanya kita ingin mengetahui apakah setiap anggota dari Array sudah memenuhi kriteria tertentu, untuk melakukan tes tersebut kita bisa menggunakan every:

<!doctype html>
<html><head><title>Plain Vanilla JavaScript</title><meta charset="UTF-8"></head>
<body>
<script>
    // melakukan tes pada setiap elemen Array apakah memenuhi kriteria tertentu
    var anggota  = [
      {nama: 'Asri', usia: 17}, 
      {nama: 'Budi', usia: 18}, 
      {nama: 'Choirul', usia: 19},
      {nama: 'Deni', usia: 20}, 
      {nama: 'Erma', usia: 15}
    ];
    // apakah semua orang dalam anggota sudah lebih dari 16 tahun?
    var semuaSudahDewasa = anggota.every(orang => orang.usia>16);
    if (semuaSudahDewasa) {
      document.writeln('Semua sudah dewasa!');
    } else {
      document.writeln('Masih ada di antara mereka yang belum dewasa!');
    }
</script>
</body>
</html>

Semoga artikel ini bermanfaat, apabila ada pertanyaan terkait dengan beberapa fungsi dasar dari JavaScript bisa teman-teman tanyakan pada kolom komentar.

Komentar

Postingan populer dari blog ini

Template Aplikasi Web CRUD Sederhana dengan CodeIgniter

Frontend aplikasi web dengan AngularJS dan backend PHP

Membuat Aplikasi Berbasis Web "Single Page Application" dengan Vue.js (Bagian 1)