this JavaScript Adalah: Memahami Kata Kunci this untuk Pemula (Method, Fungsi, Arrow, Global)

this dalam JavaScript adalah kata kunci khusus yang menunjuk ke objek “pemilik” konteks saat sebuah fungsi dijalankan, dan nilainya ditentukan oleh CARA fungsi itu dipanggil, bukan di mana ia ditulis. Inilah satu kalimat yang, kalau benar-benar kamu pahami, akan menyelesaikan 90% kebingungan soal this. Banyak pemula mengira this selalu menunjuk ke tempat kode ditulis; padahal this baru “diisi” saat fungsi dipanggil, dan nilainya bisa berubah-ubah tergantung siapa yang memanggil.

Di panduan ini kamu akan belajar apa itu this, kenapa nilainya bergantung pada call-site (lokasi pemanggilan), empat konteks utama yang menentukan this (method objek, fungsi biasa, arrow function, dan global), kenapa arrow function tidak punya this sendiri, sampai cara mengatur this secara manual dengan .bind(), .call(), dan .apply(). Semuanya dengan contoh kode berkomentar bahasa Indonesia supaya mudah diikuti dari nol.

Apa Itu this di JavaScript?

this adalah kata kunci bawaan JavaScript yang otomatis tersedia di dalam setiap fungsi. Nilainya adalah sebuah referensi ke objek tertentu, dan objek mana yang ditunjuk tergantung pada bagaimana fungsi tempat this berada itu dipanggil. Ibaratnya, this adalah kata “aku” dalam bahasa manusia: siapa “aku” tergantung siapa yang sedang berbicara. Kalimat yang sama diucapkan orang berbeda menunjuk ke orang yang berbeda pula.

Contoh paling gampang adalah di dalam sebuah method objek:

const user = {
  nama: "Budi",
  sapa() {
    return "Halo, " + this.nama
  }
}

console.log(user.sapa()) // "Halo, Budi"

Di sini this.nama bekerja karena sapa dipanggil lewat user (user.sapa()), sehingga this menunjuk ke user. Kata kunci this memungkinkan sebuah method mengakses properti objeknya sendiri tanpa perlu menyebut nama objek secara langsung, ini yang membuat kode bisa dipakai ulang untuk banyak objek berbeda.

Aturan Emas: this Ditentukan oleh Call-Site

Ini adalah inti dari seluruh topik this, jadi baca pelan-pelan. Nilai this tidak ditentukan saat kamu menulis fungsi. Ia ditentukan saat fungsi dipanggil, dan lebih tepatnya, oleh bagaimana pemanggilannya (disebut call-site). Fungsi yang sama persis bisa punya this yang berbeda tergantung cara ia dipanggil.

Perhatikan contoh ini, di mana satu fungsi yang identik menghasilkan this berbeda:

const user = {
  nama: "Budi",
  sapa() {
    return "Halo, " + this.nama
  }
}

// Dipanggil lewat objek → this = user
console.log(user.sapa())          // "Halo, Budi"

// Fungsi yang sama, "dilepas" dari objeknya
const sapaLepas = user.sapa
console.log(sapaLepas())          // "Halo, undefined", this hilang!

Fungsi sapa tidak berubah sama sekali. Yang berubah cuma cara pemanggilannya: yang pertama lewat user., yang kedua berdiri sendiri. Karena this ditentukan di titik pemanggilan, this pada sapaLepas() tidak lagi menunjuk ke user. Inilah kenapa kamu harus selalu melihat cara fungsi dipanggil untuk tahu isi this, bukan tempat fungsi didefinisikan.

Empat Konteks yang Menentukan this

Meski terdengar rumit, dalam praktik ada empat pola pemanggilan yang menentukan this. Kalau kamu hafal keempat pola ini, kamu bisa membaca hampir semua kode yang memakai this dengan percaya diri.

1. Method objek, fungsi dipanggil lewat sebuah objek (objek.method()). this menunjuk ke objek di depan titik.
2. Fungsi biasa, fungsi dipanggil berdiri sendiri (fungsi()), tanpa objek di depannya. Di strict mode this menjadi undefined; di mode longgar ia menjadi objek global.
3. Arrow function, tidak punya this sendiri. Ia mewarisi this dari scope tempat ia ditulis (disebut lexical this).
4. Global, di luar fungsi mana pun, this menunjuk ke objek global: window di browser, atau globalThis di Node.js.

Diagram di bawah merangkum keempat konteks itu dalam satu tampilan, perhatikan bagaimana potongan kode kecil di tiap panel menentukan ke mana this akhirnya menunjuk:

Ke mana this menunjuk?

Method objekuser.sapa()

→this = userobjek di depan titik

Dipanggil lewat objek, jadi `this` = objek `user` itu sendiri.

Fungsi biasasapa()

→this = undefinedstrict mode / global

Dipanggil berdiri sendiri tanpa objek, `this` jadi undefined (strict) atau global.

