Boleh Ubah dan Tidak Boleh Ubah dalam JavaScript

Artikel ini menjelaskan konsep boleh ubah dan tidak boleh ubah dalam JavaScript.

YouTube Video

Boleh Ubah dan Tidak Boleh Ubah dalam JavaScript

Apakah Maksud Boleh Ubah?

Boleh ubah bermaksud bahawa nilai tersebut boleh diubah suai. Objek dan tatasusunan, yang merupakan jenis rujukan, adalah contoh tipikal struktur data boleh ubah.

Contoh Objek Boleh Ubah

1let person = { name: "Alice", age: 25 };
2person.age = 26;
3console.log(person); // { name: "Alice", age: 26 }

Dalam kod ini, sifat age pada objek person ditukar daripada 25 kepada 26. Oleh kerana objek dihantar melalui rujukan, kandungan pada alamat memori yang disimpan dalam pemboleh ubah person diubah suai.

Contoh Tatasusunan Boleh Ubah

1let numbers = [1, 2, 3];
2numbers.push(4);
3console.log(numbers); // [1, 2, 3, 4]

Dalam kod ini, kaedah push digunakan untuk menambah elemen baru 4 pada tatasusunan asal. Ini mengubah tatasusunan asal, menjadikannya satu operasi yang boleh diubah.

Contoh dalam Fungsi

 1// Function to append a value to an array
 2function append(arr, value) {
 3    arr.push(value); // Modify the original array
 4    console.log(arr);
 5}
 6
 7let numbers = [1, 2, 3];
 8append(numbers, 4);
 9
10console.log(numbers); // [1, 2, 3, 4] (original array is modified)

Apabila melakukan operasi boleh ubah di dalam fungsi, tatasusunan asal turut diubah suai.

Apakah Maksud Tidak Boleh Ubah?

Tidak boleh ubah bermaksud bahawa nilai tersebut tidak boleh diubah suai. Jenis primitif secara asasnya adalah tidak boleh ubah.

Contoh Jenis Primitif Tidak Boleh Ubah

1let str = "hello";
2str[0] = "H";
3console.log(str); // "hello"

Cubaan untuk menukar aksara pertama pada rentetan str kepada H gagal kerana rentetan adalah tidak boleh ubah.

Contoh dalam Fungsi

 1// Function to increment a number
 2function increment(num) {
 3    num++; // This modifies only the local copy of num
 4    console.log(num);
 5}
 6
 7let number = 10;
 8increment(number);
 9
10console.log(number); // 10 (original number remains unchanged)

Oleh kerana nombor adalah tidak boleh ubah, operasi di dalam fungsi tidak akan menjejaskan pemboleh ubah asal.

Operasi Tidak Boleh Ubah pada Tatasusunan

Tatasusunan adalah boleh ubah, tetapi mencipta tatasusunan baru dan bukannya mengubah yang asal membolehkan operasi tidak boleh ubah.

1// Create an array of numbers
2let numbers = [1, 2, 3];
3
4// Create a new array by spreading the original and adding a new element
5let newNumbers = [...numbers, 4];
6
7console.log(numbers); // [1, 2, 3] (original array is unchanged)
8console.log(newNumbers); // [1, 2, 3, 4] (new array with an added element)

Di sini, sintaks penyebaran (...) digunakan untuk membuat array baru newNumbers. Oleh kerana array asal numbers tidak diubah, ini adalah operasi tak boleh ubah (immutable).

Kelebihan Menggunakan Struktur Data Tak Boleh Ubah

Kebolehjangkaan yang Lebih Baik

Oleh kerana data tak boleh ubah (immutable) tidak boleh diubah, modifikasi yang tidak dijangka kurang berkemungkinan berlaku, mengurangkan risiko pepijat.

Keserasian dengan Perpustakaan Berdasarkan Ketakbolehubahan (Immutability)

Perpustakaan seperti React dan Redux sering direka dengan data tak boleh ubah dalam fikiran, menjadikan pengurusan keadaan (state management) lebih mudah apabila digunakan dengan betul.

Menjadikan Objek Tak Boleh Ubah dengan Object.freeze

Object.freeze boleh digunakan untuk menghalang modifikasi pada objek.

1// Create a frozen object (properties cannot be modified)
2const person = Object.freeze({ name: "Alice", age: 25 });
3
4// Attempt to modify a property (ignored in non-strict mode, error in strict mode)
5person.age = 26;
6
7console.log(person); // { name: "Alice", age: 25 }

Walau bagaimanapun, Object.freeze melaksanakan shallow freeze, yang bermaksud sifat objek bersarang masih boleh diubah.

1// Create a frozen object with a nested object
2const user = Object.freeze({ profile: { name: "Bob" } });
3
4// Attempt to modify a nested property (this works because Object.freeze() is shallow)
5user.profile.name = "Charlie";
6
7console.log(user.profile.name); // "Charlie" (nested object is still mutable)

Untuk mencipta objek yang sepenuhnya tak boleh ubah, diperlukan deep freeze.

 1// Function to deeply freeze an object, making all nested objects immutable
 2function deepFreeze(obj) {
 3  Object.keys(obj).forEach(key => {
 4    if (typeof obj[key] === "object" && obj[key] !== null) {
 5      deepFreeze(obj[key]); // Recursively freeze nested objects
 6    }
 7  });
 8  return Object.freeze(obj); // Freeze the top-level object
 9}
10
11// Create a deeply frozen object
12const user = deepFreeze({ profile: { name: "Bob" } });
13
14// Attempt to modify a nested property (ignored)
15user.profile.name = "Charlie";
16
17console.log(user.profile.name); // "Bob" (unchanged due to deep freeze)

Ringkasan

• Data berubah (mutable) boleh diubah, termasuk objek dan array.
• Data tak boleh ubah (immutable) tidak boleh diubah, termasuk jenis asas seperti rentetan (strings) dan nombor.
• Menggunakan sintaks penyebaran atau map membolehkan operasi data tak boleh ubah..
• Object.freeze dan deepFreeze boleh digunakan untuk menghalang modifikasi pada objek.
• Menggunakan data tak boleh ubah membolehkan kod yang lebih mudah diramal dan kurang terdedah kepada kesilapan.

Reka bentuk tak boleh ubah meningkatkan keselamatan dan kebolehbacaan kod, jadi gunakanlah ia dengan baik!

Anda boleh mengikuti artikel di atas menggunakan Visual Studio Code di saluran YouTube kami. Sila lihat juga saluran YouTube kami.

YouTube Video