JavaScript, modern özelliklerle sürekli olarak güncellenen bir dil. Bu özelliklerden biri de “Destructuring“dir. Destructuring, veri yapılarından (örneğin: objects ve arrays) elemanları kolaylıkla çıkarmanıza olanak tanır.
Bu yazıda, JavaScript’te destructuring’ın nasıl çalıştığını adım adım anlatacağım.
Dizi (Array) Destructuring
Dizi destructuring, diziden doğrudan değişkenlere değer atamak için kullanılır.
|
1 2 3 4 5 6 7 8 |
const numbers = [1, 2, 3]; const [one, two, three] = numbers; console.log(one); // 1 console.log(two); // 2 console.log(three); // 3 |
Değerleri Atlamak
Dizi destructuring’de, bazı değerleri atlamak da mümkündür.
|
1 2 3 4 5 6 7 |
const numbers = [1, 2, 3, 4]; const [one, , three] = numbers; console.log(one); // 1 console.log(three); // 3 |
Nesne (Object) Destructuring
Object destructuring, nesnelerden doğrudan değişkenlere değer atamak için kullanılır.
|
1 2 3 4 5 6 7 8 9 10 11 |
const person = { name: "Ali", age: 25 }; const { name, age } = person; console.log(name); // Ali console.log(age); // 25 |
Yeni Değişken Adları
Bazen, nesnenin property lerini farklı değişken adlarına atamak isteyebiliriz.
|
1 2 3 4 5 6 7 8 9 10 11 |
const person = { name: "Ali", age: 25 }; const { name: userName, age: userAge } = person; console.log(userName); // Ali console.log(userAge); // 25 |
Default Values
Destructuring sırasında, beklenen değerin mevcut olmaması durumunda kullanılacak default bir değer belirleyebiliriz.
|
1 2 3 4 5 6 |
const numbers = [1, 2]; const [one, two, three = 3] = numbers; console.log(three); // 3 |
Nested Destructuring
Diziler veya nesneler iç içe geçmiş olması durumunda da destructuring kullanabiliriz.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
const team = { leader: { name: "Ali", age: 30 }, members: ["John", "Jane"] }; const { leader: { name, age }, members: [m1, m2] } = team; console.log(name); // Ali console.log(age); // 30 console.log(m1); // John console.log(m2); // Jane |
Destructuring Kullanırken Rest Syntax
Diziden geriye kalan elemanları toplamak veya nesneden geriye kalan property leri toplamak için “rest” sözdizimini kullanabilirsiniz.
Dizi:
|
1 2 3 4 5 6 7 |
const numbers = [1, 2, 3, 4, 5]; const [one, ...remaining] = numbers; console.log(one); // 1 console.log(remaining); // [2, 3, 4, 5] |
Nesne:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
const person = { name: "Ali", age: 25, profession: "Engineer" }; const { name, ...rest } = person; console.log(name); // Ali console.log(rest); // { age: 25, profession: 'Engineer' } |
Fonksiyon Parametrelerinde Destructuring
Fonksiyonların parametrelerini destructuring ile de tanımlayabilirsiniz.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
function displayPerson({ name, age }) { console.log(`Name: ${name}, Age: ${age}`); } const person = { name: "Ali", age: 25 }; displayPerson(person); // Name: Ali, Age: 25 |
Destructuring Kullanarak Değerleri Değiştirme
Dizi öğeleri, destructuring kullanılarak değiştirilebilir.
|
1 2 3 4 5 6 7 8 9 |
let a = 1; let b = 2; [a, b] = [b, a]; console.log(a); // 2 console.log(b); // 1 |
Sonuç olarak destructuring, JavaScript’te veri yapılarından elemanları kolayca çıkarmamızı sağlar. Bu, kodumuzu daha sade ve okunabilir kılar.
Umarım “JavaScript’te Destructuring Kullanımı” başlıklı yazım sizin için faydalı olmuştur.
Şu yazılar da ilginizi çekebilir.
Yeni bir yazımda görüşmek üzere.
Happy coding!
