Lecture ini sangat penting, karena mulai sekarang kamu akan sering menemukan this di JavaScript, terutama ketika belajar object, method, constructor, class, dan arrow function.

Untuk lecture ini, kita fokus dulu pada versi paling sederhana:

Di dalam sebuah method, this biasanya menunjuk ke object yang digunakan untuk memanggil method tersebut.

Kunci utamanya adalah kata “memanggil”, bukan sekadar “object tempat function ditulis”.

1. Apa sebenarnya this?

this adalah sebuah keyword khusus di JavaScript.

Untuk tahap awal, anggap this seperti sebuah variabel otomatis yang menyimpan referensi ke object tertentu.

Misalnya:

const person = {
    name: "John",

    greet: function () {
        console.log(this);
    }
};

Ketika kita menjalankan:

person.greet();

this di dalam greet() menunjuk ke:

person

Secara mental bisa dibayangkan:

person.greet()
     ↓
method greet dijalankan
     ↓
this
     ↓
person

Jadi:

this.name

kurang lebih berarti:

person.name

dalam konteks pemanggilan person.greet() tersebut.

2. Kita mulai dari contoh sederhana

Misalnya kita punya object:

const person = {
    name: "John",
    birthYear: 1990,

    calculateAge: function () {
        const currentYear = 2024;
        return currentYear - person.birthYear;
    }
};

Kita panggil:

const age = person.calculateAge();

console.log(age);

Hasil:

34

Karena:

2024 - 1990 = 34

Sampai sini tidak ada masalah.

Tapi sebenarnya ada sesuatu yang kurang bagus dalam function tersebut.

Perhatikan:

return currentYear - person.birthYear;

Function calculateAge() secara langsung menyebut:

person.birthYear

3. Kenapa person.birthYear bisa menjadi masalah?

Misalnya kita membuat object lain:

const user = {
    name: "Mark",
    birthYear: 2000
};

Sekarang kita ingin user juga memiliki calculateAge().

Daripada menulis function yang sama dua kali, kita bisa meminjam function milik person:

user.calculateAge = person.calculateAge;

Perhatikan:

person.calculateAge

tidak menggunakan ().

Artinya kita mengambil function-nya, bukan menjalankannya.

4. Ini konsep yang sudah kamu pelajari sebelumnya

Sebelumnya kita sudah belajar bahwa function adalah sebuah value.

Misalnya:

const greet = function () {
    console.log("Hello");
};

Variable greet menyimpan function.

Begitu juga:

user.calculateAge = person.calculateAge;

Artinya:

person.calculateAge
        ↓
mengambil function
        ↓
user.calculateAge
        ↓
menyimpan function yang sama

Sekarang kedua object mempunyai method yang menunjuk ke function yang sama.

person.calculateAge ─────┐
                        │
                        ↓
                  function yang sama
                        ↑
                        │
user.calculateAge ──────┘

5. Sekarang muncul masalah

Object:

const person = {
    name: "John",
    birthYear: 1990,

    calculateAge: function () {
        const currentYear = 2024;
        return currentYear - person.birthYear;
    }
};

Object kedua:

const user = {
    name: "Mark",
    birthYear: 2000
};

user.calculateAge = person.calculateAge;

Sekarang kita jalankan:

const age = user.calculateAge();

console.log(age);

Kita berharap:

2024 - 2000 = 24

Tapi hasilnya:

34

Kenapa?

6. Bedah apa yang sebenarnya terjadi

Ingat isi function-nya:

function () {
    const currentYear = 2024;
    return currentYear - person.birthYear;
}

Ketika dipanggil:

user.calculateAge();

function yang dijalankan memang function yang sama.

Tapi isi function masih mengatakan:

person.birthYear

Jadi JavaScript tetap mengambil:

person.birthYear

yaitu:

1990

Bukan:

user.birthYear

yaitu:

2000

Maka:

2024 - 1990
     ↓
    34

7. Inilah masalah yang diselesaikan oleh this

Kita tidak ingin function mengatakan:

person.birthYear

karena function tersebut bisa digunakan oleh object lain.

Kita ingin mengatakan:

“Ambil birthYear milik object yang sedang menggunakan method ini.”

Untuk itu kita gunakan:

this.birthYear

Jadi function-nya diubah menjadi:

