JavaScript'te klonlama ve deep copy işlemleri nasıl yapılır? Bu yazıda tüm detaylarıyla açıklıyoruz Nesneleri kopyalama yöntemleri ve örnekleri burada!

JavaScript'te nesne klonlama ve deep copy işlemleri oldukça önemlidir. Bu işlemler sayesinde mevcut bir nesnenin farklı bir bellek alanında kopyalanarak değiştirilmesi sağlanır. Bu makalede, JavaScript'te kullanılan farklı nesne klonlama ve deep copy yöntemleri ele alınacaktır. Ayrıca bu yöntemlerin nasıl kullanılabileceği konusunda da detaylı bilgi paylaşılacaktır.

Bu sayede, JavaScript geliştiricileri, kod yazarken değişken ve nesneleri daha rahat kullanabilecekleri ve bu nesneler üzerinde daha rahat bir şekilde manipülasyon yapabilecekleri bir ortam oluşturabilirler. Bu konuda bilgi sahibi olmak, JavaScript ile çalışan her geliştirici için oldukça önemlidir.

Nesne Klonlama Nedir?

Nesne klonlama işlemi, JavaScript'te mevcut olan bir nesnenin tamamen aynısını yaratmak ve buna farklı bir bellek alanında başka bir değişken atamak işlemidir. Bu işlem, orijinal nesnede yapılan değişikliklerin yeni oluşturulan nesneyi etkilememesi için oldukça önemlidir. Bir nesneyi kopyalamak, özellikle büyük ve karmaşık nesnelerde oldukça yararlıdır.

Nesne klonlama işlemi, shallow copy ve deep copy olarak ikiye ayrılır. Shallow copy, orijinal nesnenin özelliklerini yeni bir nesne içinde kopyalar, ancak içindeki diğer nesnelerin adreslerini sabit tutar. Buna karşın, deep copy işleminde ise orijinal nesnenin tüm özellikleri, bir başka nesneye tamamen ayrılmış bir bellekte kopyalanır. Bu nedenle, deep copy işlemi daha fazla bellek tüketir, ancak orijinal nesne üzerinde yapılan değişikliklerin kopyalanan nesneyi etkilemesi söz konusu değildir.

Shallow Copy ve Deep Copy Arasındaki Fark Nedir?

JavaScript'te nesne klonlama işlemlerinin iki farklı türü bulunur: shallow copy ve deep copy. Shallow copy, bir nesnenin özelliklerini yeni bir nesne içinde kopyalamak demektir. Bu yöntem, sadece nesne özelliklerinin referansını kopyalar. Yani orijinal nesnedeki özelliklerin değerlerindeki değişiklikler, kopyalanan nesnede de yansıyacaktır.

Deep copy ise aynı nesnenin tamamen ayrılmış bir bellek alanına kopyalanmasıdır. Bu yöntem, hem özellikleri hem de özelliklerin değerlerini kopyalar. Bu nedenle, orijinal nesnedeki değişiklikler kopyalanan nesneyi etkilemez. Deep copy işlemi yapmak için farklı yöntemler vardır.

Özetle, shallow copy işlemi sadece referansları kopyalarken, deep copy işlemi orijinal nesnenin tamamen ayrı bir bellek alanına kopyalanmasını sağlar.

Shallow Copy Yöntemleri Nelerdir?

JavaScript'te nesne klonlama yapmak için kullanılan yöntemlerden biri de shallow copy'dir. Shallow copy, nesnenin özelliklerinin yeni bir nesneye kopyalanmasını sağlar ancak nesnelerin özelliklerinde yapılacak bir değişiklik, kaynak nesneyi de etkiler. Bu yöntemle kopyalanan nesne, orijinal nesne ile aynı bellek alanını paylaşır.

