Note: This article is intended for Indonesians

Perkenalan

Javascript mempunyai banyak built in function pada prototype. Ada di array, string, object, dan lain2. Salah satu contohnya adalah String.prototype.toUpperCase() yang memungkinkan kita membuat string menjadi huruf besar.

String.prototype.toUpperCase()

const str = 'ini teks';console.log(str.toUpperCase()) // => 'INI TEKS'

Tapi pada suatu saat kita mungkin perlu mengubah string menjadi huruf kapital, tetapi javascript tidak punya builtin function seperti itu. Jadi solusinya adalah kita membuat function sendiri seperti pada contoh berikut:

Contoh Function Capitalize

function capitalize(str) {  return `${str[0].toUpperCase()}${str.slice(1)}`}console.log(capitalize('ini teks')) // => 'Ini teks'

Ini bekerja dengan baik tetapi tidak seperti yang kita harapkan. Contoh yang saya buat diatas merupakan function biasa, yang bisa menjadikan kode kita sulit dibaca jika sudah terdapat banyak function. Lalu gimana cara kita dapat membuat function seperti .toUpperCase()? Caranya seperti berikut:

String.prototype.capitalize()

String.prototype.capitalize = function() {  return `${this[0].toUpperCase()}${this.slice(1)}`}console.log('ini teks'.capitalize()) // => 'Ini teks'

Isi functionnya sama dengan yang kita buat pada contoh diatas ini, tetapi penulisan kode menjadi lebih rapih karena kita mendefinisikannya langsung ke prototype, ini seakan2 menjadikan capitalize seperti function bawaan javascript.

Penjelasan

Tetapi jika dilihat ada yang berubah, kita memakai keyword this pada kode diatas karena this pada kode diatas mereferensikan ke string yang kita beri method capitalize, contoh:

String.prototype.capitalize = function() {  return this}console.log('ini teks'.capitalize()) // => 'ini teks'

Jadi this pada kode diatas digunakan untuk menangkap stringnya, dan karena itu pula kita tidak dapat menggunakan arrow function karena keyword this akan berisi undefined