Kenapa Arrow Function Bisa Bikin Bug Tanpa Disadari?

Bandung dulu
Baru Jakarta
Senyum Dulu
Baru Baca
siapa nih yg biasanya maen pantun wkwk
langsung aja dah ke inti materi ya guys,mau tanya nih apakah kalian pernah melihat dua cara bikin function di bawah ini:

function add(a, b) {
  return a + b;
}

dan yang ini:

const add = (a, b) => a + b;

sekilas kelihatannya sama ya guys. Bahkan banyak yg berpikir, "Ya udah sih, cuma beda gaya nulis aja"
tapi eitttt .... sebenarnya ada perbedaan penting yang sering bikin bug tanpa sadar. Diartikel ini, kita akan bahas pelan-pelan biar benar-benar paham.

1. Perbedaan Paling Basic (syntax) Function biasa:

function greet(name) {
  return "Hello " + name;
}

Atau versi singkatnya:

const greet = (name) => "Hello " + name;

sampai sini masih kelihatan mirip ya? Nah, perbedaan aslinya bukan disini.

1. Perbedaan Penting: this ini yang bikin masalah.

**Function biasa:**
const user = {
  name: "Yuda",
  sayHello: function () {
    console.log("Hello " + this.name);
  },
};

user.sayHello(); // Hello Yuda

Arrow function:

const user = {
  name: "Yuda",
  sayHello: () => {
    console.log("Hello " + this.name);
  },
};

user.sayHello(); // Hello undefined 😱