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