Destructuring ile değişken atama kolaylığı,Destructuring nedir?
Merhaba arkadaşlar bugün size Javascript Esma Script 6 ile hayatımıza giren Destructuring olayından bahsedeceğim oldukça kullanışlı bu yöntem ile dizilerden ve objelerden değişkenlere kolayca atama yapabiliyoruz peki nasıl?
Dizilerden Destructuring ile Değişken tanımlama
1 2 3 4 5 6 7 8 |
let gunler = ["Pazartesi","Salı","Çarşamba","Perşembe","Cuma","Cumartesi","Pazar"]; const [ilk,ikinci,ucuncu] = gunler; //Destructuring yöntemi ile atama console.log(ilk, ikinci, ucuncu); //çıktı Pazartesi Salı Çarşamba |
Üstteki örneği incelersek önce günler adında bir değişken oluşturduk daha sonra bu değişkendeki haftanın ilk üç gününü belirlediğimiz değişkenlere aktarmak için Destructuring yöntemini kullandık ve yeni degişkenlerimizi oluşturduk bunlar ilk,ikinci ve ucuncu adında değişkenlerimiz.Dizilerde Destructuring yöntemi bu şekilde peki ya objelerde durum nasıl?
Objelerden Destructuring ile Değişken tanımlama
1 2 3 4 5 6 7 8 9 10 11 12 13 |
const notlar = { E:10, D:30, C:60, B:80, A:100 }; const {E:Resul,C:Omer,A:Ebubekir} = notlar; console.log(Resul,Omer,Ebubekir); //çıktı 10 60 100 |
Örneğimizi incelediğimizde önce notların ve değerlerini görüyoruz süslü parantez kullanmamız nesne yani Object olduğu için,atam yparken önce key değerini sonra istediğimiz değişken adını yazarak atama işlemlerini gerçekleştiriyoruz.
Unutmamak lazım ki nesnelerde Destructuring yaparken en çok hata yapılan yer süslü parantezlerin yerine köşeli parantez kullanmanız!
Fonksiyonlardan Destructuring ile Değişken tanımlama
1 2 3 4 5 6 |
const plakalar = () => [25,53,35]; const [erzurum,rize,izmir] = plakalar(); console.log(erzurum,rize,izmir); //çıktı 25 53 35 |
Örnekte Arrow function ile hazırladığım fonksiyonda plakalar adında bir fonksiyon oluşturduk daha sonra şehir isimlerinden oluşan değişkenlerimize bu plakaları atadık.
Etiketler: destructuring ~ dizilerde destructuring ~ es6 destructuring ~ fonksiyonlarda destructuring ~ javascript destructuring ~ objelerde destructuring ~ rize web programlama ~ rize web yazılım