Bu işlem için spread operatörü, Object.assign() ve Array.prototype.slice() yöntemleri kullanılabilir. Spread operatörü, nesne özelliklerini kopyalamak için kullanılır ve eşitliğin sağ tarafına yerleştirilen nesne spread operatörüyle işaretlenir. Object.assign() yöntemi, bir veya birden fazla nesne özelliğini kopyalamak için kullanılır. Bu yöntem, ilk parametreye tüm özellikleri kopyalamak istediğiniz nesneyi, diğer parametrelere ise kopyalanacak nesnelere yer verilir. Array.prototype.slice() yöntemi ise dizi öğelerini kesmek ve yeni bir dizi oluşturmak için tasarlanmıştır. Bu yöntem, nesne özelliklerinin kopyalanmasında da kullanılabilir.

Yukarıda bahsedilen shallow copy yöntemleri, JavaScript'te nesne kopyalama ve manipülasyon işlemlerinde oldukça kullanışlıdır. Ancak, özellikle büyük boyutlu nesneler için deep copy yöntemleri tercih edilebilir.

Deep Copy Yöntemleri Nelerdir?

Deep copy işlemi, nesne özelliklerinin tamamen ayrılmış bir bellek alanında kopyalanmasıdır. Bu işlem, orijinal nesneye etki etmeden tamamen yeni bir nesne oluşturulmasını sağlar.

JSON.stringify() ve JSON.parse() yöntemleri, JavaScript nesnelerinin JSON formatına dönüştürülmesinde kullanılan yöntemlerdir. Bu yöntemler, JSON formatının nesneye dönüştürülmesinde de kullanılabilir. JSON formatı, nesnelerin özelliklerinin birbirinden ayrılmış olarak saklandığı bir formattır. Bu sayede, JSON.stringify() yöntemi ile bir nesne JSON formatına dönüştürüldüğünde, bu özellikler ayrılmış bir şekilde saklanır. JSON.parse() yöntemi ile bu özellikler tekrar nesne formatına dönüştürülür.

Lodash kütüphanesi, JavaScript nesneleri üzerinde manipülasyon yapmak için kullanılan bir kütüphanedir. Bu kütüphanenin cloneDeep() yöntemi, deep copy işlemi için kullanılabilir. Bu yöntem, bir nesnenin özelliklerini tamamen ayrılmış bir bellek alanında kopyalar ve orijinal nesneye etki etmez.

Natif bir yöntem olan Recursive Function kullanımı, nesne özellikleri için özyineleme yaparak deep copy işlemi gerçekleştirilmesini sağlar. Bu yöntem, nesne özellikleri içinde bulunan nesnelerin özelliklerini de ayrılmış bir bellek alanında kopyalamayı sağlar. Bu sayede, tamamen yeni bir nesne oluşturulur ve orijinal nesne etkilenmez.

Tüm bu yöntemler, deep copy işleminin gerektiği yerlerde kullanılabilir. Hangi yöntemin tercih edileceği, kullanılacak olan nesne yapısına ve deep copy işleminin gerektiği senaryoya bağlıdır.

Spread Operatörü ile Nesne Klonlama Yapmak

JavaScript'te nesne klonlama işlemi, mevcut bir nesneyi tamamen aynısını, ancak farklı bir bellek alanında başka bir değişkene kopyalama işlemidir. Bu işlem için spread operatörü kullanılabilir. Spread operatörü, bir nesnenin özelliklerini kopyalamak için kullanılır. Kullanım şekli, eşitliğin sağ tarafına yerleştirilen nesne spread operatörüyle işaretlenir.

Örneğin:

const orijinalNesne = {   ad: 'John Doe',   yas: 25,   meslek: 'yazılım geliştirici' };const kopya = { ...orijinalNesne };

Bu örnekte, "orijinalNesne" adlı bir nesne oluşturulur ve içerisinde "ad", "yas" ve "meslek" özellikleri bulunur. Daha sonra spread operatörü kullanılarak, "orijinalNesne" nesnesi kopyası olan "kopya" adlı bir nesne oluşturulur. Bu şekilde, "orijinalNesne" ve "kopya" nesneleri aynı özelliklere sahip olurlar, ancak farklı bellek alanlarında oluşurlar.

Object.assign() ile Nesne Klonlama Yapmak

