javascript Destructuring assignment (Atamayı yapılandırma)

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; 

ÇIKYI:

Ç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.

ÖRNEK:

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

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

ÖRNEK 2:

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.

ÖRNEK 3:

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, arrValue sadece bir elemente sahiptir. Bu nedenle,

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

Öğ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.

ÖRNEK 2:

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]

ÖRNEK 2:

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

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

ÖRNEK 3:

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:

ÖRNEK:

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

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

ÖRNEK 2:

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

ÖRNEK 3:

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

Varsayılan değer ile:

// 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

// Anahtar adlarını değişken adları olarak kullanmak
let {a,b,c} = {a:1, b:2, c:3 };

console.log( a, b, c ); // 1 2 3

ÖRNEK 2:

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

console.log( b ); // 2

Spread Operator kullanarak Destructuring Atama

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