const person = {
    name: "John",
    birthYear: 1990,

    calculateAge: function () {
        const currentYear = 2024;
        return currentYear - this.birthYear;
    }
};

Perhatikan perbedaannya:

❌ Terlalu spesifik:

person.birthYear

✅ Lebih fleksibel:

this.birthYear

8. Sekarang kita panggil melalui person

person.calculateAge();

JavaScript melihat:

siapa yang memanggil calculateAge?
          ↓
       person
          ↓
        this
          ↓
       person

Jadi:

this.birthYear

menjadi:

person.birthYear

yang nilainya:

1990

Maka:

2024 - 1990 = 34

9. Sekarang kita panggil melalui user

Kita punya:

const user = {
    name: "Mark",
    birthYear: 2000
};

user.calculateAge = person.calculateAge;

Kemudian:

user.calculateAge();

Siapa yang memanggil method?

user

Maka:

user.calculateAge()
       ↓
     this
       ↓
     user

Sehingga:

this.birthYear

menjadi:

user.birthYear

yaitu:

2000

Maka:

2024 - 2000 = 24

10. Inilah inti terbesar dari lecture

Perhatikan dua pemanggilan ini:

person.calculateAge();

dan:

user.calculateAge();

Function-nya bisa sama:

calculateAge: function () {
    return 2024 - this.birthYear;
}

Tetapi nilai this berbeda.

person.calculateAge()
        ↓
      this = person
        ↓
this.birthYear = person.birthYear
        ↓
1990


user.calculateAge()
        ↓
      this = user
        ↓
this.birthYear = user.birthYear
        ↓
2000

11. Analogi yang mudah: “Saya”

Bayangkan ada seseorang berkata:

“Umur saya adalah tahun sekarang dikurangi tahun lahir saya.”

Kalimat tersebut tidak menyebut nama orangnya.

Dia mengatakan:

“saya”

Kata “saya” berubah tergantung siapa yang berbicara.

Misalnya John berkata:

Saya lahir tahun 1990.

Maka:

"this" = John

Mark berkata:

Saya lahir tahun 2000.

Maka:

"this" = Mark

Jadi this bisa kamu bayangkan seperti kata:

“saya / object yang sedang menjalankan method ini.”

12. Jangan mengartikan this sebagai “object tempat function dibuat”

Ini kesalahan yang sangat penting untuk dihindari.

Misalnya:

const person = {
    birthYear: 1990,

    calculateAge: function () {
        return 2024 - this.birthYear;
    }
};

Kamu mungkin berpikir:

“this pasti person karena function berada di dalam person.”

Untuk kasus pemanggilan method seperti:

person.calculateAge();

hasilnya memang person.

Tetapi alasan yang lebih tepat adalah:

calculateAge() dipanggil sebagai method dari person.

Ini menjadi sangat penting ketika function yang sama dipinjam object lain.

user.calculateAge = person.calculateAge;

user.calculateAge();

Sekarang:

this = user

bukan person.

13. Function-nya sama, this bisa berbeda

Ini bagian yang sangat bagus untuk kamu pahami.

Misalnya:

const calculateAge = function () {
    return 2024 - this.birthYear;
};

Kemudian:

const person = {
    birthYear: 1990,
    calculateAge: calculateAge
};

const user = {
    birthYear: 2000,
    calculateAge: calculateAge
};

Function-nya satu:

calculateAge

Tapi dua object menggunakannya:

person ────→ calculateAge
user ──────→ calculateAge

Ketika:

person.calculateAge();

this → person

Ketika:

user.calculateAge();

this → user

Jadi:

this ditentukan berdasarkan bagaimana function dipanggil, bukan sekadar function tersebut ditulis di mana.

Untuk konteks method seperti lecture ini, ini adalah aturan yang sangat penting.

14. Contoh dengan name

Supaya lebih jelas, kita tidak hanya menggunakan birthYear.

const person = {
    name: "John",
    birthYear: 1990,

    introduce: function () {
        console.log(`Hello, my name is ${this.name}`);
    }
};

Ketika:

person.introduce();

hasil:

Hello, my name is John

Karena:

this.name

sama dengan:

person.name

15. Kalau dipakai oleh object lain?

const user = {
    name: "Mark",
    birthYear: 2000
};

