{"id":35591,"date":"2025-12-01T13:40:46","date_gmt":"2025-12-01T10:40:46","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/?p=35591"},"modified":"2025-12-01T13:40:46","modified_gmt":"2025-12-01T10:40:46","slug":"javascriptte-map-array-metodu-dizileri-donusturmenin-guclu-yolu","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/javascriptte-map-array-metodu-dizileri-donusturmenin-guclu-yolu\/","title":{"rendered":"JavaScript’te map() Array Metodu: Dizileri D\u00f6n\u00fc\u015ft\u00fcrmenin G\u00fc\u00e7l\u00fc Yolu"},"content":{"rendered":"

<\/p>\n

JavaScript’te map() Array Metodu: Dizileri D\u00f6n\u00fc\u015ft\u00fcrmenin G\u00fc\u00e7l\u00fc Yolu<\/h2>\n

JavaScript, modern web geli\u015ftirmede vazge\u00e7ilmez bir dil haline gelmi\u015ftir ve bu ba\u015far\u0131n\u0131n \u00f6nemli bir k\u0131sm\u0131, dilin sundu\u011fu g\u00fc\u00e7l\u00fc ve esnek yerle\u015fik metotlara dayan\u0131r. Bu metotlardan biri olan map()<\/code>, dizilerle \u00e7al\u0131\u015f\u0131rken veri d\u00f6n\u00fc\u015f\u00fcm\u00fcn\u00fc basitle\u015ftiren ve kodun okunabilirli\u011fini art\u0131ran temel bir ara\u00e7t\u0131r. Fonksiyonel programlama paradigmas\u0131n\u0131n \u00f6nemli bir par\u00e7as\u0131 olan map()<\/code>, bir dizideki her eleman\u0131 belirli bir i\u015flevden ge\u00e7irerek yeni bir dizi olu\u015fturur ve orijinal diziyi de\u011fi\u015ftirmez. Bu makalede, map()<\/code> metodunun ne oldu\u011funu, nas\u0131l \u00e7al\u0131\u015ft\u0131\u011f\u0131n\u0131, di\u011fer dizi metotlar\u0131ndan farklar\u0131n\u0131, geli\u015fmi\u015f kullan\u0131m senaryolar\u0131n\u0131, performans ipu\u00e7lar\u0131n\u0131 ve s\u0131k yap\u0131lan hatalar\u0131 ayr\u0131nt\u0131l\u0131 bir \u015fekilde inceleyece\u011fiz.<\/p>\n

Giri\u015f: map() Metodu Nedir?<\/h3>\n

JavaScript’teki map()<\/code> metodu, bir dizinin her eleman\u0131 \u00fczerinde belirtilen bir geri arama (callback) i\u015flevini \u00e7al\u0131\u015ft\u0131r\u0131r ve bu i\u015flevin d\u00f6nd\u00fcrd\u00fc\u011f\u00fc sonu\u00e7larla yeni bir dizi olu\u015fturur. En \u00f6nemli \u00f6zelliklerinden biri, orijinal diziyi de\u011fi\u015ftirmemesidir (non-mutating). Bu, \u00f6zellikle de\u011fi\u015fmezlik (immutability) ilkesinin \u00f6nemli oldu\u011fu modern JavaScript uygulamalar\u0131nda (\u00f6rne\u011fin React, Redux gibi k\u00fct\u00fcphanelerde) b\u00fcy\u00fck bir avantaj sa\u011flar.<\/p>\n

map()<\/code> metodu, bir dizi eleman\u0131n\u0131 ba\u015fka bir formata d\u00f6n\u00fc\u015ft\u00fcrmeniz gerekti\u011finde idealdir. \u00d6rne\u011fin, bir say\u0131 dizisindeki her say\u0131y\u0131 ikiyle \u00e7arpmak, bir nesne dizisindeki belirli \u00f6zellikleri ay\u0131klamak veya HTML \u00f6\u011felerini olu\u015fturmak gibi g\u00f6revlerde kullan\u0131labilir. Fonksiyonel programlaman\u0131n “d\u00f6n\u00fc\u015f\u00fcm” kavram\u0131n\u0131 somutla\u015ft\u0131ran bu metot, kodunuzu daha temiz, daha anla\u015f\u0131l\u0131r ve daha az hata e\u011filimli hale getirir.<\/p>\n

map() Metodunun Temel Kullan\u0131m\u0131 ve S\u00f6zdizimi<\/h3>\n

map()<\/code> metodunun s\u00f6zdizimi olduk\u00e7a basittir:<\/p>\n

const newArray = array.map(callbackFunction(currentValue, index, array), thisArg);<\/code><\/pre>\n
Parametreleri detayl\u0131ca inceleyelim:<\/p>\n
*   callbackFunction<\/code><\/strong>: Dizideki her eleman i\u00e7in \u00e7a\u011fr\u0131lacak bir fonksiyondur. Bu fonksiyonun d\u00f6nd\u00fcrd\u00fc\u011f\u00fc de\u011fer, yeni dizinin ilgili eleman\u0131 olur. \u00dc\u00e7 arg\u00fcman al\u0131r:
\n    *   currentValue<\/code><\/strong>: \u0130\u015flenmekte olan mevcut dizi eleman\u0131d\u0131r.
\n    *   index<\/code><\/strong> (iste\u011fe ba\u011fl\u0131): \u0130\u015flenmekte olan mevcut eleman\u0131n dizideki indeksidir.
\n    *   array<\/code><\/strong> (iste\u011fe ba\u011fl\u0131): map()<\/code> metodunun \u00e7a\u011fr\u0131ld\u0131\u011f\u0131 orijinal dizidir.
\n*   thisArg<\/code><\/strong> (iste\u011fe ba\u011fl\u0131): callbackFunction<\/code> i\u00e7inde this<\/code> anahtar kelimesinin de\u011feri olarak kullan\u0131lacak bir objedir.<\/p>\n
Basit \u00d6rnekler:<\/strong><\/p>\n
1.  Say\u0131 Dizisini D\u00f6n\u00fc\u015ft\u00fcrme:<\/strong>
\n    Bir say\u0131 dizisindeki her say\u0131y\u0131 ikiyle \u00e7arpal\u0131m.<\/p>\n
const numbers = [1, 2, 3, 4, 5];\n    const doubledNumbers = numbers.map(number => number * 2);\n\n    console.log(doubledNumbers); \/\/ [2, 4, 6, 8, 10]\n    console.log(numbers);       \/\/ [1, 2, 3, 4, 5] (Orijinal dizi de\u011fi\u015fmedi)<\/code><\/pre>\n
    Bu \u00f6rnekte, map()<\/code> metodu numbers<\/code> dizisi \u00fczerinde \u00e7al\u0131\u015f\u0131r. Her number<\/code> i\u00e7in number * 2<\/code> i\u015flemini yapar ve sonu\u00e7lar\u0131 doubledNumbers<\/code> ad\u0131nda yeni bir diziye toplar.<\/p>\n
2.  String Dizisini D\u00f6n\u00fc\u015ft\u00fcrme:<\/strong>
\n    Bir isim dizisindeki her ismi b\u00fcy\u00fck harfe \u00e7evirelim.<\/p>\n
const names = [\"ali\", \"veli\", \"ay\u015fe\"];\n    const upperCaseNames = names.map(name => name.toUpperCase());\n\n    console.log(upperCaseNames); \/\/ [\"ALI\", \"VELI\", \"AY\u015eE\"]<\/code><\/pre>\n
3.  Nesne Dizisinden Belirli Veri \u00c7ekme:<\/strong>
\n    Kullan\u0131c\u0131 nesnelerinden olu\u015fan bir diziden sadece isimleri almak isteyelim.<\/p>\n
const users = [\n        { id: 1, name: \"Ahmet\", email: \"ahmet@example.com\" },\n        { id: 2, name: \"Zeynep\", email: \"zeynep@example.com\" },\n        { id: 3, name: \"Mehmet\", email: \"mehmet@example.com\" }\n    ];\n\n    const userNames = users.map(user => user.name);\n\n    console.log(userNames); \/\/ [\"Ahmet\", \"Zeynep\", \"Mehmet\"]<\/code><\/pre>\n
Bu \u00f6rnekler, map()<\/code> metodunun ne kadar esnek ve g\u00fc\u00e7l\u00fc oldu\u011funu g\u00f6stermektedir. Her durumda, orijinal diziye dokunmadan yeni bir dizi olu\u015fturulur.<\/p>\n
map() Metodu Nas\u0131l \u00c7al\u0131\u015f\u0131r? Derinlemesine Bak\u0131\u015f<\/h3>\n
map()<\/code> metodunun \u00e7al\u0131\u015fma prensibini anlamak, onu do\u011fru ve etkili bir \u015fekilde kullanmak i\u00e7in kritik \u00f6neme sahiptir. \u0130\u015fte ad\u0131m ad\u0131m nas\u0131l \u00e7al\u0131\u015ft\u0131\u011f\u0131:<\/p>\n
1.  Yeni Dizi Olu\u015fturma<\/strong>: map()<\/code> metodu \u00e7a\u011fr\u0131ld\u0131\u011f\u0131nda, orijinal diziyle ayn\u0131 uzunlukta, bo\u015f bir yeni dizi olu\u015fturur. Bu, map()<\/code>‘in de\u011fi\u015fmezlik \u00f6zelli\u011finin temelidir.
\n2.  Iterasyon<\/strong>: Orijinal dizinin her bir eleman\u0131 \u00fczerinde s\u0131rayla d\u00f6ner. \u0130lk elemandan ba\u015flar ve son elemana kadar devam eder.
\n3.  Callback Fonksiyonu \u00c7a\u011f\u0131rma<\/strong>: Her eleman i\u00e7in, map()<\/code> metoduna ge\u00e7irilen callbackFunction<\/code>‘\u0131 \u00e7a\u011f\u0131r\u0131r. Bu \u00e7a\u011fr\u0131 s\u0131ras\u0131nda, currentValue<\/code>, index<\/code> ve array<\/code> (orijinal dizi) arg\u00fcmanlar\u0131 fonksiyona iletilir.
\n4.  De\u011fer D\u00f6nd\u00fcrme<\/strong>: callbackFunction<\/code> her \u00e7a\u011fr\u0131ld\u0131\u011f\u0131nda bir de\u011fer d\u00f6nd\u00fcrmek zorundad\u0131r. Bu d\u00f6nd\u00fcr\u00fclen de\u011fer, yeni olu\u015fturulan dizinin ilgili indeksine yerle\u015ftirilir. E\u011fer callbackFunction<\/code> a\u00e7\u0131k\u00e7a bir de\u011fer d\u00f6nd\u00fcrmezse (yani return<\/code> ifadesi kullan\u0131lmazsa), varsay\u0131lan olarak undefined<\/code> d\u00f6ner ve bu da yeni dizide undefined<\/code> elemanlar\u0131n\u0131n olu\u015fmas\u0131na neden olur.
\n5.  Yeni Diziyi D\u00f6nd\u00fcrme<\/strong>: T\u00fcm elemanlar i\u015flendikten sonra, map()<\/code> metodu yeni olu\u015fturulan ve doldurulan diziyi d\u00f6nd\u00fcr\u00fcr.<\/p>\n
\u00d6nemli Not<\/strong>: map()<\/code> metodu, orijinal dizide bo\u015fluklar (sparse arrays) varsa, bu bo\u015fluklar\u0131 atlar ve callbackFunction<\/code>‘\u0131 bu indeksler i\u00e7in \u00e7a\u011f\u0131rmaz. Ancak, yeni dizide bu indekslerde bo\u015fluklar\u0131 korur.<\/p>\n
const sparseArray = [1, , 3]; \/\/ \u0130kinci eleman bo\u015f (index 1)\nconst mappedSparseArray = sparseArray.map(item => item * 2);\n\nconsole.log(mappedSparseArray); \/\/ [2, <1 empty item>, 6]<\/code><\/pre>\n
Bu davran\u0131\u015f, map()<\/code>‘in dizinin yap\u0131s\u0131n\u0131 korurken sadece mevcut elemanlar\u0131 d\u00f6n\u00fc\u015ft\u00fcrd\u00fc\u011f\u00fcn\u00fc g\u00f6sterir.<\/p>\n
map() ve Di\u011fer Array Metotlar\u0131 Aras\u0131ndaki Farklar<\/h3>\n
JavaScript’te dizilerle \u00e7al\u0131\u015fmak i\u00e7in bir\u00e7ok g\u00fc\u00e7l\u00fc metot bulunur. map()<\/code>, forEach()<\/code>, filter()<\/code> ve reduce()<\/code> en s\u0131k kullan\u0131lanlardan baz\u0131lar\u0131d\u0131r. map()<\/code>‘in di\u011ferleriyle olan farklar\u0131n\u0131 anlamak, hangi metodu ne zaman kullanaca\u011f\u0131n\u0131za karar vermenizde size yard\u0131mc\u0131 olacakt\u0131r.<\/p>\n
map() vs. forEach()<\/h4>\n
Bu ikisi genellikle kar\u0131\u015ft\u0131r\u0131l\u0131r, ancak \u00e7ok farkl\u0131 ama\u00e7lara hizmet ederler.<\/p>\n
*   map()<\/code><\/strong>: Her zaman yeni bir dizi d\u00f6nd\u00fcr\u00fcr ve orijinal diziyi de\u011fi\u015ftirmez. Amac\u0131, bir dizideki elemanlar\u0131 d\u00f6n\u00fc\u015ft\u00fcrmektir.
\n*   forEach()<\/code><\/strong>: undefined<\/code> d\u00f6nd\u00fcr\u00fcr ve yeni bir dizi olu\u015fturmaz. Amac\u0131, bir dizinin her eleman\u0131 \u00fczerinde yan etkiler (side effects) ger\u00e7ekle\u015ftirmektir (\u00f6rn. DOM’u g\u00fcncellemek, konsola yazd\u0131rmak, bir veritaban\u0131na kaydetmek).<\/p>\n
\u00d6rnek:<\/strong><\/p>\n
const numbers = [1, 2, 3];\n\n\/\/ map() kullan\u0131m\u0131: Yeni bir dizi olu\u015fturur\nconst doubledMap = numbers.map(num => num * 2);\nconsole.log(doubledMap); \/\/ [2, 4, 6]\n\n\/\/ forEach() kullan\u0131m\u0131: Yan etki yapar, bir de\u011fer d\u00f6nd\u00fcrmez\nlet sum = 0;\nnumbers.forEach(num => {\n    sum += num;\n});\nconsole.log(sum); \/\/ 6\n\/\/ forEach'in d\u00f6n\u00fc\u015f de\u011feri:\nconst forEachResult = numbers.forEach(num => console.log(num));\nconsole.log(forEachResult); \/\/ undefined<\/code><\/pre>\n
map()<\/code>‘i sadece yan etkiler i\u00e7in kullanmak, anlams\u0131zd\u0131r ve kodunuzu yan\u0131lt\u0131c\u0131 hale getirebilir, \u00e7\u00fcnk\u00fc bir dizi d\u00f6nd\u00fcrmesini beklersiniz. Benzer \u015fekilde, forEach()<\/code>‘i bir dizi d\u00f6n\u00fc\u015ft\u00fcrmek i\u00e7in kullanmaya \u00e7al\u0131\u015fmak, manuel olarak yeni bir dizi olu\u015fturup elemanlar\u0131 ona eklemeniz gerekti\u011fi i\u00e7in daha fazla kod yazman\u0131za yol a\u00e7ar.<\/p>\n
map() vs. filter()<\/h4>\n
*   map()<\/code><\/strong>: Dizinin elemanlar\u0131n\u0131 d\u00f6n\u00fc\u015ft\u00fcr\u00fcr ve her zaman orijinal diziyle ayn\u0131 uzunlukta yeni bir dizi d\u00f6nd\u00fcr\u00fcr.
\n*   filter()<\/code><\/strong>: Dizinin elemanlar\u0131n\u0131 belirli bir ko\u015fula g\u00f6re filtreler ve ko\u015fulu ge\u00e7en elemanlarla yeni bir dizi d\u00f6nd\u00fcr\u00fcr. Yeni dizinin uzunlu\u011fu orijinal diziden daha az veya e\u015fit olabilir.<\/p>\n
\u00d6rnek:<\/strong><\/p>\n
const ages = [18, 22, 15, 30, 17];\n\n\/\/ map() kullan\u0131m\u0131: Ya\u015flar\u0131 stringe d\u00f6n\u00fc\u015ft\u00fcr\u00fcr\nconst ageStrings = ages.map(age => Ya\u015f: ${age}<\/code>);\nconsole.log(ageStrings); \/\/ [\"Ya\u015f: 18\", \"Ya\u015f: 22\", \"Ya\u015f: 15\", \"Ya\u015f: 30\", \"Ya\u015f: 17\"]\n\n\/\/ filter() kullan\u0131m\u0131: 18 ya\u015f\u0131ndan b\u00fcy\u00fck olanlar\u0131 filtreler\nconst adults = ages.filter(age => age >= 18);\nconsole.log(adults); \/\/ [18, 22, 30]<\/code><\/pre>\n
map()<\/code> ve filter()<\/code> genellikle birlikte zincirlenerek kullan\u0131l\u0131r ve bu, veri i\u015fleme boru hatlar\u0131 olu\u015fturmak i\u00e7in \u00e7ok g\u00fc\u00e7l\u00fc bir yakla\u015f\u0131md\u0131r.<\/p>\n
map() vs. reduce()<\/h4>\n
*   map()<\/code><\/strong>: Bir diziyi her eleman\u0131 d\u00f6n\u00fc\u015ft\u00fcrerek ba\u015fka bir diziye d\u00f6n\u00fc\u015ft\u00fcr\u00fcr. \u00c7\u0131kt\u0131 her zaman bir dizidir ve orijinal dizinin eleman say\u0131s\u0131na e\u015fittir.
\n*   reduce()<\/code><\/strong>: Bir diziyi tek bir de\u011fere (say\u0131, string, obje, dizi vb.) indirger. Bu “indirgeme” i\u015flemi, her eleman \u00fczerinde bir toplay\u0131c\u0131 (accumulator) ve mevcut de\u011ferle bir i\u015flem yaparak ger\u00e7ekle\u015fir.<\/p>\n
\u00d6rnek:<\/strong><\/p>\n
const numbers = [1, 2, 3, 4, 5];\n\n\/\/ map() kullan\u0131m\u0131: Say\u0131lar\u0131 karelerine d\u00f6n\u00fc\u015ft\u00fcr\u00fcr\nconst squares = numbers.map(num => num * num);\nconsole.log(squares); \/\/ [1, 4, 9, 16, 25]\n\n\/\/ reduce() kullan\u0131m\u0131: Say\u0131lar\u0131n toplam\u0131n\u0131 hesaplar\nconst sumOfNumbers = numbers.reduce((accumulator, currentValue) => accumulator + currentValue, 0);\nconsole.log(sumOfNumbers); \/\/ 15<\/code><\/pre>\n
reduce()<\/code> metodu, map()<\/code>‘in yapabilece\u011fi her \u015feyi (ve daha fazlas\u0131n\u0131) yapabilecek kadar geneldir, ancak map()<\/code> belirli bir d\u00f6n\u00fc\u015f\u00fcm g\u00f6revi i\u00e7in daha spesifik ve okunabilir bir \u00e7\u00f6z\u00fcmd\u00fcr. \u00d6rne\u011fin, reduce()<\/code> kullanarak bir map()<\/code> i\u015flemini taklit edebiliriz:<\/p>\n
const numbers = [1, 2, 3];\nconst doubledWithReduce = numbers.reduce((acc, num) => {\n    acc.push(num * 2);\n    return acc;\n}, []);\nconsole.log(doubledWithReduce); \/\/ [2, 4, 6]<\/code><\/pre>\n
Ancak, bu durumda map()<\/code> kullanmak daha k\u0131sa, daha anla\u015f\u0131l\u0131r ve daha idiomatiktir. map()<\/code> metodu, bir diziden ba\u015fka bir diziye bire bir d\u00f6n\u00fc\u015f\u00fcm gerekti\u011finde tercih edilmelidir.<\/p>\n
map() vs. Geleneksel for D\u00f6ng\u00fcs\u00fc<\/h4>\n
Geleneksel for<\/code> d\u00f6ng\u00fcleri veya for...of<\/code> d\u00f6ng\u00fcleri de dizi d\u00f6n\u00fc\u015f\u00fcmleri i\u00e7in kullan\u0131labilir, ancak map()<\/code> genellikle daha temiz ve fonksiyonel bir yakla\u015f\u0131m sunar.<\/p>\n
\u00d6rnek:<\/strong><\/p>\n
const numbers = [1, 2, 3, 4, 5];\n\n\/\/ map() ile\nconst doubledMap = numbers.map(num => num * 2);\n\n\/\/ for d\u00f6ng\u00fcs\u00fc ile\nconst doubledFor = [];\nfor (let i = 0; i < numbers.length; i++) {\n    doubledFor.push(numbers[i] * 2);\n}\n\n\/\/ for...of d\u00f6ng\u00fcs\u00fc ile\nconst doubledForOf = [];\nfor (const num of numbers) {\n    doubledForOf.push(num * 2);\n}\n\nconsole.log(doubledMap);   \/\/ [2, 4, 6, 8, 10]\nconsole.log(doubledFor);   \/\/ [2, 4, 6, 8, 10]\nconsole.log(doubledForOf); \/\/ [2, 4, 6, 8, 10]<\/code><\/pre>\n
map()<\/code>'in avantajlar\u0131:
\n*   Daha Az Kod<\/strong>: Yeni dizi olu\u015fturma, iterasyon ve eleman ekleme ad\u0131mlar\u0131n\u0131 soyutlar.
\n*   Okunabilirlik<\/strong>: Niyetinizi daha a\u00e7\u0131k ifade eder (\"bu diziyi bu \u015fekilde d\u00f6n\u00fc\u015ft\u00fcr\").
\n*   Fonksiyonel Programlama<\/strong>: De\u011fi\u015fmezli\u011fi te\u015fvik eder ve yan etkilerden ka\u00e7\u0131nmay\u0131 kolayla\u015ft\u0131r\u0131r.
\n*   Zincirleme<\/strong>: Di\u011fer dizi metotlar\u0131yla kolayca zincirlenebilir.<\/p>\n
Geli\u015fmi\u015f Kullan\u0131m Senaryolar\u0131<\/h3>\n
map()<\/code> metodu, basit d\u00f6n\u00fc\u015f\u00fcmlerin \u00f6tesinde, daha karma\u015f\u0131k veri i\u015fleme g\u00f6revlerinde de olduk\u00e7a etkilidir.<\/p>\n
Nesne Dizilerini D\u00f6n\u00fc\u015ft\u00fcrme ve Yeniden Yap\u0131land\u0131rma<\/h4>\n
Ger\u00e7ek d\u00fcnya uygulamalar\u0131nda genellikle sunucudan gelen veya ba\u015fka bir kaynaktan al\u0131nan nesne dizileriyle \u00e7al\u0131\u015f\u0131r\u0131z. Bu nesnelerin yap\u0131s\u0131n\u0131 kullan\u0131c\u0131 aray\u00fcz\u00fc veya ba\u015fka bir i\u015flem i\u00e7in de\u011fi\u015ftirmek gerekebilir.<\/p>\n
\u00d6rnek: Belirli Alanlar\u0131 Se\u00e7me ve Yeniden Adland\u0131rma<\/strong><\/p>\n
const products = [\n    { productId: \"P001\", name: \"Laptop\", price: 1200, category: \"Electronics\" },\n    { productId: \"P002\", name: \"Mouse\", price: 25, category: \"Electronics\" },\n    { productId: \"P003\", name: \"Keyboard\", price: 75, category: \"Electronics\" }\n];\n\n\/\/ Sadece id, isim ve fiyat bilgilerini i\u00e7eren yeni bir dizi olu\u015fturma\nconst productSummaries = products.map(product => ({\n    id: product.productId,\n    productName: product.name,\n    itemPrice: product.price\n}));\n\nconsole.log(productSummaries);\n\/*\n[\n  { id: 'P001', productName: 'Laptop', itemPrice: 1200 },\n  { id: 'P002', productName: 'Mouse', itemPrice: 25 },\n  { id: 'P003', productName: 'Keyboard', itemPrice: 75 }\n]\n*\/<\/code><\/pre>\n
Bu \u00f6rnekte, map()<\/code> kullanarak products<\/code> dizisindeki nesneleri, sadece ihtiyac\u0131m\u0131z olan alanlar\u0131 i\u00e7eren ve hatta alan adlar\u0131n\u0131 de\u011fi\u015ftiren yeni nesnelere d\u00f6n\u00fc\u015ft\u00fcrd\u00fck.<\/p>\n
\u00d6rnek: Yeni Alanlar Ekleme<\/strong><\/p>\n
const users = [\n    { name: \"Ay\u015fe\", age: 28 },\n    { name: \"Can\", age: 35 }\n];\n\nconst usersWithStatus = users.map(user => ({\n    ...user, \/\/ Mevcut t\u00fcm \u00f6zellikleri kopyala\n    status: user.age >= 30 ? \"Senior\" : \"Junior\"\n}));\n\nconsole.log(usersWithStatus);\n\/*\n[\n  { name: 'Ay\u015fe', age: 28, status: 'Junior' },\n  { name: 'Can', age: 35, status: 'Senior' }\n]\n*\/<\/code><\/pre>\n
Burada, spread operat\u00f6r\u00fc (...user<\/code>) kullanarak orijinal nesnenin \u00f6zelliklerini korurken, ya\u015fa ba\u011fl\u0131 olarak yeni bir status<\/code> alan\u0131 ekledik.<\/p>\n
Zincirleme Metotlar (Method Chaining)<\/h4>\n
map()<\/code> metodu, yeni bir dizi d\u00f6nd\u00fcrd\u00fc\u011f\u00fc i\u00e7in di\u011fer dizi metotlar\u0131yla (\u00f6zellikle filter()<\/code> ve sort()<\/code>) kolayca zincirlenebilir. Bu, karma\u015f\u0131k veri i\u015fleme boru hatlar\u0131 olu\u015fturmak i\u00e7in \u00e7ok g\u00fc\u00e7l\u00fc bir yakla\u015f\u0131md\u0131r.<\/p>\n
\u00d6rnek: Filtreleme ve D\u00f6n\u00fc\u015ft\u00fcrme<\/strong><\/p>\n
const students = [\n    { name: \"Elif\", grade: 85, city: \"Istanbul\" },\n    { name: \"Deniz\", grade: 92, city: \"Ankara\" },\n    { name: \"Burak\", grade: 78, city: \"Izmir\" },\n    { name: \"Cansu\", grade: 90, city: \"Istanbul\" }\n];\n\n\/\/ \u0130stanbul'daki \u00f6\u011frencilerden sadece ad\u0131 ve notu 90'\u0131n \u00fczerinde olanlar\u0131 se\u00e7\nconst highAchieversInIstanbul = students\n    .filter(student => student.city === \"Istanbul\") \/\/ \u0130stanbul'daki \u00f6\u011frencileri filtrele\n    .filter(student => student.grade > 88)          \/\/ Notu 88'den y\u00fcksek olanlar\u0131 filtrele\n    .map(student => ({\n        name: student.name,\n        grade: student.grade\n    }));                                           \/\/ \u0130stenen formata d\u00f6n\u00fc\u015ft\u00fcr\n\nconsole.log(highAchieversInIstanbul);\n\/*\n[\n  { name: 'Cansu', grade: 90 }\n]\n*\/<\/code><\/pre>\n
Bu \u00f6rnekte, \u00f6nce filter()<\/code> ile belirli ko\u015fullar\u0131 sa\u011flayan \u00f6\u011frencileri se\u00e7tik, ard\u0131ndan map()<\/code> ile se\u00e7ilen \u00f6\u011frencilerin verilerini istedi\u011fimiz formata d\u00f6n\u00fc\u015ft\u00fcrd\u00fck.<\/p>\n
React, Vue gibi K\u00fct\u00fcphanelerde Kullan\u0131m<\/h4>\n
Modern \u00f6n y\u00fcz k\u00fct\u00fcphaneleri ve framework'lerinde (\u00f6zellikle React ve Vue), map()<\/code> metodu dinamik listeler olu\u015fturmak i\u00e7in vazge\u00e7ilmezdir. Bir veri dizisinden JSX (React) veya \u015fablon (Vue) \u00f6\u011feleri olu\u015fturmak i\u00e7in kullan\u0131l\u0131r.<\/p>\n
React \u00d6rne\u011fi:<\/strong><\/p>\n
\/\/ React bile\u015feni i\u00e7inde\nfunction UserList({ users }) {\n  return (\n    
    \n      {users.map(user => (\n        
  • \n          {user.name} ({user.email})\n        <\/li>\n      ))}\n    <\/ul>\n  );\n}\n\nconst myUsers = [\n    { id: 1, name: \"Ali\", email: \"ali@example.com\" },\n    { id: 2, name: \"Fatma\", email: \"fatma@example.com\" }\n];\n\n\/\/ Kullan\u0131m:\n\/\/ <\/code><\/pre>\n
    Burada, users<\/code> dizisi map()<\/code> ile her bir kullan\u0131c\u0131 nesnesini bir <\/p>\n
  • <\/code> eleman\u0131na d\u00f6n\u00fc\u015ft\u00fcrerek bir liste olu\u015fturur. key<\/code> prop'u, React'in liste \u00f6\u011felerini verimli bir \u015fekilde g\u00fcncellemesine yard\u0131mc\u0131 oldu\u011fu i\u00e7in \u00f6nemlidir.
    \n
    thisArg<\/code> Parametresi<\/h4>\n
    map()<\/code> metodunun iste\u011fe ba\u011fl\u0131 \u00fc\u00e7\u00fcnc\u00fc parametresi olan thisArg<\/code>, callbackFunction<\/code> i\u00e7inde this<\/code> anahtar kelimesinin neye i\u015faret edece\u011fini belirler. Genellikle ok fonksiyonlar\u0131 (arrow functions) kullan\u0131ld\u0131\u011f\u0131nda buna ihtiya\u00e7 duyulmaz \u00e7\u00fcnk\u00fc ok fonksiyonlar\u0131 this<\/code> ba\u011flam\u0131n\u0131 \u00e7evreleyen kapsamdan al\u0131r. Ancak geleneksel fonksiyon ifadeleri kullan\u0131ld\u0131\u011f\u0131nda faydal\u0131 olabilir.<\/p>\n
    \u00d6rnek:<\/strong><\/p>\n
    const processor = {\n    multiplier: 2,\n    process: function(numbers) {\n        \/\/ Geleneksel fonksiyon ifadesi kullan\u0131ld\u0131\u011f\u0131 i\u00e7in thisArg'a ihtiya\u00e7 duyulabilir\n        return numbers.map(function(num) {\n            return num * this.multiplier; \/\/ this burada processor nesnesini i\u015faret etmeli\n        }, this); \/\/ processor nesnesini thisArg olarak ge\u00e7iyoruz\n    }\n};\n\nconst processedNumbers = processor.process([1, 2, 3]);\nconsole.log(processedNumbers); \/\/ [2, 4, 6]<\/code><\/pre>\n
    E\u011fer this<\/code> parametresi ge\u00e7ilmezse veya bir ok fonksiyonu kullan\u0131l\u0131rsa, this<\/code> genellikle global objeyi (taray\u0131c\u0131da window<\/code>, Node.js'de global<\/code>) veya undefined<\/code>'\u0131 i\u015faret eder (strict mode'da). Ok fonksiyonlar\u0131 ile thisArg<\/code>'a gerek kalmazd\u0131:<\/p>\n
    const processorArrow = {\n    multiplier: 2,\n    process: function(numbers) {\n        return numbers.map(num => num * this.multiplier); \/\/ Ok fonksiyonu, this'i \u00e7evreleyen kapsamdan al\u0131r (processorArrow)\n    }\n};\nconst processedNumbersArrow = processorArrow.process([1, 10, 100]);\nconsole.log(processedNumbersArrow); \/\/ [2, 20, 200]<\/code><\/pre>\n
    Asenkron \u0130\u015flemler ve map()<\/h4>\n
    map()<\/code> metodu senkron bir i\u015flemdir. Yani, callbackFunction<\/code>'\u0131 her eleman i\u00e7in an\u0131nda \u00e7a\u011f\u0131r\u0131r ve d\u00f6nd\u00fcr\u00fclen de\u011feri hemen yeni diziye ekler. Ancak, callbackFunction<\/code>'\u0131n kendisi asenkron bir i\u015flem (\u00f6rne\u011fin bir Promise<\/code> d\u00f6nd\u00fcren async<\/code> bir fonksiyon) olabilir. Bu durumda map()<\/code>, bir Promise<\/code> dizisi d\u00f6nd\u00fcr\u00fcr, ancak bu promiselerin \u00e7\u00f6z\u00fclmesini beklemez.<\/p>\n
    \u00d6rnek: Bir Promise Dizisi Olu\u015fturma<\/strong><\/p>\n
    async function fetchData(id) {\n    \/\/ Ger\u00e7ek bir API \u00e7a\u011fr\u0131s\u0131 sim\u00fclasyonu\n    return new Promise(resolve => {\n        setTimeout(() => {\n            resolve(Data for ID: ${id}<\/code>);\n        }, 100 * id);\n    });\n}\n\nconst ids = [1, 2, 3];\n\n\/\/ map, bir Promise dizisi d\u00f6nd\u00fcr\u00fcr\nconst promiseArray = ids.map(id => fetchData(id));\n\nconsole.log(promiseArray); \/\/ [Promise {  }, Promise {  }, Promise {  }]\n\n\/\/ T\u00fcm promiselerin \u00e7\u00f6z\u00fclmesini beklemek i\u00e7in Promise.all kullan\u0131r\u0131z\nPromise.all(promiseArray)\n    .then(results => {\n        console.log(results); \/\/ [\"Data for ID: 1\", \"Data for ID: 2\", \"Data for ID: 3\"]\n    })\n    .catch(error => {\n        console.error(\"Bir hata olu\u015ftu:\", error);\n    });<\/code><\/pre>\n
    Bu senaryoda, map()<\/code> do\u011fru bir \u015fekilde fetchData<\/code> fonksiyonunun d\u00f6nd\u00fcrd\u00fc\u011f\u00fc promiseleri toplar. Ancak bu promiselerin sonu\u00e7lar\u0131n\u0131 almak i\u00e7in Promise.all()<\/code> gibi bir mekanizma kullanman\u0131z gerekir. map()<\/code>'in kendisi asenkron i\u015flemleri y\u00f6netmez, sadece asenkron fonksiyonlar\u0131n d\u00f6nd\u00fcrd\u00fc\u011f\u00fc de\u011ferleri (bu durumda promiseleri) yeni bir diziye toplar.<\/p>\n
    Performans M\u00fclahazalar\u0131<\/h3>\n
    map()<\/code> metodu, \u00e7o\u011fu senaryo i\u00e7in olduk\u00e7a verimlidir. JavaScript motorlar\u0131, yerle\u015fik dizi metotlar\u0131n\u0131 optimize etmek i\u00e7in \u00e7ok \u00e7al\u0131\u015f\u0131r. Ancak, baz\u0131 durumlar g\u00f6z \u00f6n\u00fcnde bulundurulmal\u0131d\u0131r:<\/p>\n
    *   Yeni Dizi Olu\u015fturma Maliyeti<\/strong>: map()<\/code> her zaman yeni bir dizi olu\u015fturur. \u00c7ok b\u00fcy\u00fck dizilerle \u00e7al\u0131\u015f\u0131rken (milyonlarca eleman gibi), bu bellek ve i\u015flemci a\u00e7\u0131s\u0131ndan bir miktar maliyet getirebilir. Ancak \u00e7o\u011fu web uygulamas\u0131 i\u00e7in bu nadiren bir sorun te\u015fkil eder.
    \n*   Callback Fonksiyonunun Karma\u015f\u0131kl\u0131\u011f\u0131<\/strong>: Performans\u0131n b\u00fcy\u00fck bir k\u0131sm\u0131, callbackFunction<\/code>'\u0131n ne kadar karma\u015f\u0131k oldu\u011funa ba\u011fl\u0131d\u0131r. E\u011fer callback i\u00e7inde a\u011f\u0131r hesaplamalar veya birden fazla d\u00f6ng\u00fc varsa, bu genel performans\u0131 etkileyecektir.
    \n*   Gereksiz Kullan\u0131m<\/strong>: E\u011fer sadece yan etkiler i\u00e7in bir d\u00f6ng\u00fcye ihtiyac\u0131n\u0131z varsa ve yeni bir diziye ihtiyac\u0131n\u0131z yoksa forEach()<\/code> kullanmak daha uygun ve potansiyel olarak biraz daha verimli olabilir (\u00e7\u00fcnk\u00fc yeni bir dizi olu\u015fturma maliyeti olmaz). Ancak bu genellikle mikro-optimizasyon seviyesindedir ve kodun okunabilirli\u011fi ve niyeti genellikle daha \u00f6nemlidir.<\/p>\n
    Genel olarak, map()<\/code>'in performans\u0131ndan endi\u015fe etmeden kullanabilirsiniz. Performans sorunlar\u0131 ya\u015fad\u0131\u011f\u0131n\u0131zda, genellikle map()<\/code>'in kendisi de\u011fil, callbackFunction<\/code>'\u0131n i\u00e7indeki mant\u0131k veya i\u015fledi\u011finiz veri miktar\u0131n\u0131n b\u00fcy\u00fckl\u00fc\u011f\u00fc sorunun kayna\u011f\u0131d\u0131r.<\/p>\n
    S\u0131k Yap\u0131lan Hatalar ve Ka\u00e7\u0131n\u0131lmas\u0131 Gereken Durumlar<\/h3>\n
    map()<\/code> metodunu kullan\u0131rken yap\u0131lan baz\u0131 yayg\u0131n hatalar ve ka\u00e7\u0131n\u0131lmas\u0131 gereken durumlar \u015funlard\u0131r:<\/p>\n
    1.  Callback Fonksiyonundan De\u011fer D\u00f6nd\u00fcrmeyi Unutmak<\/strong>: En yayg\u0131n hatalardan biridir. E\u011fer callbackFunction<\/code> a\u00e7\u0131k\u00e7a bir de\u011fer d\u00f6nd\u00fcrmezse, undefined<\/code> d\u00f6nd\u00fcr\u00fcr ve yeni diziniz [undefined, undefined, ...]<\/code> \u015feklinde olur.<\/p>\n
    const numbers = [1, 2, 3];\n    const result = numbers.map(num => {\n        num * 2; \/\/ return ifadesi yok!\n    });\n    console.log(result); \/\/ [undefined, undefined, undefined]<\/code><\/pre>\n
        \u00c7\u00f6z\u00fcm: return<\/code> ifadesini kullan\u0131n veya tek sat\u0131rl\u0131k ok fonksiyonlar\u0131nda \u00f6rt\u00fck d\u00f6n\u00fc\u015f\u00fc kullan\u0131n.<\/p>\n
    const resultCorrect = numbers.map(num => num * 2);<\/code><\/pre>\n
    2.  Orijinal Dizinin De\u011fi\u015fmesini Beklemek<\/strong>: map()<\/code>'in orijinal diziyi de\u011fi\u015ftirmedi\u011fini unutmak, beklenmeyen sonu\u00e7lara yol a\u00e7abilir.<\/p>\n
    const originalArray = [1, 2, 3];\n    originalArray.map(num => num * 2);\n    console.log(originalArray); \/\/ [1, 2, 3] - hala ayn\u0131!<\/code><\/pre>\n
        \u00c7\u00f6z\u00fcm: D\u00f6n\u00fc\u015f de\u011ferini her zaman yeni bir de\u011fi\u015fkene atay\u0131n.<\/p>\n
    const originalArray = [1, 2, 3];\n    const newArray = originalArray.map(num => num * 2);\n    console.log(newArray); \/\/ [2, 4, 6]<\/code><\/pre>\n
    3.  Yan Etkiler \u0130\u00e7in map() Kullanmak<\/strong>: E\u011fer amac\u0131n\u0131z sadece bir dizideki elemanlar \u00fczerinde yan etkiler ger\u00e7ekle\u015ftirmekse (\u00f6rn. konsola yazd\u0131rmak, DOM'u g\u00fcncellemek) ve yeni bir diziye ihtiyac\u0131n\u0131z yoksa forEach()<\/code> kullanmak daha uygundur. map()<\/code>'i bu ama\u00e7la kullanmak, kodun niyetini belirsizle\u015ftirir ve gereksiz yere bir dizi olu\u015fturur.<\/p>\n
    const names = [\"Alice\", \"Bob\"];\n    \/\/ K\u00f6t\u00fc kullan\u0131m: Sadece konsola yazmak i\u00e7in map()\n    names.map(name => console.log(Merhaba, ${name}<\/code>)); \/\/ [undefined, undefined] d\u00f6ner\n    \/\/ Do\u011fru kullan\u0131m:\n    names.forEach(name => console.log(Merhaba, ${name}<\/code>)); \/\/ undefined d\u00f6ner, beklendi\u011fi gibi<\/code><\/pre>\n
    4.  this<\/code> Ba\u011flam\u0131 Sorunlar\u0131 (Geleneksel Fonksiyonlarla)<\/strong>: Geleneksel fonksiyon ifadelerini callbackFunction<\/code> olarak kullan\u0131rken this<\/code> ba\u011flam\u0131n\u0131n do\u011fru ayarlanmad\u0131\u011f\u0131 durumlar olabilir. thisArg<\/code> parametresi veya ok fonksiyonlar\u0131 bu sorunu \u00e7\u00f6zer.<\/p>\n
    5.  Bo\u015f Dizilerle \u00c7al\u0131\u015fma<\/strong>: map()<\/code> bo\u015f bir dizi \u00fczerinde \u00e7a\u011fr\u0131ld\u0131\u011f\u0131nda, callbackFunction<\/code> hi\u00e7 \u00e7a\u011fr\u0131lmaz ve bo\u015f bir dizi d\u00f6nd\u00fcr\u00fcr. Bu beklenen bir davran\u0131\u015ft\u0131r, ancak bazen g\u00f6zden ka\u00e7abilir.<\/p>\n
    const emptyArray = [];\n    const mappedEmptyArray = emptyArray.map(item => item * 2);\n    console.log(mappedEmptyArray); \/\/ []<\/code><\/pre>\n
    \u0130yi Uygulamalar (Best Practices)<\/h3>\n
    *   De\u011fi\u015fmezli\u011fi Koru<\/strong>: map()<\/code>'in ana avantaj\u0131 de\u011fi\u015fmezliktir. Callback fonksiyonunuz i\u00e7inde orijinal diziyi veya elemanlar\u0131n\u0131 de\u011fi\u015ftirmekten ka\u00e7\u0131n\u0131n.
    \n*   Saf Fonksiyonlar Kullan<\/strong>: callbackFunction<\/code>'\u0131 m\u00fcmk\u00fcn oldu\u011funca saf bir fonksiyon olarak yazmaya \u00e7al\u0131\u015f\u0131n. Yani, ayn\u0131 girdiler i\u00e7in her zaman ayn\u0131 \u00e7\u0131kt\u0131y\u0131 vermeli ve d\u0131\u015far\u0131daki durumu de\u011fi\u015ftirmemelidir (yan etkilerden ka\u00e7\u0131nmal\u0131d\u0131r). Bu, kodunuzu daha \u00f6ng\u00f6r\u00fclebilir ve test edilebilir hale getirir.
    \n*   Anla\u015f\u0131l\u0131r \u0130simlendirme<\/strong>: D\u00f6n\u00fc\u015ft\u00fcr\u00fclen yeni dizi i\u00e7in anlaml\u0131 bir isim kullan\u0131n. \u00d6rne\u011fin, numbers<\/code> dizisini d\u00f6n\u00fc\u015ft\u00fcrd\u00fc\u011f\u00fcn\u00fczde doubledNumbers<\/code> gibi.
    \n*   Do\u011fru Metodu Se\u00e7<\/strong>: G\u00f6reviniz bir d\u00f6n\u00fc\u015f\u00fcmse map()<\/code>, filtreleme ise filter()<\/code>, yan etki ise forEach()<\/code>, indirgeme ise reduce()<\/code> kullan\u0131n.
    \n*   Tek Sorumluluk Prensibi<\/strong>: callbackFunction<\/code>'\u0131n tek bir sorumlulu\u011fu olmas\u0131n\u0131 sa\u011flay\u0131n. \u00c7ok karma\u015f\u0131k bir d\u00f6n\u00fc\u015f\u00fcm yap\u0131yorsan\u0131z, callback'in i\u00e7indeki mant\u0131\u011f\u0131 daha k\u00fc\u00e7\u00fck, ayr\u0131 fonksiyonlara b\u00f6lmeyi d\u00fc\u015f\u00fcn\u00fcn.<\/p>\n
    Sonu\u00e7<\/h3>\n
    map()<\/code> Array metodu, JavaScript'te dizilerle \u00e7al\u0131\u015f\u0131rken veri d\u00f6n\u00fc\u015f\u00fcmlerini y\u00f6netmek i\u00e7in g\u00fc\u00e7l\u00fc, esnek ve fonksiyonel bir yakla\u015f\u0131md\u0131r. Orijinal diziyi de\u011fi\u015ftirmeden yeni bir dizi olu\u015fturma yetene\u011fi, modern JavaScript geli\u015ftirmenin temel bir ilkesi olan de\u011fi\u015fmezli\u011fi destekler. Basit say\u0131 d\u00f6n\u00fc\u015f\u00fcmlerinden, karma\u015f\u0131k nesne yeniden yap\u0131land\u0131rmalar\u0131na ve React gibi k\u00fct\u00fcphanelerde dinamik UI bile\u015fenleri olu\u015fturmaya kadar geni\u015f bir kullan\u0131m alan\u0131na sahiptir.<\/p>\n
    forEach()<\/code>, filter()<\/code> ve reduce()<\/code> gibi di\u011fer dizi metotlar\u0131yla aras\u0131ndaki farklar\u0131 anlamak, kodunuz i\u00e7in do\u011fru arac\u0131 se\u00e7menize yard\u0131mc\u0131 olur. map()<\/code>'i etkili bir \u015fekilde kullanarak, daha temiz, daha okunabilir ve daha s\u00fcrd\u00fcr\u00fclebilir JavaScript kodu yazabilirsiniz. Bu metodu ustala\u015fmak, her JavaScript geli\u015ftiricisinin ara\u00e7 setinde bulunmas\u0131 gereken temel bir beceridir.<\/body><\/p>\n","protected":false},"excerpt":{"rendered":"JavaScript’te map() Array Metodu: Dizileri D\u00f6n\u00fc\u015ft\u00fcrmenin G\u00fc\u00e7l\u00fc Yolu\nJavaScript, modern web geli\u015ftirmede vazge\u00e7ilmez bir dil haline gelmi\u015fti","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-35591","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-javascript","7":"cs-entry","8":"cs-video-wrap"},"yoast_head":"\nJavaScript'te map() Array Metodu: Dizileri D\u00f6n\u00fc\u015ft\u00fcrmenin G\u00fc\u00e7l\u00fc Yolu - Kodlar\u0131n Gizemli D\u00fcnyas\u0131<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/fatihsoysal.com\/blog\/javascriptte-map-array-metodu-dizileri-donusturmenin-guclu-yolu\/\" \/>\n<meta property=\"og:locale\" content=\"tr_TR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"JavaScript'te map() Array Metodu: Dizileri D\u00f6n\u00fc\u015ft\u00fcrmenin G\u00fc\u00e7l\u00fc Yolu\" \/>\n<meta property=\"og:description\" content=\"JavaScript'te map() Array Metodu: Dizileri D\u00f6n\u00fc\u015ft\u00fcrmenin G\u00fc\u00e7l\u00fc Yolu JavaScript, modern web geli\u015ftirmede vazge\u00e7ilmez bir dil haline gelmi\u015fti\" \/>\n<meta property=\"og:url\" content=\"https:\/\/fatihsoysal.com\/blog\/javascriptte-map-array-metodu-dizileri-donusturmenin-guclu-yolu\/\" \/>\n<meta property=\"og:site_name\" content=\"Kodlar\u0131n Gizemli D\u00fcnyas\u0131\" \/>\n<meta property=\"article:published_time\" content=\"2025-12-01T10:40:46+00:00\" \/>\n<meta name=\"author\" content=\"Fatih Soysal\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Yazan:\" \/>\n\t<meta name=\"twitter:data1\" content=\"Fatih Soysal\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tahmini okuma s\u00fcresi\" \/>\n\t<meta name=\"twitter:data2\" content=\"17 dakika\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/javascriptte-map-array-metodu-dizileri-donusturmenin-guclu-yolu\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/javascriptte-map-array-metodu-dizileri-donusturmenin-guclu-yolu\/\"},\"author\":{\"name\":\"Fatih Soysal\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"headline\":\"JavaScript’te map() Array Metodu: Dizileri D\u00f6n\u00fc\u015ft\u00fcrmenin G\u00fc\u00e7l\u00fc Yolu\",\"datePublished\":\"2025-12-01T10:40:46+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/javascriptte-map-array-metodu-dizileri-donusturmenin-guclu-yolu\/\"},\"wordCount\":2494,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"articleSection\":[\"Javascript\"],\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/javascriptte-map-array-metodu-dizileri-donusturmenin-guclu-yolu\/#respond\"]}],\"copyrightYear\":\"2025\",\"copyrightHolder\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/javascriptte-map-array-metodu-dizileri-donusturmenin-guclu-yolu\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/javascriptte-map-array-metodu-dizileri-donusturmenin-guclu-yolu\/\",\"name\":\"JavaScript'te map() Array Metodu: Dizileri D\u00f6n\u00fc\u015ft\u00fcrmenin G\u00fc\u00e7l\u00fc Yolu - Kodlar\u0131n Gizemli D\u00fcnyas\u0131\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\"},\"datePublished\":\"2025-12-01T10:40:46+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/javascriptte-map-array-metodu-dizileri-donusturmenin-guclu-yolu\/#breadcrumb\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/javascriptte-map-array-metodu-dizileri-donusturmenin-guclu-yolu\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/javascriptte-map-array-metodu-dizileri-donusturmenin-guclu-yolu\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Anasayfa\",\"item\":\"https:\/\/fatihsoysal.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"JavaScript’te map() Array Metodu: Dizileri D\u00f6n\u00fc\u015ft\u00fcrmenin G\u00fc\u00e7l\u00fc Yolu\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/\",\"name\":\"Fatihsoysal.com\",\"description\":\"Blog - Yaz\u0131l\u0131m D\u00fcnyas\u0131 Tecr\u00fcbelerim\",\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/fatihsoysal.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"tr\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\",\"name\":\"Fatih Soysal\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"tr\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png\",\"contentUrl\":\"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png\",\"width\":512,\"height\":512,\"caption\":\"Fatih Soysal\"},\"logo\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/\"},\"description\":\"Kullan\u0131m ve kodlama m\u00fckemmeliyetini odak alan uygulamalar olu\u015fturma deneyimine sahip, profesyonel olarak 15+ y\u0131l \u00fczeri deneyime sahip bir yaz\u0131l\u0131m m\u00fchendisi.\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/author\/fatihsoysal\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"JavaScript'te map() Array Metodu: Dizileri D\u00f6n\u00fc\u015ft\u00fcrmenin G\u00fc\u00e7l\u00fc Yolu - Kodlar\u0131n Gizemli D\u00fcnyas\u0131","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/fatihsoysal.com\/blog\/javascriptte-map-array-metodu-dizileri-donusturmenin-guclu-yolu\/","og_locale":"tr_TR","og_type":"article","og_title":"JavaScript'te map() Array Metodu: Dizileri D\u00f6n\u00fc\u015ft\u00fcrmenin G\u00fc\u00e7l\u00fc Yolu","og_description":"JavaScript'te map() Array Metodu: Dizileri D\u00f6n\u00fc\u015ft\u00fcrmenin G\u00fc\u00e7l\u00fc Yolu JavaScript, modern web geli\u015ftirmede vazge\u00e7ilmez bir dil haline gelmi\u015fti","og_url":"https:\/\/fatihsoysal.com\/blog\/javascriptte-map-array-metodu-dizileri-donusturmenin-guclu-yolu\/","og_site_name":"Kodlar\u0131n Gizemli D\u00fcnyas\u0131","article_published_time":"2025-12-01T10:40:46+00:00","author":"Fatih Soysal","twitter_card":"summary_large_image","twitter_misc":{"Yazan:":"Fatih Soysal","Tahmini okuma s\u00fcresi":"17 dakika"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/fatihsoysal.com\/blog\/javascriptte-map-array-metodu-dizileri-donusturmenin-guclu-yolu\/#article","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/javascriptte-map-array-metodu-dizileri-donusturmenin-guclu-yolu\/"},"author":{"name":"Fatih Soysal","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"headline":"JavaScript’te map() Array Metodu: Dizileri D\u00f6n\u00fc\u015ft\u00fcrmenin G\u00fc\u00e7l\u00fc Yolu","datePublished":"2025-12-01T10:40:46+00:00","mainEntityOfPage":{"@id":"https:\/\/fatihsoysal.com\/blog\/javascriptte-map-array-metodu-dizileri-donusturmenin-guclu-yolu\/"},"wordCount":2494,"commentCount":0,"publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"articleSection":["Javascript"],"inLanguage":"tr","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/fatihsoysal.com\/blog\/javascriptte-map-array-metodu-dizileri-donusturmenin-guclu-yolu\/#respond"]}],"copyrightYear":"2025","copyrightHolder":{"@id":"https:\/\/fatihsoysal.com\/blog\/#organization"}},{"@type":"WebPage","@id":"https:\/\/fatihsoysal.com\/blog\/javascriptte-map-array-metodu-dizileri-donusturmenin-guclu-yolu\/","url":"https:\/\/fatihsoysal.com\/blog\/javascriptte-map-array-metodu-dizileri-donusturmenin-guclu-yolu\/","name":"JavaScript'te map() Array Metodu: Dizileri D\u00f6n\u00fc\u015ft\u00fcrmenin G\u00fc\u00e7l\u00fc Yolu - Kodlar\u0131n Gizemli D\u00fcnyas\u0131","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/#website"},"datePublished":"2025-12-01T10:40:46+00:00","breadcrumb":{"@id":"https:\/\/fatihsoysal.com\/blog\/javascriptte-map-array-metodu-dizileri-donusturmenin-guclu-yolu\/#breadcrumb"},"inLanguage":"tr","potentialAction":[{"@type":"ReadAction","target":["https:\/\/fatihsoysal.com\/blog\/javascriptte-map-array-metodu-dizileri-donusturmenin-guclu-yolu\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/fatihsoysal.com\/blog\/javascriptte-map-array-metodu-dizileri-donusturmenin-guclu-yolu\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Anasayfa","item":"https:\/\/fatihsoysal.com\/blog\/"},{"@type":"ListItem","position":2,"name":"JavaScript’te map() Array Metodu: Dizileri D\u00f6n\u00fc\u015ft\u00fcrmenin G\u00fc\u00e7l\u00fc Yolu"}]},{"@type":"WebSite","@id":"https:\/\/fatihsoysal.com\/blog\/#website","url":"https:\/\/fatihsoysal.com\/blog\/","name":"Fatihsoysal.com","description":"Blog - Yaz\u0131l\u0131m D\u00fcnyas\u0131 Tecr\u00fcbelerim","publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/fatihsoysal.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"tr"},{"@type":["Person","Organization"],"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1","name":"Fatih Soysal","image":{"@type":"ImageObject","inLanguage":"tr","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png","contentUrl":"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png","width":512,"height":512,"caption":"Fatih Soysal"},"logo":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/"},"description":"Kullan\u0131m ve kodlama m\u00fckemmeliyetini odak alan uygulamalar olu\u015fturma deneyimine sahip, profesyonel olarak 15+ y\u0131l \u00fczeri deneyime sahip bir yaz\u0131l\u0131m m\u00fchendisi.","url":"https:\/\/fatihsoysal.com\/blog\/author\/fatihsoysal\/"}]}},"yoast_meta":{"yoast_wpseo_title":"","yoast_wpseo_metadesc":"","yoast_wpseo_canonical":""},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/35591","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/comments?post=35591"}],"version-history":[{"count":1,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/35591\/revisions"}],"predecessor-version":[{"id":35592,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/35591\/revisions\/35592"}],"wp:attachment":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/media?parent=35591"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/categories?post=35591"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/tags?post=35591"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}