1 dk, tahmini okuma süresi
JavaScript Spread Operator ve Kullanımları
En Son Güncelleme: 10 Haziran, 2022Spread operatörü, JavaScript'te diziler ve nesnelerle çalışırken her şeyi çok daha kolaylaştırmak için kullanılabilir. Mutasyon gerektirmeyen işlemer de bu operatör kullanılarak yapılabilir. Bir fonksiyon sıfır veya daha fazla argüman beklediğinde, yine spread operatörünü kullanabilirsiniz.
§Dizilerde ve Nesnelerde
Yayılma (Spread) operatörü (...) genellikle dizileri birleştirmek veya mevcut bir diziye bir öğe eklemek için kullanılır. Çok basit bir örnek vermek gerekirse:
let nums = [1,2,3,4]
let five = [5]
nums = [...nums, ...five]
console.log(nums) // [ 1, 2, 3, 4, 5 ]
Yayma operatörünün nesnelerde kullanımı da çok benzer:
let person = { name: "ilker", age: 28 }
let job = { job: "web dev" }
let newPerson = {...person, ...job}
console.log(newPerson) // { name: 'ilker', age: 28, job: 'web dev' }
Mutasyonsuz işlemler gerektiren durumlarda spread operatörünü kullanmayı düşünebiliriz. Object.assign() bir mutasyon işlemi gerçekleştirirken yayılma operatöründe bir mutasyon smz konusu değil. Diyelim ki 29 yaşına girdim ve nesnemdeki yaş değerinin güncellenmesi gerekiyor:
let person = { name: "ilker", age: 28 }
let job = { job: "web dev" }
let newAge = { age: 29 }
let newPerson = {...person, ...newAge, ...job}
console.log(newPerson) // { name: 'ilker', age: 29, job: 'web dev' }
Yayma operatörünü kullanarak bir diziyi kopyalamak ve bir klon oluşturmak da mümkündür. Bu şekilde bellekte iki farklı yer kaplayan iki ayrı dizi oluşturabiliriz:
const arr = [1, 2, 3, 4]
const arr2 = [...array]
arrayClone.push(5)
console.log(arr) // [1, 2, 3, 4]
console.log(arr2) // [1, 2, 3, 4, 5]
§Array Destructuring
Diyelim ki bir dizinin birinci ve ikinci elemanlarını almamız gerekiyor. Normalde birinciyi ve ikinciyi şu şekilde alırsınız:
let fruits = ["peach", "apricot", "apple", "pear", "cherry"]
let first = fruits[0]
let second = fruits[1]
console.log(first) // peach
console.log(second) // apricot
Bu işlevi, bir satırda bu şekilde de oluşturabiliriz değiştirebiliriz:
let fruits = ["peach", "apricot", "apple", "pear", "cherry"]
let [ first, second ] = fruits
console.log(first) // peach
console.log(second) // apricot
Gördüğünüz gibi konsol aynı sonuçları veriyor. Diyelim ki bu dizideki öğelerin geri kalanını almanız gerekiyor. Herhangi bir dizi yöntemiyle uğraşmanıza gerek yoktur. Spread operatörünü şu şekilde kullanabilirsiniz:
let fruits = ["peach", "apricot", "apple", "pear", "cherry"]
let [ first, second, ...rest ] = fruits
console.log(first) // peach
console.log(second) // apricot
console.log(rest) // [ 'apple', 'pear', 'cherry' ]
Şimdi rest, kalan tüm öğeleri diziden alır. Gayet basit!
Bu yok etme yöntemi nesneler için de geçerlidir:
const person = { name: 'ilker', age: 28, job: 'web dev' }
const { name, ...rest } = person
console.log(name) // ilker
console.log(rest) // { age: 28, job: 'web dev' }
§Fonksiyonlarda
Yayılma operatörü, fonksiyonlardaki bazı uç durumlara uygulanabilir. Bir örnek, muhtemelen daha iyi anlatacaktır:
const func = (a,b,c,d) => {
return [a,b,c,d]
}
const arr = [ 1, 2, 3, 4, 5 ];
console.log(func(...arr)) [ 1, 2, 3, 4 ]
Gördüğünüz gibi fonksiyon sadece ilk 4 elemanı argüman olarak kabul ediyor ve hata vermeden çalıştırıyor. Yayılma operatörünü kullanmanın örneğini bulabileceğinize eminim.
§Sonuç
Sadece en önemli kısımlara değinmek için bu yazıyı mümkün olduğunca kısa tuttum. Kişisel olarak konuya gelmesi çok uzun süren gönderilerden baya bir sıkıldım.
Yayılma operatörünü öğrenmek, diziler ve nesnelerle çalışmayı benim için çok daha kolay hale getirdi. Yayılma operatörünün kullanımını gerektiren birçok durum vardır. Bir dahaki sefere kod yazarken, kodu daha temiz hale getirmek için yayılma operatörünü nerede kullanabileceğinizi düşünün.
Ilker AkbiyikBenzer Paylaşımlar