Arrow function() => this

↑this = scope luartidak punya this sendiri

Tidak punya `this` sendiri, ia mewarisi `this` dari scope tempat ia ditulis.

Globalconsole.log(this)

→this = windowglobalThis (Node)

Di luar fungsi mana pun, `this` = objek global: window (browser) / globalThis.

this ditentukan saat fungsi DIPANGGIL, bukan saat ditulis.

Sekarang mari kita bedah masing-masing konteks dengan contoh kode, supaya kamu tahu bukan cuma apa yang terjadi, tapi juga kenapa.

1. this di Method Objek = Objeknya

Ketika sebuah fungsi dipanggil sebagai method, artinya lewat sebuah objek dengan notasi titik, this menunjuk ke objek di sebelah kiri titik tersebut:

const mobil = {
  merek: "Toyota",
  info() {
    return "Mobil ini " + this.merek
  }
}

console.log(mobil.info()) // "Mobil ini Toyota", this = mobil

Yang menentukan this di sini bukan tempat info ditulis, melainkan mobil. di depannya saat dipanggil. Kalau kamu memindahkan fungsi yang sama ke objek lain lalu memanggilnya lewat objek itu, this akan menunjuk ke objek yang baru. Objek di depan titik-lah yang jadi this.

2. this di Fungsi Biasa = undefined (Strict) / Global

Kalau fungsi dipanggil berdiri sendiri tanpa objek di depannya, tidak ada “pemilik” yang jelas. Di strict mode (yang otomatis aktif di dalam modul JavaScript modern dan class), this menjadi undefined:

"use strict"

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

tampilkanThis() // undefined (strict mode)

Tanpa strict mode, this akan “jatuh” ke objek global (window di browser). Perilaku inilah yang sering bikin bug: ketika sebuah method “dilepas” dari objeknya dan dipanggil sebagai fungsi biasa, misalnya saat dijadikan callback, this-nya hilang dan menjadi undefined.

3. this di Arrow Function = Warisan dari Scope Luar

Ini bagian yang paling sering menyelamatkan sekaligus menjebak pemula. Arrow function tidak punya this sendiri. Berbeda dari tiga konteks lain, arrow function tidak membuat this baru saat dipanggil. Sebagai gantinya, ia “meminjam” this dari scope tempat ia ditulis, perilaku yang disebut lexical this.

Justru sifat inilah yang membuat arrow function memperbaiki bug klasik “this hilang di dalam callback”. Perhatikan sebuah method yang punya callback di dalamnya:

const timer = {
  detik: 0,
  mulai() {
    setInterval(() => {
      this.detik++            // this = timer, diwarisi dari mulai()
      console.log(this.detik)
    }, 1000)
  }
}

timer.mulai() // 1, 2, 3, ... (berjalan benar)

Callback di dalam setInterval ditulis sebagai arrow function, jadi ia tidak membuat this sendiri, ia mewarisi this dari method mulai, yang menunjuk ke timer. Kalau callback itu ditulis dengan function biasa, ia akan dipanggil berdiri sendiri oleh setInterval, this-nya jadi undefined, dan this.detik gagal. Arrow function-lah yang menyelamatkan.

Kalau kamu ingin mendalami sintaks arrow function secara menyeluruh, aturan penyingkatan, implicit return, dan kapan sebaiknya dipakai, baca panduan khusus arrow function adalah yang membahasnya tuntas dengan diagram bertahap.

4. this di Global = window / globalThis

Terakhir, di luar fungsi mana pun, di level paling atas kode, this menunjuk ke objek global. Di browser objek itu bernama window; di Node.js bernama globalThis:

console.log(this) // di browser: window (atau {} di dalam module)

Konteks global jarang kamu pakai secara langsung, tapi penting dipahami karena inilah nilai this yang “jatuh” ketika fungsi biasa dipanggil di mode longgar. Di dalam JavaScript module modern, this di level atas justru bernilai undefined, bukan window, satu lagi alasan untuk tidak mengandalkan this global.

Ringkasan: this di Method vs Fungsi vs Arrow vs Global

Supaya semuanya menempel, berikut tabel rangkuman keempat konteks tadi dalam satu tempat. Ini yang paling sering dicari orang, jadi simpan baik-baik:

Cara fungsi dipanggil	Contoh	Nilai this
Method objek	user.sapa()	Objek di depan titik (user)
Fungsi biasa (strict)	sapa()	undefined
Fungsi biasa (mode longgar)	sapa()	Objek global (window)
Arrow function	() => this	Diwarisi dari scope luar (lexical)
Global (di luar fungsi)	console.log(this)	window / globalThis

Perhatikan pola besarnya: kecuali arrow function, semua nilai this ditentukan oleh cara pemanggilan. Arrow function adalah pengecualian karena this-nya “beku” mengikuti tempat ia ditulis. Menghafal tabel ini akan membuatmu jauh lebih cepat saat membaca kode orang lain.

