Object destructuring, bir JavaScript teknolojisidir Nesnelerin yapısını daha basit hale getirmek için kullanılır Bu yazıda, object destructuring'in ne olduğunu ve nasıl kullanıldığını öğreneceksiniz
JavaScript, özellikle yüksek kalitede bir kod yazmak için kullanıcılarına birçok farklı teknik sunar. Bu tekniklerden biri de nesne yıkımıdır. Nesne yıkımı, bir nesnenin özelliklerine ayrı ayrı erişmek için kullanılan bir tekniktir. Yani nesneler içindeki özelliklere daha basit bir şekilde erişebilirsiniz. Peki, neden nesne yıkımını kullanmalısınız? Kod yazmayı daha kolay hale getirir ve daha fazla okunabilirlik sağlar.
Nesne yıkımı kullanırken bir nesneden belli özelliklerin değerlerini direkt olarak çıkarabilirsiniz. Aynı zamanda birden fazla özelliğin değerini aynı anda çıkarmak mümkündür. Eğer bir özellik belirtilmemişse, değişken için varsayılan bir değer atanabilir. Bunların yanı sıra, bir nesnedeki değişken isimlerini, daha kısaym olan yeni bir isimle yeniden adlandırabilirsiniz.
Nesne dizileri üzerinde de aynı yöntemler kullanılabilir. Örneğin, nesne dizileri üzerinde for döngüsü kullanarak her bir nesneye kolayca erişebilirsiniz. Ayrıca, nesne dizilerindeki belirli kriterlere göre filtreleme ve değiştirme işlemleri yapabilirsiniz. Ancak nesne içindeki özellik isimleriyle destructuring yapılması gerektiğini unutmayın. İsimler farklıysa yeniden adlandırma yapılmalıdır.
Nesne Yıkımı Nedir?
Nesne yıkımı, JavaScript'te bir nesnenin özelliklerine ayrı ayrı erişmek için kullanılan bir tekniktir. Nesne yıkımı, nesnelerdeki anahtar-değer çiftlerini değişkenlere atama imkanı sağlar. Bu yöntem, nesne içindeki özellikleri kullanmak için kolay bir yol sunar. Nesne yıkımı, bir nesnenin bir veya birden fazla özelliğine erişmek için kullanılır.
Bu teknik sayesinde herhangi bir nesnenin özelliklerine direkt olarak erişmek mümkündür. Nesne yıkımı, özellikleri tek tek elde etmek için daha önce kullanılabilecek kodun yerine daha pratik bir yöntem sunar. Bu yöntem, aynı zamanda kodlama sürecini daha basit ve anlaşılır hale getirir. Yalnızca erişmek istediğiniz özellikleri ayırmak için kullanılır ve kullanışlıdır.
Neden Nesne Yıkımı Kullanmalıyız?
JavaScript'te, bir nesnenin özelliklerine erişmek için kullandığımız nesne yıkımı, kodun daha kolay okunabilir olmasına yardımcı olan önemli bir tekniktir. Eğer bir nesnenin içindeki özellikleri kullanmadan her birine tek tek erişmek istesek, kodumuzda çok fazla tekrarlayan ifadeler oluşacaktır.
Bununla birlikte, nesne yıkımı kullanarak tek bir seferde tüm değerlere erişebilir ve bunları dilediğimiz gibi kullanabiliriz. Örneğin, bir fonksiyon içerisinde parametre olarak bir nesne aldığımızı düşünelim ve bu nesnenin içindeki özellikleri ayrı ayrı kullanmak zorunda kaldığımızı. Burada nesne yıkımı kullandığımızda, fonksiyonumuzun daha anlaşılır ve daha kolay yazılabilir olacağını göreceğiz.
Bir Nesneden Değerleri Çıkarma
Bir Nesneden Değerleri Çıkarma, JavaScript'teki Object Destructuring'in temel bir parçasıdır. Bu teknik sayesinde, bir nesnenin özelliklerine ayrı ayrı erişmenize gerek kalmadan, ihtiyacınız olan özelliklerin belirtilmesiyle kolayca değerlerine erişebilirsiniz. Bu sayede kodun daha temiz ve okunaklı hale gelir.
Eğer sadece tek bir özelliğe ihtiyacınız varsa, bu tek satırlık bir işlemle yapılabilir. Örneğin, aşağıdaki kod kullanıcının ismine erişir:
| Kod: | const user = {name: 'John', age: 30}; |
|---|---|
| const {name} = user; | |
| console.log(name); // John |
Birden fazla özelliğe ihtiyacınız varsa, virgülle ayrılmış bir liste şeklinde de yapabilirsiniz. Aşağıdaki örnekte, kullanıcının hem ismine hem de yaşına erişirsiniz:
| Kod: | const user = {name: 'John', age: 30}; |
|---|---|
| const {name, age} = user; | |
| console.log(name); // John | |
| console.log(age); // 30 |
Ayrıca, özelliklere varsayılan değerler atayabilirsiniz. Bu, bir özellik belirtilmediğinde atanacak bir değer sağlar. Aşağıdaki örnekte, kullanıcının cinsiyet özelliği belirtilmemiş, ancak varsayılan olarak 'Belirtilmemiş' atanmıştır:
| Kod: | const user = {name: 'John', age: 30}; |
|---|---|
| const {name, age, gender = 'Belirtilmemiş'} = user; | |
| console.log(gender); // Belirtilmemiş |
Object Destructuring'in Bir Nesneden Değerleri Çıkarma özelliği, JavaScript kodlarının daha temiz ve okunaklı hale gelmesine yardımcı olur. Ancak, nesnelerdeki özellik isimleriyle desturcturing yapılması önemlidir. Isimler farklıysa, yeniden adlandırılmalıdır.
Bir Nesneden Birden Fazla Değeri Çıkarma
Bir nesneden sadece bir özelliğin değerini çıkarmak yeterli olmayabilir. Birden fazla özellikten gerekli değerleri almak gerekebilir. Bu durumda object destructuring yöntemi kullanılabilir. Örneğin, bir kullanıcının adı, soyadı ve yaş bilgilerini içeren bir nesneniz varsa, sadece ad ve soyad özelliklerinin değerlerini almak isteyebilirsiniz. Bunun için aşağıdaki şekildeki gibi object destructuring yöntemini kullanabilirsiniz:
| Kod: | const kullanici = { adi: 'Ali', soyadi: 'Can', yasi: 25 }; const { adi, soyadi } = kullanici; console.log(adi); // Ali console.log(soyadi); // Can |
|---|
Yukarıdaki kodda, kullanıcı nesnesi oluşturuldu ve adı, soyadı ve yaş özellikleri belirlendi. Daha sonra, adı ve soyadı nesneden object destructuring yöntemi kullanarak alındı ve iki değişkene atanarak consol log ile çıktısı alındı.
Birden fazla özellikten değer almak için süslü parantez kullanarak özellik adlarını üst üste eklemeniz yeterlidir. İşlem aynı anda birden fazla özellikte gerçekleştirilebilir.
| Kod: | const kullanici = { adi: 'Ali', soyadi: 'Can', yasi: 25 }; const { adi, soyadi, yasi } = kullanici; console.log(adi); // Ali console.log(soyadi); // Can console.log(yasi); // 25 |
|---|
Yukarıdaki kodda, kullanıcı nesnesi oluşturuldu ve adı, soyadı ve yaş özellikleri belirlendi. Daha sonra, adı, soyadı ve yaş nesneden object destructuring yöntemi kullanarak alındı ve üç değişkene atanarak console log ile çıktıları alındı.
Özelliklere Varsayılan Değerler Atama
JavaScript'te nesne yıkımı, kodun daha kolay okunabilir ve anlaşılabilir hale gelmesine yardımcı olan kullanışlı bir tekniktir. Özellikle, nesne özelliklerine ayrı ayrı erişmek için kullanıldığında çok faydalıdır. Bu teknikle nesneden değerler çıkarmak, birden fazla değeri aynı anda çıkarmak ve özelliklere varsayılan değerler atamak mümkündür.
Özelliklere varsayılan değerler atama, bellekte boş olmayan bir özelliğin varsayılan bir değerle başlatılmasına olanak tanır. Bu yöntemle, bir özelliğin belirtilip belirtilmediği kontrol edilir. Varsayılan değer, özellik belirtilmediğinde kullanılır. Böylece, bir değişkenin boş olup olmadığını kontrol etmekle uğraşmadan, direkt olarak değerlerle işlem yapabilirsiniz.
| Eski Yöntem | Object Destructuring |
|---|---|
var kullanici = { isim: 'John', yas: undefined }; var kullaniciYasi; if (kullanici.yas !== undefined) { kullaniciYasi = kullanici.yas; } else { kullaniciYasi = 18; } | var kullanici = { isim: 'John' }; var { yas = 18} = kullanici; |
Yukarıdaki örneklerde, bir kullanıcının adı ve yaşı tutulmaktadır. Eski yöntemde, kullanıcının yaşı belirtilmediğinde yaşı kontrol edilir ve varsayılan olarak '18' atanır. Ancak, Object Destructuring ile çok daha kısa ve okunması daha kolay bir kod yazmak mümkündür. Eğer yaşı belirtilmişse, kullanıcının yaşı atanır; belirtilmemişse '18' atanır.
Özellikle büyük ölçekli projelerde, nesne yıkımı kod yazmayı kolaylaştırır ve daha az hata yapmanızı sağlar. Nesne dizileri üzerinde de aynı yöntemler kullanılabilir. Ancak, dikkat edilmesi gereken nokta, nesne içindeki özellik isimleriyle destructuring yapılmalıdır. İsimler farklıysa yeniden adlandırma yapılmalıdır.
Nesneyi Yeniden Adlandırma
JavaScript'te, bir nesnenin özelliklerini farklı bir isimle yeniden adlandırmak mümkündür. Nesneyi yıkarak her bir özellik için tek tek değişken ismi oluşturmak yerine, daha kısa bir isimle nesnenin özelliklerine erişilebilir. Bu, özellikle daha büyük nesnelerde daha okunaklı ve kontrol edilebilir kod yazmanın bir yoludur.
Örneğin, aşağıdaki nesnenin uzun değişken isimleri var:
let person = { firstName: "John", lastName: "Doe", age: 30};Bu nesnede yer alan değişken isimleri oldukça uzun olabilir ve kullanıcı tarafından okunması zor olabilir. Bu nedenle, özellikle bu değişkenler birkaç kez kullanılacaksa, daha kısa bir isimle yeniden adlandırılabilirler.
let person = { firstName: "John", lastName: "Doe", age: 30};let { firstName: name, lastName: surname, age: years } = person;
console.log(name);console.log(surname);console.log(years);
Bu kodu çalıştırdığınızda, "John", "Doe" ve 30 sonuçları veren üç ayrı değişken görürsünüz. Bu da, uzun soluklu kod projelerinde daha okunaklı ve kontrol edilebilir kod yazmanın bir yoludur.
Yeniden adlandırma işlemi özellikle büyük nesnelerde faydalıdır ve kod yazarken daha iyi bir organizasyon sağlar. Bunun yanı sıra, aynı zamanda okunaklı, anlaşılır ve hatasız kod yazmanın bir yoludur.
Nesne Dizileri Üzerinde Nesne Yıkımı
JavaScript'te nesne dizileri üzerinde de nesne yıkımı kullanmak oldukça kolaydır. Bir dizi içindeki her bir nesnenin özelliklerine erişmek için destructuring yöntemi uygulanabilir. Örneğin, aşağıdaki kodda, students dizisi içindeki her bir öğrencinin isimleri ve yaşları ayrı ayrı destructuring yöntemi ile alınmıştır:
| Öğrenci Dizisi | Destructuring Yöntemi |
|---|---|
| let students = [{name: "Ali", age: 20}, {name: "Ayşe", age: 21}, {name: "Mehmet", age: 19}]; | let [ {name: student1, age: age1}, {name: student2, age: age2}, {name: student3, age: age3} ] = students; |
Böylece student1, student2 ve student3 değişkenleri öğrencilerin isimlerini, age1, age2 ve age3 değişkenleri ise yaşlarını tutar.
Ayrıca nesne dizilerinde de özelliklere varsayılan değerler atanabilir. Örneğin, aşağıdaki kodda, students dizisi içindeki öğrencilerden sadece isimleri alan bir fonksiyon yazılmıştır:
function getNames(studentArray) { let names = []; for(let {name:studentName, age=0} of studentArray) { names.push(studentName); } return names;}let students = [{name: "Ali", age: 20}, {name: "Ayşe"}];console.log(getNames(students)); //["Ali", "Ayşe"]Burada, studentArray parametresi destructuring yapıldıktan sonra öğrencilerin isimleri names dizisine atanırken, yaşları varsayılan değerleri olan 0 ile eşleştirilmiştir.
Nesne dizileri üzerinde de filtrelleme ve değiştirme işlemleri yapmak mümkündür. Bunun için Array.filter() ve Array.map() fonksiyonları kullanılabilir. Örneğin, bir önceki örnekteki öğrenci listesindeki yaşları 18'den büyük öğrenci isimlerini filter() fonksiyonu ile bulabiliriz:
let students = [{name: "Ali", age: 20}, {name: "Ayşe", age: 17}, {name: "Mehmet", age: 19}];let filteredStudents = students.filter(({age}) => age>18);let filteredNames = filteredStudents.map(({name}) => name);console.log(filteredNames); //["Ali", "Mehmet"]Bu kodda, filter() fonksiyonu ile yaşları 18'den büyük olan öğrenciler seçilir, map() fonksiyonu ile bu öğrencilerin isimleri yeni bir diziye eklenir.
Bu şekilde nesne dizilerinde de nesne yıkımı kullanarak kodun okunaklılığı ve yazılması kolaylaştırılabilir.
Nesne Dizilerindeki Her Bir Nesneye Erişme
Nesne dizilerindeki her bir nesneye, for döngüsü kullanarak kolayca erişebilirsiniz. Örneğin, aşağıdaki şekilde bir nesne dizisi oluşturulmuştur:
| Ürünler | Fiyat |
|---|---|
| Telefon | 2000 TL |
| Laptop | 5000 TL |
| Tablet | 3000 TL |
Bu nesne dizisindeki her bir nesneye erişmek için for döngüsü kullanılabilir. Aşağıdaki örnekte, her bir nesnenin özellikleri konsola yazdırılmıştır:
let urunler = [ {urun: "Telefon", fiyat: "2000 TL"}, {urun: "Laptop", fiyat: "5000 TL"}, {urun: "Tablet", fiyat: "3000 TL"}];for(let i=0; i<urunler.length; i++) { console.log(urunler[i].urun + " - " + urunler[i].fiyat);}Bu döngü sayesinde, tüm ürünlerin isimleri ve fiyatları yazdırıldı.
For döngüsü, tüm nesne dizisi öğelerine tek tek erişerek, işlem yapmanıza olanak tanır. Bu nedenle, nesne dizisi üzerinde birçok farklı işlem yapmak için kullanılabilirsiniz.
Filtreleme ve Değiştirme İşlemleri
Nesne dizilerinde, belirli kriterlere göre filtreleme ve değiştirme işlemleri yapmak mümkündür. Örneğin, bir nesne dizisindeki fiyatları belirli bir aralıkta olan ürünleri filtreleyebilirsiniz. Bunun için, for döngüsü kullanarak her bir nesneyi kontrol edebilir ve istediğiniz kriterlere uyanları seçebilirsiniz.
Ayrıca, nesne dizilerindeki belirli özellikleri değiştirmek de mümkündür. Örneğin, birden fazla ürünün fiyatını geçerli olacak şekilde arttırabilirsiniz. Bunun için, yine for döngüsü kullanarak her bir nesneye erişebilir ve istediğiniz değişiklikleri yapabilirsiniz.
Bunları yaparken, doğru nesneye erişmek ve doğru özellikleri değiştirmek çok önemlidir. Ayrıca, nesne dizilerindeki verileri düzenlerken dikkatli olmak ve verileri istenildiği şekilde formatlamak da önemlidir. Bu şekilde, verilerin daha okunabilir ve anlaşılır olması sağlanabilir.
Filtreleme ve değiştirme işlemlerinde, özellikle büyük nesne dizilerinde performans önemlidir. Karmaşık filtreleme işlemleri yapmak yerine, daha basit ve hızlı filtreleme yöntemleri kullanmak daha verimli olabilir. Ayrıca, nesne dizileri üzerinde yapacağınız değişikliklerin ne kadarının geri alma işlemi yapılabileceğini de düşünmelisiniz.
Sonuç olarak, nesne dizilerindeki filtreleme ve değiştirme işlemleri oldukça kullanışlıdır. Bu işlemler, verileri toplu olarak işlemek ve istenilen sonuçları elde etmek için önemlidir. Ancak, doğru yöntemleri kullanmak ve performansı düşürmeden işlemleri gerçekleştirmek için dikkatli olmak gerekmektedir.
Object Destructuring'de Dikkat Edilmesi Gerekenler
Nesne yıkımı, JavaScript kod yazmayı daha kolay hale getiren bir teknik olmasına rağmen, dikkat edilmesi gereken noktalar bulunmaktadır. Özellikle, destructuring yaparken nesne içindeki özellik isimleriyle destructuring yapılmalıdır. İsimler farklıysa, yeniden adlandırma yapılması gerekmektedir. Bu, erişilan nesneye yönelik tüm işlemleri etkileyeceği için isimlerin doğru olması oldukça önemlidir.
Ayrıca, nesne içindeki özelliklerin düzeni de oldukça önemli bir faktördür. Özelliklerin sırası, destructuring yaparken çıkartılan değerlerin sırasını da belirleyecektir. Bu nedenle nesne özelliklerinin düzenli bir şekilde olması, kodun okunurluğunu ve anlaşılabilirliğini arttırır.
Bu nedenlerle, object destructuring yaparken nesne içindeki özellik isimleriyle dikkatlice çalışmak ve gerektiğinde yeniden adlandırma yapmak çok önemlidir. Bu sayede, kodunuzun daha kolay okunabilir ve anlaşılabilir olacağından emin olabilirsiniz.