MENGENAL PENGGUNAAN `THIS` DALAM JAVASCRIPT UNTUK PEMULA

Halo sobat Skodev!

Buat kamu yang sedang mendalami JavaScript, pasti sering menjumpai keyword this. Bagi pemula, konsep dari keyword this dalam JavaScript sering membingungkan dan kesulitan memahami kapan dan bagaimana this dapat digunakan pada objek tertentu.

Tapi, jangan khawatir, dalam artikel kali ini, kita akan membahas cara penggunaan this dalam JavaScript lebih mendalam dengan cara yang sederhana dan mudah dimengerti, terutama untuk pemula.

Namun, sebelum mempelajari penggunaan this, ada beberapa konsep dasar yang perlu kamu kuasai terlebih dahulu, yuk simak artikel berikut:

• Variabel JavaScript
• Tipe Data dalam JavaScript
• Function JavaScript

Apa Itu this?

this adalah keyword atau kata kunci yang merujuk ke suatu object yang sedang diproses atau pada konteks dimana this itu berada. Penggunaan this juga tergantung pada konteks tempat dan cara this merujuk pada object tertentu saat dijalankan.

Bagaimana Cara Penggunaan this?

Penggunaan this dalam JavaScript bergantung pada dimana ia dipanggil dan merujuk pada object yang sedang diproses oleh kode serta cara kerjanya tergantung pada jenis fungsinya. Berikut ini adalah empat cara penggunaan this:

1. Menggunakan this di fungsi global

this dalam fungsi global merujuk pada object global dimana kode JavaScript dijalankan. Jadi, jika fungsi biasa dipanggil di luar object atau class, maka nilai this yang di dalam fungsi tersebut akan merujuk ke object global. Object global yang dihasilkan ini bergantung pada tempat eksekusi kodenya. Jika di browser maka object global yang dihasilkan adalah window, sedangkan di Node.js, hasil object globalnya adalah global.

Object global adalah object utama tempat semua fungsi dan properti JavaScript berada.

Berikut contoh dalam menuliskan this di fungsi global:

function tampilkanThis() {
	console.log(this);
}

tampilkanThis(); // output yang akan dihasilkan berupa Window { …}

Penjelasan kode di atas:
Saat fungsi tampilkanThis dipanggil sedang diluar object atau kelas, nilai this akan merujuk pada object global dengan output window karena berada di lingkungan browser.

2. Menggunakan this di dalam objek

Penggunaan this dapat digunakan merujuk object tertentu dalam konteks object itu sendiri. Misalnya kamu punya object Laptop dan ingin mengetahui info terkait laptop tersebut, kamu bisa menuliskan kode seperti berikut:

const laptop = {
	merek: ‘Lenovo’,
	tahunProduksi: 2021,
	infoLaptop: function() {
	    console.log(this.merek + ‘ ‘ + this.tahun-produksi);
    }
};

laptop.infoLaptop(); // Output atau hasilnya akan berupa Lenovo 2021

Penjelasan kode di atas:
Kode di atas mempunyai metode infoLaptop dan this merujuk pada object laptop. Sehingga saat kamu mengakses laptop.infoLaptop(), this yang merujuk pada object laptop akan memberikan hasil atau output berupa Lenovo 2021.

3. Menggunakan this di fungsi biasa

Fungsi biasa adalah yang didefinisikan menggunakan keyword function. Dalam penggunaan this pada fungsi ini bergantung dari cara pemanggilannya. Ada dua cara pemanggilan fungsi tersebut, yakni tanpa strict mode (default) dan dengan strict mode.

Jika strict mode atau default ini dipanggil tanpa konteks, maka this akan mengacu pada object global yang menghasilkan output window dan global. Sedangkan jika dipanggil dalam strict mode, maka this akan menghasilkan output undefined jika dipanggil tanpa konteks object tertentu.

Berikut contoh dalam menuliskan this di fungsi biasa dengan strict mode (default):

function laptop() {
  console.log(this);
}

laptop(); // Di browser: `this` mengacu pada `window`, di Node.js: `this` mengacu pada `global`

Contoh menuliskan this di fungsi biasa dengan cara strict mode:

function laptop() {
  "use strict";  // Mengaktifkan strict mode hanya untuk fungsi ini
  console.log(this);  // `this` akan undefined di strict mode
}

laptop(); // output yang dihasilkan undefined

Penjelasan kode dengan cara strict mode:
Kode di atas terdapat "use strict"; yang digunakan untuk mengaktifkan strict mode di dalam fungsi. Sehingga ketika fungsi tersebut dipanggil tanpa konteks dengan strict mode, maka this akan bernilai undefined.

4. Menggunakan this di Arrow Function

Arrow function adalah penulisan fungsi secara ringkas, berbeda dengan fungsi biasa yang harus menggunakan keyword function. Arrow function tidak mempunyai konteks sendiri terhadap this. Nilai yang akan dihasilkan this pada arrow function akan diambil dari konteks fungsi yang didefinisikan berada atau lexical scoping.

Berikut contoh dalam menuliskan this di arrow function:

function Laptop(info) {
  this.nama = info; // Menggunakan info yang diterima saat pembuatan objek
  this.cariLaptop = () => {
    console.log(`Nama laptop ini adalah ${this.nama}`);
  };
}

const laptop = new Laptop('Lenovo');
laptop.cariLaptop(); // Output: Nama laptop ini adalah Lenovo

Penjelasan kode di atas:
Arrow function pada kode di atas terletak pada metode cariLaptop dimana terletak pada object Laptop. Ketika cariLaptop dipanggil, this akan mengacu pada object laptop, sehingga output yang dihasilkan adalah Nama laptop ini adalah Lenovo.

Kesimpulan

Perlu diingat bahwa this mempunyai sifat yang fleksibel, sehingga cara kerjanya bisa berbeda-beda, tergantung dimana dan bagaimana kode yang akan kamu gunakan. Pemahaman yang baik tentang bagaimana this dapat berjalan sangat penting untuk menghindari kebingungan. Semoga dengan penjelasan mengenai this dalam JavaScript ini dapat membantu kamu, ya!

Selamat mengeksplor pemahaman baru sobat Skodev!