- 31 Mar 2023
- 79
- 38
JavaScript Spread Syntax Kullanımı
Spread syntax, (…) iterasyon yapılabilebilen bir dizi veya nesnenin içindeki değerleri ayırarak başka bir dizi ya da nesne içinde kullanmayı veya fonksiyona parametre olarak vermek için kullanılan bir JavaScript operatörüdür.Spread syntax, rest syntax ile benzer bir görünüme sahip olmakla birlikte, birbirinin tam tersi işlemler yapar. Spread syntax elemanları yayarken, rest syntax elemanları “birleştirir” ya da toplar. Yani daha açıklayıcı olacak olursak, rest syntax bir fonksiyona gönderilen parametreleri toplar ve tek bir dizi veya nesnenin içine ekler ve bu şekilde kullanılırken, spread syntax ise iterasyon edilebilir bir obje veya dizinin içindeki elemanları ayırarak kullanmamıza olanak tanır.
Örnek vermek gerekirse:
JavaScript:
function multiply(x, y, z) {
return x * y * z;
}
const number = [1, 2, 3];
console.log(multiply(...number)); // multiply(1, 2, 3)Yukarıda, number dizisinin bütün elemanlarını
…numbers syntax’ını kullanarak multiply fonksiyonuna parametre olarak verdik. Burada multiply(…numbers) ve multiply(1, 2, 3) aynı işi yapar.Spread syntax’i kullandığımız 3 farklı yer bulunmaktadır:- Fonksiyon argümanlarında
myFunction(a, …iterableObj, b) - Dizilerde
[1, …iterableObj, '4', 'five', 6] - Objelerde
{ …obj, key: 'value'}
Not: Spread syntax sadece iterasyon yapılabilen diziler ve nesnelerde kullanılabilir.Bir nesne, bir dizinin içinde spread syntax ile kullanılamaz.
JavaScript:
const nesne = { anahtar1: "deger1"};
const dizi = [...nesne] /// TypeError: nesne is not iterableKullanıldığı takdirde yukarıdaki gibi TypeError hatası verir.
Bunun yanında, bir dizinin elemanları bir nesne içinde spread syntax ile kullanılabilir.
JavaScript:
const dizi = [1, 2, 3];
const nesne = { ...dizi }; // { 0: 1, 1: 2, 2: 3 }
console.log(nesne)Fonksiyon Parametrelerinde Spread Syntax Kullanımı
Spread syntax’tan önce bir dizinin elemanlarını fonksiyon parametresi olarak kullanmak için Function.prototype.apply() fonksiyonunu kullanırdık.
JavaScript:
function sum(x, y, z) {
return x + y + z;
}
const numbers = [2, 3, 4,];
console.log(sum.apply(null, numbers))Spread syntax ile bu işlemi aşağıdaki gibi yapabilirsiniz.
JavaScript:
function sum(x, y, z) {
return x + y + z;
}
const numbers = [2, 3, 4,];
console.log(sum(...numbers))Spread syntax ile fonksiyona istediğinizden daha fazla argüman verebilirsiniz.
JavaScript:
function sum(x, y, z) {
return x + y + z;
}
const numbers = [2, 3, 4, 5, 6];
console.log(sum(...numbers))Fonksiyon sadece ilk 3 sıradaki 2, 3, 4 argümanlarını parametre olarak alacaktır.
Başka bir örnek kullanım:
JavaScript:
function sum(x, y, z, k) {
return x + y + z + k;
}
const numbers = [2, 3];
console.log(sum(1, ...numbers, 4)) // sum(1, 2, 3, 4)Bir constructor fonksiyonunu
new ile çağırırken apply() fonksiyonunu kullanmak mümkün olmadığı için bir dizinin elemanlarını argüman olarak fonksiyona veremeyiz. Tam bu noktada spread syntax imdadımıza koşuyor.
JavaScript:
const dateFields = [1970, 0, 1]; // 1 Jan 1970
const d = new Date(...dateFields);Spread syntax’ini kullanarak bir dizinin içine başka bir dizi elemanlarını rahatlıkla ekleyebiliriz. Spread olmadan bu işlemi push, splice, concat fonksiyonları ile yapmak zorundaydık.
JavaScript:
const meyveler1 = ["elma", "armut", "kivi", "muz"]
const meyveler2 = ["portalak", ...meyveler1 ,"mandalina"]
// "portalak", "elma", "armut", "kivi", "muz" ,"mandalina"Yukarıda,
meyveler1 dizisinin elemanlarını meyveler2 dizisinin içine kolayca yerleştirdik.Spread kullanarak bir diziyi kolay bir şekilde kopyalayabiliriz.
JavaScript:
const arr = [1, 2, 3];
const arr2 = [...arr]; // [1, 2, 3]Eğer
spread operatörü kullanmadan bir diziyi birleştirmek isteseydik concat() fonksiyonunu kullanırdık.
JavaScript:
const dizi1 = [1, 2, 3]
const dizi2 = [4, 5, 6]
const yeniDizi = dizi1.concat(dizi2)
console.log(yeniDizi)Spread ile bunu aşağıdaki gibi yapabilmekteyiz.
JavaScript:
const dizi1 = [1, 2, 3]
const dizi2 = [4, 5, 6]
const yeniDizi = [...dizi1, ...dizi2]; // [1, 2, 3, 4, 5, 6]
console.log(yeniDizi)Bu yöntem ile hangi dizinin başa, hangisinin sona geleceğini kolay bir şekilde belirtebiliriz.
Objelerde Spread Syntax Kullanımı
Spread syntax’ından önce nesneleri kopyalamak içinassign() fonksiyonu kullanılırdı.
JavaScript:
const obje1 = { a: 1, b: 2 };
const result = Object.assign(obje1, null);
console.log(obje1); // { a: 1, b: 2 }
console.log(result); // { a: 1, b: 2 }Spread syntax’i ile aşağıdaki gibi kullanılır.
JavaScript:
const obje1 = { a: 1, b: 2 };
const result = {...obje1};
console.log(obje1); // { a: 1, b: 2 }
console.log(result); // { a: 1, b: 2 }Spread syntax’i ile nesne kopyalamada kaynak nesnenin değişmesi, hedef nesneyi etkilemezken, assign() kullanılarak nesne kopyalama işleminde kaynak nesnenin değişmesi, hedef nesneyi etkiler.Nesneleri birleştirme işlemini aşağıdaki gibi yapabiliriz.
JavaScript:
// assing ile
const target = { a: 1, b: 2 };
const source = { b: 4, c: 5 };
const result = Object.assign(target, source);
console.log(target); // { a: 1, b: 4, c: 5 }
console.log(result); // { a: 1, b: 4, c: 5 }
// spread ile
const obj1 = { a: 1, b: 2 };
const obj2 = { b: 4, c: 5 };
const result = {...obj1, ...obj2}
console.log(result); // { a: 1, b: 4, c: 5 }assign kullanarak birleştirme işlemi hedef nesne üzerine yazılırken, spread ile birleştirme yaparken kaynak ve hedef nesne birleşir.Kaynaklar:
Spread syntax (...) - JavaScript | MDN
The spread (...) syntax allows an iterable, such as an array or string, to be expanded in places where zero or more arguments (for function calls) or elements (for array literals) are expected. In an object literal, the spread syntax enumerates the properties of an object and adds the key-value...
developer.mozilla.org
An introduction to Spread syntax in JavaScript
by Ashay Mandwarya ?️?? An introduction to Spread syntax in JavaScript What is it and why do we need it? Photo by Anton Darius | @theSollers [https://unsplash.com/@thesollers?utm_source=medium&utm_medium=referral] on Unsplash [https://unsplash.com?utm_source=medium&utm_medium=referral]The...
www.freecodecamp.org
Rest parameters and spread syntax
javascript.info
Son düzenleme:
Başarılar…
