TypeScript'te Değişebilir ve Değişmez

Bu makale, TypeScript'teki değişebilir ve değişmez kavramlarını açıklar.

YouTube Video

TypeScript'te Değişebilir ve Değişmez

Değişebilir Nedir?

Değişebilir, bir değerin değiştirilebileceği anlamına gelir. Objeler ve diziler gibi referans tipi veriler, değişebilir veri yapılarının tipik örnekleridir.

Değişebilir Bir Obje Örneği

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 }

Bu kodda, person objesinin age özelliği 25'ten 26'ya değiştirilmiştir. Objeler referans ile aktarıldığından, person değişkeninde saklanan hafıza adresindeki içerikler değiştirilir.

Değişebilir Bir Dizi Örneği

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

Bu kodda, push yöntemi kullanılarak orijinal diziye yeni bir 4 elemanı eklenir. Bu, orijinal diziyi değiştirir ve bu işlemi değişebilir bir işlem yapar.

Bir Fonksiyonda Örnek

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]

Bir fonksiyon içinde değişebilir işlemler yapıldığında, orijinal dizi de değişir.

Değişmez Nedir?

Değişmez, bir değerin değiştirilemeyeceği anlamına gelir. Basit türler temel olarak değişmezdir.

Değişmez Bir Basit Tür Örneği

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

str stringinin ilk karakterini H olarak değiştirme girişimi başarısız olur çünkü string'ler değişmezdir.

Bir Fonksiyonda Örnek

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)

Sayılar değişmez olduğundan, bir fonksiyon içindeki işlemler orijinal değişkeni etkilemez.

Diziler Üzerinde Değişmez İşlemler

Diziler değişebilir, ancak orijinalini değiştirmek yerine yeni bir dizi oluşturarak değişmez işlemler yapılabilir.

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)

Burada, ... yayılım sözdizimi yeni bir newNumbers dizisi oluşturmak için kullanılır. Orijinal numbers dizisi değişmeden kaldığı için bu bir değişmez (immutable) işlemdir.

Değişmez Veri Yapılarının Kullanımının Faydaları

Daha İyi Öngörülebilirlik

Değişmez veri değişmez, bu da beklenmeyen değişiklikleri daha az olası kılar ve hataların oluşma olasılığını azaltır.

Değişmezlik Temelli Kütüphanelerle Uyum

React ve Redux gibi kütüphaneler genellikle değişmez veriler temel alınarak tasarlanmıştır, bu da uygun şekilde kullanıldığında durum yönetimini kolaylaştırır.

Object.freeze ile Nesneleri Değişmez Hale Getirme

Object.freeze, bir nesnenin değiştirilmesini önlemek için kullanılabilir.

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 }

Ancak, Object.freeze yalnızca yüzeysel bir dondurma yapar, yani iç içe geçmiş nesnelerin özellikleri değiştirilebilir durumda kalır.

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)

Tamamen değişmez bir nesne oluşturmak için derin dondurma gereklidir.

 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)

Özet

• Değişebilir veri değiştirilebilir ve nesneler ile dizileri içerir.
• Değişmez veri değiştirilemez ve metinler (string) ile sayılar gibi ilkel veri türlerini içerir.
• Yayılım sözdizimi veya map gibi yöntemler kullanılarak değişmez veri işlemleri gerçekleştirilebilir.
• Object.freeze ve deepFreeze nesneleri değiştirmeyi önlemek için kullanılabilir.
• Değişmez veri kullanmak, daha öngörülebilir ve daha az hata içeren kod yazmaya yardımcı olur.

Değişmez bir tasarım benimsemek kod güvenliğini ve okunabilirliğini artırır, bu yüzden bunu tam anlamıyla kullanın!

Yukarıdaki makaleyi, YouTube kanalımızda Visual Studio Code'u kullanarak takip edebilirsiniz. Lütfen YouTube kanalını da kontrol edin.

YouTube Video