JavaScript’te Destrukt\u00fcrleme: Basitle\u015ftirilmi\u015f Kodlama<\/p>\n
Merhaba! Ben Fatih Soysal ve bug\u00fcn JavaScript’te destrukt\u00fcrlemenin b\u00fcy\u00fcs\u00fcn\u00fc ke\u015ffedece\u011fiz. Destrukt\u00fcrleme, nesne ve dizilerden de\u011ferleri ay\u0131klamay\u0131 inan\u0131lmaz derecede kolayla\u015ft\u0131ran, temiz ve okunabilir kod yazman\u0131za yard\u0131mc\u0131 olan g\u00fc\u00e7l\u00fc bir \u00f6zelliktir. \u00d6ncelikle, destrukt\u00fcrlemenin ne oldu\u011funu ve neden kullanman\u0131z gerekti\u011fini a\u00e7\u0131klayal\u0131m. Ard\u0131ndan, \u00e7e\u015fitli \u00f6rnekler ve a\u00e7\u0131klamalar ile konuyu derinlemesine inceleyece\u011fiz.<\/p>\n
JavaScript’te destrukt\u00fcrleme, nesnelerin veya dizilerin \u00f6zelliklerini veya elemanlar\u0131n\u0131, ayr\u0131 de\u011fi\u015fkenlere atamak i\u00e7in kullan\u0131lan bir s\u00f6zdizimidir. Bu, \u00f6zellikle \u00e7ok say\u0131da \u00f6zellik veya eleman i\u00e7eren nesne ve dizilerle \u00e7al\u0131\u015f\u0131rken kodu \u00e7ok daha temiz ve okunabilir hale getirir. \u00d6rne\u011fin, bir nesnenin bir\u00e7ok \u00f6zelli\u011fini tek tek ay\u0131klamak yerine, bunlar\u0131 tek bir sat\u0131rda destrukt\u00fcrleme ile alabilirsiniz. Bu, kodun okunabilirli\u011fini art\u0131r\u0131r ve hata olas\u0131l\u0131\u011f\u0131n\u0131 azalt\u0131r. Dahas\u0131, kod daha k\u0131sa ve \u00f6zl\u00fc hale gelir. Bu da bak\u0131m ve geli\u015ftirmeyi kolayla\u015ft\u0131r\u0131r.<\/p>\n
Bir diziyi destrukt\u00fcrleyerek, dizinin elemanlar\u0131n\u0131 ayr\u0131 de\u011fi\u015fkenlere atayabiliriz. \u0130\u015fte basit bir \u00f6rnek:<\/p>\n
\nconst renkler = [\"k\u0131rm\u0131z\u0131\", \"ye\u015fil\", \"mavi\"];\nconst [birinciRenk, ikinciRenk, ucuncuRenk] = renkler;\n\nconsole.log(birinciRenk); \/\/ \"k\u0131rm\u0131z\u0131\"\nconsole.log(ikinciRenk); \/\/ \"ye\u015fil\"\nconsole.log(ucuncuRenk); \/\/ \"mavi\"\n<\/code><\/pre>\nG\u00f6rd\u00fc\u011f\u00fcn\u00fcz gibi, dizinin elemanlar\u0131 s\u0131rayla de\u011fi\u015fkenlere atanm\u0131\u015ft\u0131r. \u0130ste\u011fe ba\u011fl\u0131 olarak, baz\u0131 elemanlar\u0131 atlayabilir veya varsay\u0131lan de\u011ferler belirleyebilirsiniz. \u00d6rne\u011fin:<\/p>\n
\nconst sayilar = [10, 20, 30, 40, 50];\nconst [a, , c, ...digerSayilar] = sayilar;\n\nconsole.log(a); \/\/ 10\nconsole.log(c); \/\/ 30\nconsole.log(digerSayilar); \/\/ [40, 50] \n<\/code><\/pre>\nBu \u00f6rnekte, ikinci eleman\u0131 atlad\u0131k ve kalan elemanlar\u0131 digerSayilar adl\u0131 bir diziye toplad\u0131k. Bu, esneklik sa\u011flar ve kodu daha y\u00f6netilebilir hale getirir.<\/p>\n
Nesne Destrukt\u00fcrlemesi<\/h2>\n
Nesne destrukt\u00fcrlemesi, dizilerdeki gibi \u00e7al\u0131\u015f\u0131r ancak burada nesnenin \u00f6zelliklerini kullan\u0131r\u0131z. \u00d6rne\u011fin:<\/p>\n
\nconst kisi = { ad: \"Ahmet\", soyad: \"Y\u0131lmaz\", yas: 30 };\nconst { ad, soyad, yas } = kisi;\n\nconsole.log(ad); \/\/ \"Ahmet\"\nconsole.log(soyad); \/\/ \"Y\u0131lmaz\"\nconsole.log(yas); \/\/ 30\n<\/code><\/pre>\nBu \u00f6rnekte, kisi nesnesinin ad, soyad ve yas \u00f6zelliklerini ayr\u0131 de\u011fi\u015fkenlere atad\u0131k. Nesne \u00f6zelliklerinin adlar\u0131yla de\u011fi\u015fken isimleri ayn\u0131 olmal\u0131d\u0131r. Farkl\u0131 isimler kullanmak isterseniz, a\u015fa\u011f\u0131daki gibi yapabilirsiniz:<\/p>\n
\nconst { ad: ad1, soyad: soyad1 } = kisi;\nconsole.log(ad1); \/\/ \"Ahmet\"\nconsole.log(soyad1); \/\/ \"Y\u0131lmaz\"\n<\/code><\/pre>\nAyr\u0131ca, varsay\u0131lan de\u011ferler de belirleyebilirsiniz:<\/p>\n
\nconst { sehir = \"\u0130stanbul\" } = kisi;\nconsole.log(sehir); \/\/ \"\u0130stanbul\" (\u00e7\u00fcnk\u00fc kisi nesnesinde sehir \u00f6zelli\u011fi yok)\n<\/code><\/pre>\nFonksiyonlarda Destrukt\u00fcrleme<\/h2>\n
Destrukt\u00fcrleme, fonksiyon parametrelerinde de kullan\u0131labilir. Bu, fonksiyonlara parametre ge\u00e7meyi ve bu parametreleri kullanmay\u0131 kolayla\u015ft\u0131r\u0131r.<\/p>\n
\nfunction selamla({ ad, soyad }) {\n console.log(Merhaba ${ad} ${soyad}!);\n}\n\nselamla({ ad: \"Ay\u015fe\", soyad: \"Kara\" }); \/\/ Merhaba Ay\u015fe Kara!\n<\/code><\/pre>\n