Object Destructuring kullanarak çok daha temiz kod yazabiliriz. Eğer JavaScript gelişimini takip ediyorsanız, 4 yıldan beridir bu kavramı duymuş olmanız gerekiyor. ES6 tanımlarında 2015 yılından beri yer alıyor.

Object Destructuring kavramının ne olduğunu bilmeniz, onu kullanmayı bildiğiniz manasına gelmiyor. Önereceğim kullanım alanları ile birlikte, daha etkili nasıl kullanacağınızı öğreneceksiniz.

1. İsimli Parametreler #

Metod tanımlarken beklenen parametrelere isim tanımlama bazı dillerde kullanılan bir özellik. Bu özellikle birlikte, metodu argümanlarla çalıştırırken sırası önemsiz olarak argüman gönderebiliyoruz. Aşağıdaki örnekte görebileceğiniz üzere, Ruby, C# ve Python dillerinde bu kullanımı görüyoruz.

Ruby Named Arguments #

def testMetodu(renk: 'tanımsız')
  puts renk
end

testMetodu # => 'tanımsız'
testMetodu(renk: 'kırmızı') # => 'kırmızı'

Python Named Arguments #

def testTopla(a=1, b=2, c=3):
	return a+b+c

testTopla(b=5, a=10) # => 10 + 5 + 3 = 18

C# Named Arguments #

class NamedExample
{
    static void Main(string[] args)
    {
        PrintOrderDetails(productName: "Red Mug", sellerName: "Gift Shop", orderNum: 31);
    }

    static void PrintOrderDetails(string sellerName, int orderNum, string productName)
    {
        if (string.IsNullOrWhiteSpace(sellerName))
        {
            throw new ArgumentException(message: "Seller name cannot be null or empty.", paramName: nameof(sellerName));
        }

        Console.WriteLine($"Seller: {sellerName}, Order #: {orderNum}, Product: {productName}");
    }
}

Görebileceğiniz üzere argümanı gönderirken sırasının hiçbir önemi yok. Sonuçta ismini belirtiyorsunuz.

JavaScript bazında düşünürsek, maalesef dil seviyesinde isimli parametre tanımlama özelliği tam olarak yok. Fakat object destructuring ile birlikte, obje gönderip, bunu sağlayabiliyoruz.

const testTopla2 = ({ a = 1, b = 2, c = 3 } = {}) => a + b + c

testTopla2({ c: 10, a: 5 }) // => 5 + 2 + 10 = 17

2. Gelen cevabı temizle #

Sıklıkla sunucudan gelen cevap çok fazla detaya sahip oluyor. Axios clienttan istek yaptığınızda response.data objesinin içerisinde belki result ya da item elemanına ulaşmaya çalışıyoruz. Eğer sunucu isteklerini belirli bir metoddan yönetiyorsanız, orada object destructuring ile çok daha temiz cevap alabilirsiniz.

function fakeServerIstegi () {
	return new Promise((resolve, reject) => {
		setTimeout(() => {
			resolve({
				'status': 200,
				'content-type': 'application/json',
				'data': {
					totalCount: 22,
					items: [
						{
							name: 'Test'
						},
						{
							name: 'Mock'
						},
						{
							name: 'Fake'
						}
					]
				}
			})
		}, 500)
	})
}

fakeServerIstegi()
	.then(({ data: { totalCount = 0, items = [] } }) => {
		console.log('items', items) // 3 itemın bulunduğu dizi yazacaktır
		console.log('totalCount', totalCount) // 22 yazacaktır
	})

Bu yöntemle birlikte serverdan gelen cevap içerisindeki objeleri seçip onları direk değişken olarak kullanabilirsiniz. Aynı zamanda beklenen değişken içerisinde yoksa standart bir değer de atamış olursunuz.

3. Değişken tanımlarken standart değer ata #

Genellikle metod yazarken bazı değişkenlere standart değerler atamamız gerekir. Böylece eğer metod parametrelerinde tanımsız gelen olursa standart değer kullanılır.

Object Destructuringten önce aşağıdaki gibi yapabilirdiniz:

const test = (degisken) => {
	sonuc = degisken || 'tanımsız'
	return sonuc
}

Fakat bu şekilde tüm değişkenler için bunu yapmanız gerekiyor. Object Destructuring ile birlikte bu da değişti. Tüm standar tanımlamaları aşağıdaki gibi yapabilirsiniz:

const kullanici = {isim: 'Teoman', soyisim: 'Tuncer'}

const {
	isim = 'Ahmet',
	soyisim = 'Mehmet',
	cuzdan = '0 tl'
} = kullanici

console.log(isim) // 'Teoman'
console.log(soyisim) // 'Tuncer'
console.log(cuzdan) // '0 tl'

🙏🙏🙏

Buraya kadar okuduğun için teşekkür ederim, bu makaleyi favori sosyal medya ağında paylaşman beni çok mutlu edecek 💖! Geri bildirim için, lütfen Twitter'da bana ulaşın.

Yayınlanma 24 Jun 2019