user.introduce = person.introduce;

Kemudian:

user.introduce();

Output:

Hello, my name is Mark

Kenapa bukan John?

Karena:

user.introduce()
      ↓
this = user
      ↓
this.name
      ↓
user.name
      ↓
"Mark"

16. this itu bukan nilai yang “menempel permanen” pada function

Ini penting.

Jangan berpikir:

person.calculateAge

berarti:

“Function ini sudah menjadi milik person selamanya.”

Tidak.

Function bisa direferensikan oleh object lain.

user.calculateAge = person.calculateAge;

Function yang sama sekarang dipanggil melalui user.

Jadi this bisa berubah berdasarkan cara pemanggilannya.

17. Contoh visual

Misalnya:

const person = {
    name: "John",

    greet: function () {
        console.log(this.name);
    }
};

const user = {
    name: "Mark"
};

user.greet = person.greet;

Sekarang:

                    function greet
                   /              \
                  ↓                ↓
             person.greet     user.greet

Kalau:

person.greet();

maka:

this → person

Kalau:

user.greet();

maka:

this → user

Function yang sama.

this berbeda.

18. Kenapa this membuat code lebih reusable?

Tanpa this:

const person = {
    birthYear: 1990,

    calculateAge: function () {
        return 2024 - person.birthYear;
    }
};

Function terlalu bergantung kepada:

person

Dengan this:

const person = {
    birthYear: 1990,

    calculateAge: function () {
        return 2024 - this.birthYear;
    }
};

Function tidak peduli namanya siapa.

Dia hanya mengatakan:

“Ambil birthYear dari object yang sedang memanggil saya.”

Inilah yang membuat method lebih reusable.

19. Hubungkan dengan Object Property vs Variable

Di lecture ini ada satu hal yang sebelumnya sudah kamu pelajari.

Ini:

const person = {
    birthYear: 1990
};

birthYear adalah property, bukan variable global/local biasa.

Jadi tidak bisa:

console.log(birthYear);

Karena JavaScript akan mencari variable bernama birthYear.

Untuk mengakses property:

person.birthYear

atau:

person["birthYear"]

Ketika berada di dalam method object tersebut, kita bisa menggunakan:

this.birthYear

20. Tiga cara mengakses birthYear

Misalnya:

const person = {
    birthYear: 1990
};

Cara 1 — Object + dot notation

person.birthYear

Artinya:

Ambil property birthYear dari object person.

Cara 2 — Bracket notation

person["birthYear"]

Artinya sama.

Cara 3 — this

Jika berada dalam method yang dipanggil sebagai method dari person:

this.birthYear

Artinya:

Ambil birthYear dari object yang menjadi receiver/pemanggil method tersebut.

21. Kenapa lecture menggunakan contoh person dan user?

Sebenarnya ini contoh yang sangat bagus untuk menunjukkan manfaat this.

Tanpa this:

return 2024 - person.birthYear;

Function terikat pada:

person

Dengan this:

return 2024 - this.birthYear;

Function menjadi lebih generik:

object A → this = object A
object B → this = object B
object C → this = object C

Jadi satu function dapat bekerja untuk banyak object.

22. Masalah person = null

Lecture kemudian memberikan contoh tambahan.

Misalnya:

let person = {
    birthYear: 1990,

    calculateAge: function () {
        return 2024 - person.birthYear;
    }
};

Kemudian:

user.calculateAge = person.calculateAge;

Setelah itu:

person = null;

Sekarang variable person tidak lagi menyimpan object tersebut.

person
  ↓
null

Kalau function masih mencoba:

person.birthYear

JavaScript akan bingung:

“Kamu mencoba mengambil birthYear dari null.”

Akhirnya error.

23. Kenapa this menyelesaikan masalah tersebut?

Kalau function menggunakan:

this.birthYear

dan kita menjalankan:

user.calculateAge();

maka:

user.calculateAge()
        ↓
this = user
        ↓
this.birthYear
        ↓
user.birthYear

Function tidak perlu bergantung pada variable bernama person.

Ini jauh lebih aman dan fleksibel.

24. this ditentukan saat runtime

Lecture juga mengatakan bahwa nilai this ditentukan saat runtime.

Untuk konteks sederhana kita:

person.calculateAge();