JavaScript'te nesne klonlama ve deep copy işlemleri için farklı yöntemler vardır. Object.assign() yöntemi, bir veya birden fazla nesne özelliğini kopyalamak için kullanılır. Bu yöntem, ilk parametreye tüm özellikleri kopyalamak istediğiniz nesneyi, diğer parametrelere ise kopyalanacak nesnelere yer verilir. Bu şekilde, kopyalanacak nesneleri ardı ardına ekleyebilirsiniz.

Örneğin:

let nesne1 = { ad: 'John', yas: 33 };let nesne2 = { soyad: 'Doe' };let nesne3 = { ...nesne1, ...nesne2 };console.log(nesne3);

{ ad: 'John', yas: 33, soyad: 'Doe' }

Bu örnekte, birinci nesne tüm özellikleri ile birlikte üçüncü nesneye kopyalanırken, ikinci nesne soyad özelliği ile eklendi. Bu sayede, tek bir nesnede tüm özellikler bir arada olacaktır.

Array.prototype.slice() ile Nesne Klonlama Yapmak

Array.prototype.slice() yöntemi, JavaScript dilinde bulunan bir metodtur. Temel olarak, bu yöntem, verilen dizi öğelerini kesmek ve yeni bir dizi oluşturmak için tasarlanmıştır. Ancak, slice() yöntemi, nesne özelliklerinin kopyalanmasında da kullanılabilir.

slice() yöntemi, başlangıç ve bitiş parametreleri alır. Başlangıç parametresi, kopyalanacak öğelerin başlangıç noktasını belirlerken, bitiş parametresi ise kopyalamadan sonra bitiş noktasını belirler. Bu yöntem ayrıca negatif parametreler de alabilir. Bu şekilde, dizinin sonundan başlamak için negatif bir başlangıç ve bitiş parametresi belirtilebilir.

slice() yöntemiyle nesne klonlama işlemi yapmak için, öncelikle nesnemize ait özellikleri bir diziye yerleştirmeliyiz. Daha sonra, bu diziyi slice() yöntemiyle keserek yeni bir dizi oluşturabiliriz. Böylelikle, nesnemizi kopyalamış oluruz.

Aşağıda, slice() yöntemiyle nesne klonlamayı gösteren bir örnek kod yer almaktadır:

            const original = {a: 1, b: 2, c: 3};        const keys = Object.keys(original);        const cloned = keys.slice();        console.log(cloned); // {a: 1, b: 2, c: 3}    

Burada, original adlı nesnemizin özellikleri bir keys adlı diziye yerleştirilir. Daha sonra, slice() yöntemiyle bu dizi kesilerek cloned adlı yeni bir dizi oluşturulur. Bu şekilde, original nesnemizin aynısına sahip olan cloned nesnesi elde edilmiş olur.

JSON.stringify() ve JSON.parse() Yöntemleri ile Deep Copy Yapmak

JavaScript nesnelerinin deep copy işlemi için kullanılan yöntemlerden biri de JSON.stringify() ve JSON.parse() yöntemleridir. JSON.stringify() yöntemi, bir nesneyi JSON formatına dönüştürerek, bu formatın string olarak elde edilmesini sağlar. Ardından, bu string değeri JSON.parse() yöntemiyle geri dönüştürerek deep copy işlemi gerçekleştirilir.

JSON.stringify() yöntemi, nesnelere ait sadece enumerable özellikleri dönüştürebilir. Bu yüzden prototype chain ve function gibi özellikler bu dönüştürme işlemi sırasında kaybedilir. Ayrıca, dönüşüm işlemi süresince string formatında oluşan değer, çift tırnak içinde yazılır ve string formatında olduğundan, özellik değerleri de string formatındadır.

Deep copy işlemi için ise JSON.stringify() ile elde edilen string değer, JSON.parse() yöntemiyle geri döndürülerek, yeni bir nesne oluşturulur. Bu işlem, orijinal nesneyle aynı özellikleri taşıyan ve orijinal nesneyle tamamen ayrılmış olan yeni bir nesne oluşturur.

JSON.stringify() ve JSON.parse() yöntemleri, browser'daki local storage işlemlerinde sıklıkla kullanılmaktadır. Ayrıca, web sayfaları arasında veri transferinde ve API işlemlerinde de deep copy işlemi için kullanılabilmektedirler.

