JavaScript, modern web geli\u015ftirmenin temel ta\u015flar\u0131ndan biri olup, ES6 (ECMAScript 2015) ile birlikte dilin g\u00fcc\u00fcn\u00fc ve ifade yetene\u011fini \u00f6nemli \u00f6l\u00e7\u00fcde art\u0131ran bir\u00e7ok yeni \u00f6zellik kazanm\u0131\u015ft\u0131r. Bu \u00f6zellikler aras\u0131nda en dikkat \u00e7ekicilerinden ve geli\u015ftiricilerin g\u00fcnl\u00fck i\u015f ak\u0131\u015f\u0131n\u0131 en \u00e7ok kolayla\u015ft\u0131ranlardan ikisi, “Nesne Destructuring” (Object Destructuring) ve “Dizi Destructuring” (Array Destructuring) yetenekleridir. Bu makalede, bu iki g\u00fc\u00e7l\u00fc \u00f6zelli\u011fin ne oldu\u011funu, nas\u0131l \u00e7al\u0131\u015ft\u0131\u011f\u0131n\u0131, hangi senaryolarda kullan\u0131labilece\u011fini ve kodunuzu nas\u0131l daha okunabilir ve s\u00fcrd\u00fcr\u00fclebilir hale getirebilece\u011fini ayr\u0131nt\u0131l\u0131 bir \u015fekilde inceleyece\u011fiz.<\/p>\n
Destructuring, kelime anlam\u0131 olarak “yap\u0131y\u0131 bozma” veya “yap\u0131dan ay\u0131rma” demektir. JavaScript ba\u011flam\u0131nda ise bu, bir nesnenin veya dizinin i\u00e7indeki de\u011ferleri, ayr\u0131 de\u011fi\u015fkenlere kolayca \u00e7\u0131karman\u0131za olanak tan\u0131yan bir s\u00f6zdizimsel \u015fekerdir (syntactic sugar). Bu \u00f6zellikler sayesinde, daha \u00f6nce uzun ve tekrar eden kod sat\u0131rlar\u0131yla yap\u0131lmas\u0131 gereken i\u015flemler, \u00e7ok daha k\u0131sa ve anla\u015f\u0131l\u0131r bir \u015fekilde ifade edilebilir hale gelmi\u015ftir. \u00d6zellikle b\u00fcy\u00fck veri yap\u0131lar\u0131yla \u00e7al\u0131\u015f\u0131rken veya fonksiyon parametrelerini tan\u0131mlarken destructuring’in sa\u011flad\u0131\u011f\u0131 avantajlar paha bi\u00e7ilmezdir.<\/p>\n
Destructuring atamas\u0131, bir nesnenin veya dizinin \u00f6zelliklerini veya \u00f6\u011felerini ayr\u0131 de\u011fi\u015fkenlere \u00e7\u0131karman\u0131n k\u0131sayoludur. ES6 \u00f6ncesinde, bir nesneden veya diziden belirli de\u011ferleri almak istedi\u011fimizde, her bir de\u011fer i\u00e7in ayr\u0131 ayr\u0131 atama yapmam\u0131z gerekiyordu. Bu durum, \u00f6zellikle \u00e7ok say\u0131da \u00f6\u011fe i\u00e7eren yap\u0131larla \u00e7al\u0131\u015f\u0131rken kodu kalabal\u0131kla\u015ft\u0131r\u0131yor ve okunabilirli\u011fi azalt\u0131yordu. Destructuring, bu s\u00fcreci otomatikle\u015ftirerek kodun daha temiz, daha \u00f6zl\u00fc ve daha i\u015flevsel olmas\u0131n\u0131 sa\u011flar.<\/p>\n
Destructuring’in sundu\u011fu temel faydalar \u015funlard\u0131r:<\/p>\n
\u015eimdi bu iki \u00f6nemli destructuring t\u00fcr\u00fcn\u00fc ayr\u0131 ayr\u0131 inceleyelim.<\/p>\n
Nesne destructuring, bir nesnenin \u00f6zelliklerini, ayn\u0131 isimdeki de\u011fi\u015fkenlere ataman\u0131n veya farkl\u0131 isimler vererek ataman\u0131n bir yoludur. Bu, \u00f6zellikle bir API’den gelen karma\u015f\u0131k veri yap\u0131lar\u0131n\u0131 i\u015flerken veya bir konfig\u00fcrasyon nesnesinden belirli ayarlar\u0131 al\u0131rken \u00e7ok kullan\u0131\u015fl\u0131d\u0131r.<\/p>\n
Bir nesnenin \u00f6zelliklerini, s\u00fcsl\u00fc parantezler \u00d6rnek:<\/p>\n Bu \u00f6rnekte, Bazen bir nesne \u00f6zelli\u011finin ad\u0131n\u0131 de\u011fi\u015ftirmek veya mevcut bir de\u011fi\u015fken ad\u0131yla \u00e7ak\u0131\u015fmas\u0131n\u0131 \u00f6nlemek isteyebiliriz. Nesne destructuring, bu duruma olanak tan\u0131r:<\/p>\n Burada, Destructuring yaparken, e\u011fer bir \u00f6zellik nesnede mevcut de\u011filse, o de\u011fi\u015fkene Varsay\u0131lan de\u011ferler, yeniden adland\u0131rma ile de birlikte kullan\u0131labilir:<\/p>\n Bazen bir nesneden belirli \u00f6zellikleri al\u0131p, geri kalan t\u00fcm \u00f6zellikleri tek bir yeni nesnede toplamak isteyebiliriz. Bu, rest parametre ( Daha karma\u015f\u0131k nesne yap\u0131lar\u0131yla \u00e7al\u0131\u015f\u0131rken, i\u00e7 i\u00e7e ge\u00e7mi\u015f nesnelerin \u00f6zelliklerini de do\u011frudan \u00e7\u0131karabiliriz.<\/p>\n Bu \u00f6rnekte, Nesne destructuring’in en g\u00fc\u00e7l\u00fc kullan\u0131m alanlar\u0131ndan biri, fonksiyon parametrelerinde olmas\u0131d\u0131r. Bu, fonksiyonlara ge\u00e7irilen konfig\u00fcrasyon nesnelerini veya karma\u015f\u0131k veri objelerini daha okunabilir ve y\u00f6netilebilir hale getirir.<\/p>\n Bu yakla\u015f\u0131m, fonksiyon \u00e7a\u011fr\u0131s\u0131n\u0131 daha esnek hale getirir ve parametrelerin s\u0131ras\u0131na ba\u011f\u0131ml\u0131l\u0131\u011f\u0131 ortadan kald\u0131r\u0131r. Ayr\u0131ca, fonksiyonun hangi \u00f6zellikleri bekledi\u011fini imzadan anlamay\u0131 kolayla\u015ft\u0131r\u0131r. Fonksiyona bo\u015f bir nesne ge\u00e7irilirse ve varsay\u0131lan de\u011ferler tan\u0131mlanmam\u0131\u015fsa, Dizi destructuring, bir dizinin \u00f6\u011felerini, s\u0131ras\u0131na g\u00f6re ayr\u0131 de\u011fi\u015fkenlere ataman\u0131n bir yoludur. Nesne destructuring’in aksine, dizi destructuring’de \u00f6\u011feler adlar\u0131na g\u00f6re de\u011fil, konumlar\u0131na g\u00f6re e\u015fle\u015ftirilir.<\/p>\n Bir dizinin \u00f6\u011felerini, k\u00f6\u015feli parantezler \u00d6rnek:<\/p>\n Bu \u00f6rnekte, Bir diziden sadece belirli \u00f6\u011feleri almak ve aradaki baz\u0131 \u00f6\u011feleri atlamak isteyebiliriz. Bunun i\u00e7in, atlamak istedi\u011fimiz \u00f6\u011felerin yerine bo\u015fluk b\u0131rak\u0131r\u0131z (veya virg\u00fcl kullan\u0131r\u0131z).<\/p>\n Dizi destructuring’de de nesne destructuring’de oldu\u011fu gibi varsay\u0131lan de\u011ferler belirleyebiliriz. E\u011fer bir dizinin belirli bir indeksinde \u00f6\u011fe yoksa, o de\u011fi\u015fkene tan\u0131mlad\u0131\u011f\u0131m\u0131z varsay\u0131lan de\u011fer atan\u0131r.<\/p>\n Bir diziden belirli \u00f6\u011feleri al\u0131p, geri kalan t\u00fcm \u00f6\u011feleri yeni bir dizi i\u00e7inde toplamak i\u00e7in rest parametre ( Dizi destructuring’in \u015fa\u015f\u0131rt\u0131c\u0131 ve pratik kullan\u0131mlar\u0131ndan biri, iki de\u011fi\u015fkenin de\u011ferini tek bir sat\u0131rda takas etmektir. ES6 \u00f6ncesinde bu, ge\u00e7ici bir de\u011fi\u015fken gerektiriyordu.<\/p>\n Bu, k\u0131sa ve zarif bir \u00e7\u00f6z\u00fcm sunar.<\/p>\n Diziler i\u00e7inde dizilerle \u00e7al\u0131\u015f\u0131rken de destructuring kullanabiliriz.<\/p>\n Fonksiyonlar birden fazla de\u011fer d\u00f6nd\u00fcrmek istedi\u011finde, bu de\u011ferleri bir dizi olarak d\u00f6nd\u00fcrmek ve ard\u0131ndan bu diziyi destructuring ile a\u00e7mak yayg\u0131n ve etkili bir y\u00f6ntemdir.<\/p>\n Bu, fonksiyonun ne d\u00f6nd\u00fcrd\u00fc\u011f\u00fcn\u00fc a\u00e7\u0131k\u00e7a g\u00f6sterir ve her bir d\u00f6n\u00fc\u015f de\u011ferini ayr\u0131 bir de\u011fi\u015fkene atamay\u0131 kolayla\u015ft\u0131r\u0131r. React hook’lar\u0131 (\u00f6rn. Nesne ve dizi destructuring’i bir arada kullanmak, daha karma\u015f\u0131k veri yap\u0131lar\u0131n\u0131 i\u015flerken kodun okunabilirli\u011fini ve k\u0131sal\u0131\u011f\u0131n\u0131 art\u0131r\u0131r. \u00d6rne\u011fin, bir nesnenin i\u00e7inde bir dizi veya bir dizinin i\u00e7inde bir nesne olabilir.<\/p>\n Bu \u00f6rnek, ger\u00e7ek d\u00fcnya uygulamalar\u0131nda s\u0131kl\u0131kla kar\u015f\u0131la\u015f\u0131lan karma\u015f\u0131k veri yap\u0131lar\u0131n\u0131 nas\u0131l zarif\u00e7e i\u015fleyebilece\u011fimizi g\u00f6stermektedir.<\/p>\n Destructuring, kodunuzu b\u00fcy\u00fck \u00f6l\u00e7\u00fcde iyile\u015ftirebilen g\u00fc\u00e7l\u00fc bir ara\u00e7t\u0131r, ancak her ara\u00e7 gibi, ne zaman ve nas\u0131l kullan\u0131laca\u011f\u0131n\u0131 bilmek \u00f6nemlidir.<\/p>\n Destructuring’in performans\u0131 hakk\u0131nda endi\u015felenmenize gerek yoktur. Modern JavaScript motorlar\u0131, destructuring atamalar\u0131n\u0131 olduk\u00e7a verimli bir \u015fekilde optimize eder. \u00c7o\u011fu durumda, manuel atamalarla aras\u0131nda g\u00f6zle g\u00f6r\u00fcl\u00fcr bir performans fark\u0131 olmayacakt\u0131r. Bu nedenle, performans kayg\u0131lar\u0131 yerine kodun okunabilirli\u011fi ve s\u00fcrd\u00fcr\u00fclebilirli\u011fi gibi fakt\u00f6rlere odaklanmak daha do\u011fru bir yakla\u015f\u0131md\u0131r.<\/p>\n Nesne ve dizi destructuring, ES6 ile JavaScript’e eklenen ve geli\u015ftiricilerin g\u00fcnl\u00fck i\u015f ak\u0131\u015f\u0131n\u0131 k\u00f6kten de\u011fi\u015ftiren en faydal\u0131 \u00f6zelliklerden ikisidir. Bu \u00f6zellikler, kodun daha k\u0131sa, daha temiz ve daha okunabilir olmas\u0131n\u0131 sa\u011flayarak hem geli\u015ftirme h\u0131z\u0131n\u0131 art\u0131r\u0131r hem de hatalar\u0131 azalt\u0131r. \u00d6zellikle karma\u015f\u0131k veri yap\u0131lar\u0131yla \u00e7al\u0131\u015f\u0131rken, API yan\u0131tlar\u0131n\u0131 i\u015flerken veya fonksiyonlara parametreler ge\u00e7irirken destructuring’in sundu\u011fu avantajlar yads\u0131namaz.<\/p>\n Bu makalede ele ald\u0131\u011f\u0131m\u0131z temel s\u00f6zdiziminden geli\u015fmi\u015f kullan\u0131m senaryolar\u0131na kadar her bir y\u00f6n\u00fcyle destructuring, modern JavaScript geli\u015ftiricisinin ara\u00e7 setinde mutlaka bulunmas\u0131 gereken bir yetenektir. Onu do\u011fru ve bilin\u00e7li bir \u015fekilde kullanarak, daha iyi, daha s\u00fcrd\u00fcr\u00fclebilir ve daha keyifli JavaScript kodu yazabilirsiniz. Destructuring’i pratik projelerinizde aktif olarak kullanarak, bu g\u00fc\u00e7l\u00fc \u00f6zellikten en iyi \u015fekilde faydalanmay\u0131 \u00f6\u011frenin.<\/p>\n{}<\/code> kullanarak ve \u00f6zellik adlar\u0131n\u0131 do\u011frudan de\u011fi\u015fken adlar\u0131 olarak belirterek \u00e7\u0131karabiliriz.<\/p>\nconst kullanici = {\n ad: "Ali",\n soyad: "Y\u0131lmaz",\n yas: 30,\n email: "ali.yilmaz@example.com"\n};\n\n\/\/ ES6 \u00f6ncesi\n\/\/ const ad = kullanici.ad;\n\/\/ const soyad = kullanici.soyad;\n\n\/\/ ES6 ile Nesne Destructuring\nconst { ad, soyad } = kullanici;\n\nconsole.log(ad); \/\/ "Ali"\nconsole.log(soyad); \/\/ "Y\u0131lmaz"<\/code><\/pre>\nkullanici<\/code> nesnesinden ad<\/code> ve soyad<\/code> \u00f6zelliklerini al\u0131p, ayn\u0131 isimde yeni de\u011fi\u015fkenlere atad\u0131k. yas<\/code> ve email<\/code> \u00f6zellikleri al\u0131nmad\u0131\u011f\u0131 i\u00e7in, bunlar i\u00e7in herhangi bir de\u011fi\u015fken olu\u015fturulmad\u0131.<\/p>\nYeni De\u011fi\u015fken Adlar\u0131 Atama<\/h4>\n
const urun = {\n id: "ABC123",\n adi: "Laptop",\n fiyat: 1200,\n stokAdedi: 50\n};\n\n\/\/ 'adi' \u00f6zelli\u011fini 'urunAdi' olarak, 'fiyat' \u00f6zelli\u011fini 'urunFiyati' olarak yeniden adland\u0131rma\nconst { adi: urunAdi, fiyat: urunFiyati } = urun;\n\nconsole.log(urunAdi); \/\/ "Laptop"\nconsole.log(urunFiyati); \/\/ 1200\n\/\/ console.log(adi); \/\/ Hata: adi tan\u0131ml\u0131 de\u011fil<\/code><\/pre>\nadi<\/code> \u00f6zelli\u011fi urunAdi<\/code> de\u011fi\u015fkenine, fiyat<\/code> \u00f6zelli\u011fi ise urunFiyati<\/code> de\u011fi\u015fkenine atanm\u0131\u015ft\u0131r. Orijinal \u00f6zellik adlar\u0131 (\u00f6rn. adi<\/code>) art\u0131k de\u011fi\u015fken olarak eri\u015filebilir de\u011fildir.<\/p>\nVarsay\u0131lan De\u011ferler (Default Values)<\/h4>\n
undefined<\/code> atan\u0131r. Ancak, bir varsay\u0131lan de\u011fer belirleyerek bu durumu \u00f6nleyebiliriz. Bu, \u00f6zellikle opsiyonel \u00f6zelliklerle \u00e7al\u0131\u015f\u0131rken veya bir API yan\u0131t\u0131nda belirli bir alan\u0131n eksik olabilece\u011fi durumlarda \u00e7ok kullan\u0131\u015fl\u0131d\u0131r.<\/p>\nconst ayarlar = {\n tema: "dark",\n dil: "tr"\n \/\/ bildirimler \u00f6zelli\u011fi eksik\n};\n\nconst { tema, dil, bildirimler = true } = ayarlar;\n\nconsole.log(tema); \/\/ "dark"\nconsole.log(dil); \/\/ "tr"\nconsole.log(bildirimler); \/\/ true (\u00e7\u00fcnk\u00fc 'bildirimler' ayarlar nesnesinde yoktu)\n\nconst kullanici2 = {\n ad: "Ay\u015fe"\n};\n\nconst { ad, soyad = "Bilinmiyor" } = kullanici2;\n\nconsole.log(ad); \/\/ "Ay\u015fe"\nconsole.log(soyad); \/\/ "Bilinmiyor"<\/code><\/pre>\nconst { kullaniciAdi: ad = "Misafir", yetki: rol = "kullanici" } = {};\n\nconsole.log(ad); \/\/ "Misafir"\nconsole.log(rol); \/\/ "kullanici"<\/code><\/pre>\nKalan \u00d6zellikleri Toplama (Rest Property)<\/h4>\n
...<\/code>) s\u00f6zdizimi ile m\u00fcmk\u00fcnd\u00fcr.<\/p>\nconst urunDetaylari = {\n isim: "Ak\u0131ll\u0131 Saat",\n marka: "TechWear",\n fiyat: 250,\n renk: "Siyah",\n garanti: "2 Y\u0131l"\n};\n\nconst { isim, fiyat, ...digerOzellikler } = urunDetaylari;\n\nconsole.log(isim); \/\/ "Ak\u0131ll\u0131 Saat"\nconsole.log(fiyat); \/\/ 250\nconsole.log(digerOzellikler); \/\/ { marka: "TechWear", renk: "Siyah", garanti: "2 Y\u0131l" }<\/code><\/pre>\ndigerOzellikler<\/code> de\u011fi\u015fkeni, urunDetaylari<\/code> nesnesinden isim<\/code> ve fiyat<\/code> d\u0131\u015f\u0131ndaki t\u00fcm \u00f6zellikleri i\u00e7eren yeni bir nesne haline gelir. Rest parametresi, destructuring ifadesinin sonunda olmal\u0131d\u0131r.<\/p>\n\u0130\u00e7 \u0130\u00e7e Nesne Destructuring (Nested Object Destructuring)<\/h4>\n
const kullaniciProfil = {\n id: 1,\n bilgiler: {\n ad: "Mert",\n soyad: "Demir",\n adres: {\n sehir: "\u0130stanbul",\n ulke: "T\u00fcrkiye"\n }\n },\n ayarlar: {\n dil: "tr",\n bildirimler: true\n }\n};\n\nconst {\n bilgiler: { ad, adres: { sehir } },\n ayarlar: { dil, bildirimler = false }\n} = kullaniciProfil;\n\nconsole.log(ad); \/\/ "Mert"\nconsole.log(sehir); \/\/ "\u0130stanbul"\nconsole.log(dil); \/\/ "tr"\nconsole.log(bildirimler); \/\/ true\n\/\/ console.log(bilgiler); \/\/ Hata: bilgiler tan\u0131ml\u0131 de\u011fil, sadece i\u00e7indeki 'ad' al\u0131nd\u0131.<\/code><\/pre>\nbilgiler<\/code> ve adres<\/code> gibi ara nesneleri do\u011frudan de\u011fi\u015fken olarak almad\u0131k, sadece i\u00e7lerindeki istedi\u011fimiz \u00f6zelliklere eri\u015ftik. E\u011fer bilgiler<\/code> nesnesinin tamam\u0131na da eri\u015fmek isteseydik, onu da ayr\u0131 bir de\u011fi\u015fken olarak tan\u0131mlamam\u0131z gerekirdi:<\/p>\nconst {\n bilgiler, \/\/ 'bilgiler' nesnesinin tamam\u0131n\u0131 al\u0131r\n bilgiler: { ad, adres: { sehir } }\n} = kullaniciProfil;\n\nconsole.log(bilgiler); \/\/ { ad: "Mert", soyad: "Demir", adres: { sehir: "\u0130stanbul", ulke: "T\u00fcrkiye" } }\nconsole.log(ad); \/\/ "Mert"<\/code><\/pre>\nFonksiyon Parametrelerinde Nesne Destructuring<\/h4>\n
function kullaniciBilgileriniGoster({ ad, soyad, yas, email = "bilgi_yok@example.com" }) {\n console.log(Ad: ${ad}, Soyad: ${soyad}, Ya\u015f: ${yas}, Email: ${email}<\/code>);\n}\n\nconst kullanici1 = { ad: "Zeynep", soyad: "Kara", yas: 28 };\nconst kullanici2 = { ad: "Murat", soyad: "Ak", yas: 35, email: "murat.ak@example.com" };\n\nkullaniciBilgileriniGoster(kullanici1);\n\/\/ \u00c7\u0131kt\u0131: Ad: Zeynep, Soyad: Kara, Ya\u015f: 28, Email: bilgi_yok@example.com\n\nkullaniciBilgileriniGoster(kullanici2);\n\/\/ \u00c7\u0131kt\u0131: Ad: Murat, Soyad: Ak, Ya\u015f: 35, Email: murat.ak@example.com<\/code><\/pre>\nundefined<\/code> hatalar\u0131 olu\u015fabilir. Bunu \u00f6nlemek i\u00e7in, t\u00fcm parametre nesnesine de varsay\u0131lan bir bo\u015f nesne atayabiliriz:<\/p>\nfunction ayarGuncelle({ tema = "light", dil = "en", bildirimler = false } = {}) {\n console.log(Tema: ${tema}, Dil: ${dil}, Bildirimler: ${bildirimler}<\/code>);\n}\n\nayarGuncelle({ tema: "dark", bildirimler: true }); \/\/ Tema: dark, Dil: en, Bildirimler: true\nayarGuncelle({}); \/\/ Tema: light, Dil: en, Bildirimler: false\nayarGuncelle(); \/\/ Tema: light, Dil: en, Bildirimler: false (bo\u015f nesne varsay\u0131lan olarak kullan\u0131l\u0131r)<\/code><\/pre>\nDizi Destructuring (Array Destructuring)<\/h3>\n
Temel Dizi Destructuring S\u00f6zdizimi<\/h4>\n
[]<\/code> kullanarak ve istedi\u011finiz de\u011fi\u015fken adlar\u0131n\u0131 belirterek \u00e7\u0131karabiliriz.<\/p>\nconst renkler = ["k\u0131rm\u0131z\u0131", "ye\u015fil", "mavi", "sar\u0131"];\n\n\/\/ ES6 \u00f6ncesi\n\/\/ const ilkRenk = renkler[0];\n\/\/ const ikinciRenk = renkler[1];\n\n\/\/ ES6 ile Dizi Destructuring\nconst [ilkRenk, ikinciRenk] = renkler;\n\nconsole.log(ilkRenk); \/\/ "k\u0131rm\u0131z\u0131"\nconsole.log(ikinciRenk); \/\/ "ye\u015fil"<\/code><\/pre>\nrenkler<\/code> dizisinin ilk iki \u00f6\u011fesini ilkRenk<\/code> ve ikinciRenk<\/code> de\u011fi\u015fkenlerine atad\u0131k.<\/p>\n\u00d6\u011feleri Atlamak (Skipping Elements)<\/h4>\n
const sayilar = [1, 2, 3, 4, 5];\n\nconst [bir, , uc, , bes] = sayilar;\n\nconsole.log(bir); \/\/ 1\nconsole.log(uc); \/\/ 3\nconsole.log(bes); \/\/ 5<\/code><\/pre>\nVarsay\u0131lan De\u011ferler (Default Values)<\/h4>\n
const liste = ["elma", "armut"];\n\nconst [meyve1, meyve2, meyve3 = "kiraz"] = liste;\n\nconsole.log(meyve1); \/\/ "elma"\nconsole.log(meyve2); \/\/ "armut"\nconsole.log(meyve3); \/\/ "kiraz" (\u00e7\u00fcnk\u00fc liste dizisinde 2. indeks bo\u015ftu)\n\nconst kisaltilmisListe = ["masa"];\nconst [urunAdi, miktar = 1, birim = "adet"] = kisaltilmisListe;\n\nconsole.log(urunAdi); \/\/ "masa"\nconsole.log(miktar); \/\/ 1\nconsole.log(birim); \/\/ "adet"<\/code><\/pre>\nKalan \u00d6\u011feleri Toplama (Rest Element)<\/h4>\n
...<\/code>) s\u00f6zdizimini kullanabiliriz. Bu, her zaman destructuring ifadesinin sonunda olmal\u0131d\u0131r.<\/p>\nconst tumSayilar = [10, 20, 30, 40, 50, 60];\n\nconst [ilk, ikinci, ...kalanSayilar] = tumSayilar;\n\nconsole.log(ilk); \/\/ 10\nconsole.log(ikinci); \/\/ 20\nconsole.log(kalanSayilar); \/\/ [30, 40, 50, 60]<\/code><\/pre>\nDe\u011fi\u015fkenleri Takas Etme (Swapping Variables)<\/h4>\n
let a = 10;\nlet b = 20;\n\n\/\/ ES6 \u00f6ncesi\n\/\/ let temp = a;\n\/\/ a = b;\n\/\/ b = temp;\n\n\/\/ ES6 ile Dizi Destructuring\n[a, b] = [b, a];\n\nconsole.log(a); \/\/ 20\nconsole.log(b); \/\/ 10<\/code><\/pre>\n\u0130\u00e7 \u0130\u00e7e Dizi Destructuring (Nested Array Destructuring)<\/h4>\n
const matris = [\n [1, 2],\n [3, 4],\n [5, 6]\n];\n\nconst [\n [satir1_eleman1, satir1_eleman2],\n [, satir2_eleman2] \/\/ \u0130kinci sat\u0131r\u0131n ilk eleman\u0131n\u0131 atla\n] = matris;\n\nconsole.log(satir1_eleman1); \/\/ 1\nconsole.log(satir1_eleman2); \/\/ 2\nconsole.log(satir2_eleman2); \/\/ 4<\/code><\/pre>\nFonksiyon D\u00f6n\u00fc\u015f De\u011ferlerinde Dizi Destructuring<\/h4>\n
function hesapla(x, y) {\n const toplam = x + y;\n const fark = x - y;\n const carpim = x * y;\n return [toplam, fark, carpim];\n}\n\nconst [sonucToplam, sonucFark, sonucCarpim] = hesapla(10, 5);\n\nconsole.log(Toplam: ${sonucToplam}<\/code>); \/\/ Toplam: 15\nconsole.log(Fark: ${sonucFark}<\/code>); \/\/ Fark: 5\nconsole.log(\u00c7arp\u0131m: ${sonucCarpim}<\/code>); \/\/ \u00c7arp\u0131m: 50<\/code><\/pre>\nuseState<\/code>) bu deseni yo\u011fun bir \u015fekilde kullan\u0131r.<\/p>\nKarma Destructuring (Combining Object and Array Destructuring)<\/h3>\n
const kullaniciVerileri = {\n id: 101,\n isim: "Elif",\n roller: ["admin", "editor"],\n iletisim: {\n email: "elif@example.com",\n telefonlar: ["555-1234", "555-5678"]\n }\n};\n\nconst {\n isim,\n roller: [ilkRol, ikinciRol], \/\/ 'roller' dizisini destructuring\n iletisim: {\n email,\n telefonlar: [anaTelefon, ...digerTelefonlar] \/\/ 'telefonlar' dizisini destructuring\n }\n} = kullaniciVerileri;\n\nconsole.log(isim); \/\/ "Elif"\nconsole.log(ilkRol); \/\/ "admin"\nconsole.log(ikinciRol); \/\/ "editor"\nconsole.log(email); \/\/ "elif@example.com"\nconsole.log(anaTelefon); \/\/ "555-1234"\nconsole.log(digerTelefonlar); \/\/ ["555-5678"]<\/code><\/pre>\nDestructuring Kullan\u0131m\u0131nda En \u0130yi Uygulamalar ve \u0130pu\u00e7lar\u0131<\/h3>\n
\n
obj.prop<\/code> veya arr[index]<\/code> eri\u015fimi daha anla\u015f\u0131l\u0131r olabilir. A\u015f\u0131r\u0131 destructuring, \u00f6zellikle \u00e7ok i\u00e7 i\u00e7e ge\u00e7mi\u015f yap\u0131larla \u00e7al\u0131\u015f\u0131rken kodun okunabilirli\u011fini azaltabilir.<\/li>\nundefined<\/code> hatalar\u0131n\u0131 \u00f6nlemek i\u00e7in hayati \u00f6neme sahiptir.<\/li>\n...rest<\/code> operat\u00f6r\u00fcn\u00fc kullanarak kalan \u00f6\u011feleri veya \u00f6zellikleri toplamak, kodunuzu daha mod\u00fcler hale getirebilir ve sadece ihtiyac\u0131n\u0131z olan\u0131 ay\u0131rman\u0131za yard\u0131mc\u0131 olabilir.<\/li>\nundefined<\/code> al\u0131rs\u0131n\u0131z. E\u011fer bu bir nesnenin i\u00e7indeki bir \u00f6zellikse, TypeError<\/code> ile kar\u015f\u0131la\u015fabilirsiniz. Bu t\u00fcr hatalar\u0131 \u00f6ng\u00f6rerek varsay\u0131lan de\u011ferler kullanmak veya kontrol mekanizmalar\u0131 eklemek \u00f6nemlidir.<\/li>\n<\/ol>\nPerformans Konular\u0131<\/h4>\n
Sonu\u00e7<\/h3>\n