Property dan method array di javascript

 

Property dan method pada array javascript - Selamat siang sobs-sobs sekalian, semoga sobs-sobs dalam keadaan sehat walafiat baik jiwa dan raga, karena dengan sehat tentunya kita bisa menikmati sruputan kopi hangat. pada topik pembahasan ini masih berkisar dengan nona cantik (javascript). ya materi ini merupakan materi dasar yang diharapkan menambah pengetahuan sobs-sobs dan tentunya sebagai catatan gua juga sih sobs kalau sewaktu-waktu lupa. hehehe

Sebelum lebih jauh beranjak ke pembahasan materi tentunya kita sepakat bahwa si nona cantik ini (javascript) merupakan salah satu bahasa pemrograman yang menerapkan konsep OOP. artinya setiap tipe data  mempunyai property atau method, dan kegunaan dari property, method tersebut tentunya untuk mempermudah kita dalam mengelola data tersebut.

Salah satunya adalah tipe data array dimana tipe data ini tentunya mempunyai property dan method dimana propety dan , oke tanpa basa basi lagi kita akan masuk kepembahasannya sobs.

1. Property

di javascript untuk tipe data array mempunyai property dimana kita bisa memanggilnya untuk bisa mengetahui informasi dari sebuah array.

1.1 length [return]

property length merupakan property penting, property ini berisikan informasi berapa banyak element yang terkandung dalam sebuah array sobs-sobs. property ini akan mengembalikan nilai dengan tipe data number. untuk lebih jelasnya sobs-sobs bisa lihat contoh dibawah ini.

let daftarMantan = ["kirana", "dwi", "dinda"];

console.log(daftarMantan.length)            // 3
console.log(typeof daftarMantan.length)     // number

Yap banyaknya element dari contoh array diatas adalah tiga, sekarang bagaimana jika ada kasus dimana sebuah array mempunyai element array juga didalamnya atau dengan kata lain nested array seperti dibawah ini

let daftarMantan = [
    ["dinda", "dwi"],
    ["kirana", "septi"]
];

console.log(daftarMantan.length)	// 2

Kok hasilnya dua ? ya memang tidak salah sobs jika hasilnya dua, tentunya jika sobs-sobs ingin mengetahui banyaknya element seperti kasus diatas sobs-sobs bisa menggunakan perulangan seperti dibawah ini.

let daftarMantan = [
    ["dinda", "dwi"],
    ["kirana", "septi"]
];

let banyakElement = 0;

// arrLuar = index dari array terluar
for (let arrLuar=0; arrLuar < daftarMantan.length; arrLuar++) {
    // arrDalam = index dari array didalam     
    for (let arrDalam=0; arrDalam < daftarMantan[arrLuar].length; arrDalam++) {
        banyakElement += 1;
    }
}

console.log(banyakElement); // 4

penjelasan kode diatas :

- banyakElement : merupakan variabel untuk menampung banyaknya element

- arrLuar : merupakan variabel looping untuk array terluar dimana untuk indexing array dijavascript akan dimulai dari 0 sehingga kita deklarasikan nilainya yaitu 0, untuk batas looping kita lakukan kondisional arrLuar < daftarMantan.length dimana daftarMantan.length yaitu 2

- arrDalam : variabel looping untuk array dalam dan kita deklarasikan nilai awal adalah 0 juga. yang perlu diperhatika adalah kondisional arrDalam < daftarMantan[arrLuar].length dimana kondisional ini akan mengecek panjang dari array dalam yaitu ["dinda", "dwi"] dan ["kirana","septi"].

Silahkan sobs-sobs coba dengan menambahkan element pada array dalam. 

2. Method

method adalah sebuah fungsi yang melekat pada objek, jika kita mendeklarasikan sebuah array dijavascript secara langsung kita sudah membuat sebuah objek array. terdapat banyak method dijavascript dengan kegunaan berbeda-beda, disini gua akan bahas yang gua sering gunakan saja sobs-sobs, karena jika bahas secara detail semua method akan panjang sekali.

2.1 concat [return]

fungsi dari method ini adalah untuk mengabungkan beberapa array dan mengembalikan sebuah array baru. untuk contohnya seperti dibawah ini sobs-sobs.

const hewanKarnivora = ["singa", "harimau", "beruang"];
const hewanHerbivora = ["kambing", "jerapah", "gajah"];

const kebunBinatang = hewanKarnivora.concat(hewanHerbivora);