JavaScript harus menjalankan function tersebut.

Pada saat function dipanggil, JavaScript menentukan konteks pemanggilannya.

person.calculateAge()
        ↓
function dipanggil
        ↓
this = person

Sedangkan:

user.calculateAge();

user.calculateAge()
        ↓
function dipanggil
        ↓
this = user

Jadi function yang sama bisa mendapatkan this berbeda pada waktu yang berbeda.

25. Sangat penting: this bukan argument

Misalnya:

function greet(name) {
    console.log(name);
}

name adalah parameter.

Ketika:

greet("John");

maka:

name = "John"

Tetapi this berbeda.

Kita tidak menulis:

greet(person);

untuk mengisi this.

Dalam pemanggilan method:

person.greet();

JavaScript menentukan this berdasarkan cara method dipanggil.

Jadi:

parameter
   ↓
diberikan melalui argument

this
   ↓
ditentukan oleh invocation/cara function dipanggil

26. this vs parameter

27. Hubungan dengan Arrow Function dari Lecture Sebelumnya

Nah, ini alasan kenapa instructor mengatakan di lecture arrow function:

“Ada beberapa hal tentang arrow function yang perlu dipahami ketika menggunakan this.”

Karena regular function dan arrow function berbeda dalam menangani this.

Misalnya regular function:

const person = {
    name: "John",

    greet: function () {
        console.log(this.name);
    }
};

Di sini:

person.greet();

this mengarah ke person.

Tetapi kalau kita menggunakan arrow function:

const person = {
    name: "John",

    greet: () => {
        console.log(this.name);
    }
};

jangan langsung menganggap this akan menjadi person.

Arrow function tidak mendapatkan this sendiri seperti regular function.

Ini akan dibahas lebih lanjut di lecture berikutnya.

Untuk sekarang cukup hafalkan:

⚠️ this + regular function dan this + arrow function tidak selalu bekerja dengan cara yang sama.

28. Satu Kesalahan Mental yang Harus Dihindari

Jangan menghafal:

“this selalu berarti object.”

Itu terlalu sederhana.

Untuk lecture ini, kita menggunakan konteks:

object.method()

Dalam konteks tersebut:

object.method()
      ↓
this = object

Tetapi di JavaScript, this mempunyai aturan yang lebih luas dan bisa berbeda tergantung bagaimana function dipanggil.

Nanti kita akan bertemu dengan:

• this pada regular function
• this pada arrow function
• this pada event handler
• this dengan call()
• this dengan apply()
• this dengan bind()
• constructor/class

Jadi jangan terlalu cepat membuat aturan:

“this = object tempat function berada.”

Lebih tepat:

Dalam pemanggilan method seperti object.method(), this mengacu pada object yang berada di sebelah kiri . saat method dipanggil.

29. Contoh Super Sederhana

Lihat ini:

const person = {
    name: "Budi",

    sayHello: function () {
        console.log("Hello " + this.name);
    }
};

Panggil:

person.sayHello();

Baca:

person
  ↓
sayHello()
  ↓
this = person
  ↓
this.name
  ↓
person.name
  ↓
"Budi"

Output:

Hello Budi

30. Kalau Method Dipindahkan ke Object Lain

const user = {
    name: "Andi"
};

user.sayHello = person.sayHello;

Sekarang:

user.sayHello();

Baca:

user
  ↓
sayHello()
  ↓
this = user
  ↓
this.name
  ↓
user.name
  ↓
"Andi"

Output:

Hello Andi

Function-nya sama, tetapi this berbeda.

31. Visualisasi Paling Penting dari Lecture

Simpan gambar mental ini:

                 FUNCTION
              calculateAge()
                    ↑
              function yang sama
               ↙          ↘
              /             \
             /               \
            ↓                 ↓
     person.calculateAge()   user.calculateAge()
            ↓                 ↓
      this = person       this = user
            ↓                 ↓
   this.birthYear        this.birthYear
            ↓                 ↓
   person.birthYear      user.birthYear
            ↓                 ↓
          1990              2000
            ↓                 ↓
       age = 34           age = 24

Ini sebenarnya inti seluruh lecture.

32. Kenapa Tidak Langsung person.birthYear?

Karena function menjadi terlalu spesifik.

Bayangkan kita punya 1.000 user:

