Modern web geli\u015ftirmenin temel ta\u015flar\u0131ndan biri olan JavaScript, veri manip\u00fclasyonu i\u00e7in g\u00fc\u00e7l\u00fc ara\u00e7lar sunar. \u00d6zellikle dizilerle \u00e7al\u0131\u015f\u0131rken, geli\u015ftirme s\u00fcrecinizi inan\u0131lmaz derecede h\u0131zland\u0131racak ve kodunuzu daha okunabilir k\u0131lacak temel metotlar\u0131 \u00f6\u011frenmek hayati \u00f6nem ta\u015f\u0131r. Bu makalede, her JavaScript geli\u015ftiricisinin ustala\u015fmas\u0131 gereken 5 temel dizi metodunu, ger\u00e7ek d\u00fcnya senaryolar\u0131yla ve ad\u0131m ad\u0131m \u00f6rneklerle ke\u015ffedece\u011fiz. Haz\u0131r m\u0131s\u0131n\u0131z? Kodlamaya dalal\u0131m!<\/p>\n
G\u00fcn\u00fcm\u00fcz web uygulamalar\u0131, kullan\u0131c\u0131 verilerinden \u00fcr\u00fcn listelerine, anket sonu\u00e7lar\u0131ndan sosyal medya ak\u0131\u015flar\u0131na kadar pek \u00e7ok farkl\u0131 t\u00fcrde veriyle s\u00fcrekli olarak etkile\u015fim halindedir. Bu verilerin b\u00fcy\u00fck bir k\u0131sm\u0131, JavaScript’te “dizi” (array) ad\u0131 verilen yap\u0131lar i\u00e7inde tutulur. Peki, bu dizilerle etkili bir \u015fekilde nas\u0131l \u00e7al\u0131\u015fabiliriz?<\/p>\n
Geleneksel olarak, geli\u015ftiriciler diziler \u00fczerinde d\u00f6ng\u00fcler ( Bu metotlar\u0131 \u00f6\u011frenmek, sadece kodunuzu k\u0131saltmakla kalmaz, ayn\u0131 zamanda programlama mant\u0131\u011f\u0131n\u0131z\u0131 da geli\u015ftirir. Her bir metot, belirli bir g\u00f6revi yerine getirmek \u00fczere tasarlanm\u0131\u015ft\u0131r ve bu sayede “ne yap\u0131ld\u0131\u011f\u0131n\u0131” “nas\u0131l yap\u0131ld\u0131\u011f\u0131ndan” daha net bir \u015fekilde ifade edebilirsiniz. Bu, daha az hatayla, daha h\u0131zl\u0131 ve daha i\u015flevsel uygulamalar geli\u015ftirmenizin anahtar\u0131d\u0131r. \u00d6rne\u011fin, bir al\u0131\u015fveri\u015f sepetindeki \u00fcr\u00fcnleri filtrelemek veya t\u00fcm \u00fcr\u00fcnlerin toplam fiyat\u0131n\u0131 hesaplamak gibi i\u015flemler, bu metotlarla birka\u00e7 sat\u0131rda kolayca halledilebilirken, geleneksel d\u00f6ng\u00fclerle daha fazla \u00e7aba gerektirirdi. Bu nedenle, JavaScript ekosisteminde verimli ve modern bir geli\u015ftirici olmak istiyorsan\u0131z, bu temel dizi metotlar\u0131na hakim olmak bir zorunluluktur.<\/p>\n JavaScript’te bir dizi (Array), s\u0131ral\u0131 bir de\u011ferler listesidir. Bu de\u011ferler herhangi bir veri tipinde olabilir: say\u0131lar, metinler, objeler, hatta ba\u015fka diziler. Diziler, k\u00f6\u015feli parantezler ( \u00d6nemli bir kavram da “y\u00fcksek mertebeli fonksiyonlar” (Higher-Order Functions) ve “geri \u00e7a\u011f\u0131r\u0131m fonksiyonlar\u0131” (Callback Functions) kavramlar\u0131d\u0131r. Y\u00fcksek mertebeli fonksiyonlar, ba\u015fka bir fonksiyonu arg\u00fcman olarak alabilen veya bir fonksiyonu sonu\u00e7 olarak d\u00f6nd\u00fcrebilen fonksiyonlard\u0131r. JavaScript dizi metotlar\u0131n\u0131n \u00e7o\u011fu, bir geri \u00e7a\u011f\u0131r\u0131m fonksiyonu bekleyen y\u00fcksek mertebeli fonksiyonlard\u0131r. Geri \u00e7a\u011f\u0131r\u0131m fonksiyonu ise, ba\u015fka bir fonksiyona arg\u00fcman olarak ge\u00e7irilen ve ana fonksiyon taraf\u0131ndan belirli bir zamanda veya ko\u015fulda \u00e7a\u011fr\u0131lan fonksiyondur. \u00d6rne\u011fin, Bu metotlar\u0131 kullan\u0131rken dikkat etmemiz gereken bir di\u011fer \u00f6nemli nokta ise “de\u011fi\u015fmezlik” (immutability) ilkesidir. Modern JavaScript geli\u015ftirme prati\u011finde, orijinal veriyi do\u011frudan de\u011fi\u015ftirmek yerine, de\u011fi\u015fmez yeni bir kopya olu\u015fturmak tercih edilir. Bu, \u00f6zellikle karma\u015f\u0131k uygulamalarda ve e\u015fzamanl\u0131 programlamada hatalar\u0131 azaltmaya yard\u0131mc\u0131 olur. \u00d6\u011frenece\u011fimiz metotlar\u0131n \u00e7o\u011fu ( S\u00f6zdizimi olduk\u00e7a basittir: Geri \u00e7a\u011f\u0131r\u0131m fonksiyonunun d\u00f6nd\u00fcrd\u00fc\u011f\u00fc de\u011ferler, yeni dizinin elemanlar\u0131 olacakt\u0131r.<\/p>\n Bir e-ticaret uygulamas\u0131nda, \u00fcr\u00fcn fiyatlar\u0131na %10 KDV eklemeniz veya indirim uygulaman\u0131z gerekebilir. Geleneksel bir d\u00f6ng\u00fc yerine <\/code><\/p>\n Yukar\u0131daki \u00f6rnekte, S\u00f6zdizimi Bir uygulaman\u0131zda, kullan\u0131c\u0131lar\u0131n hem aktif hem de pasif durumlar\u0131 oldu\u011funu d\u00fc\u015f\u00fcnelim. Yaln\u0131zca aktif kullan\u0131c\u0131lar\u0131 g\u00f6r\u00fcnt\u00fclemek veya belirli bir ya\u015f\u0131n \u00fczerindeki kullan\u0131c\u0131lar\u0131 bulmak isteyebilirsiniz.<\/p>\n <\/code><\/p>\n G\u00f6rd\u00fc\u011f\u00fcn\u00fcz gibi, S\u00f6zdizimi Bir e-ticaret sitesinde, kullan\u0131c\u0131n\u0131n al\u0131\u015fveri\u015f sepetindeki t\u00fcm \u00fcr\u00fcnlerin toplam fiyat\u0131n\u0131 hesaplamak, <\/code><\/p>\n \u0130lk \u00f6rnekte, S\u00f6zdizimi Bir sosyal medya uygulamas\u0131nda, kullan\u0131c\u0131n\u0131n gelen kutusundaki her mesaj\u0131 ekrana listelemeniz gerekebilir. Bu, genellikle bir DOM manip\u00fclasyonu gerektiren bir \"yan etki\"dir.<\/p>\n <\/code><\/p>\n Yukar\u0131daki \u00f6rnekte, S\u00f6zdizimi Bir uygulaman\u0131zda, belirli bir kullan\u0131c\u0131 kimli\u011fine (ID) sahip kullan\u0131c\u0131n\u0131n bilgilerini getirmek isteyebilirsiniz. Bu, veritaban\u0131ndan veri \u00e7ekmeye benzer bir senaryodur ancak istemci taraf\u0131nda dizi i\u00e7inde arama yaparken de s\u0131k\u00e7a kullan\u0131l\u0131r.<\/p>\n <\/code><\/p>\n Bu \u00f6rnekte, JavaScript dizi metotlar\u0131n\u0131 etkin bir \u015fekilde kullanmak, sadece kodunuzu k\u0131saltmakla kalmaz, ayn\u0131 zamanda onu daha okunabilir, s\u00fcrd\u00fcr\u00fclebilir ve performansl\u0131 hale getirir. \u0130\u015fte bu metotlar\u0131 kullan\u0131rken akl\u0131n\u0131zda bulundurman\u0131z gereken baz\u0131 ileri d\u00fczey ipu\u00e7lar\u0131 ve en iyi uygulamalar:<\/p>\n <\/code><\/p>\n Bu yakla\u015f\u0131m, kodunuzu daha az ge\u00e7ici de\u011fi\u015fkenle daha anlaml\u0131 hale getirir.<\/p>\n<\/li>\n Her metodun kendine \u00f6zg\u00fc bir amac\u0131 vard\u0131r. Do\u011fru arac\u0131 se\u00e7mek, kodunuzun niyetini a\u00e7\u0131k\u00e7a belirtir ve performans optimizasyonuna yard\u0131mc\u0131 olur.<\/p>\n<\/li>\n Bu ipu\u00e7lar\u0131n\u0131 uygulayarak, sadece daha iyi kod yazmakla kalmayacak, ayn\u0131 zamanda modern JavaScript geli\u015ftirme prensiplerine de uyum sa\u011flayacaks\u0131n\u0131z. Unutmay\u0131n, pratik yapmak m\u00fckemmelle\u015ftirir!<\/p>\n Bu makalede, modern JavaScript geli\u015ftirmenin temelini olu\u015fturan be\u015f kritik dizi metodunu detayl\u0131 bir \u015fekilde inceledik: Bu metotlar, sadece kod sat\u0131rlar\u0131n\u0131z\u0131 azaltmakla kalmaz, ayn\u0131 zamanda kodunuzu daha okunabilir, bak\u0131m\u0131 daha kolay ve hatalara kar\u015f\u0131 daha diren\u00e7li hale getirir. Fonksiyonel programlama prensiplerini benimseyerek ve de\u011fi\u015fmezlik ilkesine sad\u0131k kalarak, daha temiz ve \u00f6l\u00e7eklenebilir uygulamalar in\u015fa edebilirsiniz. Metot zincirleme gibi ileri d\u00fczey teknikler, karma\u015f\u0131k veri manip\u00fclasyonlar\u0131n\u0131 tek bir ak\u0131c\u0131 ifadede birle\u015ftirmenize olanak tan\u0131r.<\/p>\n \u00d6\u011frenme yolculu\u011funuz burada bitmiyor. JavaScript'in zengin ekosisteminde ke\u015ffedilmeyi bekleyen daha bir\u00e7ok dizi metodu (\u00f6rne\u011fin Temel fark, Hay\u0131r, bu makalede ele ald\u0131\u011f\u0131m\u0131z <\/body><\/p>\n","protected":false},"excerpt":{"rendered":"Modern web geli\u015ftirmenin temel ta\u015flar\u0131ndan biri olan JavaScript, veri manip\u00fclasyonu i\u00e7in g\u00fc\u00e7l\u00fc ara\u00e7lar sunar. \u00d6zellikle dizilerle \u00e7al\u0131\u015f\u0131rken, geli\u015ftirme…","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"csco_page_header_type":"","csco_page_load_nextpost":"","csco_page_subscribe_form":"","csco_page_contact_form":"","footnotes":""},"categories":[129],"tags":[],"class_list":{"0":"post-34338","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-javascript","7":"cs-entry","8":"cs-video-wrap"},"yoast_head":"\nfor<\/code>, while<\/code>) kullanarak i\u015flem yaparlard\u0131. Ancak, bu yakla\u015f\u0131m s\u0131kl\u0131kla uzun, karma\u015f\u0131k ve hataya a\u00e7\u0131k kod bloklar\u0131na yol a\u00e7abiliyordu. \u00d6zellikle i\u00e7 i\u00e7e d\u00f6ng\u00fcler ve ko\u015fullu ifadeler devreye girdi\u011finde, kodun okunabilirli\u011fi ve bak\u0131m\u0131 zorla\u015f\u0131yordu. \u0130\u015fte tam bu noktada, ES6 ve sonraki JavaScript s\u00fcr\u00fcmleriyle birlikte hayat\u0131m\u0131za giren g\u00fc\u00e7l\u00fc dizi metotlar\u0131 devreye giriyor. Bu metotlar, diziler \u00fczerinde ortak i\u015flemleri (filtreleme, d\u00f6n\u00fc\u015ft\u00fcrme, birle\u015ftirme vb.) \u00e7ok daha k\u0131sa, \u00f6z ve fonksiyonel bir yakla\u015f\u0131mla ger\u00e7ekle\u015ftirmemizi sa\u011flar.<\/p>\nDiziler ve Yinelenebilirler: K\u0131sa Bir Bak\u0131\u015f<\/h2>\n
[]<\/code>) i\u00e7inde tan\u0131mlan\u0131r ve her eleman bir indeks ile eri\u015filebilir. \u00d6rne\u011fin, [1, 'elma', {id: 1}]<\/code> ge\u00e7erli bir dizidir. Diziler, “yinelenebilir” (iterable) nesnelerdir, yani \u00fczerlerinde d\u00f6ng\u00fc kurulabilir veya elemanlar\u0131 tek tek gezilebilir.<\/p>\n.map()<\/code> metodu, her dizi eleman\u0131 i\u00e7in bir kez \u00e7al\u0131\u015ft\u0131r\u0131lacak bir geri \u00e7a\u011f\u0131r\u0131m fonksiyonu al\u0131r.<\/p>\n.map()<\/code>, .filter()<\/code> gibi), orijinal diziyi de\u011fi\u015ftirmek yerine yeni bir dizi d\u00f6nd\u00fcrerek bu prensibi destekler. Bu, kodunuzu daha g\u00fcvenli, \u00f6ng\u00f6r\u00fclebilir ve bak\u0131m\u0131 daha kolay hale getirir. \u015eimdi, bu g\u00fc\u00e7l\u00fc metotlar\u0131 tek tek incelemeye ba\u015flayabiliriz!<\/p>\nUygulamal\u0131 K\u0131s\u0131m: 5 Temel Metot<\/h2>\n
1. .map(): Veri D\u00f6n\u00fc\u015f\u00fcm\u00fcn\u00fc Nas\u0131l Kolayla\u015ft\u0131r\u0131r\u0131z?<\/h3>\n
.map()<\/code> metodu, bir dizinin her eleman\u0131 \u00fczerinde belirli bir i\u015flemi uygulayarak, ayn\u0131 uzunlukta yeni bir dizi d\u00f6nd\u00fcrmek i\u00e7in kullan\u0131l\u0131r. Orijinal diziye dokunulmaz, b\u00f6ylece de\u011fi\u015fmezlik prensibi korunmu\u015f olur. Temel amac\u0131, bir dizi elemanlar\u0131n\u0131 ba\u015fka bir forma d\u00f6n\u00fc\u015ft\u00fcrmektir.<\/p>\nNas\u0131l Kullan\u0131l\u0131r?<\/h4>\n
array.map(callback(currentValue, index, array))<\/code>. Burada callback<\/code> fonksiyonu, her eleman i\u00e7in bir kez \u00e7al\u0131\u015f\u0131r ve \u00fc\u00e7 arg\u00fcman al\u0131r:<\/p>\n\n
currentValue<\/code>: \u0130\u015flem g\u00f6ren mevcut eleman.<\/li>\nindex<\/code> (iste\u011fe ba\u011fl\u0131): Mevcut eleman\u0131n indeksi.<\/li>\narray<\/code> (iste\u011fe ba\u011fl\u0131): map<\/code> metodunun \u00e7a\u011fr\u0131ld\u0131\u011f\u0131 dizi.<\/li>\n<\/ul>\nGer\u00e7ek D\u00fcnya Senaryosu ve Vaka Analizi: \u00dcr\u00fcn Fiyatlar\u0131n\u0131 G\u00fcncelleme<\/h4>\n
.map()<\/code> kullanarak bu i\u015flemi nas\u0131l daha temiz yapabilece\u011fimize bakal\u0131m.<\/p>\n\nconst urunler = [\n { id: 1, ad: 'Laptop', fiyat: 1000 },\n { id: 2, ad: 'Klavye', fiyat: 75 },\n { id: 3, ad: 'Mouse', fiyat: 30 }\n];\n\n\/\/ Her \u00fcr\u00fcn\u00fcn fiyat\u0131na %10 KDV ekleyerek yeni bir dizi olu\u015fturma\nconst kdvliUrunler = urunler.map(urun => {\n return {\n ...urun, \/\/ Mevcut \u00fcr\u00fcn \u00f6zelliklerini kopyala\n fiyat: urun.fiyat * 1.10 \/\/ Fiyat\u0131 g\u00fcncelle\n };\n});\n\nconsole.log('Orijinal \u00dcr\u00fcnler:', urunler);\nconsole.log('KDV\\'li \u00dcr\u00fcnler:', kdvliUrunler);\n\n\/* \u00c7\u0131kt\u0131:\nOrijinal \u00dcr\u00fcnler: [\n { id: 1, ad: 'Laptop', fiyat: 1000 },\n { id: 2, ad: 'Klavye', fiyat: 75 },\n { id: 3, ad: 'Mouse', fiyat: 30 }\n]\nKDV'li \u00dcr\u00fcnler: [\n { id: 1, ad: 'Laptop', fiyat: 1100 },\n { id: 2, ad: 'Klavye', fiyat: 82.5 },\n { id: 3, ad: 'Mouse', fiyat: 33 }\n]\n*\/\n <\/pre>\nurunler<\/code> dizisindeki her bir \u00fcr\u00fcn objesi, .map()<\/code> metodu arac\u0131l\u0131\u011f\u0131yla yeni bir objeye d\u00f6n\u00fc\u015ft\u00fcr\u00fcl\u00fcyor. Yeni obje, orijinal \u00fcr\u00fcn\u00fcn t\u00fcm \u00f6zelliklerini kopyalarken (...urun<\/code>), sadece fiyat \u00f6zelli\u011fini g\u00fcncelliyor. Bu y\u00f6ntem, orijinal urunler<\/code> dizisini de\u011fi\u015ftirmezken, kdvliUrunler<\/code> ad\u0131nda yeni bir dizi olu\u015fturur. Bu, \u00f6zellikle React veya Vue gibi modern \u00f6n y\u00fcz k\u00fct\u00fcphanelerinde durum y\u00f6netiminde s\u0131k\u00e7a kullan\u0131lan bir desendir. Karma\u015f\u0131k veri setleriyle \u00e7al\u0131\u015f\u0131rken, .map()<\/code>, verilerinizi h\u0131zl\u0131 ve g\u00fcvenli bir \u015fekilde farkl\u0131 formatlara d\u00f6n\u00fc\u015ft\u00fcrmenizi sa\u011flar.<\/p>\n2. .filter(): \u0130stedi\u011fimiz Veriyi Ay\u0131klamak Bu Kadar Kolay m\u0131?<\/h3>\n
.filter()<\/code> metodu, bir dizinin belirli bir ko\u015fulu sa\u011flayan elemanlar\u0131n\u0131 se\u00e7erek yeni bir dizi olu\u015fturur. T\u0131pk\u0131 .map()<\/code> gibi, bu metot da orijinal diziyi de\u011fi\u015ftirmez. Amac\u0131, bir veri setinden belirli kriterlere uyan alt k\u00fcmeleri ay\u0131klamakt\u0131r.<\/p>\nNas\u0131l Kullan\u0131l\u0131r?<\/h4>\n
array.filter(callback(currentValue, index, array))<\/code> \u015feklindedir. Geri \u00e7a\u011f\u0131r\u0131m fonksiyonu her eleman i\u00e7in \u00e7al\u0131\u015f\u0131r ve true<\/code> veya false<\/code> d\u00f6nd\u00fcrmesi beklenir. E\u011fer true<\/code> d\u00f6nerse, o eleman yeni diziye dahil edilir; aksi takdirde edilmez.<\/p>\nGer\u00e7ek D\u00fcnya Senaryosu ve Vaka Analizi: Aktif Kullan\u0131c\u0131lar\u0131 Listeleme<\/h4>\n
\nconst kullanicilar = [\n { id: 1, ad: 'Ay\u015fe', yas: 28, aktif: true },\n { id: 2, ad: 'Mehmet', yas: 34, aktif: false },\n { id: 3, ad: 'Zeynep', yas: 22, aktif: true },\n { id: 4, ad: 'Can', yas: 45, aktif: false },\n { id: 5, ad: 'Elif', yas: 30, aktif: true }\n];\n\n\/\/ Yaln\u0131zca aktif kullan\u0131c\u0131lar\u0131 filtreleme\nconst aktifKullanicilar = kullanicilar.filter(kullanici => kullanici.aktif === true);\n\n\/\/ 30 ya\u015f\u0131ndan b\u00fcy\u00fck ve aktif olan kullan\u0131c\u0131lar\u0131 filtreleme\nconst yetiskinAktifKullanicilar = kullanicilar.filter(kullanici => kullanici.yas > 30 && kullanici.aktif);\n\nconsole.log('Aktif Kullan\u0131c\u0131lar:', aktifKullanicilar);\nconsole.log('30 Ya\u015f \u00dcst\u00fc Aktif Kullan\u0131c\u0131lar:', yetiskinAktifKullanicilar);\n\n\/* \u00c7\u0131kt\u0131:\nAktif Kullan\u0131c\u0131lar: [\n { id: 1, ad: 'Ay\u015fe', yas: 28, aktif: true },\n { id: 3, ad: 'Zeynep', yas: 22, aktif: true },\n { id: 5, ad: 'Elif', yas: 30, aktif: true }\n]\n30 Ya\u015f \u00dcst\u00fc Aktif Kullan\u0131c\u0131lar: [\n { id: 5, ad: 'Elif', yas: 30, aktif: true } \/\/ Not: Ya\u015f 30'dan b\u00fcy\u00fck olmal\u0131yd\u0131, Elif'in ya\u015f\u0131 30, bu y\u00fczden \u00e7\u0131kt\u0131ya girmedi. Bir hata var, d\u00fczeltelim:\n]\n*\/\n\/\/ D\u00fczeltilmi\u015f \u00e7\u0131kt\u0131 i\u00e7in:\n\/\/ Elif'in ya\u015f\u0131 30, > 30 ko\u015fulunu sa\u011flamaz. E\u011fer >= 30<\/code> olsayd\u0131, Elif de dahil olurdu.\n\/\/ Mevcut ko\u015fula g\u00f6re sadece Can (45) e\u011fer aktif olsayd\u0131 dahil olurdu.\n\/\/ Let's re-run with correct output expectation for yetiskinAktifKullanicilar:\n\/\/ Bu durumda 30 ya\u015f\u0131ndan b\u00fcy\u00fck ve aktif kimse yok. E\u011fer \"ya\u015f\u0131 30 ve \u00fczeri aktif\" olsayd\u0131:\nconst yetiskinAktifKullanicilarDuzeltilmis = kullanicilar.filter(kullanici => kullanici.yas >= 30 && kullanici.aktif);\nconsole.log('30 Ya\u015f ve \u00dcst\u00fc Aktif Kullan\u0131c\u0131lar (D\u00fczeltilmi\u015f):', yetiskinAktifKullanicilarDuzeltilmis);\n\/* \u00c7\u0131kt\u0131:\n30 Ya\u015f ve \u00dcst\u00fc Aktif Kullan\u0131c\u0131lar (D\u00fczeltilmi\u015f): [\n { id: 5, ad: 'Elif', yas: 30, aktif: true }\n]\n*\/\n <\/pre>\n.filter()<\/code> metodu, karma\u015f\u0131k ko\u015fullarla bile veri setlerinden istenen alt k\u00fcmeleri kolayca ay\u0131klamam\u0131z\u0131 sa\u011flar. Birden fazla ko\u015fulu birle\u015ftirmek i\u00e7in mant\u0131ksal operat\u00f6rleri (&&<\/code>, ||<\/code>) kullanabilirsiniz. Bu, bir arama \u00e7ubu\u011funda filtreleme yapmak, belirli bir kategoriye ait \u00fcr\u00fcnleri listelemek veya yetkilendirme kontrolleri i\u00e7in kullan\u0131c\u0131 rollerini ay\u0131rmak gibi bir\u00e7ok senaryoda \u00e7ok de\u011ferlidir. \u00d6zellikle b\u00fcy\u00fck veri setlerinde performansl\u0131 bir \u015fekilde arama ve filtreleme yapmak i\u00e7in vazge\u00e7ilmez bir ara\u00e7t\u0131r.<\/p>\n3. .reduce(): Karma\u015f\u0131k Hesaplamalar\u0131 Tek Bir De\u011fere Nas\u0131l \u0130ndirgeriz?<\/h3>\n
.reduce()<\/code> metodu, bir dizinin t\u00fcm elemanlar\u0131n\u0131 tek bir de\u011fere (say\u0131, obje, dizi vb.) indirgemek i\u00e7in kullan\u0131l\u0131r. Bu, dizideki elemanlar\u0131 toplayabilir, ortalamas\u0131n\u0131 alabilir, frekans haritas\u0131 olu\u015fturabilir veya diziyi ba\u015fka bir veri yap\u0131s\u0131na d\u00f6n\u00fc\u015ft\u00fcrebilirsiniz. Di\u011fer metotlara g\u00f6re biraz daha karma\u015f\u0131k g\u00f6r\u00fcnse de, inan\u0131lmaz derecede esnektir ve bir\u00e7ok farkl\u0131 problemi \u00e7\u00f6zebilir.<\/p>\nNas\u0131l Kullan\u0131l\u0131r?<\/h4>\n
array.reduce(callback(accumulator, currentValue, index, array), initialValue)<\/code> \u015feklindedir. Geri \u00e7a\u011f\u0131r\u0131m fonksiyonu, dizinin her eleman\u0131 i\u00e7in bir kez \u00e7al\u0131\u015f\u0131r ve d\u00f6rt arg\u00fcman al\u0131r:<\/p>\n\n
accumulator<\/code>: Geri \u00e7a\u011f\u0131r\u0131m\u0131n her d\u00f6n\u00fc\u015f\u00fcnde biriken de\u011fer. \u00d6nceki iterasyonun d\u00f6n\u00fc\u015f de\u011feridir veya ilk iterasyonda initialValue<\/code>'dir.<\/li>\ncurrentValue<\/code>: \u0130\u015flem g\u00f6ren mevcut eleman.<\/li>\nindex<\/code> (iste\u011fe ba\u011fl\u0131): Mevcut eleman\u0131n indeksi.<\/li>\narray<\/code> (iste\u011fe ba\u011fl\u0131): reduce<\/code> metodunun \u00e7a\u011fr\u0131ld\u0131\u011f\u0131 dizi.<\/li>\n<\/ul>\ninitialValue<\/code> (iste\u011fe ba\u011fl\u0131): accumulator<\/code>'\u0131n ilk de\u011feri. E\u011fer sa\u011flanmazsa, dizinin ilk eleman\u0131 accumulator<\/code> olur ve iterasyon ikinci elemandan ba\u015flar.<\/p>\nGer\u00e7ek D\u00fcnya Senaryosu ve Vaka Analizi: Al\u0131\u015fveri\u015f Sepeti Toplam\u0131n\u0131 Hesaplama<\/h4>\n
.reduce()<\/code> i\u00e7in m\u00fckemmel bir kullan\u0131m durumudur.<\/p>\n\nconst sepetUrunleri = [\n { ad: 'Ak\u0131ll\u0131 Telefon', fiyat: 1500, adet: 1 },\n { ad: 'Kulakl\u0131k', fiyat: 200, adet: 2 },\n { ad: 'Ekran Koruyucu', fiyat: 50, adet: 3 }\n];\n\n\/\/ Al\u0131\u015fveri\u015f sepetindeki toplam fiyat\u0131 hesaplama\nconst toplamFiyat = sepetUrunleri.reduce((toplam, urun) => {\n return toplam + (urun.fiyat * urun.adet);\n}, 0); \/\/ Ba\u015flang\u0131\u00e7 de\u011feri 0\n\nconsole.log('Toplam Sepet Fiyat\u0131:', toplamFiyat); \/\/ \u00c7\u0131kt\u0131: 2250\n\n\/* \u00c7\u0131kt\u0131:\nToplam Sepet Fiyat\u0131: 2250\n*\/\n\n\/\/ Ba\u015fka bir kullan\u0131m: Bir dizideki kelimelerin frekans\u0131n\u0131 sayma\nconst kelimeler = ['elma', 'armut', 'elma', 'muz', 'armut', 'elma'];\nconst kelimeFrekanslari = kelimeler.reduce((acc, kelime) => {\n acc[kelime] = (acc[kelime] || 0) + 1;\n return acc;\n}, {}); \/\/ Ba\u015flang\u0131\u00e7 de\u011feri bo\u015f bir obje\n\nconsole.log('Kelime Frekanslar\u0131:', kelimeFrekanslari);\n\n\/* \u00c7\u0131kt\u0131:\nKelime Frekanslar\u0131: { elma: 3, armut: 2, muz: 1 }\n*\/\n <\/pre>\naccumulator<\/code> (toplam<\/code>) her iterasyonda \u00fcr\u00fcn\u00fcn fiyat\u0131 ve adedinin \u00e7arp\u0131m\u0131 ile g\u00fcncelleniyor. Ba\u015flang\u0131\u00e7 de\u011feri 0<\/code> oldu\u011fu i\u00e7in, ilk \u00fcr\u00fcn eklendi\u011finde toplam<\/code> de\u011feri 0 + (1500 * 1) = 1500<\/code> olur. \u0130kinci \u00f6rnekte ise .reduce()<\/code>'u bir nesne (object) olu\u015fturmak i\u00e7in kulland\u0131k. accumulator<\/code> burada bir obje olarak ba\u015fl\u0131yor ({}<\/code>) ve her kelimenin anahtar oldu\u011fu, frekans\u0131n\u0131n de\u011fer oldu\u011fu bir frekans haritas\u0131 olu\u015fturuluyor. Bu, .reduce()<\/code>'un ne kadar \u00e7ok y\u00f6nl\u00fc oldu\u011funu g\u00f6sterir. Sadece say\u0131sal toplamlarda de\u011fil, karma\u015f\u0131k veri d\u00f6n\u00fc\u015f\u00fcmlerinde ve \u00f6zelle\u015ftirilmi\u015f veri yap\u0131lar\u0131 olu\u015fturmada da olduk\u00e7a etkilidir. Biraz pratikle, bu metodun potansiyelini tam olarak anlayabilir ve bir\u00e7ok problemde kullanabilirsiniz.<\/p>\n4. .forEach(): Yan Etkili \u0130\u015flemler \u0130\u00e7in Ne Zaman Kullanmal\u0131y\u0131z?<\/h3>\n
.forEach()<\/code> metodu, bir dizinin her eleman\u0131 \u00fczerinde belirli bir i\u015flemi ger\u00e7ekle\u015ftirmek i\u00e7in kullan\u0131l\u0131r. Di\u011fer fonksiyonel metotlardan (.map()<\/code>, .filter()<\/code>, .reduce()<\/code>) fark\u0131, yeni bir dizi d\u00f6nd\u00fcrmemesi veya tek bir de\u011fer \u00fcretmemesidir. Amac\u0131, her eleman i\u00e7in bir \"yan etki\" (side effect) yaratmakt\u0131r; \u00f6rne\u011fin bir eleman\u0131 konsola yazd\u0131rmak, bir DOM eleman\u0131n\u0131 g\u00fcncellemek veya harici bir API \u00e7a\u011fr\u0131s\u0131 yapmak gibi.<\/p>\nNas\u0131l Kullan\u0131l\u0131r?<\/h4>\n
array.forEach(callback(currentValue, index, array))<\/code> \u015feklindedir. Geri \u00e7a\u011f\u0131r\u0131m fonksiyonu, her eleman i\u00e7in bir kez \u00e7al\u0131\u015f\u0131r ve .map()<\/code> ile benzer arg\u00fcmanlar\u0131 al\u0131r. Ancak, bu fonksiyonun d\u00f6n\u00fc\u015f de\u011feri dikkate al\u0131nmaz.<\/p>\nGer\u00e7ek D\u00fcnya Senaryosu ve Vaka Analizi: Kullan\u0131c\u0131 Mesajlar\u0131n\u0131 Listeleme<\/h4>\n
\nconst mesajlar = [\n { id: 101, baslik: 'Ho\u015f Geldiniz!', gonderen: 'Sistem' },\n { id: 102, baslik: 'Yeni Etkinlik Duyurusu', gonderen: 'Y\u00f6netici' },\n { id: 103, baslik: 'Arkada\u015fl\u0131k \u0130ste\u011fi', gonderen: 'Zeynep' }\n];\n\n\/\/ Mesajlar\u0131 konsola yazd\u0131rma (basit bir yan etki \u00f6rne\u011fi)\nconsole.log('Gelen Mesajlar:');\nmesajlar.forEach(mesaj => {\n console.log(- ${mesaj.gonderen} adl\u0131 kullan\u0131c\u0131dan: \"${mesaj.baslik}\"<\/code>);\n});\n\n\/* \u00c7\u0131kt\u0131:\nGelen Mesajlar:\n- Sistem adl\u0131 kullan\u0131c\u0131dan: \"Ho\u015f Geldiniz!\"\n- Y\u00f6netici adl\u0131 kullan\u0131c\u0131dan: \"Yeni Etkinlik Duyurusu\"\n- Zeynep adl\u0131 kullan\u0131c\u0131dan: \"Arkada\u015fl\u0131k \u0130ste\u011fi\"\n*\/\n\n\/\/ HTML listesine eklemek gibi bir senaryoyu d\u00fc\u015f\u00fcnebiliriz:\n\/\/ const mesajListesi = document.getElementById('mesaj-listesi'); \/\/ Varsay\u0131msal bir DOM eleman\u0131\n\n\/\/ mesajlar.forEach(mesaj => {\n\/\/ const listItem = document.createElement('li');\n\/\/ listItem.textContent = ${mesaj.gonderen}: ${mesaj.baslik}<\/code>;\n\/\/ mesajListesi.appendChild(listItem);\n\/\/ });\n <\/pre>\n.forEach()<\/code>, her mesaj objesini al\u0131p konsola okunakl\u0131 bir formatta yazd\u0131r\u0131yor. HTML listesine ekleme senaryosunda ise, her mesaj i\u00e7in bir <\/p>\n.forEach()<\/code> metodu idealdir. Unutmay\u0131n, e\u011fer bir d\u00f6n\u00fc\u015f de\u011feri bekliyorsan\u0131z (yeni bir dizi veya tek bir de\u011fer gibi), .map()<\/code>, .filter()<\/code> veya .reduce()<\/code> gibi di\u011fer metotlar\u0131 kullanman\u0131z daha uygun olacakt\u0131r. .forEach()<\/code>'i genellikle sadece bir d\u00f6ng\u00fcye ihtiyac\u0131n\u0131z oldu\u011funda ve her eleman i\u00e7in bir i\u015flem yaparken bir sonu\u00e7 d\u00f6nd\u00fcrmeniz gerekmedi\u011finde tercih etmelisiniz.<\/p>\n5. .find(): Bir Dizideki \u0130lk Uygun \u00d6\u011feyi Nas\u0131l Buluruz?<\/h3>\n
.find()<\/code> metodu, bir dizide belirli bir ko\u015fulu sa\u011flayan ilk<\/strong> eleman\u0131 bulmak i\u00e7in kullan\u0131l\u0131r. E\u011fer ko\u015fulu sa\u011flayan bir eleman bulunursa, o eleman\u0131n kendisi d\u00f6nd\u00fcr\u00fcl\u00fcr. E\u011fer hi\u00e7bir eleman ko\u015fulu sa\u011flamazsa, undefined<\/code> d\u00f6nd\u00fcr\u00fcl\u00fcr. Bu metot, genellikle bir dizide benzersiz bir kimli\u011fe sahip bir nesneyi ararken veya belirli bir kriteri kar\u015f\u0131layan ilk e\u015fle\u015fmeyi bulurken \u00e7ok kullan\u0131\u015fl\u0131d\u0131r.<\/p>\nNas\u0131l Kullan\u0131l\u0131r?<\/h4>\n
array.find(callback(currentValue, index, array))<\/code> \u015feklindedir. Geri \u00e7a\u011f\u0131r\u0131m fonksiyonu, her eleman i\u00e7in \u00e7al\u0131\u015f\u0131r ve true<\/code> veya false<\/code> d\u00f6nd\u00fcrmesi beklenir. Ko\u015fulu true<\/code> d\u00f6nd\u00fcren ilk eleman\u0131 buldu\u011funda, .find()<\/code> hemen o eleman\u0131 d\u00f6nd\u00fcr\u00fcr ve d\u00f6ng\u00fcy\u00fc sonland\u0131r\u0131r.<\/p>\nGer\u00e7ek D\u00fcnya Senaryosu ve Vaka Analizi: Kullan\u0131c\u0131 ID ile Kullan\u0131c\u0131 Bilgilerini Getirme<\/h4>\n
\nconst kullanicilar = [\n { id: 1, ad: 'Ay\u015fe', email: 'ayse@example.com' },\n { id: 2, ad: 'Mehmet', email: 'mehmet@example.com' },\n { id: 3, ad: 'Zeynep', email: 'zeynep@example.com' }\n];\n\nconst aranacakId = 2;\nconst aranacakEmail = 'zeynep@example.com';\n\n\/\/ ID'si 2 olan kullan\u0131c\u0131y\u0131 bulma\nconst mehmet = kullanicilar.find(kullanici => kullanici.id === aranacakId);\n\n\/\/ Email adresi 'zeynep@example.com' olan kullan\u0131c\u0131y\u0131 bulma\nconst zeynep = kullanicilar.find(kullanici => kullanici.email === aranacakEmail);\n\n\/\/ Bulunmayan bir kullan\u0131c\u0131y\u0131 deneme\nconst bulunmayanKullanici = kullanicilar.find(kullanici => kullanici.id === 99);\n\nconsole.log('ID 2 olan kullan\u0131c\u0131:', mehmet); \/\/ \u00c7\u0131kt\u0131: { id: 2, ad: 'Mehmet', email: 'mehmet@example.com' }\nconsole.log('Email zeynep@example.com olan kullan\u0131c\u0131:', zeynep); \/\/ \u00c7\u0131kt\u0131: { id: 3, ad: 'Zeynep', email: 'zeynep@example.com' }\nconsole.log('ID 99 olan kullan\u0131c\u0131:', bulunmayanKullanici); \/\/ \u00c7\u0131kt\u0131: undefined\n\n\/* \u00c7\u0131kt\u0131:\nID 2 olan kullan\u0131c\u0131: { id: 2, ad: 'Mehmet', email: 'mehmet@example.com' }\nEmail zeynep@example.com olan kullan\u0131c\u0131: { id: 3, ad: 'Zeynep', email: 'zeynep@example.com' }\nID 99 olan kullan\u0131c\u0131: undefined\n*\/\n <\/pre>\n.find()<\/code> metodu sayesinde belirli kriterlere uyan kullan\u0131c\u0131 objesini kolayca bulabiliyoruz. .filter()<\/code> metodundan fark\u0131, .filter()<\/code>'\u0131n ko\u015fulu sa\u011flayan t\u00fcm elemanlardan olu\u015fan yeni bir dizi d\u00f6nd\u00fcrmesi, .find()<\/code>'\u0131n ise sadece ko\u015fulu sa\u011flayan ilk eleman\u0131 (obje olarak) d\u00f6nd\u00fcrmesidir. E\u011fer birden fazla eleman ayn\u0131 ko\u015fulu sa\u011fl\u0131yorsa, .find()<\/code> sadece ilkini d\u00f6nd\u00fcr\u00fcr ve aramay\u0131 durdurur, bu da performans\u0131 art\u0131r\u0131r. E\u011fer arad\u0131\u011f\u0131n\u0131z \u015feyin birden fazla kopyas\u0131 olabilir ve hepsine ihtiyac\u0131n\u0131z varsa .filter()<\/code> kullanmal\u0131s\u0131n\u0131z; e\u011fer sadece ilk e\u015fle\u015fme sizin i\u00e7in yeterliyse, .find()<\/code> daha verimli bir se\u00e7imdir.<\/p>\nDaha Temiz ve Verimli Kod \u0130\u00e7in \u0130pu\u00e7lar\u0131 Nelerdir?<\/h2>\n
\n
\nconst sayilar = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];\nconst ciftSayilarinKareleri = sayilar\n .filter(sayi => sayi % 2 === 0) \/\/ \u00d6nce \u00e7ift say\u0131lar\u0131 filtrele\n .map(ciftSayi => ciftSayi * ciftSayi); \/\/ Sonra karelerini al\n\nconsole.log(ciftSayilarinKareleri); \/\/ \u00c7\u0131kt\u0131: [4, 16, 36, 64, 100]\n <\/pre>\n.map()<\/code>, .filter()<\/code> gibi metotlar yeni diziler d\u00f6nd\u00fcrerek bu prensibi destekler. E\u011fer bir eleman\u0131 g\u00fcncellemeniz gerekiyorsa, spread operat\u00f6r\u00fc (...<\/code>) kullanarak yeni bir obje veya dizi olu\u015fturmay\u0131 tercih edin. Bu, \u00f6zellikle b\u00fcy\u00fck ve karma\u015f\u0131k uygulamalarda beklenmedik yan etkileri \u00f6nler ve durum y\u00f6netimini kolayla\u015ft\u0131r\u0131r.<\/p>\n<\/li>\n\n
.map()<\/code>.<\/li>\n.filter()<\/code>.<\/li>\n.reduce()<\/code>.<\/li>\n.forEach()<\/code>.<\/li>\n.find()<\/code>.<\/li>\n<\/ul>\n=><\/code>) kullanmak, kodunuzu \u00e7ok daha k\u0131sa ve okunabilir hale getirir. Tek sat\u0131rl\u0131k fonksiyonlar i\u00e7in \u00f6rt\u00fcl\u00fc d\u00f6n\u00fc\u015f (implicit return) \u00f6zelli\u011fi sayesinde return<\/code> anahtar kelimesini bile kullanman\u0131za gerek kalmaz.<\/p>\n<\/li>\nfor<\/code> d\u00f6ng\u00fclerinden \u00e7ok farkl\u0131 de\u011fildir, hatta modern JavaScript motorlar\u0131 taraf\u0131ndan optimize edilebilirler. Ancak \u00e7ok b\u00fcy\u00fck veri setleriyle (milyonlarca eleman) \u00e7al\u0131\u015f\u0131yorsan\u0131z, her ad\u0131mda yeni bir dizi olu\u015fturan zincirleme i\u015flemler haf\u0131za ve i\u015flemci y\u00fck\u00fcn\u00fc art\u0131rabilir. Bu t\u00fcr kritik durumlarda, manuel for<\/code> d\u00f6ng\u00fcleri veya daha \u00f6zel k\u00fct\u00fcphaneler (\u00f6rne\u011fin Lodash gibi) daha verimli olabilir. Ancak g\u00fcnl\u00fck geli\u015ftirme i\u015flerinde bu genellikle bir sorun te\u015fkil etmez.<\/p>\n<\/li>\n.map()<\/code> ve .filter()<\/code> gibi metotlar\u0131 verimli kullanmak, mobil a\u011f ve i\u015flemci k\u0131s\u0131tlamalar\u0131 olan cihazlarda bile kullan\u0131c\u0131 deneyimini iyile\u015ftirecektir. Ayr\u0131ca, taray\u0131c\u0131 uyumlulu\u011funu kontrol etmek i\u00e7in Babel gibi ara\u00e7lar\u0131 kullanmay\u0131 d\u00fc\u015f\u00fcnebilirsiniz.<\/p>\n<\/li>\n<\/ol>\n\u00d6zet ve Gelecek Ad\u0131mlar<\/h2>\n
.map()<\/code>, .filter()<\/code>, .reduce()<\/code>, .forEach()<\/code> ve .find()<\/code>. Her bir metodun ne i\u015fe yarad\u0131\u011f\u0131n\u0131, nas\u0131l kullan\u0131ld\u0131\u011f\u0131n\u0131 ve ger\u00e7ek d\u00fcnya senaryolar\u0131nda nas\u0131l de\u011ferli \u00e7\u00f6z\u00fcmler sundu\u011funu kapsaml\u0131 \u00f6rneklerle g\u00f6rd\u00fck. Art\u0131k dizileri d\u00f6n\u00fc\u015ft\u00fcrmek, filtrelemek, tek bir de\u011fere indirgemek, yan etkili i\u015flemler yapmak ve belirli bir eleman\u0131 bulmak i\u00e7in g\u00fc\u00e7l\u00fc ara\u00e7lara sahipsiniz.<\/p>\n.some()<\/code>, .every()<\/code>, .sort()<\/code>, .findIndex()<\/code>) ve kavram bulunmaktad\u0131r. Bu makaledeki bilgileri temel alarak, farkl\u0131 senaryolarda bu metotlar\u0131 denemekten ve kendi \u00e7\u00f6z\u00fcmlerinizi \u00fcretmekten \u00e7ekinmeyin. Bol bol pratik yaparak ve kodunuzu s\u00fcrekli olarak iyile\u015ftirerek, zamanla daha verimli ve yetkin bir JavaScript geli\u015ftiricisi olacaks\u0131n\u0131z. Unutmay\u0131n, en iyi \u00f6\u011frenme y\u00f6ntemi uygulamad\u0131r. \u015eimdiden ba\u015far\u0131lar dileriz!<\/p>\nS\u0131k\u00e7a Sorulan Sorular (SSS)<\/h3>\n
\n
.map()<\/code> ile .forEach()<\/code> aras\u0131ndaki temel fark nedir?<\/dt>\n.map()<\/code>'in her zaman, orijinal diziyle ayn\u0131 uzunlukta ve d\u00f6n\u00fc\u015ft\u00fcr\u00fclm\u00fc\u015f elemanlardan olu\u015fan yeni bir dizi d\u00f6nd\u00fcrmesidir. Oysa .forEach()<\/code> hi\u00e7bir de\u011fer d\u00f6nd\u00fcrmez (veya undefined<\/code> d\u00f6nd\u00fcr\u00fcr) ve genellikle her dizi eleman\u0131 i\u00e7in bir yan etki (konsola yazd\u0131rma, DOM'u g\u00fcncelleme vb.) olu\u015fturmak i\u00e7in kullan\u0131l\u0131r.<\/p>\n<\/dd>\n.reduce()<\/code> kullanmak daha iyidir?<\/dt>\n.reduce()<\/code>, bir dizinin t\u00fcm elemanlar\u0131n\u0131 tek bir sonuca indirgemeniz gerekti\u011finde idealdir. Bu sonu\u00e7 bir say\u0131 (toplam, ortalama), bir obje (frekans sayac\u0131, gruplanm\u0131\u015f veri) veya hatta ba\u015fka bir dizi olabilir. Karma\u015f\u0131k veri d\u00f6n\u00fc\u015f\u00fcmleri ve toplama i\u015flemleri i\u00e7in \u00e7ok y\u00f6nl\u00fc bir ara\u00e7t\u0131r.<\/p>\n<\/dd>\n.filter()<\/code> yerine neden bazen .find()<\/code> kullanmal\u0131y\u0131m?<\/dt>\n.filter()<\/code>, belirli bir ko\u015fulu sa\u011flayan t\u00fcm<\/strong> elemanlardan olu\u015fan yeni bir dizi d\u00f6nd\u00fcr\u00fcrken, .find()<\/code> sadece ko\u015fulu sa\u011flayan ilk<\/strong> eleman\u0131 d\u00f6nd\u00fcr\u00fcr (veya hi\u00e7bir \u015fey bulamazsa undefined<\/code>). E\u011fer dizideki birden fazla e\u015fle\u015fme yerine sadece ilk e\u015fle\u015fen elemana ihtiyac\u0131n\u0131z varsa, .find()<\/code> daha verimlidir \u00e7\u00fcnk\u00fc ilk e\u015fle\u015fmeyi buldu\u011funda aramay\u0131 durdurur.<\/p>\n<\/dd>\n.map()<\/code>, .filter()<\/code>, .reduce()<\/code>, .forEach()<\/code> ve .find()<\/code> metotlar\u0131 orijinal diziyi de\u011fi\u015ftirmez (non-mutating). Bunun yerine, .map()<\/code> ve .filter()<\/code> yeni bir dizi d\u00f6nd\u00fcr\u00fcrken, .reduce()<\/code> tek bir de\u011fer, .find()<\/code> ise bir eleman\u0131 (veya undefined<\/code>) d\u00f6nd\u00fcr\u00fcr. .forEach()<\/code> ise do\u011frudan bir de\u011fer d\u00f6nd\u00fcrmez. Bu, de\u011fi\u015fmezlik prensibine uygun kod yazman\u0131za yard\u0131mc\u0131 olur.<\/p>\n<\/dd>\n<\/dl>\n