console.log(kebunBinatang);
// ["singa","harimau","beruang","kambing","jerapah","gajah"]

untuk parameter bisa lebih dari satu silahkan sobs-sobs coba sendiri.

2.2 filter [return]

method ini berfungsi untuk melakukan filter sehingga menghasilkan sebuah array dari kondisi filter yang sudah kita tetapkan, method ini mempunyai satu parameter yaitu berupa fungsi atau bahasa anak js yaitu callback function, dimana fungsi ini harus me return kondisi untuk filtering terhadap array. dan untuk parameter di callback function yaitu : function(valueArray, indexArray, array) dimana parameter wajib hanya valueArray saja.

oke mungkin sobs-sobs bingung untuk implementasinya bisa lihat contoh dibawah ini sobs.

const nilaiUasMahasiswa = [90, 70, 65, 55, 64, 80, 45, 33];

// function callback
function filterNilaiUas(nilai) {
    return nilai >= 70;
}

const nilaiUasMahasiswaLulus = nilaiUasMahasiswa.filter(filterNilaiUas);

console.log(nilaiUasMahasiswaLulus);
// [90,70,80]

diatas kita mendefinisikan sebuah fungsi callback dimana fungsi tersebut akan me return boolean true atau false, true jika nilai diatas dan sama dengan 70, dan false jika nilai dibawah 70. nilai true inilah yang akan diambil kemudian dimasukan kedalam array baru.

cara ke dua kita juga bisa langsung memasukan fungsi callback tersebut ke parameter method filter tanpa harus mendefinisikan fungsi seperti diatas, berikut ini contohnya sobs.

const nilaiUasMahasiswa = [90, 70, 65, 55, 64, 80, 45, 33];

const nilaiUasMahasiswaLulus = nilaiUasMahasiswa.filter(function(nilai) {
    return nilai >= 70;
});

console.log(nilaiUasMahasiswaLulus);
// [90,70,80]

silahkan sobs-sobs pilih cara penulisan yang mudah menurut sobs-sobs.

oh iya callback function ini mempunyai satu parameter yaitu element array seperti contoh diatas maka

2.3 find [return]

method ini berfungsi untuk menemukan nilai tertentu yang berada didalam array. method ini mengembalikan nilai berupa element array yang pertama kali ditemukan sesuai kondisi yang kita tentukan sobs-sobs dan jika tidak ditemukan maka nilai kembaliannya adalah undefined. sama seperti filter method ini mempunyai satu parameter yaitu sebuah fungsi atau callback function. dan untuk parameter di callback function yaitu : function(valueArray, indexArray, array) dimana parameter wajib hanya valueArray saja. untuk penggunaanya seperti contoh dibawah ini sobs.

const daftarMantan = ['kirana', 'dwi', 'adinda'];

function temukanMantanTerindah(mantan) {
    return mantan === "dwi";
}

const mantanTerindah = daftarMantan.find(temukanMantanTerindah);

console.log(mantanTerindah);
// dwi

Oh iya sobs kita juga bisa menulis langsung fungsi parameternya didalam methodnya tanpa harus mendefiniskan fungsinya seperti contoh method filter sebelumnya seperti dibawah ini sobs.

const daftarMantan = [
    {
        nama: "dirana",
        usia: 22,
        alamat: "jakarta"
    },
    {
        nama: "dwi",
        usia: 20,
        alamat: "tanggerang",
    },
    {
        nama: "adinda",
        usia: 26,
        alamat: "bekasi",
    }
];


const mantanTertua = daftarMantan.find(function(mantan) {
    return mantan.usia > 25;
});

console.log(mantanTertua);
// {
//   "nama": "adinda",
//   "usia": 26,
//   "alamat": "bekasi"
// }

Tambahan biasanya method ini juga digunakan untuk situasi kondisional seperti dibawah ini sobs.

const nilaiUas = [70, 84, 65, 60, 90];

if (nilaiUas.find((nilai) => nilai <= 60)) {
    // ini yang akan dieksekusi
    console.log("ada mahasiswa yang remedial");
} else {
    console.log("tidak ada mahasiswa yang remedial");
} 

silahkan sobs ubah element nilaiUas diatas 60 dan coba mana yang akan dieksekusi.

2.4 findIndex [return]