Lodash Kütüphanesi ile Deep Copy Yapmak

Lodash, modern web uygulamaları için araçlar içeren bir JavaScript kütüphanesidir. Lodash, yinelenen JavaScript görevlerini kolaylaştırmak ve önceden yazılmış modüller kullanarak daha hızlı bir şekilde kod yazmak için kullanılır.

Lodash, kopyalama gibi işlemler için de kullanışlı bir kütüphanedir. Lodash'in cloneDeep() yöntemi, nesne özelliklerinin tamamını başka bir bellek alanına kopyalayarak deep copy işlemi gerçekleştirir. Bu yöntem, özyineleme veya JSON.stringify() gibi yöntemlerin aksine, nesnenin yönlendirilmiş veya döngüsel özellikleri olan nesneleri de kopyalar.

Lodash kütüphanesi, özellikle büyük ve karmaşık nesnelerin kopyalanması gerektiğinde tercih edilebilir. Bu yöntem, JavaScript'in natif kopyalama yöntemlerinden daha hızlı ve performanslıdır. Ancak, küçük nesneler veya tek özellikli nesneler için kullanmak gereksiz olabilir.

Aşağıdaki tablo, Lodash'in cloneDeep() yöntemi ile bir nesnenin deep copy işleminin nasıl yapılacağı hakkında bir örnek göstermektedir.

Bu örnek nesnenin cloneDeep() yöntemi kullanılarak deep copy işlemi gerçekleştirilmiştir. Kopyalanmış nesne, orijinal nesne ile aynı özelliklere sahiptir, ancak iki farklı bellek alanında tutulur.

Recursive Function ile Deep Copy Yapmak

JavaScript'te deep copy işlemi için kullanılabilecek yöntemlerden biri de Recursive Function'dır. Bu yöntem, kendisini çağırmak suretiyle deep copy işlemini gerçekleştirir. Nesne özellikleri için öz yineleme yöntemi kullanılarak deep copy yapılabilmektedir.

Recursive Function yöntemi, bir fonksiyonun kendi kendini çağırması işlemidir. Bu şekilde bir fonksiyon, içerisinde yer alan nesnenin özelliklerini tamamen ayrılmış bir bellekte başka bir nesneye kopyalayabilir. Fonksiyon nesneler üzerinde özyineleme yaptığı için deep copy işlemi gerçekleştirilir.

Recursive Function yöntemi, özellikle karmaşık nesnelerin kopyalanması sırasında oldukça kullanışlıdır. Ancak, doğru bir şekilde kullanılmadığı takdirde, performans kaybına neden olabilir. Bu nedenle, nesne özellikleri için özyineleme yöntemini kullanırken, dikkatli olmak gerekir.

Aşağıda, Recursive Function yöntemi kullanılarak deep copy işleminin nasıl gerçekleştirilebileceği gösterilmektedir:

function cloneObject(object) {  let clonedObject = {};  for (let key in object) {    if (object.hasOwnProperty(key)) {      if (typeof object[key] === 'object') {        clonedObject[key] = cloneObject(object[key]);      } else {        clonedObject[key] = object[key];      }    }  }  return clonedObject;}

Bu fonksiyon, bir nesne parametresi alır ve bu nesnenin deep copy'sini oluşturarak geriye döndürür. Nesne özellikleri üzerinde gezinirken, eğer bir özellik nesne ise, Recursive Function fonksiyonunu çağırarak öz yinelemeli bir şekilde deep copy işlemini gerçekleştirir. Eğer özellik bir veri tipi ya da boşsa, bu özellik tekrar kopyalanır.

Overall, JavaScript'te nesne klonlama ve deep copy işlemleri convered different methods. While shallow copying a new object with the properties of an existing object is not considered too difficult, deep copying an object requires special attention and a suitable implementation. Recursive Function, JSON.stringify() and JSON.parse(), Lodash library and spread operator, Object.assign() and Array.prototype.slice() methods are all ways to achieve this task.