Mutable at Immutable sa TypeScript

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

YouTube Video

Mutable at Immutable sa TypeScript

Ano ang Mutable?

Ang Mutable ay nangangahulugan na ang isang halaga ay maaaring baguhin. Ang mga reference type tulad ng objects at arrays ay karaniwang halimbawa ng mga mutable na istruktura ng datos.

Halimbawa ng Mutable na Objekto

1type Person = { name: string; age: number };
2
3// Mutable Example: Object
4let person: Person = { name: "Alice", age: 25 };
5person.age = 26;
6console.log(person); // { name: "Alice", age: 26 }

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

Halimbawa ng Mutable na Array

1// Mutable Example: Array
2let numbers: number[] = [1, 2, 3];
3numbers.push(4);
4console.log(numbers); // [1, 2, 3, 4]

Sa code na ito, ang push na method ay ginamit upang magdagdag ng bagong element 4 sa original na array. Binabago nito ang orihinal na array, kaya't ito ay isang mutable na operasyon.

Halimbawa sa Isang Function

1// Mutable Example: Function
2function append(arr: number[], value: number): void {
3    arr.push(value); // Modify the original array
4    console.log(arr);
5}
6
7let nums: number[] = [1, 2, 3];
8append(nums, 4);
9console.log(nums); // [1, 2, 3, 4]

Kapag nagsagawa ng mga 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 baguhin. Ang Primitive types ay likas na immutable.

Halimbawa ng Immutable na Primitive Type

1// Immutable Example: String
2let str: string = "hello";
3str[0] = "H"; // Error: Index assignment is not allowed
4console.log(str); // "hello"

Ang pagtatangkang baguhin ang unang karakter ng string na str patungong H ay nabigo dahil ang mga string ay immutable.

Halimbawa sa Isang Function

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

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

Mga Immutable na Operasyon sa Arrays

Ang mga Array ay mutable, ngunit sa pamamagitan ng paggawa ng bagong array sa halip na baguhin ang orihinal na array, maaaring makamit ang mga immutable na operasyon.

1// Create an array of numbers
2let numbers: number[] = [1, 2, 3];
3
4// Immutable Example: Creating a new array
5let newNumbers: number[] = [...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 numbers array ay nananatiling hindi nababago, ito ay isang immutable na operasyon.

Mga Benepisyo ng Paggamit ng mga Immutable na Estruktura ng Datos

Mas Pinahusay na Predictability

Ang immutable na datos ay hindi nagbabago, kaya't mas maliit ang posibilidad ng di-inaasahang pagbabago at nababawasan ang tsansa ng pagkakaroon ng mga bug.

Pagkakatugma sa mga Aklatan na Batay sa Immutability

Ang mga aklatan tulad ng React at Redux ay kadalasang idinisenyo base sa immutable na datos, na nagpapadali sa pamamahala ng estado kapag ginamit nang maayos.

Ginagawang Immutable ang mga Obheto gamit ang Object.freeze

Maaaring gamitin ang Object.freeze upang pigilan ang pagbabago ng isang obheto.

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 lamang ng shallow freeze, ibig sabihin nananatiling mutable ang mga katangian ng mga nested na obheto.

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

Upang makagawa ng ganap na immutable na obheto, kinakailangan ang isang deep freeze.

 1// Function to deeply freeze an object, making all nested objects immutable
 2function deepFreeze<T>(obj: T): Readonly<T> {
 3    Object.freeze(obj);
 4    Object.getOwnPropertyNames(obj).forEach(prop => {
 5        const value = (obj as any)[prop];
 6        if (typeof value === "object" && value !== null) {
 7            deepFreeze(value);
 8        }
 9    });
10    return obj;
11}
12
13// Create a deeply frozen object
14const user = deepFreeze({
15  profile: { name: "Bob" }
16});
17
18// Attempt to modify a nested property
19// (this will now throw an error in strict mode)
20user.profile.name = "Charlie";  // No TypeScript error, but modification is not allowed at runtime
21
22console.log(user.profile.name); // "Bob" (unchanged due to deep freeze)

Buod

• Ang mga mutable na datos ay maaaring baguhin, kabilang dito ang mga obheto at array.
• Ang immutable na datos ay hindi maaaring baguhin, kabilang dito ang mga primitive na uri tulad ng string at numero.
• Gamit ang spread syntax o mga pamamaraan tulad ng map, maaaring magsagawa ng mga operasyon sa immutable na datos.
• Maaaring gamitin ang Object.freeze at deepFreeze upang pigilan ang pagbabago ng mga obheto.
• Ang paggamit ng immutable na datos ay tumutulong upang gumawa ng mas predictable at mas kakaunti ang pagkakaroon ng error na code.

Ang pag-aangkop ng isang immutable na disenyo ay nagpapabuti sa kaligtasan at pagiging mabasa ng code, kaya samantalahin ito nang buo!

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