dari namanya tentu kita bisa menyangka-nyangka sobs, fungsi dari method ini adalah untuk menemukan index dari element array yang pertama kali ditemukan, dan jika tidak ditemukan indexnya maka akan mengembalikan nilai -1. method ini mempunyai satu parameter yaitu callback function. dan untuk parameter di callback function yaitu : function(valueArray, indexArray, array) dimana parameter wajib hanya valueArray saja 

const daftarMantan = ["dinda", "dwi", "adinda"];

const mantanTerindah = daftarMantan.findIndex((mantan) => mantan === "adinda");

console.log(mantanTerindah); // 2

dan ini juga biasanya digunakan untuk situasi kondisional, seperti dibawah ini

const siswaHadir = ["ani", "jono", "rika", "susi"];

if (siswaHadir.findIndex((siswa) => siswa === "bambang") === -1) {
    // ini yang akan dieksekusi     
    console.log("bambang tidak hadir");
} else {
    console.log("bambang hadir");
}

next method

2.4 forEach

method ini berfungsi untuk melakukan looping setiap element dari array, method ini mempunyai satu parameter yaitu callback function, callback function sendiri mempunyai parameter yaitu : function(valueArray, indexArray, array) dimana parameter wajib hanya valueArray saja dan method ini tidak mengembalikan sebuah nilai sobs-sobs. untuk lebih jelasnya seperti contoh dibawah ini.

const siswaHadir = ["ani", "jono", "rika", "susi"];

siswaHadir.forEach(function(siswa, indexSiswa) {
   console.log(`${siswa} hadir, Bu Guru`); 
});

// ani hadir, Bu Guru
// jono hadir, Bu Guru
// rika hadir, Bu Guru
// susi hadir, Bu Guru

Oke lanjut ke method berikutnya

2.5 join [return]

method join ini berfungsi untuk menggabungkan setiap element array menjadi sebuah string. method ini mempunyai satu parameter wajib yaitu separator atau pemisahnya. untuk contohnya seperti dibawah ini sobs.

const listSruputKode = ["sruputkode", "belajar", "asik", "sambil", "sruput", "kopi"];

const joinPertama = listSruputKode.join(" ");
console.log(joinPertama);
// sruputkode belajar asik sambil sruput kopi

const joinKedua = listSruputKode.join("-");
console.log(joinKedua);
// sruputkode-belajar-asik-sambil-sruput-kopi

Mudah-mudahan cukup jelas ya sobs-sobs, oke kita method selanjutnya

2.6 map [return]

sebenarnya method ini mempunyai maksud yang sama seperti method forEach hanya saja yang membedakan method ini akan mengembalikan sebuah array baru sesuai dengan keinginan kita sobs-sobs, method ini mempunyai satu parameter wajib yaitu sebuah fungsi. dan untuk fungsinya sendiri mempunyai parameter yaitu : function(valueArray, indexArray, array) dimana parameter wajib hanya valueArray saja. mari kita simak contoh dibawah ini sobs

const angka = [1, 2, 3, 4, 5];

const angkaDiKaliSepuluh = angka.map(function(isi) {
    return isi*10;
})

console.log(angkaDiKaliSepuluh);
// [10,20,30,40,50]

Sebagai catatan sobs method ini yang paling sering digunakan di react. contoh penggunaan di react

const App = () => {
    const siswaHadir = ["bambang", "dini", "diah", "asep"];
    
    return (
        <ul>
            {siswaHadir.map((siswa, index) => {
                return (
                    <li key={index}>{siswa}</li>
                );
            })}    
        </ul>
    );
}

Oke next method

2.7 pop [return]

method ini berfungsi untuk menghapus element terakhir dari sebuah array, dan juga method ini akan mengembalikan nilai berupa element yang dihapuskan. untuk contoh seperti dibawah ini sobs

const mantanTerindah = ["dwi", "ayu", "kirana"];
console.log(mantanTerindah);
// ["dwi","ayu","kirana"]

const hapusMantan = mantanTerindah.pop()
console.log(hapusMantan);
// kirana

console.log(mantanTerindah);
// ["dwi","ayu"]

gimana sobs-sobs mudah-mudahan cukup jelas. kita akan beranjak ke method selanjutnya.

2.8 push [return]

method ini berfungsi untuk menambahkan satu element atau beberapa element diposisi paling akhir dari sebuah array sobs. method mempunyai harus mempunyai minimal satu parameter atau bisa lebih. dan method ini juga mengembalikan nilai berupa banyak element dalam suatu array setelah ditambahkan.

const mantanTerindah = ["dwi", "ayu"];
console.log(mantanTerindah);
// ["dwi","ayu"]

