Hilman Apriadi

Posted on Feb 27

Memahami Reference Object di JavaScript

#javascript #beginners #tutorial #webdev

Banyak bug aneh di JavaScript sebenarnya bukan karena syntax salah, tapi beberapa karena salah paham soal reference object.

Kalau pernah ngalamin:

Object ikut berubah padahal cuma assign ke variabel baru
Function "tiba‑tiba" mengubah data luar
Spread operator tapi data nested masih ikut berubah

Akar masalahnya cuma satu: reference.

Artikel ini ngebedah itu semua. Dan sebagai bagain dari dokumentasi saya belajar juga

1️⃣ Primitive vs Object

JavaScript punya 2 kategori tipe data.

Primitive (Value Type)

number
string
boolean
null
undefined
bigint
symbol

Primitive disimpan langsung sebagai nilai (by value).

let a = 10;
let b = a;

b = 20;

console.log(a); // 10

Kenapa a tidak berubah?

Karena:

yang disalin adalah nilainya, bukan alamatnya.

Object (Reference Type)

object literal {}
array []
function
date
dll

Object tidak disimpan langsung.
Variabel hanya menyimpan alamat memory (reference).

let obj1 = { name: "Hilman" };
let obj2 = obj1;

obj2.name = "Apriadi";

console.log(obj1.name); // Apriadi

Kenapa ikut berubah?

Karena obj1 dan obj2 menunjuk alamat yang sama.

2️⃣ Mental Model Memory (Stack vs Heap)

Cara paling gampang paham:

Primitive → Stack

Nilai langsung disimpan di variabel.

a → 10

Object → Heap

Variabel cuma simpan alamat.

obj1 → 0x123
        { name: "Hilman" }

Saat assign:

let obj2 = obj1;

Yang disalin cuma alamatnya:

obj1 → 0x123
obj2 → 0x123

Dua variabel, satu object.

Kalau satu diubah → semuanya ikut berubah.

3️⃣ Definisi Reference Object

Reference object adalah variabel yang menyimpan alamat memory, bukan isi object.

Artinya:

Assign ≠ copy
Assign = share alamat

4️⃣ Bug Paling Sering Terjadi

Case: Function mengubah data luar

function change(user) {
  user.name = "Altair";
}

let user = { name: "Hilman" };
change(user);

console.log(user.name); // Altair

Kenapa?

Karena function menerima reference yang sama, bukan salinan.

Case: Spread tapi masih ikut berubah

let user = {
  name: "Hilman",
  address: { city: "Jakarta" }
};

let copy = { ...user };

copy.address.city = "Bandung";

console.log(user.address.city); // Bandung

Kenapa masih berubah?

Karena spread hanya shallow copy.

Yang di-copy cuma level pertama.
Nested object tetap reference.

5️⃣ Shallow Copy vs Deep Copy

Shallow Copy

let copy = { ...obj };

✔ copy properti level 1
❌ nested masih reference

Deep Copy (cara sederhana)

let copy = JSON.parse(JSON.stringify(obj));

Benar-benar clone, tapi punya limit:

tidak support function
tidak support Date
tidak support Map/Set

6️⃣ Kenapa JavaScript Pakai Reference?

Bayangin object 10MB.

Kalau setiap assignment harus copy penuh:

let a = bigObject;
let b = a; // copy 10MB lagi

Performa bakal hancur.

Solusinya: salin alamat saja.

Lebih cepat. Lebih hemat memory.

Ini desain bahasa, bukan bug.

7️⃣ Rule of Thumb

Primitive → aman
Object → hati‑hati (shared reference)
Butuh copy → clone
Nested → deep copy

Kalau data berubah tanpa sadar, 90% penyebabnya reference.

Terimakasih

DEV Community