Yeni bir sıfırdan ileriye Javascript konusuna hoş geldiniz. Bugün işlerimizi kolaylaştıran Spreading ve Destructuring tanımlarını ele alacağız. İyi okumalar.
Spreading ve Destructuring nesne ve dizileri olduğundan daha küçük parçalara veya küçük parçaları tek bir bütün elde etmeye ihtiyacımız olduğu zaman imdadımıza yetişir. Şimdi bunu uygulamada görelim.
Dizilerde Destructuring
Kod:
const sayilar = [1, 2, 3]
let [say1, say2, say3] = sayilar
console.log(say1, say2, say3)
const adlar = ['dark', 'soldier', 'tht', 'asdad']
let [ilkAd, ikinciAd, ucuncuAd, dorduncuAd] = adlar
console.log(ilkAd, ikinciAd,ucuncuAd, dorduncuAd)
Burada gördüğünüz gibi dizideki her bir elemanı bir değişkene atayarak diziyi parçalara böldüm.
JavaScript:
const fullStack = [
['HTML', 'CSS', 'JS', 'React'],
['Node', 'Express', 'MongoDB']
]
const [frontEnd, backEnd] = fullStack
console.log(frontEnd)
console.log(backEnd)
Fullstack dizisi içindeki 2 diziyi parçalara bölüp frontend ve backend ile iki parçaya böldük.
Kod:
const sayilar = [1, 2, 3]
let [say1, , say3] = sayilar
const adlar = ['dark', 'soldier', 'tht', 'asdad']
let [ilkAd, , dorduncuAd] = adlar
console.log(ilkAd, dorduncuAd)
console.log(say1, say3)
Bazı zamanlar dizideki tüm elemanlar ihtiyaç olmayabilir bu yüzden "," yoluyla bir eleman atlayıp sonraki elemanı alabilirsiniz
JavaScript:
const nums = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
let [num1, num2, num3, ...rest] = nums
console.log(num1, num2, num3)
console.log(rest)
Bazı zamanlar upuzun bir dizinizin olduğunu varsayın. Üsteki örnek tek tek 1-10'a kadar sayıları almaktansa 1,2,3 alırım devamını"...rest" ile diğer elemanları da dizi olarak otomatik al diyip boşa zaman kaybı yaşamanızı engelleyebilirsiniz.
Kod:
const fullStack = [
['HTML', 'CSS', 'JS', 'React'],
['Node', 'Express', 'MongoDB']
]
for(const [first, second, third] of fullStack) {
console.log(first, second, third)
}
Teker teker dizileri bölmektense döngü yoluyla tek tek yazmaktan kurtulabiliriz. Bir döngü içine değişkenler = diziadı yaparak direkt değişkenlere dizi elemanlarını da tanımlayabiliriz.
Objelerde Destructuring
Kod:
const alan = {
genişlik: 20,
uzunluk : 10,
çevre: 200
}
let { genişlik, uzunluk, çevre, alan2 } = alan
console.log(genişlik, uzunluk, çevre, alan2)
Burada aslında dizilerdeki mantığın aynısını yaptık bu sefer obje elemanlarını aldık. Ek olarak her bir değişkenin değeri varken alan değeri undifined oldu çünkü objede daha fazla eleman yoktu boşta kaldığı için tanımsız verdi ama alana bir değer verirseniz sorun hallolur.
Spread Kullanımı
JavaScript:
const cift = [0, 2, 4, 6, 8, 10]
const ciftSayi = [...cift]
const tek = [1, 3, 5, 7, 9]
const tekSayi = [...tek]
const tum = [...cift, ...tek]
console.log(ciftSayi)
console.log(tekSayi)
console.log(tum)
const frontEnd = ['HTML', 'CSS', 'JS', 'React']
const backEnd = ['Node', 'Express', 'MongoDB']
const fullStack = [...frontEnd, ...backEnd]
console.log(fullStack)
Burada aslında parça parça olan dizileri tek parçaya çevirerek bir bütün parça elde ettik. Destructuring farkı yok sadece birleşilecek olan dize/objenin içine diğer elemanları rest operatörü ile tanımlamanız gerek o kadar.
Tebrikler bir konuyu daha bitirdin. Artık gerektiği zaman kodlarını daha modüler ve daha birleşmiş olarak ayarlayabileceksin. Bir başka konuda görüşmek üzere.