Mengatur this Secara Manual: .bind(), .call(), .apply()

Kadang kamu ingin memaksa this menunjuk ke objek tertentu, tanpa bergantung pada cara pemanggilan. JavaScript menyediakan tiga method bawaan untuk itu: .call(), .apply(), dan .bind(). Ketiganya memungkinkan kamu menentukan this secara eksplisit.

function sapa() {
  return "Halo, " + this.nama
}

const budi = { nama: "Budi" }

// call, panggil sekarang, dengan this = budi
console.log(sapa.call(budi))   // "Halo, Budi"

// apply, sama seperti call, argumen dalam bentuk array
console.log(sapa.apply(budi))  // "Halo, Budi"

// bind, hasilkan fungsi BARU yang this-nya terkunci ke budi
const sapaBudi = sapa.bind(budi)
console.log(sapaBudi())        // "Halo, Budi"

Perbedaannya: .call() dan .apply() langsung memanggil fungsi saat itu juga (bedanya cuma cara mengoper argumen, call satu per satu, apply lewat array), sedangkan .bind() mengembalikan fungsi baru dengan this yang terkunci permanen, untuk dipanggil nanti.

Kesalahan Umum Pemula Soal this

Beberapa jebakan this muncul berulang kali bagi orang yang baru belajar. Mengenalinya lebih awal menghemat banyak waktu frustrasi:

1. Mengira this menunjuk ke tempat kode ditulis. this ditentukan saat fungsi dipanggil, bukan saat ditulis. Selalu lihat call-site-nya.
2. Melepas method dari objeknya. Menyimpan const f = user.sapa lalu memanggil f() membuat this hilang. Kalau butuh, kunci dengan user.sapa.bind(user).
3. Memakai arrow function sebagai method objek. Karena arrow tidak punya this sendiri, this di dalamnya tidak menunjuk ke objek, pakai shorthand method (sapa() { ... }) atau fungsi biasa.
4. Lupa strict mode mengubah perilaku. Di module dan class (yang otomatis strict), fungsi biasa yang dipanggil sendirian menghasilkan this bernilai undefined, bukan window.

🧠Cek Pemahaman

Di dalam sebuah method objek seperti user.sapa(), kata kunci this menunjuk ke apa?

AKe fungsi sapa itu sendiriBKe objek user (objek di depan titik)CSelalu ke windowDKe undefined

FAQ Seputar this di JavaScript

Apa itu this dalam JavaScript dengan bahasa sederhana?

this adalah kata kunci yang menunjuk ke objek “pemilik” konteks saat sebuah fungsi dijalankan. Ibarat kata “aku” dalam bahasa manusia, siapa yang ditunjuk tergantung siapa yang sedang berbicara. Di JavaScript, “siapa yang berbicara” itu ditentukan oleh cara fungsi dipanggil: kalau dipanggil lewat objek (user.sapa()), maka this adalah objek itu.

Kenapa this sering bernilai undefined?

Karena fungsinya dipanggil berdiri sendiri tanpa objek di depannya, sementara kodenya berjalan di strict mode (yang otomatis aktif di module dan class). Ini paling sering terjadi ketika sebuah method “dilepas” dari objeknya lalu dijadikan callback. Solusinya: pakai arrow function agar this diwarisi dari scope luar, atau kunci this dengan .bind().

Apa perbedaan this di arrow function dan fungsi biasa?

Fungsi biasa membuat this baru setiap kali dipanggil, tergantung cara pemanggilannya. Arrow function tidak punya this sendiri, ia selalu mewarisi this dari scope tempat ia ditulis. Karena itu arrow function cocok untuk callback (agar this tetap menunjuk ke objek luar), tapi tidak cocok untuk mendefinisikan method langsung di dalam objek.

Bagaimana cara mengatur this secara manual?

Gunakan .call(), .apply(), atau .bind(). .call() dan .apply() memanggil fungsi saat itu juga dengan this yang kamu tentukan (bedanya cuma cara mengoper argumen). .bind() mengembalikan fungsi baru dengan this yang terkunci permanen, cocok kalau kamu ingin memanggilnya nanti sambil memastikan this-nya tetap benar.

Kesimpulan

this dalam JavaScript adalah kata kunci yang nilainya ditentukan oleh cara fungsi dipanggil, bukan tempat ia ditulis. Kalau kamu hafal empat konteksnya, method objek (this = objeknya), fungsi biasa (undefined/global), arrow function (warisan dari scope luar), dan global (window/globalThis), kamu sudah menguasai bagian tersulit dari topik ini. Sisanya cuma soal mengenali call-site dan, sesekali, memaksa this dengan .bind(), .call(), atau .apply().

Cara terbaik memahaminya adalah dengan praktik langsung. Coba pelajaran kata kunci this di Hyper Sheets untuk melihat perilaku this secara interaktif di browser tanpa setup apa pun, lalu perdalam pemahamanmu soal sintaks fungsi ringkas lewat panduan arrow function adalah.