Javascript ES6 Spread Operatörü

Spread türkçe karşılık olarak yaymak, yayılmış demek. Bu operatörde tam anlamıyla bunu yapıyor aslında.

Spread operatörü ile iterable nesneleri tek tek öğelerine bölebiliyoruz. iterable nesneden kastım ise Array Map Set DOM NodeList vb.

Hızlıdan bir spread operatörü örneği görelim.

// meyvelerden oluşan bir dizi
const meyveler = ['Elma', 'Muz', 'Karpuz'];

// Spread operatörünü kullanarak dizi değerlerini gösterelim
console.log(...meyveler);

// Çıktı -> Elma Muz Karpuz

Yani operatörü kullanmak için ... üç noktayı nesne başına koyuyoruz. Yukarıdaki örnektede dizi değerlerini göstermek için bu operatörü kullandık.

Kullanım Alanları

Array Kopyalama

Normalde bir array'i kopyaladığınızda bunu referanslı olarak kopyalıyorsunuz. Ve referans aldığınız arrayde değişiklik olduğunda sizin kopya nesnenizde değişiyor. Yani örneğin;

let meyveler = ['elma', 'armut'];
let meyveler_copy = meyveler;

console.log(meyveler_copy); // Çıktı -> ["elma", "armut"]

meyveler.push('çilek');

console.log(meyveler_copy); // Çıktı -> ["elma", "armut", "çilek"]

Örnekte meyveler dizisini meyveler_copy adıyla kopyaladık ve console'a yazdırdık. Ancak daha sonra referans aldığımız diziye yeni bir değer eklediğimizde kopyaladığımız dizide de aynı elemanın olduğunu görüyoruz. Bunu spread operatörü ile yapsaydık ise sonuç şöyle olacaktı;

let fruits = ['elma', 'armut'];
let fruits_copy = [...fruits];

console.log(fruits_copy); // Çıktı -> ["elma", "armut"]

fruits.push('çilek');

console.log(fruits_copy); // Çıktı -> ["elma", "armut"]

Bu operatör sayesinde Shallow copy dediğimiz sığ kopyalama yani referanssız kopyalama işlemini gerçekleştiriyoruz.

Obje Kopyalama

Yukarıdaki işlemin aynısını objeler içinde yapabiliriz. Örneğin;

const user = {
    name: "Tayfun",
    surname: "Erbilen"
}

const userCopy = {...user}

console.log(userCopy)
user.age = 27;
console.log(userCopy)

Dizileri Birleştirmek

İki ve ya daha fazla diziyi birleştirmek, dizinin başına ya da sonuna yeni değer ekleyerek bir dizi oluşturmak içinde bu operatör kullanılır. Örneğin;

const maleNames = ["Tayfun", "Gökhan"]
const femaleNames = ["Aslı", "Handan"]

const names = [...maleNames, ...femaleNames]

console.log(names) // Çıktı -> ["Tayfun", "Gökhan", "Aslı", "Handan"]
console.log(['başında', ...names, 'sonunda'])

Objeleri Birleştirmek

Yukarıdaki işlemin aynısını objeler içinde yapabiliriz. Örneğin;

const user = {
    name: "Tayfun",
    surname: "Erbilen"
}

const pets = {
    pets: {
        dog: "Monti",
        cats: ["Paşa", "Göbek", "Şans"]
    }
}

const userDetail = {...user, ...pets}

console.log(userDetail)

String ifadelerde kullanımı

Bir string ifadeyi parçalara ayırmak istersekte şöyle kullanabiliriz;

let username = "tayfunerbilen"
let chars = [...username]

console.log(chars) // Çıktı -> ["t", "a", "y", "f", "u", "n", "e", "r", "b", "i", "l", "e", "n"]

Fonksiyon Parametresinde Gönderme ve Alma

Fonksiyona parametre gönderirken ya da fonksiyonda parametre alırkende bu operatörü kullanmak işimizi çok kolaylaştırıyor.

// fonksiyonda parametreleri alırken spread kullanımı
function square(...numbers){
    return numbers.map(number => number * 2)
}

console.log(square(1, 3, 5, 7)) // Çıktı -> [2, 6, 10, 14]

// fonksiyona parametre gönderirken spread kullanımı
function printUser(name, surname){
    return `${name} ${surname}`
}

let user = ["Tayfun", "Erbilen"]
console.log(printUser(...user)) // Çıktı -> "Tayfun Erbilen"

Destructuring ile Kullanımı

ES6 ile gelen yeniliklerden biriside Destructuring, ve spread operatörü ile kullanımı ise şöyle;

const person = {
    name : 'tayfunerbilen',
    age: 27,
    occupation: 'developer',
    skills: 'html,css,php,javascript,mysql'
}

const {name, age, ...others} = person

console.log(`Ad : ${name}`)
console.log(`Yaş : ${name}`)
console.log(others)
/* Object {
  occupation: "developer",
  skills: "html,css,php,javascript,mysql"
} */

NodeList'den Array'e Çevirmek

Javascript'te birden fazla etiket seçmek için querySelectorAll() kullanılmakta. Ancak bu bize bir NodeList döndürüyor, dolayısı ile map() forEach() filter() gibi high-order fonksiyonları kullanamıyoruz.

Bu yüzden NodeList'i array'e çevirmek için spread operatörünü kullanıyoruz.

<div>div</div>
<div>div</div>
<div>div</div>
<div>div</div>

<script>
const divs = document.querySelectorAll('div')
const divsNodeArray = [...divs]

divsNodeArray.forEach((div, key) => {
    div.innerText = `${div.innerText} #${key + 1}`
})
</script>

Editörde Görüntüle