Photo by twinsfisch on Unsplash

JAVASCRIPT’IN TARIHÇESI

Javascript Spread Kavramı

Javascript Spread bize ne gibi avantajlar sağlar ? Kodun okunmasını nasıl kolaylaştırır ?

Bu yazıyı daha önceden yazmış olduğum Javascript’in Tarihçesi yazısının bir devamı olarak yazıyorum. Bir çok kavramı tek bir yazıda ele almanın yaratacağı karmaşıklıktan kaçmak için bu yönteme başvurdum. Bu yazılardaki amacım önceden Javascript’in varolan hangi özelliklerinin yetmediğini ve bu geliştirmeyle neyi hedeflediklerini anlatacağım.

Bu konu bir önceki konuda anlattığım Rest kavramı ile karıştırılabilir sonuçta buda 3 nokta… diğeride …3 nokta diye düşünülebilir. Fakat birbirlerinden farklıdır. Birisi bir fonksiyona parametre olarak geçirdiğinin n tane değişkeni toplarken diğeri ise bu n tane değişkeni açmaya dağıtmayı amaçlar bu konu aşağıda anlatacağım örneklerle daha anlaşılır hale gelecektir.

Özetle bu yazımda aşağıdaki kavramları anlatmaya çalışacağım.

• Javascript Spread Kavramı Nedir ?
• Spread Kullanımı → Function:Function.prototype.apply()
• Spread Kullanımı → Array: push(), splice(), concat(),
• Spread Kullanımı → Object ve Array Kopyalama
• Spread Kullanımı → Math: Math.max()

Javascript Spread Nedir?

Javascript Spread bu kısma atanılan array yayılmasıdır. Özetle;

...[2,4,6,8] => 2,4,6,8 olmasıdır.

Yani arkaplanda bu sefer elinizde array değerleri var ve siz bunları array’ in dışındaki değerler gibi dağıtmak istiyorsunuz.

Function Call/Apply Örneği

Javascript call ve apply kullanımını inceleyelim. Call fonksiyonu verilen context ile birlikte parametreleri tek tek vererek çağırmanızı sağlarken apply bu işlemi array olarak yapmanıza olanak sağlar.

function sum(x,y,w,z){
    let toplam=x+y+w+z; return toplam;
}
console.log(sum.call(this,3,5,7,9)); //24
console.log(sum.apply(this,[3,5,7,9])); /24

Spread ile birlikte yukarıdaki işlemi direk call ile yapabilir hale gelmiş olduk. array yayma özelliği bunu sağlamış oldu.

console.log(sum.call(this,...[3,5,7,9])); 

Array’ de Kullanım Örnekleri

Array.push()

Array sonuna istediğimiz elemanları eklememizi sağlar. Burda tek bir eleman verebildiğimiz gibi birden fazla elemanda verebiliriz. Burdaki apply fonksiyonu yerine spread kullanabilirsiniz.

const arr=[2,3]; arr.push(4,5) console.log(arr);//[2,3,4,5]
const arr=[2,3]; arr.push.apply([4,5]) console.log(arr);
const arr=[2,3]; arr.push([...4,5]) console.log(arr);

Array.splice() Örneği

Array ortasına , sonuna ve başına başka bir array eklemek istersek burada spread çok avantajlı. splice ile yapmaya göre daha okunaklı bir hale gelmiş durumda.

const arr=[1,2]; arr.splice(1,0,4,5); console.log(arr)//[1,4,5,2]
const arr=[1,...[4,5],2]; console.log(arr)

Array.concat() Örneği

Array birleştirmek isterseniz concat ile bu işlemi yapabiliriz ama spread ile bu işlem oldukça kolay ve okunaklı bir şekilde yapılabilmektedir.

const arr=[1,2]; console.log(arr.concat([3,4],[5])) //[1,2,3,4,5]
console.log([...[1,2],...[3,4],...[5]]);

Array ve Object Kopyalama Örneği

Aşağıdaki örneklerde array ve objeleri spread operatörü ile clone oluşturabilirsiniz.

const arr1=[1,2]; const arr2=[...arr1]; arr1.push(3);
console.log(arr2);
const obj1={a:1,b:2}; const obj2={...obj1}; obj1['c']=3;
console.log(obj2);

Nesneyi Kopyalama Yöntemleri(Shallow/Deep Copy)

Shallow(Sığ) kopyalama esnasında sadece first-level (birincil) hiyerarşideki değerleri kopyalar. Spread operatörü’ de bu kopyalamaya göre çalışır.

Deep(Derinlemesine) kopyalama ise bütün alt hiyerarşileri gezip her bir değeri kopyalar bu zahmetli ve uğlaştırıcıdır ama referansların birbirini etkilememesi için deep copy zorunludur.

Shallow Copy

let obj = { a: [1, 2, {users: [{ name: ‘onur’, age: 12 }] }], b:2 };
const cloneObj={…obj}; //same => Object.assign({}, obj);
obj.a[2].users[0].name=’deniz’;
obj.b=4;
console.log(cloneObj);//Result interesting.. 
//cloneObj.b is 2 not 4 because it clones first level and cloneObj holds a new memory location for b
//but cloneObj.a[2].users[0].name is 'deniz' why because it hold reference cloning is not deeply.

Deep Copy

1. Serialize/Deserialize : Hızlı kopyalama için — JSON.parse/stringify kullanabilirsiniz.

2. lodash.clonedeep

const clonedeep = require('lodash.clonedeep')

3. Recursive olarak nesneyi dolaşarak birbirine atama yaparak kopyalama yapabilirsiniz.

function clone(obj) {
     if (obj === null || typeof (obj) !== 'object' || 'isActiveClone' in obj)
        return obj;
    if (obj instanceof Date)
        var temp = new obj.constructor(); //or new Date(obj);
    else
        var temp = obj.constructor();
    for (var key in obj) {
        if (Object.prototype.hasOwnProperty.call(obj, key)) {
            obj['isActiveClone'] = null;
            temp[key] = clone(obj[key]);
            delete obj['isActiveClone'];
        }
    }
    return temp;
}

Math’ da Kullanım Örnekleri

Math.max kullanımı yukarıdaki apply kullanımı ile benzerdir. Apply yerine büyük array için spread operatörü kullanabilirsiniz.

console.log(Math.max(1,5,3)); //5
console.log(Math.max.apply(this,[1,5,3])); //5
console.log(Math.max(…[1,5,3])); //5

Okumaya Devam Et 😃

Bu yazının devamı veya yazı grubundaki diğer yazılara erişmek için bu linke tıklayabilirsiniz.