Call, Apply, Bind - JavaScript
Published: 2024-02-03 00:37:54

Sebenarnya artikel ini masih ada hubungannya dengan artikel [Function](https://dev.to/boibolang/function-javascript-27ph) 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.

```javascript
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: [],
};
```

![result](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qslrkkrs0hwglkpvbnnj.png)
Jika kita menggunakan cara biasa untuk meng-copy object.

```javascript
const copySekolah = kaligunung.kelas;
console.log(copySekolah);
copySekolah('3D', 'Severus Snape');
```

![result](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6x21t3ed8hwf55etzhmi.png)
`copySekolah` akan menjadi regular function sehingga keyword `this` bernilai `undefined`. Dengan menerapkan `call` hasilnya sebagai berikut.

```javascript
copySekolah.call(kalisari, '2D', 'Severus Snape');
console.log(kalisari);
```

![result](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ha8jzl6bu4bdi8nlyom6.png)
**Apply**
`apply` sama dengan `call` hanya saja kita bisa memasukkan `array` pada `argument`-nya.

```javascript
const data = ['4A', 'Albus Dumbledore'];
copySekolah.apply(kalisari, data);
console.log(kalisari);
copySekolah.call(kaligunung, ...data);
```

![result](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9uwrsom0hee6ckgi2b7p.png)
Jika kita gunakan `call` dengan `spread` hasilnya juga sama.

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

```javascript
// 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);
```
Jika kita klik element button di html hasilnya sebagai berikut.

![result](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ea6jkxvs7yx6836iipss.png)
keyword `this` akan mengacu kepada element yang dieksekusi, bukan pada `object` kaligunung. Jika kita ubah kodenya seperti ini.

```javascript
document
  .querySelector('.btn')
  .addEventListener('click', kaligunung.tambahKas.bind(kaligunung)); // 'this' keyword mengacu kepada object kaligunung
```
`this` keyword mengacu ke object kaligunung sehingga setiap kita klik element button nilai kas akan bertambah.

![result](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xqxrlr1bfpb1yi4ocpp0.png)