Budi → birthYear 1990
Andi → birthYear 1995
John → birthYear 1985
Mark → birthYear 2000
...

Kita tidak mau membuat:

budi.calculateAge()
andi.calculateAge()
john.calculateAge()
mark.calculateAge()

dengan function yang masing-masing hardcode nama object.

Kita ingin satu pola:

function calculateAge() {
    return 2024 - this.birthYear;
}

Kemudian setiap object dapat menggunakannya.

33. this = “siapa yang sedang menggunakan method ini?”

Untuk level sekarang, gunakan pertanyaan sederhana:

“Siapa yang memanggil method ini?”

Misalnya:

person.calculateAge();

Tanya:

Siapa yang memanggil?

Jawab:

person

Maka:

this = person

Misalnya:

user.calculateAge();

Tanya:

Siapa yang memanggil?

Jawab:

user

Maka:

this = user

34. Tapi Jangan Lupa: Ada Nuansa Penting

Ada sedikit penyederhanaan dalam penjelasan lecture.

Lecture mengatakan:

“this points to the current object.”

Untuk pemula, ini berguna, tetapi secara teknis belum lengkap.

Lebih tepat:

Nilai this ditentukan oleh bagaimana function dipanggil, dan aturan tersebut berbeda-beda tergantung jenis function dan strict mode/runtime.

Contohnya:

person.calculateAge();

jelas:

this → person

Tetapi:

const fn = person.calculateAge;

fn();

adalah situasi berbeda.

Walaupun function asalnya berada di person, kita tidak lagi memanggil:

person.calculateAge()

Kita memanggil:

fn()

Akibatnya, aturan this berbeda.

Ini nanti akan kita bahas ketika lecture masuk lebih dalam.

35. Hubungkan dengan Lecture Sebelumnya

Kamu sekarang sudah belajar:

Object

const person = {
    name: "John",
    birthYear: 1990
};

Property

person.name
person.birthYear

Method

person.calculateAge()

Function

function () {
    ...
}

Sekarang this menghubungkan semuanya:

OBJECT
   ↓
METHOD
   ↓
FUNCTION
   ↓
this
   ↓
OBJECT YANG MEMANGGIL METHOD

Contohnya:

person.calculateAge();

person
  ↓
calculateAge
  ↓
function
  ↓
this
  ↓
person

36. Cheat Sheet

Object

const person = {
    name: "John",
    birthYear: 1990
};

Method

person.greet = function () {
    console.log("Hello");
};

this

person.greet = function () {
    console.log(this.name);
};

Dipanggil dari person

person.greet();

Maka:

this → person

Dipakai object lain

const user = {
    name: "Mark"
};

user.greet = person.greet;

Kemudian:

user.greet();

Maka:

this → user

🧠 Tiga Hal yang Wajib Kamu Ingat

1. Jangan hardcode nama object di dalam method

Kurang fleksibel:

function () {
    return person.birthYear;
}

Lebih fleksibel:

function () {
    return this.birthYear;
}

2. Untuk pola object.method(), lihat object di sebelah kiri titik

person.calculateAge();

person ← this

Sedangkan:

user.calculateAge();

user ← this

3. this bisa berubah

Function yang sama:

calculateAge

bisa menghasilkan:

person.calculateAge()
        ↓
this = person

dan:

user.calculateAge()
        ↓
this = user

🎯 Inti Lecture dalam Satu Kalimat

this adalah keyword khusus yang nilainya ditentukan berdasarkan bagaimana function dipanggil; dalam pola object.method(), this menunjuk ke object yang memanggil method tersebut.

Dan satu mental model yang menurut saya paling mudah:

        SIAPA YANG MEMANGGIL?
                 ↓
          object.method()
                 ↓
              this
                 ↓
       object pemanggil

Jadi kalau kamu melihat:

user.calculateAge();

langsung biasakan bertanya:

“Siapa yang memanggil calculateAge?”

Jawabannya user.

Maka untuk konteks lecture ini:

this === user

Sedangkan:

person.calculateAge();

berarti:

this === person

Catatan penting untuk lecture berikutnya: ini baru aturan dasar this pada method. Begitu masuk ke regular function vs arrow function, event handler, call/apply/bind, dan constructor, perilaku this akan menjadi lebih menarik.