[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"blog-post-array-ve-object-islemleri-map-filter-reduce-ve-birlestirme-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},24305,"Array ve Object işlemleri: map, filter, reduce ve birleştirme örnekleri","Bu rehber, JavaScript'te diziler ve nesneler üzerinde map, filter, reduce, Object.assign ve spread operatörü kullanarak temiz ve immutable yaklaşımlarla veri manipülasyonu yapmanızı pratik örneklerle açıklar.","\u003Ch2>Giriş\u003C/h2>\n\u003Cp>JavaScript'te diziler ve nesnelerle çalışırken map, filter ve reduce gibi fonksiyonel yöntemler ile Object.assign ve spread (...) operatörü sık kullanılır. Bu yöntemler kodu daha okunabilir, test edilebilir ve sürdürülebilir kılmak için uygundur. Aşağıdaki rehber temel kavramları, kısa örnekleri ve immutable (değişmez) yaklaşımları gösterir. Temel referanslar: \u003Ca href=\"https://www.emredemir.tech/blog/map-reduce-filter\">Emre Demir — map/reduce/filter\u003C/a>, \u003Ca href=\"https://1kodum.com/javascriptte-spread-operatoru/\">1Kodum — Spread operatörü\u003C/a>, \u003Ca href=\"https://www.tutkit.com/tr/metin-egitimleri/15389-spread-operatorunu-javascript-objelerinde-etkili-bicimde-kullanma\">Tutkit — spread ve immutable\u003C/a> ve \u003Ca href=\"https://www.yazilimbilisim.net/javascript/javascript-dizilerde-kullanilan-fonksiyonlar/\">Yazılım Bilişim — dizi fonksiyonları\u003C/a>.\u003C/p>\n\n\u003Ch2>map: Dönüştürme (Transform)\u003C/h2>\n\u003Cp>\u003Cstrong>map\u003C/strong>, bir dizideki her öğeyi verilen dönüşüm fonksiyonuna tabi tutar ve yeni bir dizi döndürür. Orijinal dizi değişmez; bu nedenle immutable işlemler için uygundur. Eğer amacınız öğeleri yeni bir biçime çevirmekse map doğru tercihtir.\u003C/p>\n\u003Cblockquote>\n\u003Cp>// Sayıları ikiyle çarpma\u003Cbr>const numbers = [1, 2, 3, 4];\u003Cbr>const doubled = numbers.map(n => n * 2);\u003Cbr>console.log(doubled); // [2, 4, 6, 8]\u003C/p>\n\u003C/blockquote>\n\u003Cblockquote>\n\u003Cp>// Nesne dizisinden sadece isimleri almak\u003Cbr>const users = [{id:1, name:'Ali'}, {id:2, name:'Veli'}];\u003Cbr>const names = users.map(u => u.name);\u003Cbr>console.log(names); // ['Ali', 'Veli']\u003C/p>\n\u003C/blockquote>\n\u003Cp>map içinde saf (pure) fonksiyonlar kullanmak, test ve tekrar kullanım kolaylığı sağlar.\u003C/p>\n\n\u003Ch2>filter: Eleme\u003C/h2>\n\u003Cp>\u003Cstrong>filter\u003C/strong>, dizi öğelerini bir koşula göre eler ve koşulu sağlayan öğelerle yeni bir dizi döndürür. Orijinal dizi değiştirilmez. Filtreleme, görünür veri setini kısıtlamak için uygundur.\u003C/p>\n\u003Cblockquote>\n\u003Cp>// 10'dan büyük sayıları filtreleme\u003Cbr>const nums = [4, 11, 7, 20];\u003Cbr>const greaterThan10 = nums.filter(n => n > 10);\u003Cbr>console.log(greaterThan10); // [11, 20]\u003C/p>\n\u003C/blockquote>\n\u003Cblockquote>\n\u003Cp>// Tamamlanmış görevleri alma\u003Cbr>const todos = [{id:1, done:true}, {id:2, done:false}];\u003Cbr>const completed = todos.filter(t => t.done);\u003Cbr>console.log(completed);\u003C/p>\n\u003C/blockquote>\n\n\u003Ch2>reduce: Biriktirme ve Tek Değer Üretme\u003C/h2>\n\u003Cp>\u003Cstrong>reduce\u003C/strong>, bir diziyi tek bir değere indirgemek için kullanılır. Toplam, çarpım, objeye dönüştürme veya gruplayıcı (group by) işlemleri için uygundur. reduce, başlangıç değeri (initialValue) ile dikkatli kullanılmalıdır.\u003C/p>\n\u003Cblockquote>\n\u003Cp>// Sayıların toplamı\u003Cbr>const nums = [1, 2, 3, 4];\u003Cbr>const sum = nums.reduce((acc, n) => acc + n, 0);\u003Cbr>console.log(sum); // 10\u003C/p>\n\u003C/blockquote>\n\u003Cblockquote>\n\u003Cp>// Kategorilere göre gruplayarak bir nesne oluşturma\u003Cbr>const items = [\u003Cbr>  {type: 'fruit', name:'apple'},\u003Cbr>  {type: 'veg', name:'carrot'},\u003Cbr>  {type: 'fruit', name:'banana'}\u003Cbr>];\u003Cbr>const grouped = items.reduce((acc, it) => {\u003Cbr>  (acc[it.type] = acc[it.type] || []).push(it);\u003Cbr>  return acc;\u003Cbr>}, {});\u003Cbr>console.log(grouped);\u003C/p>\n\u003C/blockquote>\n\u003Cp>Gruplama ve birikim işlemlerinde reduce çok kuvvetlidir; fakat karmaşık mantığı küçük, okunabilir yardımcı fonksiyonlara bölmek genellikle daha sürdürülebilirdir.\u003C/p>\n\n\u003Ch2>map / filter / reduce Zincirleme Örnek\u003C/h2>\n\u003Cp>Genelde veri iş akışları şu adımları takip eder: filtrele -> dönüştür -> biriktir. Bu zincir, küçük ve anlamlı adımlarla okunabilir kod sağlar.\u003C/p>\n\u003Cblockquote>\n\u003Cp>// Örnek: Belirli kategorideki ürünlerin toplam fiyatı\u003Cbr>const products = [\u003Cbr>  {category:'fruit', price: 2},\u003Cbr>  {category:'veg', price: 3},\u003Cbr>  {category:'fruit', price: 5}\u003Cbr>];\u003Cbr>const totalFruitPrice = products\u003Cbr>  .filter(p => p.category === 'fruit')\u003Cbr>  .map(p => p.price)\u003Cbr>  .reduce((sum, p) => sum + p, 0);\u003Cbr>console.log(totalFruitPrice); // 7\u003C/p>\n\u003C/blockquote>\n\u003Cp>Zincirleme işlemlerde erbabı kadar ara diziler oluşur; büyük veri setlerinde bellek ve performans etkilerini göz önünde bulundurun.\u003C/p>\n\n\u003Ch2>Object.assign ve Spread (...) Operatörü\u003C/h2>\n\u003Cp>Nesne birleştirme ve kopyalama için iki sık kullanılan yöntem \u003Cstrong>Object.assign\u003C/strong> ve spread operatörüdür. Her ikisi de \u003Cem>yüzeysel (shallow)\u003C/em> kopyalama yapar; iç içe (nested) nesneler için derin kopyalama düşünülmelidir. Detaylı örnekler ve kullanım açıklamaları için \u003Ca href=\"https://1kodum.com/javascriptte-spread-operatoru/\">1Kodum — Spread operatörü\u003C/a> kaynağına bakabilirsiniz.\u003C/p>\n\u003Ctable>\n  \u003Cthead>\n    \u003Ctr>\n      \u003Cth>Yöntem\u003C/th>\n      \u003Cth>Davranış\u003C/th>\n    \u003C/tr>\n  \u003C/thead>\n  \u003Ctbody>\n    \u003Ctr>\n      \u003Ctd>Object.assign(target, ...sources)\u003C/td>\n      \u003Ctd>Kaynakların enumerable özelliklerini target'a kopyalar ve target'ı döndürür (target değişir).\u003C/td>\n    \u003C/tr>\n    \u003Ctr>\n      \u003Ctd>{ ...obj }\u003C/td>\n      \u003Ctd>Yeni bir nesne oluşturur; kaynaklar sağdan sola doğru yazılırken sonuncu özellikler öncekinin üzerine yazar.\u003C/td>\n    \u003C/tr>\n  \u003C/tbody>\n\u003C/table>\n\u003Cblockquote>\n\u003Cp>// Güvenli birleştirme (target'ı değiştirmeden)\u003Cbr>const a = {x:1};\u003Cbr>const b = {y:2};\u003Cbr>const merged1 = Object.assign({}, a, b);\u003Cbr>const merged2 = {...a, ...b};\u003C/p>\n\u003C/blockquote>\n\u003Cp>Önemli nokta: her iki yöntem de \u003Cem>shallow copy\u003C/em> yapar; iç nesneler referans olarak taşınır.\u003C/p>\n\n\u003Ch2>Immutable Pattern: Değişmezlik Yaklaşımları\u003C/h2>\n\u003Cp>Immutable (değişmez) pattern, veri üzerinde doğrudan değişiklik yapmadan yeni kopyalar oluşturarak yan etkileri azaltır. Diziler için map, filter, concat veya spread; nesneler için spread veya Object.assign ile yeni kopyalar oluşturabilirsiniz. Daha karmaşık (nested) yapılar için derin kopyalama gerekebilir.\u003C/p>\n\u003Cblockquote>\n\u003Cp>// Bir todo öğesini immutable şekilde güncelleme\u003Cbr>const todos = [{id:1, done:false}, {id:2, done:false}];\u003Cbr>const updated = todos.map(t => t.id === 2 ? {...t, done:true} : t);\u003Cbr>console.log(updated);\u003C/p>\n\u003C/blockquote>\n\u003Cp>Basit derin kopyalama için bazı durumlarda \u003Cem>JSON.parse(JSON.stringify(obj))\u003C/em> kullanılabilir; ancak bu yöntem fonksiyonları, undefined değerleri veya tarih (Date) nesnelerini doğru kopyalamaz. Karmaşık durumlarda güvenilir bir yardımcı kütüphane veya ortamın sunduğu derin kopyalama aracı tercih edilmelidir.\u003C/p>\n\u003Cp>Immutable yaklaşımlar kodun test edilebilirliğini ve hata ayıklamayı kolaylaştırır; bununla birlikte büyük veri setlerinde performans etkileri olabilir, dolayısıyla gereksinime göre uygun denge kurulmalıdır. Tutkit ve diğer kaynaklar immutable kullanımlarıyla ilgili pratik örnekler sunar (\u003Ca href=\"https://www.tutkit.com/tr/metin-egitimleri/15389-spread-operatorunu-javascript-objelerinde-etkili-bicimde-kullanma\">Tutkit\u003C/a>).\u003C/p>\n\n\u003Ch2>Pratik İpuçları ve Kontrol Listesi\u003C/h2>\n\u003Cul>\n  \u003Cli>Öncelik: Saf (pure) fonksiyonlar yazın; yan etkileri azaltın.\u003C/li>\n  \u003Cli>Veri dönüştürmeleri için map, eleme için filter, biriktirme için reduce kullanın.\u003C/li>\n  \u003Cli>Nesne kopyalamalarında spread veya Object.assign kullanın; hedef objeyi doğrudan değiştirmeyin (Object.assign({}, ...)).\u003C/li>\n  \u003Cli>Derin kopyalama gerektiğinde JSON yöntemi sınırlıdır; fonksiyon/tarih gibi değerleri korumak için uygun kütüphane veya yöntem tercih edin.\u003C/li>\n  \u003Cli>Büyük dizilerde ara diziler oluşturmanın maliyetini düşünün; performans kritikse alternatif yaklaşımlar araştırın.\u003C/li>\n\u003C/ul>\n\n\u003Chr>\n\u003Cp>Bu rehber fonksiyonel yöntemleri ve nesne birleştirmeyi pratik örneklerle gösterir; daha ayrıntılı kaynaklar ve açıklamalar için baştaki referanslara bakabilirsiniz: \u003Ca href=\"https://www.emredemir.tech/blog/map-reduce-filter\">map/filter/reduce\u003C/a>, \u003Ca href=\"https://1kodum.com/javascriptte-spread-operatoru/\">spread operatörü\u003C/a>, \u003Ca href=\"https://www.tutkit.com/tr/metin-egitimleri/15389-spread-operatorunu-javascript-objelerinde-etkili-bicimde-kullanma\">immutable örnekleri\u003C/a> ve \u003Ca href=\"https://www.yazilimbilisim.net/javascript/javascript-dizilerde-kullanilan-fonksiyonlar/\">dizi fonksiyonları\u003C/a>.\u003C/p>\n","JS Array ve Object Manipülasyonu — map, filter, reduce ve (b","JavaScript'te diziler ve nesneler üzerinde map, filter ve reduce kullanımını; Object.assign ve spread operatörü ile birleştirme ve immutable pattern örneklerini","JS Array ve Object Manipülasyonu, map, filter, reduce, Object.assign, spread operator, immutable pattern, JavaScript diziler, JavaScript nesneler","array-ve-object-islemleri-map-filter-reduce-ve-birlestirme-ornekleri","2026-04-04T11:19:45.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/0fabb7010f91fe38f9d2fa8d8f6436bf.jpg","/media/blog/0fabb7010f91fe38f9d2fa8d8f6436bf_thumb.jpg","/media/blog/0fabb7010f91fe38f9d2fa8d8f6436bf.webp","/media/blog/0fabb7010f91fe38f9d2fa8d8f6436bf_thumb.webp",null,{"minutes":30,"wordCount":31,"imageCount":32,"formatted":33},4,780,0,"4 dk okuma süresi","/blog/js-array-object-manipulasyonu/array-ve-object-islemleri-map-filter-reduce-ve-birlestirme-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/0fabb7010f91fe38f9d2fa8d8f6436bf.jpg",{"hid":64,"property":64,"content":65},"og:url","https://kodogreniyorum.com/blog/js-array-object-manipulasyonu/array-ve-object-islemleri-map-filter-reduce-ve-birlestirme-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/array-ve-object-islemleri-map-filter-reduce-ve-birlestirme-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":30,"name":7,"item":65}]