JavaScript, esnekli\u011fi ve \u00e7ok paradigmal\u0131 yap\u0131s\u0131 sayesinde geli\u015ftiricilere geni\u015f bir ara\u00e7 yelpazesi sunar. Bu ara\u00e7lar aras\u0131nda, \u00f6zellikle modern JavaScript geli\u015ftirmesinde ve fonksiyonel programlama prensiplerinin benimsenmesinde kritik rol oynayan \u00fc\u00e7 dizi metodu bulunmaktad\u0131r: Geleneksel Bu makalede, JavaScript’in bu g\u00fc\u00e7l\u00fc \u00fc\u00e7l\u00fcs\u00fcn\u00fc detayl\u0131 bir \u015fekilde inceleyece\u011fiz. Her bir metodun ne i\u015fe yarad\u0131\u011f\u0131n\u0131, nas\u0131l kullan\u0131ld\u0131\u011f\u0131n\u0131, s\u00f6zdizimini, \u00e7e\u015fitli \u00f6rneklerle pratik uygulamalar\u0131n\u0131 ve dikkat edilmesi gereken noktalar\u0131 ad\u0131m ad\u0131m ele alaca\u011f\u0131z. Amac\u0131m\u0131z, bu metotlar\u0131 etkin bir \u015fekilde kullanarak daha modern, performansl\u0131 ve okunabilir JavaScript kodlar\u0131 yazman\u0131z i\u00e7in size kapsaml\u0131 bir rehber sunmakt\u0131r.<\/p>\n Parametreleri a\u00e7\u0131klayal\u0131m: Bir say\u0131 dizisindeki her eleman\u0131n karesini al\u0131p yeni bir dizi olu\u015ftural\u0131m:<\/p>\n Burada, ok fonksiyonu Bir isimler dizisindeki her ismi b\u00fcy\u00fck harfe \u00e7evirelim:<\/p>\n Kullan\u0131c\u0131 nesnelerinden olu\u015fan bir dizimiz olsun ve sadece isimlerini i\u00e7eren bir dizi veya belirli bilgileri i\u00e7eren yeni nesneler olu\u015ftural\u0131m.<\/p>\n Bu \u00f6rnek, Bazen eleman\u0131n kendi de\u011ferinin yan\u0131 s\u0131ra indeksine de ihtiyac\u0131m\u0131z olabilir:<\/p>\n * Veri D\u00f6n\u00fc\u015f\u00fcm\u00fc:<\/strong> API’den gelen verileri UI’da g\u00f6sterilecek formata \u00e7evirmek. * Yan Etkiler (Side Effects):<\/strong> Parametreleri a\u00e7\u0131klayal\u0131m: Bir say\u0131 dizisindeki \u00e7ift say\u0131lar\u0131 bulup yeni bir dizi olu\u015ftural\u0131m:<\/p>\n Burada, Bir kelime dizisinden “A” harfi ile ba\u015flayanlar\u0131 se\u00e7elim:<\/p>\n Kullan\u0131c\u0131 nesnelerinden olu\u015fan bir diziden sadece aktif olanlar\u0131 se\u00e7elim:<\/p>\n Birden fazla ko\u015ful da belirleyebiliriz:<\/p>\n Bazen belirli indekslerdeki elemanlar\u0131 filtrelemek isteyebiliriz:<\/p>\n Burada * Arama ve Filtreleme:<\/strong> Bir listeden veya tablodan kullan\u0131c\u0131 girdisine g\u00f6re elemanlar\u0131 filtrelemek. * Boolean D\u00f6n\u00fc\u015f De\u011feri:<\/strong> Callback fonksiyonu her zaman bir boolean (true\/false) de\u011fer d\u00f6nd\u00fcrmelidir. Yanl\u0131\u015fl\u0131kla ba\u015fka bir de\u011fer d\u00f6nd\u00fcr\u00fcl\u00fcrse, JavaScript bu de\u011feri boolean’a d\u00f6n\u00fc\u015ft\u00fcr\u00fcr (truthy\/falsy de\u011ferler). \u00d6rne\u011fin, Parametreleri a\u00e7\u0131klayal\u0131m: En klasik Burada E\u011fer Bu durumda \u0130\u00e7 i\u00e7e ge\u00e7mi\u015f dizilerden olu\u015fan bir diziyi tek bir dizi haline getirelim:<\/p>\n Burada Nesne dizisindeki elemanlar\u0131 belirli bir \u00f6zelli\u011fe g\u00f6re gruplay\u0131p yeni bir nesne olu\u015ftural\u0131m:<\/p>\n Bu \u00f6rnek, Bir dizideki her eleman\u0131n ka\u00e7 kez ge\u00e7ti\u011fini sayan bir nesne olu\u015ftural\u0131m:<\/p>\n Bu \u00f6rnekler, * Veri Toplama\/\u00d6zetleme:<\/strong> Bir dizideki say\u0131lar\u0131n toplam\u0131n\u0131, ortalamas\u0131n\u0131, en b\u00fcy\u00fck\/en k\u00fc\u00e7\u00fck de\u011ferini bulma. * map()<\/code>, filter()<\/code> ve reduce()<\/code>. Bu metotlar, diziler \u00fczerinde d\u00f6nme, d\u00f6n\u00fc\u015ft\u00fcrme ve \u00f6zetleme i\u015flemlerini \u00e7ok daha temiz, okunabilir ve yan etkilerden ar\u0131nd\u0131r\u0131lm\u0131\u015f bir \u015fekilde yapmam\u0131z\u0131 sa\u011flar.<\/p>\nfor<\/code> d\u00f6ng\u00fcleri ile de bu i\u015flemler yap\u0131labilirken, map()<\/code>, filter()<\/code> ve reduce()<\/code> gibi y\u00fcksek dereceli fonksiyonlar (higher-order functions), kodumuzu daha deklaratif (ne yap\u0131laca\u011f\u0131n\u0131 belirten) hale getirir, imperatif (nas\u0131l yap\u0131laca\u011f\u0131n\u0131 belirten) yakla\u015f\u0131mdan uzakla\u015ft\u0131r\u0131r. Bu, \u00f6zellikle b\u00fcy\u00fck ve karma\u015f\u0131k projelerde kodun anla\u015f\u0131l\u0131rl\u0131\u011f\u0131n\u0131 ve s\u00fcrd\u00fcr\u00fclebilirli\u011fini art\u0131r\u0131r. Ayr\u0131ca, orijinal diziyi de\u011fi\u015ftirmemeleri (immutable olmalar\u0131) sayesinde veri ak\u0131\u015f\u0131n\u0131 daha \u00f6ng\u00f6r\u00fclebilir k\u0131lar ve hatalar\u0131 azalt\u0131r.<\/p>\nmap() Metodu: Dizileri D\u00f6n\u00fc\u015ft\u00fcrmenin G\u00fc\u00e7l\u00fc Yolu<\/h2>\n
map() Nedir?<\/h3>\n
map()<\/code> metodu, bir dizinin her eleman\u0131 \u00fczerinde belirtilen bir fonksiyonu \u00e7a\u011f\u0131rarak yeni bir dizi olu\u015fturur. Orijinal diziye dokunmaz, yani onu de\u011fi\u015ftirmez. Her zaman orijinal diziyle ayn\u0131 uzunlukta yeni bir dizi d\u00f6nd\u00fcr\u00fcr. Temel amac\u0131, bir dizideki elemanlar\u0131 belirli bir kurala g\u00f6re d\u00f6n\u00fc\u015ft\u00fcrmek ve bu d\u00f6n\u00fc\u015ft\u00fcr\u00fclm\u00fc\u015f elemanlarla yeni bir koleksiyon olu\u015fturmakt\u0131r. \u00d6rne\u011fin, bir say\u0131 dizisindeki her say\u0131n\u0131n karesini almak veya bir nesne dizisindeki her nesnenin belirli bir \u00f6zelli\u011fini se\u00e7mek gibi i\u015flemler i\u00e7in idealdir.<\/p>\nmap() S\u00f6zdizimi<\/h3>\n
map()<\/code> metodunun temel s\u00f6zdizimi a\u015fa\u011f\u0131daki gibidir:<\/p>\narray.map(callbackFunction(currentValue, index, array), thisArg)<\/code><\/pre>\n
\n* callbackFunction<\/code><\/strong>: Her dizi eleman\u0131 \u00fczerinde y\u00fcr\u00fct\u00fclecek bir fonksiyon. Bu fonksiyon \u00fc\u00e7 arg\u00fcman alabilir:
\n * currentValue<\/code><\/strong>: \u0130\u015flenmekte olan mevcut dizi eleman\u0131. Bu arg\u00fcman zorunludur.
\n * index<\/code><\/strong> (iste\u011fe ba\u011fl\u0131): \u0130\u015flenmekte olan mevcut eleman\u0131n indeksi.
\n * array<\/code><\/strong> (iste\u011fe ba\u011fl\u0131): map()<\/code> metodunun \u00e7a\u011fr\u0131ld\u0131\u011f\u0131 dizi.
\n* thisArg<\/code><\/strong> (iste\u011fe ba\u011fl\u0131): callbackFunction<\/code> i\u00e7inde this<\/code> olarak kullan\u0131lacak bir de\u011fer. \u00c7o\u011fu durumda, \u00f6zellikle modern JavaScript’te ok fonksiyonlar\u0131 (arrow functions) kullan\u0131ld\u0131\u011f\u0131nda bu parametreye ihtiya\u00e7 duyulmaz, \u00e7\u00fcnk\u00fc ok fonksiyonlar\u0131 this<\/code> de\u011ferini \u00e7evreleyen kapsamdan al\u0131r.<\/p>\ncallbackFunction<\/code> her bir eleman i\u00e7in bir de\u011fer d\u00f6nd\u00fcrmelidir ve bu de\u011fer, yeni dizinin ilgili eleman\u0131 olur.<\/p>\nmap() \u00d6rnekleri<\/h3>\n
1. Temel D\u00f6n\u00fc\u015f\u00fcm: Say\u0131lar\u0131n Karesini Alma<\/h4>\n
const sayilar = [1, 2, 3, 4, 5];\n\n\/\/ Her say\u0131n\u0131n karesini alan yeni bir dizi olu\u015ftur\nconst kareler = sayilar.map(sayi => sayi * sayi);\n\nconsole.log(kareler); \/\/ \u00c7\u0131kt\u0131: [1, 4, 9, 16, 25]\nconsole.log(sayilar); \/\/ \u00c7\u0131kt\u0131: [1, 2, 3, 4, 5] (Orijinal dizi de\u011fi\u015fmedi)<\/code><\/pre>\nsayi => sayi * sayi<\/code> her sayi<\/code> i\u00e7in \u00e7a\u011fr\u0131l\u0131r ve karesini d\u00f6nd\u00fcr\u00fcr.<\/p>\n2. Metin D\u00f6n\u00fc\u015f\u00fcm\u00fc: \u0130simleri B\u00fcy\u00fck Harfe \u00c7evirme<\/h4>\n
const isimler = [\"ali\", \"ay\u015fe\", \"mehmet\", \"zeynep\"];\n\nconst buyukHarfIsimler = isimler.map(isim => isim.toUpperCase());\n\nconsole.log(buyukHarfIsimler); \/\/ \u00c7\u0131kt\u0131: [\"AL\u0130\", \"AY\u015eE\", \"MEHMET\", \"ZEYNEP\"]<\/code><\/pre>\n3. Nesne Dizilerini D\u00f6n\u00fc\u015ft\u00fcrme: Belirli \u00d6zellikleri Se\u00e7me veya Yeni \u00d6zellik Ekleme<\/h4>\n
const kullanicilar = [\n { id: 1, ad: \"Ahmet\", soyad: \"Y\u0131lmaz\", aktif: true },\n { id: 2, ad: \"Ay\u015fe\", soyad: \"Demir\", aktif: false },\n { id: 3, ad: \"Can\", soyad: \"Kara\", aktif: true }\n];\n\n\/\/ Sadece kullan\u0131c\u0131 adlar\u0131n\u0131 i\u00e7eren bir dizi olu\u015ftur\nconst kullaniciAdlari = kullanicilar.map(kullanici => kullanici.ad);\nconsole.log(kullaniciAdlari); \/\/ \u00c7\u0131kt\u0131: [\"Ahmet\", \"Ay\u015fe\", \"Can\"]\n\n\/\/ Kullan\u0131c\u0131lar\u0131n tam adlar\u0131n\u0131 ve aktiflik durumlar\u0131n\u0131 i\u00e7eren yeni nesneler olu\u015ftur\nconst kullaniciBilgileri = kullanicilar.map(kullanici => ({\n tamAd: ${kullanici.ad} ${kullanici.soyad}<\/code>,\n aktifMi: kullanici.aktif\n}));\nconsole.log(kullaniciBilgileri);\n\/* \u00c7\u0131kt\u0131:\n[\n { tamAd: 'Ahmet Y\u0131lmaz', aktifMi: true },\n { tamAd: 'Ay\u015fe Demir', aktifMi: false },\n { tamAd: 'Can Kara', aktifMi: true }\n]\n*\/<\/code><\/pre>\nmap()<\/code> metodunun nesne dizilerini farkl\u0131 bir yap\u0131ya d\u00f6n\u00fc\u015ft\u00fcrmek i\u00e7in ne kadar esnek kullan\u0131labilece\u011fini g\u00f6sterir.<\/p>\n4. \u0130ndeks Parametresini Kullanma<\/h4>\n
const urunler = [\"Elma\", \"Armut\", \"Kiraz\"];\n\nconst urunListesi = urunler.map((urun, index) => ${index + 1}. ${urun}<\/code>);\nconsole.log(urunListesi); \/\/ \u00c7\u0131kt\u0131: [\"1. Elma\", \"2. Armut\", \"3. Kiraz\"]<\/code><\/pre>\nmap() Kullan\u0131m Alanlar\u0131<\/h3>\n
\n* Yeni Veri Yap\u0131lar\u0131 Olu\u015fturma:<\/strong> Mevcut bir dizi veya nesne k\u00fcmesinden farkl\u0131 bir yap\u0131ya sahip yeni bir dizi olu\u015fturmak.
\n* Form \u0130\u015fleme:<\/strong> Bir formdaki input de\u011ferlerini belirli bir formata d\u00f6n\u00fc\u015ft\u00fcrmek.
\n* UI Bile\u015fenleri Olu\u015fturma:<\/strong> React, Vue gibi k\u00fct\u00fcphanelerde bir dizi veriden birden fazla UI bile\u015feni (\u00f6rne\u011fin bir liste) olu\u015fturmak.<\/p>\nmap() Dikkat Edilmesi Gerekenler<\/h3>\n
map()<\/code> metodunun callback fonksiyonu m\u00fcmk\u00fcn oldu\u011funca “saf” (pure) olmal\u0131d\u0131r; yani d\u0131\u015far\u0131daki bir durumu de\u011fi\u015ftirmemeli veya ayn\u0131 girdi i\u00e7in her zaman ayn\u0131 \u00e7\u0131kt\u0131y\u0131 \u00fcretmelidir. Callback i\u00e7inde orijinal dizi elemanlar\u0131n\u0131 veya d\u0131\u015far\u0131daki de\u011fi\u015fkenleri de\u011fi\u015ftirmek beklenmedik sonu\u00e7lara yol a\u00e7abilir.
\n* Performans:<\/strong> \u00c7ok b\u00fcy\u00fck diziler \u00fczerinde map()<\/code> kullan\u0131rken performans g\u00f6z \u00f6n\u00fcnde bulundurulmal\u0131d\u0131r, ancak modern JavaScript motorlar\u0131 bu metotlar\u0131 olduk\u00e7a optimize etmi\u015ftir. Genellikle manuel for<\/code> d\u00f6ng\u00fclerinden \u00e7ok daha okunabilir ve g\u00fcvenlidir.
\n* Bo\u015f Diziler:<\/strong> map()<\/code> bo\u015f bir dizi \u00fczerinde \u00e7a\u011fr\u0131ld\u0131\u011f\u0131nda, callback fonksiyonu asla \u00e7al\u0131\u015ft\u0131r\u0131lmaz ve bo\u015f bir dizi d\u00f6nd\u00fcr\u00fcl\u00fcr.
\n* forEach()<\/code> vs. map()<\/code>:<\/strong> E\u011fer bir dizi \u00fczerinde d\u00f6n\u00fcp sadece yan etkiler (console.log gibi) olu\u015fturmak istiyorsan\u0131z ve yeni bir diziye ihtiyac\u0131n\u0131z yoksa forEach()<\/code> kullanmal\u0131s\u0131n\u0131z. Yeni bir dizi olu\u015fturman\u0131z gerekiyorsa map()<\/code> tercih edilmelidir. forEach()<\/code> bir de\u011fer d\u00f6nd\u00fcrmezken, map()<\/code> her zaman yeni bir dizi d\u00f6nd\u00fcr\u00fcr.<\/p>\nfilter() Metodu: Dizilerden Se\u00e7im Yapman\u0131n Zarif Yolu<\/h2>\n
filter() Nedir?<\/h3>\n
filter()<\/code> metodu, bir dizinin elemanlar\u0131n\u0131 belirli bir ko\u015fula g\u00f6re filtreleyerek yeni bir dizi olu\u015fturur. map()<\/code> gibi, orijinal diziyi de\u011fi\u015ftirmez. Yaln\u0131zca belirtilen ko\u015fulu (testi) ge\u00e7en elemanlar\u0131 i\u00e7eren yeni bir dizi d\u00f6nd\u00fcr\u00fcr. Yeni dizi, orijinal diziden daha k\u0131sa olabilir veya hi\u00e7bir eleman ko\u015fulu sa\u011flamazsa bo\u015f bir dizi olabilir.<\/p>\nfilter() S\u00f6zdizimi<\/h3>\n
filter()<\/code> metodunun temel s\u00f6zdizimi de map()<\/code> metoduna benzerdir:<\/p>\narray.filter(callbackFunction(currentValue, index, array), thisArg)<\/code><\/pre>\n
\n* callbackFunction<\/code><\/strong>: Her dizi eleman\u0131 \u00fczerinde y\u00fcr\u00fct\u00fclecek bir fonksiyon. Bu fonksiyon \u00fc\u00e7 arg\u00fcman alabilir:
\n * currentValue<\/code><\/strong>: \u0130\u015flenmekte olan mevcut dizi eleman\u0131. Bu arg\u00fcman zorunludur.
\n * index<\/code><\/strong> (iste\u011fe ba\u011fl\u0131): \u0130\u015flenmekte olan mevcut eleman\u0131n indeksi.
\n * array<\/code><\/strong> (iste\u011fe ba\u011fl\u0131): filter()<\/code> metodunun \u00e7a\u011fr\u0131ld\u0131\u011f\u0131 dizi.
\n* thisArg<\/code><\/strong> (iste\u011fe ba\u011fl\u0131): callbackFunction<\/code> i\u00e7inde this<\/code> olarak kullan\u0131lacak bir de\u011fer.<\/p>\ncallbackFunction<\/code> her bir eleman i\u00e7in true<\/code> veya false<\/code> d\u00f6nd\u00fcrmelidir. E\u011fer true<\/code> d\u00f6nd\u00fcr\u00fcrse, o eleman yeni diziye dahil edilir; false<\/code> d\u00f6nd\u00fcr\u00fcrse, eleman atlan\u0131r.<\/p>\nfilter() \u00d6rnekleri<\/h3>\n
1. Say\u0131lar\u0131 Filtreleme: \u00c7ift Say\u0131lar\u0131 Bulma<\/h4>\n
const sayilar = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];\n\nconst ciftSayilar = sayilar.filter(sayi => sayi % 2 === 0);\n\nconsole.log(ciftSayilar); \/\/ \u00c7\u0131kt\u0131: [2, 4, 6, 8, 10]\nconsole.log(sayilar); \/\/ \u00c7\u0131kt\u0131: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10] (Orijinal dizi de\u011fi\u015fmedi)<\/code><\/pre>\nsayi => sayi % 2 === 0<\/code> fonksiyonu, sayi<\/code> \u00e7ift ise true<\/code>, tek ise false<\/code> d\u00f6nd\u00fcr\u00fcr.<\/p>\n2. Metinleri Filtreleme: Belirli Bir Harfle Ba\u015flayan Kelimeler<\/h4>\n
const kelimeler = [\"Elma\", \"Armut\", \"Muz\", \"Ananas\", \"\u00c7ilek\"];\n\nconst aIleBaslayanlar = kelimeler.filter(kelime => kelime.startsWith(\"A\"));\n\nconsole.log(aIleBaslayanlar); \/\/ \u00c7\u0131kt\u0131: [\"Armut\", \"Ananas\"]<\/code><\/pre>\nstartsWith()<\/code> metodu, bir string’in belirli bir \u00f6nekle ba\u015flay\u0131p ba\u015flamad\u0131\u011f\u0131n\u0131 kontrol eder.<\/p>\n3. Nesne Dizilerini Filtreleme: Aktif Kullan\u0131c\u0131lar\u0131 Bulma<\/h4>\n
const kullanicilar = [\n { id: 1, ad: \"Ahmet\", aktif: true },\n { id: 2, ad: \"Ay\u015fe\", aktif: false },\n { id: 3, ad: \"Can\", aktif: true },\n { id: 4, ad: \"Deniz\", aktif: false }\n];\n\nconst aktifKullanicilar = kullanicilar.filter(kullanici => kullanici.aktif);\n\nconsole.log(aktifKullanicilar);\n\/* \u00c7\u0131kt\u0131:\n[\n { id: 1, ad: 'Ahmet', aktif: true },\n { id: 3, ad: 'Can', aktif: true }\n]\n*\/<\/code><\/pre>\nconst yirmiYasUstuAktifler = kullanicilar.filter(kullanici => kullanici.aktif && kullanici.yas > 20);\n\/\/ (Yukar\u0131daki \u00f6rnekte ya\u015f \u00f6zelli\u011fi yok, varsay\u0131msal bir senaryo)<\/code><\/pre>\n4. \u0130ndeks Parametresini Kullanma<\/h4>\n
const liste = ['a', 'b', 'c', 'd', 'e'];\n\n\/\/ Tek indeksli elemanlar\u0131 filtrele\nconst tekIndeksli = liste.filter((_, index) => index % 2 !== 0);\nconsole.log(tekIndeksli); \/\/ \u00c7\u0131kt\u0131: [\"b\", \"d\"]<\/code><\/pre>\n_<\/code> kullan\u0131larak currentValue<\/code> parametresinin kullan\u0131lmad\u0131\u011f\u0131 belirtilmi\u015ftir, bu yayg\u0131n bir pratik.<\/p>\nfilter() Kullan\u0131m Alanlar\u0131<\/h3>\n
\n* Veri Validasyonu:<\/strong> Bir veri setindeki belirli kriterleri kar\u015f\u0131lamayan elemanlar\u0131 ay\u0131klamak.
\n* UI Durumu Y\u00f6netimi:<\/strong> Bir dizi \u00f6\u011fenin durumuna g\u00f6re (\u00f6rne\u011fin tamamlanm\u0131\u015f g\u00f6revler) farkl\u0131 listeler olu\u015fturmak.
\n* Gereksiz Verileri Kald\u0131rma:<\/strong> API yan\u0131tlar\u0131ndan veya yerel verilerden istenmeyen veya ge\u00e7ersiz \u00f6\u011feleri temizlemek.<\/p>\nfilter() Dikkat Edilmesi Gerekenler<\/h3>\n
0<\/code>, null<\/code>, undefined<\/code>, \"\"<\/code> gibi de\u011ferler false<\/code> olarak kabul edilir.
\n* Performans:<\/strong> T\u0131pk\u0131 map()<\/code> gibi, \u00e7ok b\u00fcy\u00fck dizilerde performans dikkate al\u0131nmal\u0131d\u0131r, ancak genellikle sorun te\u015fkil etmez.
\n* Bo\u015f Diziler:<\/strong> filter()<\/code> bo\u015f bir dizi \u00fczerinde \u00e7a\u011fr\u0131ld\u0131\u011f\u0131nda, callback fonksiyonu asla \u00e7al\u0131\u015ft\u0131r\u0131lmaz ve bo\u015f bir dizi d\u00f6nd\u00fcr\u00fcl\u00fcr.
\n find()<\/code> vs. filter()<\/code>:<\/strong> E\u011fer yaln\u0131zca ko\u015fulu sa\u011flayan <\/em>ilk* elemana ihtiyac\u0131n\u0131z varsa find()<\/code> metodunu kullanmal\u0131s\u0131n\u0131z. filter()<\/code> her zaman bir dizi d\u00f6nd\u00fcr\u00fcrken, find()<\/code> tek bir eleman veya undefined<\/code> d\u00f6nd\u00fcr\u00fcr.<\/p>\nreduce() Metodu: Dizileri Tek Bir De\u011fere \u0130ndirgeme Sanat\u0131<\/h2>\n
reduce() Nedir?<\/h3>\n
reduce()<\/code> metodu, bir dizinin her eleman\u0131 \u00fczerinde bir “reducer” fonksiyonunu (sizin sa\u011flad\u0131\u011f\u0131n\u0131z) y\u00fcr\u00fcterek diziyi tek bir \u00e7\u0131kt\u0131 de\u011ferine indirger. Bu \u00e7\u0131kt\u0131 de\u011feri bir say\u0131, bir string, bir nesne, bir dizi veya ba\u015fka herhangi bir veri tipi olabilir. reduce()<\/code> metodunun g\u00fcc\u00fc, diziyi belirli bir mant\u0131\u011fa g\u00f6re “toplayarak” veya “birle\u015ftirerek” tek bir sonu\u00e7 elde etmesinden gelir. Di\u011fer metotlardan farkl\u0131 olarak, reduce()<\/code>‘un d\u00f6nd\u00fcrd\u00fc\u011f\u00fc de\u011ferin tipi orijinal dizinin eleman tipinden farkl\u0131 olabilir.<\/p>\nreduce() S\u00f6zdizimi<\/h3>\n
reduce()<\/code> metodunun s\u00f6zdizimi di\u011ferlerinden biraz daha karma\u015f\u0131kt\u0131r, \u00e7\u00fcnk\u00fc bir “accumulator” (biriktirici) kavram\u0131n\u0131 i\u00e7erir:<\/p>\narray.reduce(callbackFunction(accumulator, currentValue, index, array), initialValue)<\/code><\/pre>\n
\n* callbackFunction<\/code><\/strong>: Her dizi eleman\u0131 \u00fczerinde y\u00fcr\u00fct\u00fclecek bir fonksiyon. Bu fonksiyon d\u00f6rt arg\u00fcman alabilir:
\n * accumulator<\/code><\/strong>: Callback fonksiyonunun \u00f6nceki \u00e7a\u011fr\u0131s\u0131ndan d\u00f6nd\u00fcr\u00fclen de\u011fer. \u0130lk \u00e7a\u011fr\u0131da, e\u011fer initialValue<\/code> sa\u011flanm\u0131\u015fsa initialValue<\/code> de\u011feri, sa\u011flanmam\u0131\u015fsa dizinin ilk eleman\u0131 olur. Bu arg\u00fcman zorunludur.
\n * currentValue<\/code><\/strong>: \u0130\u015flenmekte olan mevcut dizi eleman\u0131. \u0130lk \u00e7a\u011fr\u0131da, e\u011fer initialValue<\/code> sa\u011flanm\u0131\u015fsa dizinin ilk eleman\u0131, sa\u011flanmam\u0131\u015fsa dizinin ikinci eleman\u0131 olur. Bu arg\u00fcman zorunludur.
\n * index<\/code><\/strong> (iste\u011fe ba\u011fl\u0131): \u0130\u015flenmekte olan mevcut eleman\u0131n indeksi.
\n * array<\/code><\/strong> (iste\u011fe ba\u011fl\u0131): reduce()<\/code> metodunun \u00e7a\u011fr\u0131ld\u0131\u011f\u0131 dizi.
\n* initialValue<\/code><\/strong> (iste\u011fe ba\u011fl\u0131): accumulator<\/code> i\u00e7in ba\u015flang\u0131\u00e7 de\u011feri. Bu parametre \u00e7ok \u00f6nemlidir ve sa\u011flanmas\u0131 \u015fiddetle tavsiye edilir.<\/p>\ncallbackFunction<\/code> her \u00e7a\u011fr\u0131da bir de\u011fer d\u00f6nd\u00fcrmelidir ve bu de\u011fer bir sonraki \u00e7a\u011fr\u0131da accumulator<\/code> olarak kullan\u0131l\u0131r. reduce()<\/code> metodu, t\u00fcm dizi elemanlar\u0131 i\u015flendikten sonra accumulator<\/code>‘\u0131n son de\u011ferini d\u00f6nd\u00fcr\u00fcr.<\/p>\nreduce() \u00d6rnekleri<\/h3>\n
1. Dizideki T\u00fcm Say\u0131lar\u0131n Toplam\u0131n\u0131 Bulma<\/h4>\n
reduce()<\/code> \u00f6rne\u011fi, bir say\u0131 dizisindeki t\u00fcm say\u0131lar\u0131n toplam\u0131n\u0131 bulmakt\u0131r:<\/p>\nconst sayilar = [1, 2, 3, 4, 5];\n\n\/\/ Ba\u015flang\u0131\u00e7 de\u011feri 0 olan bir accumulator ile toplam\u0131 bul\nconst toplam = sayilar.reduce((acc, current) => acc + current, 0);\n\nconsole.log(toplam); \/\/ \u00c7\u0131kt\u0131: 15 (0 + 1 + 2 + 3 + 4 + 5)<\/code><\/pre>\n0<\/code> initialValue<\/code> olarak verilmi\u015ftir. \u0130lk \u00e7a\u011fr\u0131da acc<\/code> 0, current<\/code> 1 olur. Sonraki \u00e7a\u011fr\u0131larda acc<\/code> \u00f6nceki toplam, current<\/code> ise s\u0131radaki eleman olur.<\/p>\ninitialValue<\/code> verilmezse:<\/p>\nconst toplamYokBaslangicDegeri = sayilar.reduce((acc, current) => acc + current);\nconsole.log(toplamYokBaslangicDegeri); \/\/ \u00c7\u0131kt\u0131: 15<\/code><\/pre>\nacc<\/code> ilk eleman (1), current<\/code> ikinci eleman (2) ile ba\u015flar. Dizi bo\u015f oldu\u011funda veya beklenmedik tiplerde elemanlar oldu\u011funda sorunlara yol a\u00e7abilece\u011fi i\u00e7in initialValue<\/code> her zaman belirtmek daha g\u00fcvenlidir.<\/p>\n2. Diziyi D\u00fczle\u015ftirme (Flattening an Array)<\/h4>\n
const icIceDizi = [[1, 2], [3, 4], [5, 6]];\n\nconst duzDizi = icIceDizi.reduce((acc, current) => acc.concat(current), []);\n\nconsole.log(duzDizi); \/\/ \u00c7\u0131kt\u0131: [1, 2, 3, 4, 5, 6]<\/code><\/pre>\ninitialValue<\/code> olarak bo\u015f bir dizi []<\/code> verilmi\u015ftir. Her ad\u0131mda current<\/code> (bir i\u00e7 dizi) acc<\/code> (biriktirilen d\u00fcz dizi) ile birle\u015ftirilir.<\/p>\n3. Nesneleri Bir \u00d6zelli\u011fe G\u00f6re Gruplama<\/h4>\n
const kisiler = [\n { ad: \"Ahmet\", yas: 30, sehir: \"Ankara\" },\n { ad: \"Ay\u015fe\", yas: 25, sehir: \"\u0130stanbul\" },\n { ad: \"Can\", yas: 30, sehir: \"\u0130zmir\" },\n { ad: \"Deniz\", yas: 25, sehir: \"Ankara\" }\n];\n\nconst kisilerYasGruplu = kisiler.reduce((acc, kisi) => {\n const yas = kisi.yas;\n if (!acc[yas]) {\n acc[yas] = [];\n }\n acc[yas].push(kisi);\n return acc;\n}, {}); \/\/ Ba\u015flang\u0131\u00e7 de\u011feri bo\u015f bir nesne {}\n\nconsole.log(kisilerYasGruplu);\n\/* \u00c7\u0131kt\u0131:\n{\n '25': [\n { ad: 'Ay\u015fe', yas: 25, sehir: '\u0130stanbul' },\n { ad: 'Deniz', yas: 25, sehir: 'Ankara' }\n ],\n '30': [\n { ad: 'Ahmet', yas: 30, sehir: 'Ankara' },\n { ad: 'Can', yas: 30, sehir: '\u0130zmir' }\n ]\n}\n*\/<\/code><\/pre>\nreduce()<\/code> metodunun karma\u015f\u0131k veri yap\u0131lar\u0131 olu\u015fturmak i\u00e7in ne kadar g\u00fc\u00e7l\u00fc oldu\u011funu g\u00f6sterir. initialValue<\/code> olarak bo\u015f bir nesne ({})<\/code> kullan\u0131lm\u0131\u015ft\u0131r ve accumulator<\/code> bu nesneyi temsil eder.<\/p>\n4. Bir Dizideki Elemanlar\u0131n Say\u0131s\u0131n\u0131 Bulma (Frekans Sayac\u0131)<\/h4>\n
const meyveler = [\"elma\", \"armut\", \"elma\", \"muz\", \"armut\", \"elma\"];\n\nconst meyveSayilari = meyveler.reduce((acc, meyve) => {\n acc[meyve] = (acc[meyve] || 0) + 1;\n return acc;\n}, {}); \/\/ Ba\u015flang\u0131\u00e7 de\u011feri bo\u015f bir nesne {}\n\nconsole.log(meyveSayilari); \/\/ \u00c7\u0131kt\u0131: { elma: 3, armut: 2, muz: 1 }<\/code><\/pre>\n5. map() ve filter() Metotlar\u0131n\u0131 reduce() ile Uygulama<\/h4>\n
reduce()<\/code> metodunun ne kadar esnek oldu\u011funu g\u00f6stermek i\u00e7in, map()<\/code> ve filter()<\/code>‘\u0131n i\u015flevlerini reduce()<\/code> ile nas\u0131l taklit edebilece\u011fimize bakal\u0131m:<\/p>\nmap()<\/code>‘i reduce()<\/code> ile taklit etme:<\/strong><\/p>\nconst sayilar = [1, 2, 3, 4, 5];\n\nconst karelerReduce = sayilar.reduce((acc, sayi) => {\n acc.push(sayi * sayi);\n return acc;\n}, []); \/\/ Ba\u015flang\u0131\u00e7 de\u011feri bo\u015f bir dizi []\n\nconsole.log(karelerReduce); \/\/ \u00c7\u0131kt\u0131: [1, 4, 9, 16, 25]<\/code><\/pre>\nfilter()<\/code>‘\u0131 reduce()<\/code> ile taklit etme:<\/strong><\/p>\nconst sayilar = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];\n\nconst ciftSayilarReduce = sayilar.reduce((acc, sayi) => {\n if (sayi % 2 === 0) {\n acc.push(sayi);\n }\n return acc;\n}, []); \/\/ Ba\u015flang\u0131\u00e7 de\u011feri bo\u015f bir dizi []\n\nconsole.log(ciftSayilarReduce); \/\/ \u00c7\u0131kt\u0131: [2, 4, 6, 8, 10]<\/code><\/pre>\nreduce()<\/code>‘un temel bir yap\u0131 ta\u015f\u0131 oldu\u011funu ve di\u011fer dizi metotlar\u0131n\u0131n onun \u00fczerine in\u015fa edilebilece\u011fini g\u00f6sterir. Ancak, belirli bir i\u015f i\u00e7in \u00f6zel olarak tasarlanm\u0131\u015f map()<\/code> veya filter()<\/code> gibi metotlar\u0131 kullanmak genellikle daha okunabilir ve amaca daha uygun bir yakla\u015f\u0131md\u0131r.<\/p>\nreduce() Kullan\u0131m Alanlar\u0131<\/h3>\n
\n* Karma\u015f\u0131k Veri D\u00f6n\u00fc\u015f\u00fcmleri:<\/strong> Bir diziden farkl\u0131 bir yap\u0131ya (nesne, i\u00e7 i\u00e7e dizi vb.) sahip tek bir sonu\u00e7 olu\u015fturma.
\n* Sepet Toplam\u0131 Hesaplama:<\/strong> Bir al\u0131\u015fveri\u015f sepetindeki \u00fcr\u00fcnlerin toplam fiyat\u0131n\u0131 hesaplama.
\n* URL Parametrelerini \u0130\u015fleme:<\/strong> Bir URL’deki parametre string’ini bir nesneye d\u00f6n\u00fc\u015ft\u00fcrme.
\n* S\u00f6zl\u00fck Olu\u015fturma:<\/strong> Bir dizi anahtar-de\u011fer \u00e7iftinden bir nesne olu\u015fturma.<\/p>\nreduce() Dikkat Edilmesi Gerekenler<\/h3>\n
initialValue<\/code>‘in \u00d6nemi:<\/strong> initialValue<\/code> parametresini her zaman sa\u011flamak, kodunuzu daha g\u00fcvenli ve \u00f6ng\u00f6r\u00fclebilir hale getirir.
\n * E\u011fer dizi bo\u015fsa ve initialValue<\/code> sa\u011flanmam\u0131\u015fsa, TypeError<\/code> hatas\u0131 f\u0131rlat\u0131l\u0131r.
\n * E\u011fer dizi tek elemanl\u0131ysa ve initialValue<\/code> sa\u011flanmam\u0131\u015fsa, reduce()<\/code> callback fonksiyonunu \u00e7al\u0131\u015ft\u0131rmadan do\u011frudan bu tek eleman\u0131 d\u00f6nd\u00fcr\u00fcr.
\n * initialValue<\/code>‘in tipi, reduce()<\/code> metodunun d\u00f6nd\u00fcrece\u011fi nihai de\u011ferin tipini belirler.
\n* Okunabilirlik:<\/strong> reduce()<\/code> \u00e7ok g\u00fc\u00e7l\u00fc ve esnek olsa da, bazen karma\u015f\u0131k callback fonksiyonlar\u0131 nedeniyle okunabilirli\u011fi azaltabilir. E\u011fer map()<\/code> veya filter()<\/code> gibi daha spesifik bir metot i\u015finizi g\u00f6r\u00fcyorsa, onu tercih etmek genellikle daha iyidir. reduce()<\/code>‘u ger\u00e7ekten bir “biriktirme” veya “indirgeme” i\u015flemi gerekti\u011finde kullan\u0131n.
\n* Yan Etkiler:<\/strong> accumulator<\/code>‘\u0131 do\u011frudan de\u011fi\u015ftirmek yerine, yeni bir accumulator<\/code> de\u011feri d\u00f6nd\u00fcrmek (\u00f6zellikle nesne veya dizi gibi referans tipleriyle \u00e7al\u0131\u015f\u0131rken) fonksiyonel programlama prensiplerine daha uygundur ve beklenmedik yan etkileri \u00f6nler. \u00d6rne\u011fin, bir diziye eleman eklerken acc.push()<\/code> yerine [...acc, current]<\/code> kullanmak daha “saf” bir yakla\u015f\u0131md\u0131r. Ancak, performans hassasiyeti olan durumlarda push<\/code> gibi mutatif i\u015flemler tercih edilebilir, bu bir denge meselesidir.<\/p>\nMetotlar\u0131 Zincirleme (Chaining): Ak\u0131c\u0131 ve Etkili \u0130\u015flemler<\/h2>\n