DEV Community

Cover image for Call, Apply, Bind - JavaScript
boibolang
boibolang

Posted on

Call, Apply, Bind - JavaScript

Sebenarnya artikel ini masih ada hubungannya dengan artikel Function pada postingan sebelumnya tapi saya putuskan untuk ditulis pada postingan tersendiri, mengingat jika dijadikan satu akan menjadi panjang. Artikel memang saya batasi pembahasannya tidak terlalu panjang, selesai dibaca 5 - 10 menit karena itulah waktu efektif membaca, membaca lebih dari 15 menit membutuhkan konsentrasi lebih.

Call
call adalah fungsi yang bisa mengganti nilai dari keyword this didalam sebuah fungsi dengan nilai apapun.

const kaligunung = {
  nama: 'SDN Kaligunung III',
  kode: 'SDKG3',
  catatan: [],
  kelas(tingkat, guru) {
    console.log(
      `${guru} adalah wali murid di sekolah ${this.nama} kelas ${tingkat}`
    );
    this.catatan.push({kelas: `${this.kode}${tingkat}`, guru});
  },
};
kaligunung.kelas('2Q', 'Harry Potter');
kaligunung.kelas('2A', 'Hermione Granger');
console.log(kaligunung);

const kalisari = {
  nama: 'SDN Kalisari IV',
  kode: 'SDNKL4',
  catatan: [],
};
Enter fullscreen mode Exit fullscreen mode

result
Jika kita menggunakan cara biasa untuk meng-copy object.

const copySekolah = kaligunung.kelas;
console.log(copySekolah);
copySekolah('3D', 'Severus Snape');
Enter fullscreen mode Exit fullscreen mode

result
copySekolah akan menjadi regular function sehingga keyword this bernilai undefined. Dengan menerapkan call hasilnya sebagai berikut.

copySekolah.call(kalisari, '2D', 'Severus Snape');
console.log(kalisari);
Enter fullscreen mode Exit fullscreen mode

result
Apply
apply sama dengan call hanya saja kita bisa memasukkan array pada argument-nya.

const data = ['4A', 'Albus Dumbledore'];
copySekolah.apply(kalisari, data);
console.log(kalisari);
copySekolah.call(kaligunung, ...data);
Enter fullscreen mode Exit fullscreen mode

result
Jika kita gunakan call dengan spread hasilnya juga sama.

Bind
bind menghasilkan fungsi lain yang bisa diekseskusi di lain waktu.

// sebelumnya buatlah element button di html dengan nama class 'btn'
kaligunung.kasKelas = 100000;
kaligunung.tambahKas = function () {
  console.log(this);
  this.kasKelas += 1000;
  console.log(this.kasKelas);
};
document.querySelector('.btn').addEventListener('click', kaligunung.tambahKas);
Enter fullscreen mode Exit fullscreen mode

Jika kita klik element button di html hasilnya sebagai berikut.

result
keyword this akan mengacu kepada element yang dieksekusi, bukan pada object kaligunung. Jika kita ubah kodenya seperti ini.

document
  .querySelector('.btn')
  .addEventListener('click', kaligunung.tambahKas.bind(kaligunung)); // 'this' keyword mengacu kepada object kaligunung
Enter fullscreen mode Exit fullscreen mode

this keyword mengacu ke object kaligunung sehingga setiap kita klik element button nilai kas akan bertambah.

result

Top comments (0)