[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"blog-post-js-array-ve-object-manipulasyonu-map-filter-ve-kopyalama-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},41578,"JS Array ve Object Manipülasyonu: Map, Filter ve Kopyalama Örnekleri","Bu rehber, JavaScript'te diziler ve nesnelerle çalışırken sık kullanılan map(), filter(), slice(), Object.assign() ve JSON.parse(JSON.stringify()) yöntemlerini örneklerle açıklar ve hangi durumlarda hangi yöntemi tercih etmeniz gerektiğine dair pratik ipuçları sunar.","\u003Ch2>JS Array ve Object Manipülasyonu: Map, Filter ve Kopyalama Örnekleri\u003C/h2>\n\u003Cp>Bu yazıda, JavaScript'te sık kullanılan dizi ve nesne işlemlerini adım adım örneklerle ele alacağız. Öne çıkan konular: \u003Cstrong>map()\u003C/strong>, \u003Cstrong>filter()\u003C/strong>, \u003Cstrong>slice()\u003C/strong>, nesne kopyalama için \u003Cstrong>Object.assign()\u003C/strong> ve JSON tabanlı derin kopyalama. Temel tanımlar ve davranışlar için MDN belgelerine ve pratik açıklamalar için Coddy rehberine atıfta bulunacağız.\u003C/p>\n\u003Cp>Referanslar: \u003Ca href=\"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/map\">Array.prototype.map() — MDN\u003C/a>, \u003Ca href=\"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/filter\">Array.prototype.filter() — MDN\u003C/a>, \u003Ca href=\"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/slice\">Array.prototype.slice() — MDN\u003C/a>, ve \u003Ca href=\"https://coddy.tech/docs/javascript/array-methods\">Coddy: JavaScript Array Methods\u003C/a>.\u003C/p>\n\n\u003Ch3>1) map() ile dönüşüm (map örnekleri)\u003C/h3>\n\u003Cp>\u003Cstrong>map()\u003C/strong> her bir dizi elemanına fonksiyon uygular ve uygulama sonuçlarından yeni bir dizi döndürür. Orijinal diziyi değiştirmez (immutable tarzı dönüşüm sağlar). Bu davranış MDN tarafından tanımlanmıştır.\u003C/p>\n\u003Cblockquote>\nconst nums = [1, 2, 3, 4];\u003Cbr>\nconst doubled = nums.map(n => n * 2);\u003Cbr>\nconsole.log(doubled); // [2, 4, 6, 8]\u003Cbr>\n\u003C/blockquote>\n\u003Cp>Objelerle birlikte map sıkça kullanılır: bir kullanıcı listesinde sadece isimleri çıkarmak veya yeni bir yapı oluşturmak için:\u003C/p>\n\u003Cblockquote>\nconst users = [{id:1, name:'Ali'}, {id:2, name:'Ayşe'}];\u003Cbr>\nconst names = users.map(u => ({ userId: u.id, displayName: u.name.toUpperCase() }));\u003Cbr>\n\u003C/blockquote>\n\u003Cp>Kaynak: \u003Ca href=\"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/map\">MDN map\u003C/a>.\u003C/p>\n\n\u003Ch3>2) filter() ile eleman seçimi (filter örnekleri)\u003C/h3>\n\u003Cp>\u003Cstrong>filter()\u003C/strong> bir koşula göre dizinin elemanlarını süzer ve koşulu sağlayan elemanlardan oluşan yeni bir dizi döndürür. Orijinal dizi değişmez.\u003C/p>\n\u003Cblockquote>\nconst numbers = [1, 2, 3, 4, 5, 6];\u003Cbr>\nconst evens = numbers.filter(n => n % 2 === 0);\u003Cbr>\nconsole.log(evens); // [2, 4, 6]\u003Cbr>\n\u003C/blockquote>\n\u003Cp>Objelerle kullanım örneği: aktif kullanıcıları filtrelemek.\u003C/p>\n\u003Cblockquote>\nconst users = [{id:1, active:true}, {id:2, active:false}];\u003Cbr>\nconst activeUsers = users.filter(u => u.active);\u003Cbr>\n\u003C/blockquote>\n\u003Cp>Kaynak: \u003Ca href=\"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/filter\">MDN filter\u003C/a>.\u003C/p>\n\n\u003Ch3>3) slice() ile dizi kopyalama ve parçalama\u003C/h3>\n\u003Cp>\u003Cstrong>slice(start, end)\u003C/strong> diziden bir kısmın yeni bir kopyasını döndürür; parametreler opsiyoneldir. Tüm dizinin kopyasını almak için \u003Ccode>arr.slice()\u003C/code> kullanabilirsiniz. Bu da yüzeysel (shallow) bir kopyadır.\u003C/p>\n\u003Cblockquote>\nconst arr = [1, 2, 3, 4];\u003Cbr>\nconst copy = arr.slice();\u003Cbr>\nconsole.log(copy); // [1,2,3,4]\u003Cbr>\nconst part = arr.slice(1, 3); // [2,3]\u003Cbr>\n\u003C/blockquote>\n\u003Cp>Kaynak: \u003Ca href=\"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/slice\">MDN slice\u003C/a>.\u003C/p>\n\n\u003Ch3>4) Nesne kopyalama: Object.assign() (yüzeysel kopya)\u003C/h3>\n\u003Cp>\u003Cstrong>Object.assign(target, ...sources)\u003C/strong> kaynak nesnelerin (source) özelliklerini hedef nesneye kopyalar. Genelde yüzeysel kopyalama (shallow copy) yapar; yani iç içe nesnelerin referansları yeni nesnede de paylaşılır. Bu davranış pratik rehberlerde sıkça vurgulanır.\u003C/p>\n\u003Cblockquote>\nconst original = { x: 1, nested: { y: 2 } };\u003Cbr>\nconst shallow = Object.assign({}, original);\u003Cbr> \nshallow.nested.y = 99;\u003Cbr>\nconsole.log(original.nested.y); // 99 — iç içe nesne referansı paylaşıldı\u003Cbr>\n\u003C/blockquote>\n\u003Cp>Object.assign() genelde yeni bir nesne oluşturmak ve üst üste yazmak (merge) için kullanılır; hedef nesneyi doğrudan değiştirir. Kaynak: \u003Ca href=\"https://coddy.tech/docs/javascript/array-methods\">Coddy rehberi\u003C/a>.\u003C/p>\n\n\u003Ch3>5) Derin kopyalama: JSON.parse(JSON.stringify())\u003C/h3>\n\u003Cp>Basit derin kopyalar için yaygın bir yöntem \u003Cstrong>JSON.parse(JSON.stringify(obj))\u003C/strong> kullanmaktır. Bu yaklaşım nesneyi JSON'a çevirip tekrar parse ederek yeni bir nesne üretir; JSON olarak serileştirilebilen yapılar için etkili bir deep copy yöntemidir.\u003C/p>\n\u003Cblockquote>\nconst src = { a: 1, nested: { b: 2 } };\u003Cbr>\nconst deep = JSON.parse(JSON.stringify(src));\u003Cbr>\ndeep.nested.b = 42;\u003Cbr> \nconsole.log(src.nested.b); // 2 — üst seviye referanslar ayrıldı\u003Cbr>\n\u003C/blockquote>\n\u003Cp>Dikkat: Bu yöntem JSON serileştirmeye uygun olmayan bazı JavaScript değerlerini doğru kopyalamayabilir veya farklı biçimde döndürebilir. Bu nedenle tarih (Date), fonksiyonlar, undefined, Symbol veya Map/Set gibi özel yapılar içeren nesneler için davranış farklı olabilir; daha özel bir derin kopyalama aracı gerektiğinde dikkatli olun. (Genel uygulama rehberleri ve örnekler için: \u003Ca href=\"https://coddy.tech/docs/javascript/array-methods\">Coddy\u003C/a>.)\u003C/p>\n\n\u003Ch3>6) Shallow vs Deep Copy — Kısa Karşılaştırma\u003C/h3>\n\u003Ctable>\n  \u003Cthead>\n    \u003Ctr>\n      \u003Cth>Yöntem\u003C/th>\n      \u003Cth>Ne kopyalar\u003C/th>\n      \u003Cth>Ne zaman kullanılır\u003C/th>\n      \u003Cth>Uyarı\u003C/th>\n    \u003C/tr>\n  \u003C/thead>\n  \u003Ctbody>\n    \u003Ctr>\n      \u003Ctd>slice() / arr.slice()\u003C/td>\n      \u003Ctd>Dizi elemanlarının yüzeysel kopyası\u003C/td>\n      \u003Ctd>Küçük dizileri kopyalamak, parça almak\u003C/td>\n      \u003Ctd>İç içe referanslar paylaşılır\u003C/td>\n    \u003C/tr>\n    \u003Ctr>\n      \u003Ctd>Object.assign()\u003C/td>\n      \u003Ctd>Nesnenin yüzeysel kopyası / merge\u003C/td>\n      \u003Ctd>Yüzeysel merge veya yeni nesne oluşturma\u003C/td>\n      \u003Ctd>Nested nesneler referans olarak kalır\u003C/td>\n    \u003C/tr>\n    \u003Ctr>\n      \u003Ctd>JSON.parse(JSON.stringify())\u003C/td>\n      \u003Ctd>JSON-uyumlu yapılar için derin kopya\u003C/td>\n      \u003Ctd>Basit derin kopyalar; küçük/orta yapılar\u003C/td>\n      \u003Ctd>JSON serileştirilmeyen değerlerde bilgi kaybı olabilir\u003C/td>\n    \u003C/tr>\n  \u003C/tbody>\n\u003C/table>\n\n\u003Ch3>7) Pratik örnek: Gerçek bir dönüşüm akışı\u003C/h3>\n\u003Cp>Bir kullanıcı dizisinden aktif, 18+ kullanıcıları seçip yeni bir data gönderimi için kopyalamak:\u003C/p>\n\u003Cblockquote>\nconst users = [\n  { id:1, name:'Ali', age:20, active:true },\n  { id:2, name:'Veli', age:16, active:true },\n  { id:3, name:'Ayse', age:30, active:false }\n];\n\nconst filtered = users\n  .filter(u => u.active && u.age >= 18)  // seçme (filter)\n  .map(u => ({ id: u.id, name: u.name })); // yeniden şekillendirme (map)\n\n// Göndermeden önce changeable veriyi izole etmek gerekirse:\nconst payload = JSON.parse(JSON.stringify(filtered));\n\u003C/blockquote>\n\u003Cp>Bu akışta \u003Cstrong>filter\u003C/strong> ile önce gerekli kayıtları seçer, sonra \u003Cstrong>map\u003C/strong> ile ağ için hafif bir yapı oluşturursunuz. Payload üzerinde değişiklik gerekiyorsa JSON derin kopyası ile orijinali koruyabilirsiniz; ancak büyük verilerde performansı değerlendirin.\u003C/p>\n\n\u003Ch3>8) Performans ve iyi uygulamalar\u003C/h3>\n\u003Cul>\n  \u003Cli>Map/filter gibi fonksiyonel yöntemler genellikle daha okunabilir ve yan etki (side-effect) içermez; büyük veri setlerinde zincirleme kullanımda ara yapı sayısını azaltmak için tek döngüyle çözüm düşünün.\u003C/li>\n  \u003Cli>Derin kopyalama maliyetli olabilir. Sık sık büyük nesneleri kopyalamadan önce gerçekten gerekli olup olmadığını kontrol edin.\u003C/li>\n  \u003Cli>Object.assign hedef nesneyi değiştirdiği için yeni bir boş nesneyle çağırarak ({}) orijinali koruyun.\u003C/li>\n\u003C/ul>\n\n\u003Ch3>9) Yaygın hatalar ve dikkat noktaları\u003C/h3>\n\u003Cul>\n  \u003Cli>\u003Cstrong>map()\u003C/strong> içinde dönüş değeri (return) unutulursa, yeni dizi undefined içerir. Her iterasyonda dönüş değeri olduğundan emin olun.\u003C/li>\n  \u003Cli>\u003Cstrong>filter()\u003C/strong> içinde boolean döndürün; koşul hataları istenmeyen sonuçlar verir.\u003C/li>\n  \u003Cli>JSON.parse(JSON.stringify()) yönteminin bazı veri türlerini farklı şekilde ele alabileceğini unutmayın; kritik veri tipleriniz varsa test edin.\u003C/li>\n\u003C/ul>\n\n\u003Chr>\n\n\u003Ch3>Sıkça Sorulan Sorular\u003C/h3>\n\n\u003Ch4>S1: map ile forEach arasındaki fark nedir?\u003C/h4>\n\u003Cp>map yeni bir dizi döndürür; forEach sadece her eleman üzerinde yan etki amaçlı işlem yapar ve dönüş değeri yoktur. Yeni bir dizi istiyorsanız map tercih edilir. Kaynak: \u003Ca href=\"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/map\">MDN map\u003C/a>.\u003C/p>\n\n\u003Ch4>S2: Object.assign derin kopya mı yapar?\u003C/h4>\n\u003Cp>Hayır. Object.assign yüzeysel (shallow) kopya/merge yapar; iç içe nesneler referans olarak paylaşılır. Derin kopya gerekiyorsa farklı yöntemlere bakın. Kaynak: \u003Ca href=\"https://coddy.tech/docs/javascript/array-methods\">Coddy\u003C/a>.\u003C/p>\n\n\u003Ch4>S3: JSON.parse(JSON.stringify()) her zaman güvenli mi?\u003C/h4>\n\u003Cp>Bu yöntem JSON olarak serileştirilebilen yapılar için işe yarar ancak bazı özel tiplerde bilgi kaybı veya farklı davranış olabilir. Kritik durumlarda özel derin kopyalama kütüphanesi veya uygun seri/parse stratejisi kullanın.\u003C/p>\n\n\u003Chr>\n\n\u003Ch3>Anahtar Çıkarımlar\u003C/h3>\n\u003Cul>\n  \u003Cli>\u003Cstrong>map()\u003C/strong> her elemanı dönüştürerek yeni bir dizi üretir (MDN referansı).\u003C/li>\n  \u003Cli>\u003Cstrong>filter()\u003C/strong> koşulu sağlayan elemanlardan yeni bir dizi döndürür (MDN referansı).\u003C/li>\n  \u003Cli>\u003Cstrong>slice()\u003C/strong> dizinin bir parçasının yüzeysel kopyasını alır (MDN referansı).\u003C/li>\n  \u003Cli>\u003Cstrong>Object.assign()\u003C/strong> nesneleri birleştirir ama yüzeysel kopya yapar (pratik rehberler).\u003C/li>\n  \u003Cli>\u003Cstrong>JSON.parse(JSON.stringify())\u003C/strong> JSON-uyumlu yapılar için pratik bir derin kopya yöntemidir; bazı türlerde sınırlamalar olabilir (Coddy rehberi).\u003C/li>\n\u003C/ul>\n\n\u003Cp>Bu rehberdeki örnekler günlük kodda hızlıca uygulanabilir. Daha karmaşık senaryolarda, kullandığınız veri tiplerinin özelliklerini test ederek ve performansı ölçerek uygun yöntemi seçin.\u003C/p>\n","JS Array ve Object Manipülasyonu — Map, Filter ve KopyalamaÖ","JavaScript'te map(), filter(), slice(), Object.assign() ve JSON.parse(JSON.stringify()) ile diziler ve nesneler nasıl dönüştürülür ve kopyalanır; hangi durumlar","JS Array ve Object Manipülasyonu, array map örnekleri, object clone js, array filter örnek, shallow deep copy js, Object.assign, JSON.parse JSON.stringify kopyalama","js-array-ve-object-manipulasyonu-map-filter-ve-kopyalama-ornekleri","2026-11-14T09:01:56.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/87ab3983dd99ac165ccf0d99c446c990.jpg","/media/blog/87ab3983dd99ac165ccf0d99c446c990_thumb.jpg","/media/blog/87ab3983dd99ac165ccf0d99c446c990.webp","/media/blog/87ab3983dd99ac165ccf0d99c446c990_thumb.webp",null,{"minutes":30,"wordCount":31,"imageCount":32,"formatted":33},6,1005,0,"6 dk okuma süresi","/blog/js-array-object-manipulasyonu/js-array-ve-object-manipulasyonu-map-filter-ve-kopyalama-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/87ab3983dd99ac165ccf0d99c446c990.jpg",{"hid":64,"property":64,"content":65},"og:url","https://kodogreniyorum.com/blog/js-array-object-manipulasyonu/js-array-ve-object-manipulasyonu-map-filter-ve-kopyalama-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/js-array-ve-object-manipulasyonu-map-filter-ve-kopyalama-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]