Perbedaan Nilai Primitif dan Nilai Referensi dalam JavaScript

Pada tutorial ini, Anda akan mempelajari dua jenis nilai yang berbeda dalam JavaScript, yaitu nilai primitif dan nilai referensi.

JavaScript memiliki dua jenis nilai yang berbeda:

1. Nilai Primitif
2. Nilai Referensi

Nilai Primitif merupakan potongan data atomik, sementara Nilai Referensi adalah objek yang mungkin terdiri dari beberapa nilai.

Memori Tumpukan dan Heap

Ketika Anda mendeklarasikan variabel, mesin JavaScript mengalokasikan memori untuk mereka pada dua lokasi memori: tumpukan (stack) dan tumpukan dinamis (heap).

Data statis adalah data yang ukurannya tetap pada saat kompilasi. Data statis melibatkan:

• Nilai primitif (null, undefined, boolean, number, string, symbol, dan BigInt)
• Nilai referensi yang merujuk pada objek.

Karena data statis memiliki ukuran yang tidak berubah, mesin JavaScript mengalokasikan jumlah memori yang tetap untuk data statis dan menyimpannya di tumpukan.

Contohnya, pada kode berikut, dua variabel dideklarasikan dan nilai-nilai mereka diinisialisasi sebagai string literal dan angka:

let name = 'John';
let age = 25;

Karena name dan age adalah nilai primitif, mesin JavaScript menyimpan variabel-variabel ini di tumpukan seperti yang ditunjukkan pada gambar berikut:

[// Gambar Stack]

Perlu diingat bahwa dalam banyak bahasa pemrograman, termasuk Java dan C#, string adalah objek. Namun, dalam JavaScript, string adalah nilai primitif.

Berbeda dengan tumpukan, JavaScript menyimpan objek (dan fungsi) di tumpukan dinamis. Mesin JavaScript tidak mengalokasikan jumlah memori tetap untuk objek-objek ini. Sebaliknya, akan mengalokasikan lebih banyak ruang sebagaimana diperlukan.

Contohnya, pada kode berikut, variabel name, age, dan person didefinisikan:

let name = 'John';
let age = 25;

let person = {
  name: 'John',
  age: 25,
};

Secara internal, mesin JavaScript mengalokasikan memori seperti pada gambar berikut:

[// Gambar Heap]

Pada gambar ini, JavaScript mengalokasikan memori di tumpukan untuk tiga variabel name, age, dan person. Mesin JavaScript membuat objek baru di tumpukan dinamis dan menghubungkan variabel person di tumpukan dengan objek di tumpukan dinamis.

Karena itu, kita menyebut variabel person sebagai referensi yang merujuk pada objek.

Properti Dinamis

Nilai referensi memungkinkan Anda menambahkan, mengubah, atau menghapus properti kapan saja. Sebagai contoh:

let person = {
  name: 'John',
  age: 25,
};

// menambahkan properti ssn
person.ssn = '123-45-6789';

// mengubah nama
person.name = 'John Doe';

// menghapus properti age
delete person.age;

console.log(person);

Output:

{ name: 'John Doe', ssn: '123-45-6789' }

Berbeda dengan nilai referensi, nilai primitif tidak dapat memiliki properti. Ini berarti Anda tidak dapat menambahkan properti ke nilai primitif.

Meskipun JavaScript memperbolehkan penambahan properti ke nilai primitif, itu tidak akan berpengaruh. Sebagai contoh:

let name = 'John';
name.alias = 'Knight';

console.log(name.alias); // undefined

Output:

undefined

Pada contoh ini, kita menambahkan properti alias ke nilai primitif name. Namun, ketika kita mengakses properti alias melalui nilai primitif name, itu mengembalikan undefined.

Menyalin Nilai

Ketika Anda mengassign nilai primitif dari satu variabel ke variabel lain, mesin JavaScript membuat salinan nilai tersebut dan menetapkannya ke variabel. Sebagai contoh:

let age = 25;
let newAge = age;

Pada contoh ini:

1. Deklarasikan variabel age baru dan inisialisasi nilainya dengan 25.
2. Deklarasikan variabel lain newAge dan berikan nilai age ke variabel newAge.

Di balik layar, mesin JavaScript membuat salinan nilai primitif 25 dan menetapkannya ke variabel newAge. Gambar berikut mengilustrasikan tumpukan memori setelah penugasan:

[// Gambar Salinan Nilai Primitif]

Pada memori tumpukan, newAge dan age adalah variabel terpisah. Jika Anda mengubah nilai satu variabel, itu tidak akan mempengaruhi yang lain.

Sebagai contoh:

let age = 25;
let newAge = age;

newAge = newAge + 1;
console.log(age, newAge);

Ketika Anda mengassign nilai referensi dari satu variabel ke variabel lain, mesin JavaScript membuat referensi sehingga kedua variabel merujuk pada objek yang sama di tumpukan dinamis. Ini berarti jika Anda mengubah satu variabel, itu akan mempengaruhi yang lain.

Sebagai contoh:

let person = {
  name: 'John',
  age: 25,
};

let member = person;

member.age = 26;

console.log(person);
console.log(member);

Cara kerjanya:

1. Deklarasikan variabel person dan inisialisasi nilainya dengan objek yang memiliki dua properti, yaitu name dan age.
2. Tetapkan variabel person ke variabel member. Dalam memori, kedua variabel merujuk pada objek yang sama, seperti yang ditunjukkan pada gambar berikut:

[// Gambar Referensi Nilai]

3. Ubah properti age objek melalui variabel member:

Karena kedua variabel person dan member merujuk pada objek yang sama, perubahan objek melalui variabel member juga tercermin pada variabel person.

Ringkasan

• JavaScript memiliki dua jenis nilai: nilai primitif dan nilai referensi.
• Anda dapat menambahkan, mengubah, atau menghapus properti pada nilai referensi, sementara Anda