const banyakMantan = mantanTerindah.push("kirana", "adinda", "diah");
console.log(banyakMantan); // 5

console.log(mantanTerindah);
// ["dwi","ayu","kirana","adinda","diah"]

Mudah-mudahan contoh diatas mudah dipahami ya sobs, oke next method.

2.9 shift [return]

method ini akan menghapus element pertama dari sebuah array, dan method ini akan mengembalikan nilai element yang dihapus dari array dan method ini tidak mempunyai parameter sobs.

const daftarMantan = ["Ani", "Ayu", "Ananda"];
console.log(daftarMantan);
// ["Ani","Ayu","Ananda"]

const mantanTerhapus = daftarMantan.shift();
console.log(mantanTerhapus); // "Ani"

console.log(daftarMantan);
// ["Ayu","Ananda"]

oke tanpa basa-basi ke next method sobs.

2.10 unshift [return]

method ini berfungsi untuk menambahkan satu atau beberapa element diposisi paling awal dari array, method ini setidaknya harus mempunyai satu parameter. nilai kembalian dari method ini adalah banyaknya element array setelah ditambahkan.

const daftarMantan = ["Ayu", "Ananda"];
console.log(daftarMantan);
// ["Ayu","Ananda"]

const banyakMantan = daftarMantan.unshift("wulan", "dewi");
console.log(banyakMantan); // 4

console.log(daftarMantan);
// ["wulan","dewi","Ayu","Ananda"]

ke method selajutnya sobs.

2.11 sort

fungsi dari method ini untuk melakukan pengurutan dari sebuah array

let angka = [10, 9, 77, 43, 28];
console.log(angka);
// [10,9,77,43,28]

angka.sort()
console.log(angka);
// [10,28,43,77,9]

let mantan = ["dwi", "kirana", "ayunda"];
console.log(mantan);
// ["dwi","kirana","ayunda"]

mantan.sort();
console.log(mantan);
// ["ayunda","dwi","kirana"]

Jika setiap element diarray berupa angka atau numeric maka pengurutan dari angka yang terkecil hingga yang terbesar, dan jika berupa string maka diurutkan berdasarkan aplhabet.

oke next method.

2.12 reverse

method ini berfungsi untuk membalik element dari suatu array dimana yang didepan menjadi dibelakang dan yang dibelakang menjadi didepan sobs.

const angka = [1, 2, 3]
console.log(angka);
// [1,2,3]

angka.reverse();
console.log(angka);
// [3,2,1]

ke method terakhir sobs-sobs.

2.13 splice

method ini berfungsi untuk menghapus atau menambahkan satu atau beberapa element berdasarkan index yang sudah kita tentukan, method ini mempunyai dua parameter wajib yaitu :

- index : yaitu index berapakah kita ingin lakukan pengoperasian.

- banyak : berapa banyak element yang ingin kita hapus atau tambahkan

splice(index, banyak, element1, element2, element... dst)

jika parameter ketiga dan seterusnya tidak kita tulis maka operasi yang dilakukan adalah menghapus element array sobs, seperti contoh dibawah ini :

let mantan = ["dini", "dwi", "angelia","ayu"];
console.log(mantan)
// ["dini","dwi","angelia","ayu"]

mantan.splice(1,2);
console.log(mantan)
// ["dini","ayu"]

dan jika parameter ketiga dan seterusnya maka operasi yang dilakukan adalah menghapus element dan menambahkan element baru.

let daftarWarna = ["kuning", "hijau", "biru"];
console.log(daftarWarna);
// ["kuning","hijau","biru"]

daftarWarna.splice(1,2, "ungu", "cokelat", "orange");
console.log(daftarWarna);
// ["kuning","ungu","cokelat","orange"]

oke sedikit penjelasan kode diatas sobs-sobs, pertama-tama akan dihapus element mulai dari index 1 dan dua element termasuk index 1 tersebut sehingga warna yang dihapus adalah warna hijau dan biru setelah terhapus maka akan ditambahkan element mulai dari index 1 sebanyak 3 element sesuai parameter 3,4 dan 5 yaitu warna ungu, cokelat dan orange. 

Ya mungkin sekian dulu pembahasan dari gua sobs, sebenarnya method array pada javascript masih banyak oleh karena itu sobs-sobs sangat disarankan untuk berseluncur mencari refrensi untuk menambah wawasan sobs-sobs sekalian.

See you next time.