javascript Destructuring assignment Atamayı Nasıl yapılandırmalı

[KuLvar]

ES6'da tanıtılan Destructuring assignment (Atamayı yapılandırma), dizi değerlerini ve nesne özelliklerini farklı değişkenlere atamayı kolaylaştırır. Diğer bir ifade ile Destructuring assignment, nesnelerden dizilerden veya özelliklerden değerleri paketten çıkarmanıza ve bunları değişkenlere kaydetmenize olanak tanıyan javaScript söz dizimidir.
Bu çok kullanışlı bir özellik çünkü verileri doğrudan dizilerden ve nesnelerden çıkararak değişkenlere kaydetmek için tek bir kod satırında yapabiliyoruz. Güçlüdür çünkü aynı ifadede birden çok dizi öğesini veya nesne özelliğini çıkarmamıza olanak tanır.
ES6'da, bir diziyi değerlerini paketten çıkarmak için, verinin atanacağı değişkeni içeren bir dizi oluştururuz ve onu, paketten çıkarılan veri dizisine eşit olarak ayarlayabiliriz. Dizideki değerler paketten çıkarılır ve sol taraftaki dizide soldan sağa, dizi değeri başına bir değişken olmak üzere değişkenlere atanır. Aşağıdaki kodda temel dizi destructuring atama bir örneği gösterilmektedir

Dizi destructuring atama​

---

Bir dizimiz olduğunu ve içeriğini ayrı değişkenlere atamak istediğimizi varsayalım. destructuring Atama kullanmadan, normal atamada böyle bir şey yapmanız gerekir

let Arr = [1, 2, 3];
let a = Arr[0];
let b = Arr[1];
let c = Arr[2];

Dizi Destructuring assignment atamasıyla çok daha kolay

let Arr = [1, 2, 3];
let [a, b, c] = Arr;

a=1, b=2, c=3

Çok kolay değil mi? Dizideki ilk öğe ilk değişkene, dizideki ikinci öğe ikinci değişkene atanır ve bu böyle devam eder
Yukarıdaki örnekte, yeni değişkenler tanımladık ve bunlara atadık, ancak mevcut olanları kullanabilirsiniz
Elbette kaynak dizideki tüm öğeleri kullanmanız gerekmez,

let Arr = [1, 2, 3];

let [a, b] = Arr; // a=1, b=2

Varsayılan değerler​

---

Öte yandan, dizide yeterli öğe yoksa, yalnızca bazı değişkenler atanır. Geri kalanı, bir değişkeni tanımlayıp atamayacakmışsınız gibi tanımsız kalır.

let [a,b=3] = [2];

console.log(a); // 2
console.log(b); // 3

let Arr = [1];

let [a, b, c] = Arr; // a=1, b=undefined, c=undefined

Yeterli öğe olmaması durumunda değişkenlere varsayılan değerler sağlayabilirsiniz.

let myArray = [1];
let [a=2, b=4, c=6] = myArray; // a=1, b=4, c=6

İmha etme veya yıkma olarakda adlandırıldığı için, öğelerin aslında kaynak diziden kaldırıldığını düşünebilirsiniz. Ancak durum böyle değildir, kaynak dizisi değişmeden kalır. Aynısı nesneleri yıkmak için de geçerlidir
destructuring (atama) kullanırken değişkenler için varsayılan değerleri atayabilirsiniz. Örneğin

let arrValue = [10];

// varsayılan değer 5 ve 7 atama
let [x = 5,  y = 7] = arrValue;

console.log(x); // 10
console.log(y); // 7

Yukarıdaki programda, <code>arrValue</code> sadece bir elemente sahiptir. Bu nedenle

• x değişken 10 olacak
• y değişken varsayılan değeri alır 7

Öğeleri Atlama​

---

Bir dizideki istenmeyen öğeleri yerel değişkenlere atamadan atlayabilirsiniz. Örneğin

const arrValue = ['one', 'two', 'three'];

const [x, , z] = arrValue;

console.log(x); // one
console.log(z); // three

Yukarıdaki programda, virgül ayırıcı kullanılarak ikinci eleman atlanmıştır

let myArray = [1, 2, 3];

let [a, , b] = myArray; // a=1, b=3

Öğeleri Atla​

---

Bir dizideki istenmeyen öğeleri yerel değişkenlere atamadan atlayabilirsiniz. Örneğin

const arrValue = ['one', 'two', 'three'];

const [x, , z] = arrValue;

console.log(x); // one
console.log(z); // three

Yukarıdaki programda, virgül ayırıcı kullanılarak ikinci eleman atlanmıştır.

let myArray = [1, 2, 3];

let [a, , b] = myArray; // a=1, b=3

Değişkenleri Değiştirme​

---

Bu örnekte, Destructuring assignment atama sözdizimi kullanılarak iki değişken değiştirilir

let x = 4;
let y = 7;

// değişkenleri değiştirmek
[x, y] = [y, x];

console.log(x); // 7
console.log(y); // 4

Kalan Öğelerin Atanması​

---

Kaynak diziden yalnızca ilk birkaç öğeyi atayabilir ve atanmamış tüm öğeleri yeni bir diziye yerleştirebilirsiniz

let [a, b, ...c] = [1, 2, 3, 4, 5];

console.log(a, b, c); // 1 2 [3,4,5]

let [, ...x] = [1, 2, 3, 4, 5];

console.log(x); // [2,3,4,5]

let [...y] = [1, 2, 3, 4];

console.log(y); // [1,2,3,4]

Dizi Elemanlarından, daha fazla değişken varsa, herhangi bir ekstra değişkenin değeri undefined olur

let [a,b] = [2];

console.log(a); // 2
console.log(b); // undefined

Yuvalanmış destructuring(atama)​

---

Dizi öğeleri için iç içe geçmiş destructuring (atama) yapabilirsiniz. Örneğin

let [a, [b], c] = [3, [4], 6];

console.log(a, b, c); // 3 4 6

const arrValue = ['one', ['two', 'three']];

// dizilerde iç içe geçmiş destructuring ataması
const [x, [y, z]] = arrValue;

console.log(x); // one
console.log(y); // two
console.log(z); // three

let myArray = [1, 2, [3, 4], 5];

let [first, second, [third, fourth], fifth] = myArray;

// first = 1, second = 2, third = 3, fourth = 4, fifth = 5

Yinelemeleri Yok Etme​

---

const person = "javascript dersi";

let [first, second] = person;

console.log(first);
console.log(second);
// first = "j", second = "a"

Nesne destructuring(atama)​

---

Atamanın sırayla belirlendiği dizilerden farklı olarak, burada bu, nesnenin özellik adıyla eşleşen değişken adıyla yapılır

let {b: x} = {a:1, b:2, c:3 };

console.log( x ); // 2

// x, d anahtarının değeri olsun.
//Mevcut değilse, varsayılan olarak 9'a olsun.

let {d: x = 9} = {a:1, b:2, c:3 };

console.log( x ); // 9

Değişken İsimleri Olarak Anahtar İsimleri​

---

let { c, ...restProperties } = { a: 1, b: 2, c: 3 };

console.log(c); // 3

console.log(restProperties); // { a: 1, b: 2 }

İç içe diziyi ve nesne Destructuring Atama​

---

let {c, b:[x,y]} = {a:1, b:[2,4], c:3 };

console.log(c); // 3
console.log(x); // 2
console.log(y); // 4