[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"blog-post-javascript-baslangic-kodlari-diziler-ve-objelerle-map-filter-reduce-pratik-o":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},20892,"JavaScript Başlangıç Kodları: Diziler ve Objelerle map, filter, reduce (Pratik Ö","Bu rehber, JavaScript’te map, filter ve reduce ile dizileri dönüştürme, eleme ve tek sonuca indirgeme işlemlerini pratik örneklerle açıklar. Son bölümde object destructuring ile alanları daha okunabilir ve varsayılan değerlerle daha dayanıklı şekilde çıkarmayı gösterir.","\u003Cp>JavaScript’te diziler ve objelerle çalışmak, neredeyse her projede karşınıza çıkar: API’dan gelen veriyi ekranda göstermek, bir listeyi filtrelemek, sepet toplamını hesaplamak… “JavaScript başlangıç kodları” tarafında en sık kullanılan üçlü ise genellikle \u003Cstrong>map\u003C/strong>, \u003Cstrong>filter\u003C/strong> ve \u003Cstrong>reduce\u003C/strong> olur.\u003C/p>\n\u003Cp>Bu yazıda her yöntemin ne yaptığını kısaca özetleyip gerçek hayata benzeyen örneklerle ilerleyeceğiz. Davranış detayları için resmi referanslar: \u003Ca href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map\">Array.prototype.map()\u003C/a>, \u003Ca href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter\">Array.prototype.filter()\u003C/a>, \u003Ca href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce\">Array.prototype.reduce()\u003C/a>, \u003Ca href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring\">Destructuring\u003C/a>.\u003C/p>\n\u003Chr>\n\u003Ch2>JavaScript Başlangıç Kodları: map vs filter vs reduce (Hızlı Özet)\u003C/h2>\n\u003Cul>\n\u003Cli>\u003Cstrong>map()\u003C/strong>: Her elemanı dönüştürür ve \u003Cstrong>yeni bir dizi\u003C/strong> döndürür. (\u003Ca href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map\">MDN map()\u003C/a>)\u003C/li>\n\u003Cli>\u003Cstrong>filter()\u003C/strong>: Koşulu sağlayan elemanları seçer ve \u003Cstrong>yeni (sığ/shallow) bir dizi\u003C/strong> döndürür. (\u003Ca href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter\">MDN filter()\u003C/a>)\u003C/li>\n\u003Cli>\u003Cstrong>reduce()\u003C/strong>: Elemanları bir \u003Cem>accumulator\u003C/em> üzerinden birleştirerek tek bir sonuca indirger; boş dizi ihtimali varsa \u003Cstrong>initialValue\u003C/strong> kritik olabilir. (\u003Ca href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce\">MDN reduce()\u003C/a>)\u003C/li>\n\u003C/ul>\n\u003Ch3>Kısa karşılaştırma tablosu\u003C/h3>\n\u003Ctable>\n\u003Cthead>\n\u003Ctr>\n\u003Cth>Yöntem\u003C/th>\n\u003Cth>Amaç\u003C/th>\n\u003Cth>Döndürdüğü\u003C/th>\n\u003Cth>Tipik örnek\u003C/th>\n\u003C/tr>\n\u003C/thead>\n\u003Ctbody>\n\u003Ctr>\n\u003Ctd>map\u003C/td>\n\u003Ctd>Dönüştür\u003C/td>\n\u003Ctd>Yeni dizi\u003C/td>\n\u003Ctd>API verisini UI formatına çevir\u003C/td>\n\u003C/tr>\n\u003Ctr>\n\u003Ctd>filter\u003C/td>\n\u003Ctd>Ele\u003C/td>\n\u003Ctd>Yeni dizi (sığ)\u003C/td>\n\u003Ctd>Aktif kullanıcıları seç\u003C/td>\n\u003C/tr>\n\u003Ctr>\n\u003Ctd>reduce\u003C/td>\n\u003Ctd>Özetle / Birleştir\u003C/td>\n\u003Ctd>Tek değer (her tür)\u003C/td>\n\u003Ctd>Sepet toplamı hesapla\u003C/td>\n\u003C/tr>\n\u003C/tbody>\n\u003C/table>\n\u003Chr>\n\u003Ch2>map(): Her elemanı dönüştür, yeni dizi üret\u003C/h2>\n\u003Cp>\u003Cstrong>map()\u003C/strong>, dizideki her eleman için callback’i çalıştırır ve callback’in döndürdüğü değerlerle \u003Cem>yeni\u003C/em> bir dizi oluşturur. (\u003Ca href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map\">MDN map()\u003C/a>)\u003C/p>\n\u003Cp>\u003Cstrong>Örnek 1: Sayıları başka bir ölçeğe dönüştürme\u003C/strong>\u003C/p>\n\u003Cp>\u003Cstrong>Kod:\u003C/strong>\u003C/p>\n\u003Cblockquote>\nconst nums = [1, 2, 3, 4];\u003Cbr>\nconst doubled = nums.map(n => n * 2);\u003Cbr>\n// doubled: [2, 4, 6, 8]\n\u003C/blockquote>\n\u003Cp>İpucu: map kullanırken dönüşüm fonksiyonunuzun \u003Cstrong>her zaman bir değer döndürdüğünden\u003C/strong> emin olun; aksi halde sonuç dizinizde \u003Cem>undefined\u003C/em> görebilirsiniz. (map’in dönüş değeri davranışı: \u003Ca href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map\">MDN map()\u003C/a>)\u003C/p>\n\u003Cp>\u003Cstrong>Örnek 2: API verisini UI için şekillendirme\u003C/strong>\u003C/p>\n\u003Cp>\u003Cstrong>Kod:\u003C/strong>\u003C/p>\n\u003Cblockquote>\nconst users = [\u003Cbr>\n  { id: 101, firstName: \"Ada\", lastName: \"Lovelace\" },\u003Cbr>\n  { id: 102, firstName: \"Grace\", lastName: \"Hopper\" }\u003Cbr>\n];\u003Cbr>\nconst options = users.map(u => ({\u003Cbr>\n  value: u.id,\u003Cbr>\n  label: `${u.firstName} ${u.lastName}`\u003Cbr>\n}));\n\u003C/blockquote>\n\u003Chr>\n\u003Ch2>filter(): Şarta uyanları seç, yeni dizi üret\u003C/h2>\n\u003Cp>\u003Cstrong>filter()\u003C/strong>, callback’in truthy döndürdüğü elemanları seçer ve yeni bir dizi döndürür. Bu sonuç dizi, elemanlar obje ise \u003Cstrong>sığ (shallow) kopya\u003C/strong> mantığıyla aynı referansları içerebilir. (\u003Ca href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter\">MDN filter()\u003C/a>)\u003C/p>\n\u003Cp>\u003Cstrong>Örnek 3: Aktif kullanıcıları listeleme\u003C/strong>\u003C/p>\n\u003Cp>\u003Cstrong>Kod:\u003C/strong>\u003C/p>\n\u003Cblockquote>\nconst users = [\u003Cbr>\n  { id: 1, name: \"Taylor\", active: true },\u003Cbr>\n  { id: 2, name: \"Jordan\", active: false },\u003Cbr>\n  { id: 3, name: \"Casey\", active: true }\u003Cbr>\n];\u003Cbr>\nconst activeUsers = users.filter(u => u.active);\n\u003C/blockquote>\n\u003Cp>\u003Cstrong>Örnek 4: Metin araması (case-insensitive)\u003C/strong>\u003C/p>\n\u003Cp>\u003Cstrong>Kod:\u003C/strong>\u003C/p>\n\u003Cblockquote>\nconst query = \"jo\";\u003Cbr>\nconst result = users.filter(u => u.name.toLowerCase().includes(query.toLowerCase()));\n\u003C/blockquote>\n\u003Chr>\n\u003Ch2>map + filter zinciri: En sık kullanılan pratik desen\u003C/h2>\n\u003Cp>Gerçek projelerde sık görülen desen: önce ele (filter), sonra dönüştür (map). Parametre ve dönüş değerleri: \u003Ca href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter\">MDN filter()\u003C/a>, \u003Ca href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map\">MDN map()\u003C/a>.\u003C/p>\n\u003Cp>\u003Cstrong>Örnek 5: Uygun ürünleri seç, fiyatı formatla\u003C/strong>\u003C/p>\n\u003Cp>\u003Cstrong>Kod:\u003C/strong>\u003C/p>\n\u003Cblockquote>\nconst products = [\u003Cbr>\n  { sku: \"A1\", price: 19.99, inStock: true },\u003Cbr>\n  { sku: \"B2\", price: 5, inStock: false },\u003Cbr>\n  { sku: \"C3\", price: 12.5, inStock: true }\u003Cbr>\n];\u003Cbr>\nconst visible = products\u003Cbr>\n  .filter(p => p.inStock)\u003Cbr>\n  .map(p => ({ sku: p.sku, priceText: `$${p.price}` }));\n\u003C/blockquote>\n\u003Chr>\n\u003Ch2>reduce(): Diziyi tek bir değere indirgeme\u003C/h2>\n\u003Cp>\u003Cstrong>reduce()\u003C/strong>, bir accumulator üzerinden diziyi dolaşır ve sonunda tek bir sonuç döndürür. (\u003Ca href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce\">MDN reduce()\u003C/a>)\u003C/p>\n\u003Ch3>En kritik nokta: initialValue\u003C/h3>\n\u003Cp>Boş dizi ihtimali varsa initialValue vermeden reduce çağırmak \u003Cstrong>TypeError\u003C/strong> üretebilir; bu davranış MDN’de açıklanır. (\u003Ca href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce\">MDN reduce()\u003C/a>)\u003C/p>\n\u003Cp>\u003Cstrong>Örnek 6: Sepet toplamı\u003C/strong>\u003C/p>\n\u003Cp>\u003Cstrong>Kod:\u003C/strong>\u003C/p>\n\u003Cblockquote>\nconst cart = [\u003Cbr>\n  { sku: \"A1\", qty: 2, unitPrice: 10 },\u003Cbr>\n  { sku: \"C3\", qty: 1, unitPrice: 12.5 }\u003Cbr>\n];\u003Cbr>\nconst total = cart.reduce((sum, item) => {\u003Cbr>\n  return sum + item.qty * item.unitPrice;\u003Cbr>\n}, 0);\u003Cbr>\n// total: 32.5\n\u003C/blockquote>\n\u003Cp>\u003Cstrong>Örnek 7: Dizi içinden “id -> obje” sözlüğü üretme\u003C/strong>\u003C/p>\n\u003Cp>\u003Cstrong>Kod:\u003C/strong>\u003C/p>\n\u003Cblockquote>\nconst users2 = [\u003Cbr>\n  { id: 101, name: \"Ada\" },\u003Cbr>\n  { id: 102, name: \"Grace\" }\u003Cbr>\n];\u003Cbr>\nconst byId = users2.reduce((acc, u) => {\u003Cbr>\n  acc[u.id] = u;\u003Cbr>\n  return acc;\u003Cbr>\n}, {});\n\u003C/blockquote>\n\u003Chr>\n\u003Ch2>Nesnelerle daha temiz çalışma: Object destructuring\u003C/h2>\n\u003Cp>Destructuring ile objeden alanları kısa yoldan çıkarabilirsiniz. Sözdizimi ve varsayılan değerler için: \u003Ca href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring\">MDN destructuring\u003C/a>.\u003C/p>\n\u003Cp>\u003Cstrong>Örnek 8: Alanları kısa yoldan çıkarma\u003C/strong>\u003C/p>\n\u003Cp>\u003Cstrong>Kod:\u003C/strong>\u003C/p>\n\u003Cblockquote>\nconst user = { id: 7, name: \"Sam\", plan: \"pro\" };\u003Cbr>\nconst { id, name } = user;\n\u003C/blockquote>\n\u003Cp>\u003Cstrong>Örnek 9: Varsayılan değer\u003C/strong>\u003C/p>\n\u003Cp>\u003Cstrong>Kod:\u003C/strong>\u003C/p>\n\u003Cblockquote>\nconst user2 = { id: 7, name: \"Sam\" };\u003Cbr>\nconst { plan = \"free\" } = user2;\u003Cbr>\n// plan: \"free\"\n\u003C/blockquote>\n\u003Cp>\u003Cstrong>Örnek 10: İç içe objelerde dikkat\u003C/strong>\u003C/p>\n\u003Cp>\u003Cstrong>Kod:\u003C/strong>\u003C/p>\n\u003Cblockquote>\nconst payload = { profile: { email: \"a@example.com\" } };\u003Cbr>\nconst { profile: { email } } = payload;\n\u003C/blockquote>\n\u003Cp>İç içe destructuring yaparken ara objenin varlığını garanti edemiyorsanız, önce kontrol (veya farklı bir erişim yaklaşımı) gerekebilir. (Detaylar: \u003Ca href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring\">MDN destructuring\u003C/a>)\u003C/p>\n\u003Chr>\n\u003Ch2>map/filter/reduce ile sık yapılan hatalar (ve hızlı çözümler)\u003C/h2>\n\u003Ch3>1) “Yeni dizi” her şeyi kopyalar sanmak\u003C/h3>\n\u003Cp>map/filter yeni bir dizi döndürür; filter için MDN ayrıca sonucun sığ (shallow) kopya olduğunu belirtir. (\u003Ca href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter\">MDN filter()\u003C/a>) Elemanlar obje ise, iki farklı dizide aynı obje referanslarını paylaşmanız mümkündür.\u003C/p>\n\u003Cp>\u003Cstrong>Uyarı örneği: Aynı obje referansı paylaşıldığı için mutasyon iki tarafta da görünür\u003C/strong>\u003C/p>\n\u003Cp>\u003Cstrong>Kod:\u003C/strong>\u003C/p>\n\u003Cblockquote>\nconst original = [{ id: 1, name: \"A\" }];\u003Cbr>\nconst mapped = original.map(x => x);\u003Cbr>\nmapped[0].name = \"B\";\u003Cbr>\n// original[0].name da \"B\" olur\n\u003C/blockquote>\n\u003Cp>Burada map yeni bir dizi üretir; fakat callback’te \u003Cem>aynı objeyi\u003C/em> geri döndürdüğünüz için iki dizi aynı nesneyi işaret eder. (map’in yeni dizi döndürmesi: \u003Ca href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map\">MDN map()\u003C/a>)\u003C/p>\n\u003Ch3>2) reduce’da initialValue unutmak\u003C/h3>\n\u003Cp>Boş dizi ihtimali olan akışlarda initialValue’yu varsayılan alışkanlık haline getirin. (Hata davranışı: \u003Ca href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce\">MDN reduce()\u003C/a>)\u003C/p>\n\u003Ch3>3) reduce’u “her şeyi tek yerde çözme” aracına çevirmek\u003C/h3>\n\u003Cp>reduce güçlüdür; ama çok fazla iş kuralını tek reduce içine gömmek okunabilirliği düşürebilir. Böyle durumlarda adım adım filter/map ile ilerlemek çoğu ekip için daha anlaşılır olur. (Tanım ve kullanım notları: \u003Ca href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce\">MDN reduce()\u003C/a>)\u003C/p>\n\u003Chr>\n\u003Ch2>Mini alıştırma: 15 dakikalık pratik\u003C/h2>\n\u003Col>\n\u003Cli>10 ürünlük bir dizi oluşturun (fiyat, kategori, stok).\u003C/li>\n\u003Cli>\u003Cstrong>filter\u003C/strong> ile stokta olanları seçin.\u003C/li>\n\u003Cli>\u003Cstrong>map\u003C/strong> ile UI kartı formatına çevirin (başlık, fiyat metni).\u003C/li>\n\u003Cli>\u003Cstrong>reduce\u003C/strong> ile toplam stok değerini hesaplayın (qty * unitPrice).\u003C/li>\n\u003Cli>Bir fonksiyonda ürün parametresini \u003Cstrong>destructuring\u003C/strong> ile parçalayın.\u003C/li>\n\u003C/ol>\n\u003Chr>\n\u003Ch2>Sonuç\u003C/h2>\n\u003Cp>\u003Cstrong>map\u003C/strong> dönüşüm, \u003Cstrong>filter\u003C/strong> eleme, \u003Cstrong>reduce\u003C/strong> özetleme/birleştirme işidir. Buna ek olarak \u003Cstrong>object destructuring\u003C/strong> ile daha okunabilir kod yazabilir; varsayılan değerlerle beklenmedik \u003Cem>undefined\u003C/em> durumlarını azaltabilirsiniz. Davranışları doğrulamak için MDN sayfaları iyi bir referans noktasıdır: \u003Ca href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map\">map\u003C/a>, \u003Ca href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter\">filter\u003C/a>, \u003Ca href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce\">reduce\u003C/a>, \u003Ca href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring\">destructuring\u003C/a>.\u003C/p>","JavaScript Başlangıç Kodları: map, filter, reduce Pratikleri","JavaScript dizilerinde map, filter, reduce ile dönüşüm, eleme ve özetleme yapmayı öğrenin. Object destructuring ve örneklerle kısa, pratik bir rehber.","javascript başlangıç kodları, map, filter, reduce, Array.prototype.map, Array.prototype.filter, Array.prototype.reduce, object destructuring, javascript diziler, javascript objeler","javascript-baslangic-kodlari-diziler-ve-objelerle-map-filter-reduce-pratik-o","2026-03-07T14:54:41.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/58cc678f5852994a085284c97505356c.jpg","/media/blog/58cc678f5852994a085284c97505356c_thumb.jpg","/media/blog/58cc678f5852994a085284c97505356c.webp","/media/blog/58cc678f5852994a085284c97505356c_thumb.webp",null,{"minutes":30,"wordCount":31,"imageCount":32,"formatted":33},5,890,0,"5 dk okuma süresi","/blog/js-array-object-manipulasyonu/javascript-baslangic-kodlari-diziler-ve-objelerle-map-filter-reduce-pratik-o",[],["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/58cc678f5852994a085284c97505356c.jpg",{"hid":64,"property":64,"content":65},"og:url","https://kodogreniyorum.com/blog/js-array-object-manipulasyonu/javascript-baslangic-kodlari-diziler-ve-objelerle-map-filter-reduce-pratik-o",{"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/javascript-baslangic-kodlari-diziler-ve-objelerle-map-filter-reduce-pratik-o",["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]