Nesne destructuring

JavaScript kursu · İleri seviye · Ders 24/100

Bir nesnenin özelliklerini değişkenlere kısayol ile çıkarmayı öğrenirsin.

Nesne destructuring

Destructuring, bir nesnenin özelliklerini tek satırda değişkenlere çıkarmanın kısa yoludur. Süslü parantezler içinde değişken adlarını yazarsın; JavaScript aynı adlı özelliği bulup değerini değişkene kopyalar.

Örneğin const { name } = user yazdığında user.name değeri name değişkenine geçer. Bu, const name = user.name yazmakla aynıdır; ama daha kısa ve okunaklıdır.

Aynı isim ilkesi

Destructuring'de değişken adı, özellik adıyla aynı olmalıdır. const { title } = book yazarsan JavaScript book.title özelliğini arar. Farklı bir değişken adı istiyorsan iki nokta ile yeniden adlandırma yaparsın (ileride göreceğiz).

Birden fazla özelliği tek satırda virgülle ayırarak çıkarabilirsin: const { name, email, age } = user. Sıra önemli değildir; her ad bağımsızdır.

Uygulama Kullanıcı bilgilerini çıkar

user adında bir nesne oluştur; name ve email özellikleri olsun. Destructuring kullanarak name ve email'i değişkenlere çıkar. Sonra her birini console.log ile ayrı ayrı yazdır.

Örnek çözümü göster

const user = { name: "Ayşe", email: "ayse@example.com" };
const { name, email } = user;
console.log(name);
console.log(email);

Kendini test et

`const { title } = book` satırı ne oluşturur?
- `book` adında yeni bir nesne
- `title` adında bir değişken
- `book.title` özelliğini siler
- `title` adında bir dizi
Cevabı göster

`title` adında bir değişken — Doğru. `book.title` değeri `title` değişkenine kopyalanır.

Nesne destructuring'i tamamla

const user = { name: "Ayşe", email: "ayse@example.com" };
const { name, email } = ____;
console.log(name, email);

Cevabı göster

const user = { name: "Ayşe", email: "ayse@example.com" };
const { name, email } = user;
console.log(name, email);

Hangisi geçerli bir nesne destructuring sözdizimidir?
- `const [name] = user`
- `const { name } = ( user )`
- `const ( name ) = user`
- `const { name } = user`
Cevabı göster

`const { name } = user` — Doğru. Süslü parantez ile kaynak nesne eşittirle bağlanır.
Kavramları eşleştir

destructuring

Özellikleri değişkene çıkaran kısa yol
süslü parantez

Nesne desenini başlatır
aynı isim ilkesi

Değişken adı özellik adıyla eşleşir

Nesne destructuring