ES6 Destructuring nedir? Nasıl kullanılır?

Ecmascript 6 ile değişken tanımlamada array ve object formatında değişkenler ile çalışabiliyoruz.

İlk olarak liste eşleştirme örneğimiz ile başlayalım.

const [a,b,c,] = [1,2,3,4];
console.log(a + " " + b + " " + c);

çıktı:
1 2 3

Yukarıdaki kodu babel-node komut satırında yada bir .js dosyasına kaydedip babel ile çağırdığımızda çıktı olarak 1 2 3 ü alırız.

Yukarıdaki örnekte ilk arrayda a,b,c değişkenlerini ekledik ve 4. elemanın alanını boş bıraktık. a,b,c elemanları hemen karşısında tanımladığımız [1,2,3,4] arrayı ile aynı indise sahip elemanlarını eşleştirdi ve daha sonra çağırdığımızda o değer ile kullanmamızı sağladı.

Şimdide bir object örneği ile devam edelim.

const kimlik = { isim : "Ahmet", soyisim : "Şimşek" };
const { isim : isim , soyisim : soyisim } = kimlik;
console.log(isim + " " + soyisim);

çıktı:
Ahmet Şimşek

Yukarıdaki örnekte kimlik adında bir object tanımlayıp içerisine isim ve soyisimi ekledik. isim ve soyisime ulaşmak için kimlik.isim şeklinde çağırmamız gerekiyor ama 2. satırda sağ tarafta belirtilen objectin değerlerine sol tarafta sadece adı ile ulaşabiliyoruz. Ve bu değerin karşısına belirtilen değişken ilede değere ulaşabiliyoruz.

Object eşleştirmede tüm değerleri kullanmak zorunda değiliz. Sadece istediğimiz değerleri değişkenlere atayabiliyoruz.

const araba = { marka : "BMW" , model : "i7" };
const { marka : marka } = araba;
console.log(marka);

çıktı:
BMW

Global objectlerden biri olan string ile bir örnek vererek devam edelim.

const meyve = "kiraz";
const { length : uzunluk } = meyve;
console.log(uzunluk);

çıktı:
5

meyve.length şeklinde ulaşabileceğimiz object değerine erişerek uzunluk değişkenine atadık.

Eşleştirmeler sırasında değişkene karşılık bir değer yoksa undefined olarak tanımlanıyor. undefined değilde default bir değer tanımlanmasını istiyorsak = den sonra tanımlamayı yapabiliyoruz.

const [ a ] = [];
console.log(a);
const [ b = 5 ] = [];
console.log(b);

çıktı:
undefined
5

a değeri eşlenecek bir değer bulamadığı için undefined olarak tanımlandı. b değeri ise default değeri olduğu için eşlenecek bir veri bulamadığında o değeri aldı.

Bu yazıda es6 destructuring in ne olduğunu basit örnekler ile anlatmaya çalıştım. Sonraki yazıda görüşmek üzere.