[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"blog-post-javascriptte-dizi-ve-obje-manipulasyonu-map-filter-reduce-ornekleri":3},{"dataItem":4,"heading":36,"metaData":38,"schema":81},["Reactive",5],{"id":6,"title":7,"summary":8,"content":9,"seo_title":10,"seo_description":11,"seo_keywords":12,"slug":13,"createdAt":14,"updatedAt":14,"blog_categories":15,"authors":19,"image":24,"thumb":25,"image_webp":26,"thumb_webp":27,"rating":28,"heading_title":7,"heading_sub_title":17,"readingTime":29,"url":34,"comments":35,"meta_cover":24},25693,"JavaScript'te dizi ve obje manipülasyonu: map, filter, reduce örnekleri","Bu rehber, JavaScript başlangıç kodları bağlamında map, filter ve reduce metodlarını ve spread operatörü ile Object.assign kullanımını örneklerle açıklıyor.","\u003Ch2>Giriş\u003C/h2>\n\u003Cp>Bu rehber, JavaScript başlangıç kodları bağlamında diziler ve objeler üzerinde sık kullanılan fonksiyonel yaklaşımları — \u003Cstrong>map\u003C/strong>, \u003Cstrong>filter\u003C/strong>, \u003Cstrong>reduce\u003C/strong> — ile obje manipülasyonunda kullanılan \u003Cstrong>spread operatörü\u003C/strong> ve \u003Cstrong>Object.assign\u003C/strong> kullanımını örneklerle anlatır. Amaç, hem kavramsal anlayış sağlamak hem de gerçek dünya görevleri için pratik kod şablonları sunmaktır.\u003C/p>\n\u003Cp>Tanımlar ve örnekler için başvurduğum rehberler arasında Emre Demir'in yazısı ve Web Tasarım ve Kodlama’nın ilgili sayfası vardır; detaylı açıklamalar için bkz. \u003Ca href=\"https://www.emredemir.tech/blog/map-reduce-filter\">Emre Demir\u003C/a> ve \u003Ca href=\"https://www.webtasarimivekodlama.com/javascript-dizi-eleman-ekleme-ve-silme\">Web Tasarım ve Kodlama\u003C/a>. Diğer faydalı kaynaklar: Medium ve Ichi Pro rehberleri.\u003C/p>\n\n\u003Ch2>Temel kavramlar: map, filter, reduce\u003C/h2>\n\n\u003Ch3>map — dizi elemanlarını dönüştürme\u003C/h3>\n\u003Cp>\u003Cstrong>map\u003C/strong>, dizinin her elemanı için bir dönüşüm uygular ve aynı uzunlukta, yeni bir dizi döndürür. Orijinal dizi değişmez; dönüşüm fonksiyonu her eleman için çağrılır (eleman, indeks, orijinal dizi argümanlarıyla).\u003C/p>\n\u003Cp>Örnek:\u003C/p>\n\u003Cp>\u003Cstrong>const numbers = [1, 2, 3, 4];\u003Cbr>\nconst doubled = numbers.map(n => n * 2); // [2, 4, 6, 8]\u003C/strong>\u003C/p>\n\u003Cp>map hakkında daha ayrıntılı tanım ve örnekler için \u003Ca href=\"https://www.emredemir.tech/blog/map-reduce-filter\">Emre Demir\u003C/a> kaynağına bakabilirsiniz.\u003C/p>\n\n\u003Ch3>filter — koşula göre seçim\u003C/h3>\n\u003Cp>\u003Cstrong>filter\u003C/strong>, dizinin her elemanını verilen koşula göre test eder ve koşulu sağlayan elemanlardan yeni bir dizi döndürür. Yine orijinal dizi değişmez.\u003C/p>\n\u003Cp>Örnek:\u003C/p>\n\u003Cp>\u003Cstrong>const evens = numbers.filter(n => n % 2 === 0); // [2, 4]\u003C/strong>\u003C/p>\n\n\u003Ch3>reduce — birleştirme ve indirgeme\u003C/h3>\n\u003Cp>\u003Cstrong>reduce\u003C/strong>, dizinin elemanlarını tek bir değere indirgemek için kullanılır: toplam, çarpım, nesne map'i oluşturma, gruplayıcılar vb. Bir \u003Cem>accumulator\u003C/em> (kümülatör) taşınır ve her adımda güncellenir. Genellikle ikinci argüman olarak başlangıç değeri (initial value) verilir.\u003C/p>\n\u003Cp>Örnek (toplam):\u003C/p>\n\u003Cp>\u003Cstrong>const sum = numbers.reduce((acc, n) => acc + n, 0); // 10\u003C/strong>\u003C/p>\n\u003Cp>Reduce ve başlangıç değeriyle ilgili uyarılar ve örnekler için şu kaynakları inceleyebilirsiniz: \u003Ca href=\"https://medium.com/@BerkayKulak/javascript-map-filter-reduce-fonksiyonlar%C4%B1-a6dec63934f2\">Medium\u003C/a>, \u003Ca href=\"https://ichi.pro/tr/javascript-te-map-filter-ve-reduce-54854408496733\">Ichi Pro\u003C/a>.\u003C/p>\n\n\u003Chr>\n\n\u003Ch2>Pratik örnekler: adım adım\u003C/h2>\n\n\u003Ch3>Örnek 1 — Sadece e-posta adreslerini almak (map)\u003C/h3>\n\u003Cp>Senaryo: Kullanıcı objelerinden yalnızca e-posta adreslerini bir diziye almak istiyoruz.\u003C/p>\n\u003Cp>\u003Cstrong>const users = [{ name: 'Ali', email: 'ali@example.com' },{ name: 'Ayşe', email: 'ayse@example.com' }];\u003Cbr>\nconst emails = users.map(u => u.email); // ['ali@example.com', 'ayse@example.com']\u003C/strong>\u003C/p>\n\n\u003Ch3>Örnek 2 — Aktif kullanıcıların isimleri (filter + map zinciri)\u003C/h3>\n\u003Cp>Senaryo: Sadece \u003Cem>active\u003C/em> olan kullanıcıların isimlerini bir dizide toplamak.\u003C/p>\n\u003Cp>\u003Cstrong>const activeNames = users.filter(u => u.active).map(u => u.name);\u003C/strong>\u003C/p>\n\u003Cp>Zincirleme kullanım, okunabilirliği artırır; ancak performans açısından ara diziler oluşturur (aşağıda bununla ilgili notlar var).\u003C/p>\n\n\u003Ch3>Örnek 3 — Yaş toplamı ve gruplayıcı (reduce)\u003C/h3>\n\u003Cp>Toplam yaş:\u003C/p>\n\u003Cp>\u003Cstrong>const totalAge = users.reduce((acc, u) => acc + (u.age || 0), 0);\u003C/strong>\u003C/p>\n\u003Cp>Kullanıcıları role göre gruplamak:\u003C/p>\n\u003Cp>\u003Cstrong>const grouped = users.reduce((acc, user) => {\u003Cbr>\n  const key = user.role || 'unknown';\u003Cbr>\n  if (!acc[key]) acc[key] = [];\u003Cbr>\n  acc[key].push(user);\u003Cbr>\n  return acc;\u003Cbr>\n}, {});\u003C/strong>\u003C/p>\n\n\u003Ch3>Örnek 4 — Frekans sayacı (reduce ile)\u003C/h3>\n\u003Cp>Bir dizi içindeki etiketlerin kaç kez geçtiğini saymak:\u003C/p>\n\u003Cp>\u003Cstrong>const tags = ['js','css','js','html'];\u003Cbr>\nconst freq = tags.reduce((acc, t) => { acc[t] = (acc[t] || 0) + 1; return acc; }, {}); // { js: 2, css: 1, html: 1 }\u003C/strong>\u003C/p>\n\n\u003Chr>\n\n\u003Ch2>Objelerle çalışmak: spread ve Object.assign\u003C/h2>\n\u003Cp>Objeleri kopyalamak veya birleştirmek için iki sık kullanılan yöntem vardır: spread operatörü (\u003Cstrong>{ ...obj }\u003C/strong>) ve \u003Cstrong>Object.assign()\u003C/strong>. Her ikisi de yüzeysel (shallow) kopya oluşturur; iç içe (nested) objeler referans olarak taşınır.\u003C/p>\n\u003Cp>Örnek kopyalama ve birleştirme:\u003C/p>\n\u003Cp>\u003Cstrong>const original = { a: 1, nested: { b: 2 } };\u003Cbr>\nconst copy = { ...original }; // shallow copy\u003Cbr>\nconst merged = Object.assign({}, original, { c: 3 });\u003C/strong>\u003C/p>\n\u003Cp>Önemli not: Eğer \u003Cem>nested\u003C/em> bir obje içeriğini değiştirdiğinizde, hem orijinal hem de kopya etkilenir çünkü iç obje referans olarak paylaşılır. Derin kopya (deep clone) ihtiyaçlarında basit yöntem olarak \u003Cstrong>JSON.parse(JSON.stringify(obj))\u003C/strong> kullanılabilir, ancak bu yöntem Date, RegExp, fonksiyon gibi özel türleri korumaz. Modern ortamlarda ayrıca derin kopya için farklı yaklaşımlar bulunmaktadır; kullanım senaryonuza göre en uygun yöntemi seçin.\u003C/p>\n\n\u003Ch2>Performans ve en iyi uygulamalar\u003C/h2>\n\u003Cp>- map, filter ve reduce fonksiyonları her biri dizi üzerinde tam bir geçiş (iteration) yapar. Zincirleme map().filter().map() kullanımı okunabilirliği artırır ama ara diziler yaratır; çok büyük dizilerde bellek ve hız maliyeti olabilir.\u003Cbr>\n- Eğer aynı anda filtreleme ve toplama yapmak istiyorsanız, reduce ile tek geçişte hem süzme hem toplama yapabilirsiniz (örnek: aktif kullanıcıların yaş toplamı). Bu, bazı durumlarda daha hızlıdır ve ara dizileri ortadan kaldırır.\u003C/p>\n\u003Cp>- Callback fonksiyonları içinde orijinal diziyi değiştirmekten kaçının. Fonksiyonel yöntemlerin avantajı tarafsız (pure) dönüşümlere izin vermesidir; bu, hataları azaltır ve test yazmayı kolaylaştırır.\u003C/p>\n\u003Cp>- Gerçek performans ihtiyaçlarında ölçüm (profiling) yapın; mikro optimizasyonlar yerine okunabilirliği ve bakım kolaylığını önceliklendirin.\u003C/p>\n\n\u003Ch2>Sık yapılan hatalar ve çözümleri\u003C/h2>\n\u003Cul>\n  \u003Cli>\u003Cstrong>arrow-return hatası:\u003C/strong> Küçük kenar: \u003Cstrong>arr.map(x => { x * 2 })\u003C/strong> ifadesi undefined döndürür; doğru kullanım \u003Cstrong>arr.map(x => x * 2)\u003C/strong> veya \u003Cstrong>arr.map(x => { return x * 2; })\u003C/strong> şeklindedir.\u003C/li>\n  \u003Cli>\u003Cstrong>reduce başlangıç değeri eksikliği:\u003C/strong> Boş dizilerde \u003Cstrong>reduce\u003C/strong> çağrıldığında başlangıç değeri verilmezse hata alınır; genelde ikinci argüman olarak başlangıç değeri verin.\u003C/li>\n  \u003Cli>\u003Cstrong>yan etki için map kullanmak:\u003C/strong> Eğer amaç sadece döngüsel yan etki yapmaksa \u003Cstrong>forEach\u003C/strong> tercih edilir; map yeni bir dizi oluşturur.\u003C/li>\n  \u003Cli>\u003Cstrong>Object.assign ve spread'ın yüzeysel kopya olduğunu unutmamak:\u003C/strong> Nested objeler için derin kopya stratejisi uygulayın.\u003C/li>\n\u003C/ul>\n\n\u003Ch2>Hızlı kontrol listesi (checklist)\u003C/h2>\n\u003Cul>\n  \u003Cli>Transformasyon için map, seçim için filter, birleştirme/hesaplama için reduce kullanın.\u003C/li>\n  \u003Cli>Map kullanıyorsanız dönüş değeri döndürdüğünüzden emin olun.\u003C/li>\n  \u003Cli>Reduce için daima başlangıç değeri verin; özellikle boş diziler için.\u003C/li>\n  \u003Cli>Objeyi kopyalarken spread/Object.assign ile sadece yüzeysel kopya alındığını unutmayın.\u003C/li>\n  \u003Cli>Zincirleme işlemlerin okunabilirlik vs. performans dengesini değerlendirin.\u003C/li>\n  \u003Cli>Kodunuzu küçük örneklerle test ederek beklenen çıktıyı doğrulayın.\u003C/li>\n\u003C/ul>\n\n\u003Chr>\n\n\u003Ch2>Özet\u003C/h2>\n\u003Cp>map, filter ve reduce, JavaScript'te diziler üzerinde sık başvurulan, okunabilir ve fonksiyonel yaklaşımlar sunan metodlardır. Obje manipülasyonunda spread ve Object.assign hızlı ve okunabilir çözümler sağlar; ancak shallow copy davranışı ve reduce başlangıç değeri gibi ayrıntılar göz önünde bulundurulmalıdır. Daha fazla teknik detay ve örnekler için \u003Ca href=\"https://www.emredemir.tech/blog/map-reduce-filter\">Emre Demir\u003C/a> ve \u003Ca href=\"https://www.webtasarimivekodlama.com/javascript-dizi-eleman-ekleme-ve-silme\">Web Tasarım ve Kodlama\u003C/a> kaynaklarına bakabilirsiniz.\u003C/p>\n\n\u003Cp>Bu rehberdeki kod örnekleri öğretim amaçlıdır; üretim ortamında kullanmadan önce kendi testlerinizi yapmanızı öneririm.\u003C/p>\n\n\u003Chr>\n\n\u003Cp>\u003Cstrong>Kaynaklar:\u003C/strong>\u003Cbr>\n\u003Ca href=\"https://www.emredemir.tech/blog/map-reduce-filter\">https://www.emredemir.tech/blog/map-reduce-filter\u003C/a>\u003Cbr>\n\u003Ca href=\"https://www.webtasarimivekodlama.com/javascript-dizi-eleman-ekleme-ve-silme\">https://www.webtasarimivekodlama.com/javascript-dizi-eleman-ekleme-ve-silme\u003C/a>\u003Cbr>\n\u003Ca href=\"https://medium.com/@BerkayKulak/javascript-map-filter-reduce-fonksiyonlar%C4%B1-a6dec63934f2\">https://medium.com/@BerkayKulak/javascript-map-filter-reduce-fonksiyonlar%C4%B1-a6dec63934f2\u003C/a>\u003Cbr>\n\u003Ca href=\"https://ichi.pro/tr/javascript-te-map-filter-ve-reduce-54854408496733\">https://ichi.pro/tr/javascript-te-map-filter-ve-reduce-54854408496733\u003C/a>\u003C/p>","JavaScript'te dizi ve obje manipülasyonu — map, filter, \u2028and","JavaScript başlangıç kodları için map, filter ve reduce metodlarının nasıl çalıştığını, spread operatörü ve Object.assign ile obje kopyalama örneklerini ve en","javascript başlangıç kodları, map örnekleri, filter kullanımı, reduce örneği, spread operator, Object.assign örnek","javascriptte-dizi-ve-obje-manipulasyonu-map-filter-reduce-ornekleri","2026-04-08T12:12:12.000Z",{"id":16,"title":17,"slug":18},213,"JS Array ve Object Manipülasyonu","js-array-object-manipulasyonu",{"id":20,"name":21,"nickname":22,"slug":23},93,"Onur Tekin","CodeCraftsman","onur-tekin","/media/blog/a37fca5c9cdea341dd4ce8dc8f435fc6.jpg","/media/blog/a37fca5c9cdea341dd4ce8dc8f435fc6_thumb.jpg","/media/blog/a37fca5c9cdea341dd4ce8dc8f435fc6.webp","/media/blog/a37fca5c9cdea341dd4ce8dc8f435fc6_thumb.webp",null,{"minutes":30,"wordCount":31,"imageCount":32,"formatted":33},5,917,0,"5 dk okuma süresi","/blog/js-array-object-manipulasyonu/javascriptte-dizi-ve-obje-manipulasyonu-map-filter-reduce-ornekleri",[],["Reactive",37],{"title":7,"subTitle":17,"image":24},["Reactive",39],{"title":10,"meta":40,"link":75},[41,43,45,48,51,54,57,60,63,66,69,71,73],{"hid":42,"name":42,"content":11},"description",{"hid":44,"name":44,"content":12},"keywords",{"hid":46,"name":46,"content":47},"author","Başlangıç Seviyesi Kod & Snippet Rehberi",{"hid":49,"name":49,"content":50},"robots","index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1",{"hid":52,"property":52,"content":53},"og:type","website",{"hid":55,"property":55,"content":56},"og:title","Başlangıç Kod & Snippet Rehberi | KodÖğreniyorum",{"hid":58,"property":58,"content":59},"og:description","Yeni başlayanlara yönelik kısa kod örnekleri, snippet'ler ve adım adım alıştırmalar. Hızlı uygulamalarla temel programlama mantığını pekiştir.",{"hid":61,"property":61,"content":62},"og:image","https://kodogreniyorum.com/media/blog/a37fca5c9cdea341dd4ce8dc8f435fc6.jpg",{"hid":64,"property":64,"content":65},"og:url","https://kodogreniyorum.com/blog/js-array-object-manipulasyonu/javascriptte-dizi-ve-obje-manipulasyonu-map-filter-reduce-ornekleri",{"hid":67,"name":67,"content":68},"twitter:card","summary_large_image",{"hid":70,"name":70,"content":56},"twitter:title",{"hid":72,"name":72,"content":59},"twitter:description",{"hid":74,"name":74,"content":62},"twitter:image",[76,78],{"rel":77,"href":65},"canonical",{"rel":79,"href":80},"amphtml","https://amp.kodogreniyorum.com/blog/js-array-object-manipulasyonu/javascriptte-dizi-ve-obje-manipulasyonu-map-filter-reduce-ornekleri",["Reactive",82],{"@context":83,"@graph":84},"https://schema.org",[85,98],{"@type":86,"headline":10,"image":62,"author":87,"publisher":90,"datePublished":14,"dateModified":14,"mainEntityOfPage":96,"description":11},"BlogPosting",{"@type":88,"name":21,"url":89},"Person","https://kodogreniyorum.com/yazarlar/onur-tekin",{"@type":91,"name":47,"logo":92},"Organization",{"@type":93,"url":94,"width":95,"height":95},"ImageObject","https://kodogreniyorum.com/img/icons/favicon.png",32,{"@type":97,"@id":65},"WebPage",{"@type":99,"itemListElement":100},"BreadcrumbList",[101,106,110,113],{"@type":102,"position":103,"name":104,"item":105},"ListItem",1,"Ana Sayfa","https://kodogreniyorum.com",{"@type":102,"position":107,"name":108,"item":109},2,"Blog","https://kodogreniyorum.com/blog",{"@type":102,"position":111,"name":17,"item":112},3,"https://kodogreniyorum.com/blog/js-array-object-manipulasyonu",{"@type":102,"position":114,"name":7,"item":65},4]