JavaScript'te Değiştirilebilir ve Değiştirilemez

Bu makale JavaScript'teki değiştirilebilir ve değiştirilemez kavramlarını açıklar.

YouTube Video

JavaScript'te Değiştirilebilir ve Değiştirilemez

Değiştirilebilir Nedir?

Değiştirilebilir, bir değerin değiştirilebileceği anlamına gelir. Referans türleri olan nesneler ve diziler, değiştirilebilir veri yapılarına tipik örneklerdir.

Değiştirilebilir Bir Nesne Örneği

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

Bu kodda, person nesnesinin age özelliği 25ten 26ya değiştirilmiştir. Nesneler referans yoluyla geçtiği için, person değişkeninde saklanan bellek adresindeki içerik değiştirilir.

Değiştirilebilir Bir Dizi Örneği

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

Bu kodda, push yöntemi kullanılarak orijinal diziye yeni bir öğe 4 eklenir. Bu, orijinal diziyi değiştirir ve bu da onu bir değiştirilebilir işlem yapar.

Bir Fonksiyonda Örnek

 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)

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

Değiştirilemez Nedir?

Değiştirilemez, bir değerin değiştirilemeyeceği anlamına gelir. İlkel türler temelde değiştirilemezdir.

Değiştirilemez Bir İlkel Türün Örneği

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

str dizesinin ilk karakterini H olarak değiştirme girişimi başarısız olur çünkü dizeler değiştirilemezdir.

Bir Fonksiyonda Örnek

 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)

Sayılar değiştirilemez olduğu için, bir fonksiyon içindeki işlemler orijinal değişkeni etkilemez.

Dizilerde Değiştirilemez İşlemler

Diziler değiştirilebilir, ancak orijinalini değiştirmek yerine yeni bir dizi oluşturmak, değiştirilemez işlemlere olanak tanır.

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)

Burada, yayılma biçimi (...) newNumbers adlı yeni bir dizi oluşturmak için kullanılır. Orijinal numbers dizisi değiştirilmediği için bu işlemsiz bir operasyondur.

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

Geliştirilmiş Öngörülebilirlik

Değişmez veriler değiştirilemediği için, beklenmedik değişikliklerin olma olasılığı daha düşüktür, bu da hata riskini azaltır.

Değişmezliğe Dayalı Kütüphanelerle Uyumluluk

React ve Redux gibi kütüphaneler genellikle değişmez veri düşünülerek tasarlanır, bu da doğru şekilde kullanıldığında durum yönetimini kolaylaştırır.

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

Object.freeze, bir nesneye yapılan değişiklikleri ö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 = 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)

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(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)

Özet

• Değişebilir veri, nesneler ve diziler dahil olmak üzere değiştirilebilir.
• Değişmez veri, dizgi ve sayı gibi temel türler dahil olmak üzere değiştirilemez.
• Yayılma sözdizimi veya map kullanmak, değişmez veri işlemlerini mümkün kılar..
• Object.freeze ve deepFreeze nesnelerde değişiklik yapılmasını önlemek için kullanılabilir.
• Değişmez veri kullanımı, daha öngörülebilir ve daha az hata eğilimli kod sağlar.

Değişmez tasarım, kod güvenliğini ve okunabilirliğini artırır, bu yüzden bunu iyi değerlendirin!

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

YouTube Video