Mutable at Immutable sa JavaScript

Ipinaliwanag ng artikulong ito ang mga konsepto ng mutable at immutable sa JavaScript.

YouTube Video

Mutable at Immutable sa JavaScript

Ano ang Mutable?

Ang Mutable ay nangangahulugan na ang isang halaga ay maaaring mabago. Ang mga object at array, na pawang mga reference type, ay mga karaniwang halimbawa ng mga mutable na istruktura ng datos.

Halimbawa ng isang Mutable na Object

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

Sa code na ito, ang property na age ng object na person ay binago mula 25 patungong 26. Dahil ang mga object ay passed by reference, ang nilalaman ng memory address na nakaimbak sa variable na person ay binago.

Halimbawa ng isang Mutable na Array

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

Sa code na ito, ginamit ang method na push upang magdagdag ng bagong elementong 4 sa orihinal na array. Binabago nito ang orihinal na array, na ginagawang isang mutable na operasyon.

Halimbawa sa isang Function

 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)

Kapag nagsasagawa ng mutable na operasyon sa loob ng isang function, ang orihinal na array ay nababago rin.

Ano ang Immutable?

Ang Immutable ay nangangahulugan na ang isang halaga ay hindi maaaring mabago. Ang mga Primitive type ay pangunahing immutable.

Halimbawa ng isang Immutable na Primitive Type

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

Ang pagtatangkang baguhin ang unang character ng string na str patungo sa H ay nabigo dahil ang mga string ay immutable.

Halimbawa sa isang Function

 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)

Dahil ang mga numero ay immutable, ang mga operasyon sa loob ng isang function ay hindi nakakaapekto sa orihinal na variable.

Mga Immutable na Operasyon sa mga Array

Ang mga array ay mutable, ngunit ang paglikha ng bagong array sa halip na baguhin ang orihinal ay nagbibigay-daan para sa mga immutable na operasyon.

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)

Dito, ginagamit ang spread syntax (...) upang lumikha ng bagong array na newNumbers. Dahil ang orihinal na array na numbers ay hindi binago, ito ay isang hindi nababagong operasyon.

Mga Benepisyo ng Paggamit ng Hindi Nababagong Estrukturang Pangdata

Pinahusay na Pagiging Predictable

Dahil ang hindi nababagong data ay hindi maaaring baguhin, mas kakaunti ang posibilidad ng di-inaasahang mga pagbago, na nagbabawas ng panganib sa mga bug.

Pagiging Compatible sa mga Library na Nakabatay sa Immutability

Ang mga library tulad ng React at Redux ay kadalasang dinisenyo sa konsepto ng hindi nababagong data, na nagpapadali sa pamamahala ng estado kung ginagamit nang tama.

Ginagawang Hindi Nababago ang mga Object gamit ang Object.freeze

Maaaring gamitin ang Object.freeze upang pigilan ang mga pagbabago sa isang object.

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 }

Gayunpaman, ang Object.freeze ay gumagawa ng isang shallow freeze, ibig sabihin ang mga katangian ng mga nakapaloob na object ay nananatiling nababago.

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)

Upang makalikha ng isang ganap na hindi nababagong object, kinakailangan ang isang 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)

Buod

• Ang mutable na data ay maaaring baguhin, kabilang ang mga object at array.
• Ang immutable na data ay hindi maaaring baguhin, kabilang ang mga primitive na type tulad ng strings at numbers.
• Ang paggamit ng spread syntax o map ay nagbibigay-daan sa mga operasyong hindi nababago sa data..
• Ang Object.freeze at deepFreeze ay maaaring gamitin upang pigilan ang mga pagbabago sa mga object.
• Ang paggamit ng hindi nababagong data ay nagbibigay-daan sa mas predictable at mas kaunting error-prone na code.

Pinapahusay ng immutable na disenyo ang kaligtasan at kakayahang mabasa ng code, kaya gamitin itong mabuti!

Maaari mong sundan ang artikulo sa itaas gamit ang Visual Studio Code sa aming YouTube channel. Paki-check din ang aming YouTube channel.

YouTube Video