<\/div>\n
Merhaba,<\/p>\n
Elimizdeki nesneleri yahut dizileri var olan mevcut yap\u0131lar\u0131ndan daha k\u00fc\u00e7\u00fck par\u00e7alara ay\u0131rmak isteyebiliriz. ECMAScript 6 ile gelen Destructuring \u00f6zelli\u011fi bu iste\u011fimize kar\u015f\u0131l\u0131k olarak nesneleri ya da dizileri par\u00e7alayabilmekte ve bu i\u015flem neticesinde i\u015fimize yarayan par\u00e7alardan istedi\u011fimizi \u00e7ekip kullanma \u00f6zg\u00fcrl\u00fc\u011f\u00fcn\u00fc bizlere tan\u0131maktad\u0131r.<\/p>\n
\u015eimdi gelin Destructuring \u00f6zelli\u011fini nesneler ve diziler i\u00e7in ayr\u0131 ayr\u0131 ele alal\u0131m.<\/p>\n
Objeler \u0130\u00e7in Destructuring<\/h2>\n
\r\nlet personel = {\r\n    Adi: "Gen\u00e7ay",\r\n    Soyadi: "Y\u0131ld\u0131z"\r\n};\r\n<\/pre>\nYukar\u0131daki nesneyi ele al\u0131rsak e\u011fer; nesne i\u00e7erisindeki “Adi” ve “Soyadi” propertylerini farkl\u0131 par\u00e7alarda elde etmek i\u00e7in Destructuring \u00f6zelli\u011finden \u00f6nce a\u015fa\u011f\u0131daki gibi \u00e7al\u0131\u015fmaktayd\u0131k.<\/p>\n
\r\nlet Adi = personel.Adi, Soyadi = personel.Soyadi;\r\nconsole.log(Adi, Soyadi);\r\n<\/pre>\nDestructuring \u00f6zelli\u011fi ise bu i\u015flemi daha pratik ve kullan\u0131labilir bir hale getirmektedir;<\/p>\n
\r\nlet { Adi, Soyadi } = personel;\r\nconsole.log(Adi, Soyadi);\r\n<\/pre>\nYukar\u0131daki kod blo\u011funu incelerseniz e\u011fer “personel” nesnesini par\u00e7alayacak yap\u0131m\u0131z “let { Adi, Soyadi }” \u015feklinde tan\u0131mlanmaktad\u0131r. Burada dikkat edilmesi gereken husus, Destructuring \u00f6zelli\u011fi uygulanan de\u011fi\u015fkendeki property isimleriyle, nesnedeki property isimleri birebir ayn\u0131 olmak zorundad\u0131r.<\/p>\n
E\u011fer ki, tan\u0131mlanan de\u011fi\u015fkenlere farkl\u0131 isim vermek istiyorsan\u0131z a\u015fa\u011f\u0131daki gibi bir \u00e7al\u0131\u015fma ger\u00e7ekle\u015ftirilmesi gerekmektedir.<\/p>\n
\r\nlet { Adi: adi, Soyadi: soyadi } = personel;\r\nconsole.log(adi, soyadi);\r\n<\/pre>\nBurada g\u00f6rd\u00fc\u011f\u00fcn\u00fcz \u00fczere de\u011fi\u015fkenlere bir nevi alias atama i\u015flemi ger\u00e7ekle\u015ftirilmi\u015ftir. Tabi bu aliaslar atand\u0131klar\u0131 de\u011fi\u015fkenlerin fiziksel isimlerini ezeceklerinden dolay\u0131 kullan\u0131lamaz hale getirmektedirler.<\/p>\n
\u0130\u00e7 Objeler \u0130\u00e7in Destructuring<\/h3>\nElimizde a\u015fa\u011f\u0131daki gibi nesnemiz oldu\u011funu d\u00fc\u015f\u00fcnelim;<\/p>\n
\r\nlet personel = {\r\n    Adi: "Gen\u00e7ay",\r\n    Soyadi: "Y\u0131ld\u0131z",\r\n    Memleket: {\r\n        Il: "Artvin",\r\n        Ilce: "Arhavi"\r\n    }\r\n};\r\n<\/pre>\nNesne i\u00e7erisindeki “Memleket” nesnesini par\u00e7alamak i\u00e7in a\u015fa\u011f\u0131daki gibi bir \u00e7al\u0131\u015fma ger\u00e7ekle\u015ftirilmesi gerekmektedir;<\/p>\n
\r\nlet { Memleket: { Il, Ilce } } = personel;\r\nconsole.log(Il, Ilce);\r\n<\/pre>\n\u0130\u015fte bu kadar basit. Di\u011fer propertyleride par\u00e7alayal\u0131m diyorsan\u0131z e\u011fer;<\/p>\n
\r\nlet { Memleket: { Il, Ilce }, Adi, Soyadi } = personel;\r\nconsole.log(Il, Ilce, Adi, Soyadi);\r\n<\/pre>\nbuyrun sizi k\u0131rmam\u0131\u015f olal\u0131m.
\nHatta bu \u00e7al\u0131\u015fmay\u0131 alias ile zenginle\u015ftirmekte benden olsun \ud83d\ude42<\/p>\n
\r\nlet { Memleket: { Il: il, Ilce: Ilce }, Adi: adi, Soyadi: soyadi } = personel;\r\nconsole.log(il, Ilce, adi, soyadi);\r\n<\/pre>\nDiziler \u0130\u00e7in Destructuring<\/h2>\n\r\nlet personeller = ["Ali", "Veli", "Hilmi"];\r\n<\/pre>\nElimizde yukar\u0131daki gibi bir dizi oldu\u011funu varsayal\u0131m. Normal \u015fartlarda verileri elde etmek i\u00e7in a\u015fa\u011f\u0131daki gibi indexer temelli bir \u00e7al\u0131\u015fma sergiliyorduk.<\/p>\n
\r\nlet p1 = personeller[0];\r\nlet p2 = personeller[1];\r\nlet p3 = personeller[2];\r\nconsole.log(p1, p2, p3);\r\n<\/pre>\nDestructuring ile bu i\u015flemi daha pratik bir \u015fekilde yaparsak e\u011fer;<\/p>\n
\r\nlet [p1, p2, p3] = personeller;\r\nconsole.log(p1, p2, p3);\r\n<\/pre>\n\u015feklinde \u00e7al\u0131\u015fmam\u0131z yeterli olacakt\u0131r. Burada dikkat edilmesi gereken husus, dizilerde Destructuring uyguluyorsak e\u011fer par\u00e7alar\u0131 olu\u015fturan de\u011fi\u015fkenlerin syntax yap\u0131s\u0131nda k\u00f6\u015feli parantez kullan\u0131lmal\u0131d\u0131r.<\/p>\n
\u0130\u00e7 \u0130\u00e7e Diziler \u0130\u00e7in Destructuring<\/h2>\nE\u011fer ki elimizdeki dizi a\u015fa\u011f\u0131daki gibi i\u00e7erisinde ba\u015fka bir dizi bar\u0131nd\u0131r\u0131yorsa;<\/p>\n
\r\nlet personeller = ["Ali", "Veli", "Hilmi", [1, 2, 3]];\r\n<\/pre>\nve Destructuring ile alt dizideki de\u011ferleride elde etmek istiyorsan\u0131z a\u015fa\u011f\u0131daki gibi \u00e7al\u0131\u015fman\u0131z yeterli olacakt\u0131r.<\/p>\n
\r\nlet [p1, p2, p3, [a1, a2, a3]] = personeller;\r\nconsole.log(p1, p2, p3, a1, a2, a3);\r\n<\/pre>\nSonraki yaz\u0131lar\u0131mda g\u00f6r\u00fc\u015fmek \u00fczere…
\n\u0130yi \u00e7al\u0131\u015fmalar…<\/p>\n","protected":false},"excerpt":{"rendered":"
Merhaba, Elimizdeki nesneleri yahut dizileri var olan mevcut yap\u0131lar\u0131ndan daha k\u00fc\u00e7\u00fck par\u00e7alara ay\u0131rmak isteyebiliriz. ECMAScript 6 ile gelen Destructuring \u00f6zelli\u011fi bu iste\u011fimize kar\u015f\u0131l\u0131k olarak nesneleri ya da dizileri par\u00e7alayabilmekte ve bu i\u015flem neticesinde i\u015fimize...<\/p>\n","protected":false},"author":1,"featured_media":8497,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2443,2145],"tags":[2450,2453,2440,2449,2452,2451,2454],"class_list":["post-8505","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-ecmascript-6","category-node-js","tag-destructuring","tag-diziler-icin-destructuring","tag-ecmascript-6","tag-ecmascript-6-destructuring","tag-ic-ice-diziler-icin-destructuring","tag-ic-objeler-icin-destructuring","tag-objeler-icin-destructuring"],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts\/8505","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/comments?post=8505"}],"version-history":[{"count":10,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts\/8505\/revisions"}],"predecessor-version":[{"id":8516,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts\/8505\/revisions\/8516"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/media\/8497"}],"wp:attachment":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/media?parent=8505"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/categories?post=8505"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/tags?post=8505"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}