.map()<\/code> Metodu: Dizileri D\u00f6n\u00fc\u015ft\u00fcrmenin G\u00fc\u00e7l\u00fc Yolu<\/h2>\nJavaScript, web geli\u015ftirmenin temel ta\u015flar\u0131ndan biridir ve bu dilin sundu\u011fu g\u00fc\u00e7l\u00fc dizi metotlar\u0131, veri i\u015fleme s\u00fcre\u00e7lerini hem daha verimli hem de daha okunabilir hale getirir. Bu metotlar aras\u0131nda, \u00f6zellikle veri d\u00f6n\u00fc\u015f\u00fcm\u00fc s\u00f6z konusu oldu\u011funda \u00f6ne \u00e7\u0131kanlardan biri de Array.prototype.map()<\/code> metodudur. Bu makalede, .map()<\/code> metodunun ne oldu\u011funu, nas\u0131l \u00e7al\u0131\u015ft\u0131\u011f\u0131n\u0131, neden bu kadar \u00f6nemli oldu\u011funu ve farkl\u0131 senaryolarda nas\u0131l kullan\u0131labilece\u011fini ayr\u0131nt\u0131l\u0131 bir \u015fekilde inceleyece\u011fiz. Ayr\u0131ca, di\u011fer pop\u00fcler dizi metotlar\u0131yla kar\u015f\u0131la\u015ft\u0131rmalar yaparak, do\u011fru arac\u0131 do\u011fru zamanda se\u00e7menize yard\u0131mc\u0131 olaca\u011f\u0131z.<\/p>\nGiri\u015f: .map()<\/code> Nedir ve Neden \u00d6nemlidir?<\/h3>\nModern JavaScript geli\u015ftirme pratiklerinde, veri manip\u00fclasyonu ve d\u00f6n\u00fc\u015f\u00fcm\u00fc s\u00fcrekli kar\u015f\u0131la\u015f\u0131lan bir g\u00f6revdir. Bir diziye sahip oldu\u011funuzu ve bu dizinin her bir eleman\u0131n\u0131 belirli bir kurala g\u00f6re de\u011fi\u015ftirmek istedi\u011finizi d\u00fc\u015f\u00fcn\u00fcn. Geleneksel olarak, bu i\u015flemi bir for<\/code> d\u00f6ng\u00fcs\u00fc veya forEach<\/code> d\u00f6ng\u00fcs\u00fc ile yapabilirsiniz. Ancak, bu yakla\u015f\u0131mlar genellikle daha fazla kod sat\u0131r\u0131 gerektirir, yan etkilere a\u00e7\u0131k olabilir ve kodun okunabilirli\u011fini azaltabilir. \u0130\u015fte bu noktada .map()<\/code> metodu devreye girer.<\/p>\n.map()<\/code> metodu, bir dizinin her eleman\u0131 \u00fczerinde belirtilen bir fonksiyonu (geri \u00e7a\u011f\u0131r\u0131m fonksiyonu) \u00e7al\u0131\u015ft\u0131r\u0131r ve bu fonksiyonun d\u00f6nd\u00fcrd\u00fc\u011f\u00fc de\u011ferlerden olu\u015fan yeni bir dizi<\/em> olu\u015fturur. En kritik \u00f6zelli\u011fi, orijinal diziyi de\u011fi\u015ftirmemesidir; bu, i\u015flevsel programlama prensiplerinden biri olan “de\u011fi\u015fmezlik” (immutability) ilkesine uygun hareket etti\u011fi anlam\u0131na gelir. Bu \u00f6zellik, \u00f6zellikle karma\u015f\u0131k uygulamalarda beklenmedik yan etkileri \u00f6nleyerek kodun daha \u00f6ng\u00f6r\u00fclebilir ve bak\u0131m\u0131 daha kolay olmas\u0131n\u0131 sa\u011flar.<\/p>\n.map()<\/code>‘in \u00f6nemi, sadece veri d\u00f6n\u00fc\u015f\u00fcm\u00fcn\u00fc basitle\u015ftirmekle kalmaz, ayn\u0131 zamanda daha deklaratif (bildirimsel) bir programlama stilini te\u015fvik eder. Yani, “nas\u0131l” yap\u0131laca\u011f\u0131n\u0131 ad\u0131m ad\u0131m a\u00e7\u0131klamak yerine, “ne” yap\u0131laca\u011f\u0131n\u0131 ifade edersiniz. Bu, kodunuzu daha anla\u015f\u0131l\u0131r hale getirir ve geli\u015ftiricilerin niyetini daha h\u0131zl\u0131 kavramas\u0131na yard\u0131mc\u0131 olur.<\/p>\nTemel Kullan\u0131m ve S\u00f6zdizimi<\/h3>\n
.map()<\/code> metodunun temel s\u00f6zdizimi olduk\u00e7a basittir:<\/p>\nconst yeniDizi = orijinalDizi.map(callbackFunction(currentValue, index, array), thisArg);<\/code><\/pre>\n\u015eimdi bu s\u00f6zdizimindeki her bir par\u00e7ay\u0131 inceleyelim:<\/p>\n
* orijinalDizi<\/code><\/strong>: .map()<\/code> metodunun \u00e7a\u011fr\u0131ld\u0131\u011f\u0131 dizi. Bu dizi de\u011fi\u015fmeden kal\u0131r.
\n* yeniDizi<\/code><\/strong>: callbackFunction<\/code>‘\u0131n her \u00e7a\u011fr\u0131s\u0131ndan d\u00f6nen de\u011ferlerle olu\u015fturulan tamamen yeni dizi. Bu dizinin eleman say\u0131s\u0131 orijinal diziyle ayn\u0131d\u0131r.
\n* callbackFunction<\/code><\/strong>: Dizideki her eleman i\u00e7in bir kez y\u00fcr\u00fct\u00fclecek olan fonksiyondur. Bu fonksiyon \u00fc\u00e7 arg\u00fcman alabilir:
\n * currentValue<\/code> (zorunlu)<\/strong>: \u0130\u015flenmekte olan dizinin mevcut eleman\u0131.
\n * index<\/code> (iste\u011fe ba\u011fl\u0131)<\/strong>: \u0130\u015flenmekte olan mevcut eleman\u0131n indeksi.
\n * array<\/code> (iste\u011fe ba\u011fl\u0131)<\/strong>: .map()<\/code> metodunun \u00e7a\u011fr\u0131ld\u0131\u011f\u0131 dizi.
\n* thisArg<\/code> (iste\u011fe ba\u011fl\u0131)<\/strong>: callbackFunction<\/code> i\u00e7inde this<\/code> anahtar kelimesinin de\u011feri olarak kullan\u0131lacak nesne. Genellikle arrow fonksiyonlar\u0131 kullan\u0131ld\u0131\u011f\u0131nda veya callbackFunction<\/code> bir s\u0131n\u0131f metodu oldu\u011funda faydal\u0131d\u0131r.<\/p>\n\u00d6rnek 1: Say\u0131lar\u0131 \u0130kiyle \u00c7arpma<\/strong><\/p>\nBir say\u0131 dizisindeki her say\u0131y\u0131 ikiyle \u00e7arpmak istedi\u011fimizi varsayal\u0131m:<\/p>\n
const sayilar = [1, 2, 3, 4, 5];\n\n\/\/ Geleneksel for d\u00f6ng\u00fcs\u00fc ile\nconst ciftSayilarFor = [];\nfor (let i = 0; i < sayilar.length; i++) {\n ciftSayilarFor.push(sayilar[i] * 2);\n}\nconsole.log(ciftSayilarFor); \/\/ [2, 4, 6, 8, 10]\n\n\/\/ .map() metodu ile\nconst ciftSayilarMap = sayilar.map(function(sayi) {\n return sayi * 2;\n});\nconsole.log(ciftSayilarMap); \/\/ [2, 4, 6, 8, 10]\n\n\/\/ Arrow fonksiyonu ile daha k\u0131sa yaz\u0131m\nconst ciftSayilarArrow = sayilar.map(sayi => sayi * 2);\nconsole.log(ciftSayilarArrow); \/\/ [2, 4, 6, 8, 10]\n\nconsole.log(sayilar); \/\/ Orijinal dizi de\u011fi\u015fmedi: [1, 2, 3, 4, 5]<\/code><\/pre>\nYukar\u0131daki \u00f6rnekte g\u00f6rebilece\u011finiz gibi, .map()<\/code> metodu ayn\u0131 sonucu daha k\u0131sa, daha okunabilir ve daha az hata yapma potansiyeli olan bir \u015fekilde elde etmemizi sa\u011flar.<\/p>\n\u00d6rnek 2: String Dizisini B\u00fcy\u00fck Harfe \u00c7evirme<\/strong><\/p>\nBir isim dizisindeki t\u00fcm isimleri b\u00fcy\u00fck harfe \u00e7evirmek i\u00e7in .map()<\/code> kullanabiliriz:<\/p>\nconst isimler = [\"ali\", \"ay\u015fe\", \"mehmet\", \"fatma\"];\n\nconst buyukHarfIsimler = isimler.map(function(isim) {\n return isim.toUpperCase();\n});\n\nconsole.log(buyukHarfIsimler); \/\/ [\"AL\u0130\", \"AY\u015eE\", \"MEHMET\", \"FATMA\"]\nconsole.log(isimler); \/\/ Orijinal dizi de\u011fi\u015fmedi: [\"ali\", \"ay\u015fe\", \"mehmet\", \"fatma\"]<\/code><\/pre>\nBu \u00f6rnekler, .map()<\/code>‘in temel i\u015flevselli\u011fini ve nas\u0131l kullan\u0131ld\u0131\u011f\u0131n\u0131 net bir \u015fekilde g\u00f6stermektedir.<\/p>\n.map()<\/code> Nas\u0131l \u00c7al\u0131\u015f\u0131r?<\/h3>\n.map()<\/code> metodunun \u00e7al\u0131\u015fma prensibi olduk\u00e7a tutarl\u0131 ve basittir:<\/p>\n1. Iterasyon<\/strong>: .map()<\/code> metodu, \u00e7a\u011fr\u0131ld\u0131\u011f\u0131 dizinin (\u00f6rne\u011fin orijinalDizi<\/code>) her bir eleman\u0131 \u00fczerinde s\u0131ras\u0131yla iterasyon yapar.
\n2. Geri \u00c7a\u011f\u0131r\u0131m Fonksiyonunun \u00c7a\u011fr\u0131lmas\u0131<\/strong>: Her eleman i\u00e7in, callbackFunction<\/code> bir kez \u00e7a\u011fr\u0131l\u0131r. Bu \u00e7a\u011fr\u0131 s\u0131ras\u0131nda, currentValue<\/code> olarak mevcut eleman, index<\/code> olarak eleman\u0131n konumu ve array<\/code> olarak da orijinal dizi bu fonksiyona arg\u00fcman olarak iletilir.
\n3. D\u00f6n\u00fc\u015f De\u011feri<\/strong>: callbackFunction<\/code>‘\u0131n her \u00e7a\u011fr\u0131s\u0131 bir de\u011fer d\u00f6nd\u00fcrmelidir. Bu de\u011fer, yeni olu\u015fturulacak dizinin ilgili konumundaki eleman olacakt\u0131r. E\u011fer callbackFunction<\/code> a\u00e7\u0131k\u00e7a bir de\u011fer d\u00f6nd\u00fcrmezse (yani return<\/code> ifadesi yoksa), undefined<\/code> d\u00f6nd\u00fcr\u00fcl\u00fcr ve yeni dizide o konumda undefined<\/code> yer al\u0131r.
\n4. Yeni Dizi Olu\u015fturma<\/strong>: .map()<\/code> metodu, callbackFunction<\/code>‘\u0131n d\u00f6nd\u00fcrd\u00fc\u011f\u00fc t\u00fcm bu de\u011ferleri toplayarak yepyeni bir dizi olu\u015fturur.
\n5. De\u011fi\u015fmezlik<\/strong>: En \u00f6nemli nokta, orijinal dizinin hi\u00e7bir \u015fekilde de\u011fi\u015ftirilmemesidir. .map()<\/code> her zaman yeni bir dizi d\u00f6nd\u00fcr\u00fcr ve bu yeni dizinin eleman say\u0131s\u0131 orijinal diziyle ayn\u0131d\u0131r.<\/p>\nBu mekanizma, \u00f6zellikle React gibi k\u00fct\u00fcphanelerde UI bile\u015fenlerini dinamik olarak olu\u015ftururken veya bir API’den gelen verileri belirli bir formatta d\u00f6n\u00fc\u015ft\u00fcr\u00fcrken b\u00fcy\u00fck kolayl\u0131k sa\u011flar.<\/p>\n
Neden .map()<\/code> Kullanmal\u0131y\u0131z? Avantajlar\u0131<\/h3>\n.map()<\/code> metodunu kullanman\u0131n bir\u00e7ok avantaj\u0131 vard\u0131r ve bu avantajlar onu modern JavaScript geli\u015ftiricileri i\u00e7in vazge\u00e7ilmez bir ara\u00e7 haline getirir:<\/p>\n* Okunabilirlik ve Anla\u015f\u0131l\u0131rl\u0131k<\/strong>: .map()<\/code> metodunun ad\u0131, yapt\u0131\u011f\u0131 i\u015fi do\u011frudan belirtir: “bir diziyi ba\u015fka bir diziye d\u00f6n\u00fc\u015ft\u00fcrmek”. Bu, kodun amac\u0131n\u0131 ilk bak\u0131\u015fta anlamay\u0131 kolayla\u015ft\u0131r\u0131r. Geleneksel for<\/code> d\u00f6ng\u00fclerinde, d\u00f6ng\u00fcn\u00fcn ne yapt\u0131\u011f\u0131n\u0131 anlamak i\u00e7in d\u00f6ng\u00fc i\u00e7indeki mant\u0131\u011f\u0131 incelemeniz gerekirken, .map()<\/code> ile niyet daha a\u00e7\u0131kt\u0131r.
\n* \u0130\u015flevsel Programlama Yakla\u015f\u0131m\u0131<\/strong>: .map()<\/code> i\u015flevsel programlama prensiplerine s\u0131k\u0131 s\u0131k\u0131ya ba\u011fl\u0131d\u0131r. Yan etkilerden (side effects) ka\u00e7\u0131n\u0131r, yani orijinal veriyi de\u011fi\u015ftirmez. Bu, kodun daha \u00f6ng\u00f6r\u00fclebilir olmas\u0131n\u0131 sa\u011flar ve hatalar\u0131 azalt\u0131r. Her zaman ayn\u0131 girdi i\u00e7in ayn\u0131 \u00e7\u0131kt\u0131y\u0131 \u00fcretir (saf fonksiyon).
\n* De\u011fi\u015fmezlik (Immutability)<\/strong>: Orijinal diziyi de\u011fi\u015ftirmemesi, map<\/code>‘in en g\u00fc\u00e7l\u00fc \u00f6zelliklerinden biridir. Bu, \u00f6zellikle b\u00fcy\u00fck ve karma\u015f\u0131k uygulamalarda veri ak\u0131\u015f\u0131n\u0131 y\u00f6netirken \u00e7ok \u00f6nemlidir. Orijinal verinin bozulmad\u0131\u011f\u0131ndan emin olmak, hata ay\u0131klamay\u0131 kolayla\u015ft\u0131r\u0131r ve beklenmedik durumlar\u0131 engeller.
\n* Daha Az Hata<\/strong>: Geleneksel for<\/code> d\u00f6ng\u00fcleri, d\u00f6ng\u00fc de\u011fi\u015fkenlerini yanl\u0131\u015f ba\u015flatma, yanl\u0131\u015f sonland\u0131rma veya indeks hatalar\u0131 gibi yayg\u0131n hata kaynaklar\u0131na sahiptir. .map()<\/code> bu t\u00fcr d\u00f6ng\u00fc y\u00f6netim detaylar\u0131n\u0131 soyutlayarak, geli\u015ftiricinin sadece d\u00f6n\u00fc\u015f\u00fcm mant\u0131\u011f\u0131na odaklanmas\u0131n\u0131 sa\u011flar ve bu t\u00fcr hatalar\u0131 ortadan kald\u0131r\u0131r.
\n* Zincirleme (Chaining)<\/strong>: .map()<\/code> yeni bir dizi d\u00f6nd\u00fcrd\u00fc\u011f\u00fc i\u00e7in, di\u011fer dizi metotlar\u0131yla (\u00f6rne\u011fin filter()<\/code>, reduce()<\/code>) kolayca zincirlenebilir. Bu, karma\u015f\u0131k veri i\u015fleme ad\u0131mlar\u0131n\u0131 tek bir ak\u0131c\u0131 ve okunabilir ifadeyle birle\u015ftirmenizi sa\u011flar.
\n* Modern JavaScript Prati\u011fi<\/strong>: .map()<\/code> ve benzeri dizi metotlar\u0131, g\u00fcn\u00fcm\u00fcz JavaScript ekosisteminde end\u00fcstri standard\u0131 haline gelmi\u015ftir. Bu metotlar\u0131 kullanmak, kodunuzu daha modern, s\u00fcrd\u00fcr\u00fclebilir ve di\u011fer geli\u015ftiriciler taraf\u0131ndan daha kolay anla\u015f\u0131labilir k\u0131lar.<\/p>\nBu avantajlar, .map()<\/code>‘i sadece bir veri d\u00f6n\u00fc\u015f\u00fcm arac\u0131 olmaktan \u00e7\u0131kar\u0131p, temiz, verimli ve g\u00fcvenilir JavaScript kodu yazmak i\u00e7in temel bir yap\u0131 ta\u015f\u0131 haline getirir.<\/p>\n.map()<\/code> ve Di\u011fer Dizi Metotlar\u0131 Aras\u0131ndaki Farklar<\/h3>\nJavaScript’te .map()<\/code>‘e benzer g\u00f6r\u00fcnen veya onunla birlikte kullan\u0131lan ba\u015fka dizi metotlar\u0131 da vard\u0131r. Bunlar\u0131 anlamak, her bir metodun ne zaman ve neden kullan\u0131laca\u011f\u0131n\u0131 belirlemek i\u00e7in \u00e7ok \u00f6nemlidir.<\/p>\nforEach()<\/code> ile Fark\u0131<\/h4>\nforEach()<\/code> metodu da bir dizinin her eleman\u0131 \u00fczerinde bir geri \u00e7a\u011f\u0131r\u0131m fonksiyonu \u00e7al\u0131\u015ft\u0131r\u0131r, t\u0131pk\u0131 .map()<\/code> gibi. Ancak temel ve en \u00f6nemli fark, forEach()<\/code>‘in herhangi bir de\u011fer d\u00f6nd\u00fcrmemesi<\/strong>dir. forEach()<\/code> her zaman undefined<\/code> d\u00f6nd\u00fcr\u00fcr. Amac\u0131, her eleman i\u00e7in bir yan etki (\u00f6rne\u011fin, konsola yazd\u0131rma, bir DOM eleman\u0131n\u0131 g\u00fcncelleme) ger\u00e7ekle\u015ftirmektir, yeni bir dizi olu\u015fturmak de\u011fildir.<\/p>\nconst sayilar = [1, 2, 3];\n\n\/\/ .forEach() ile: Yan etki olu\u015fturur, yeni dizi d\u00f6nd\u00fcrmez\nlet toplam = 0;\nconst forEachSonuc = sayilar.forEach(sayi => {\n toplam += sayi;\n console.log(forEach: Mevcut say\u0131 ${sayi}<\/code>);\n});\nconsole.log(\"forEach sonucu:\", forEachSonuc); \/\/ undefined\nconsole.log(\"Toplam:\", toplam); \/\/ 6\n\n\/\/ .map() ile: Yeni dizi d\u00f6nd\u00fcr\u00fcr, yan etki olu\u015fturmaz (genellikle)\nconst mapSonuc = sayilar.map(sayi => sayi * 2);\nconsole.log(\"map sonucu:\", mapSonuc); \/\/ [2, 4, 6]<\/code><\/pre>\nNe zaman hangisini kullanmal\u0131?<\/strong>
\n* forEach()<\/code><\/strong>: Bir dizinin her eleman\u0131 \u00fczerinde bir i\u015flem yapman\u0131z ve bu i\u015flem sonucunda yeni bir diziye ihtiyac\u0131n\u0131z olmamas\u0131 durumunda. \u00d6rne\u011fin, bir veritaban\u0131na her eleman\u0131 kaydetmek, bir log dosyas\u0131na yazmak veya bir UI eleman\u0131n\u0131 g\u00fcncellemek gibi yan etkiler i\u00e7in idealdir.
\n* map()<\/code><\/strong>: Bir dizinin her eleman\u0131n\u0131 d\u00f6n\u00fc\u015ft\u00fcrerek, ayn\u0131 uzunlukta yeni bir dizi olu\u015fturman\u0131z gerekti\u011finde. Orijinal dizinin de\u011fi\u015fmeden kalmas\u0131 ve d\u00f6n\u00fc\u015f\u00fcm sonucunu kullanman\u0131z gerekti\u011fi senaryolarda tercih edilir.<\/p>\nfilter()<\/code> ile Fark\u0131<\/h4>\nfilter()<\/code> metodu da .map()<\/code> gibi yeni bir dizi d\u00f6nd\u00fcr\u00fcr ve orijinal diziyi de\u011fi\u015ftirmez. Ancak filter()<\/code>‘\u0131n amac\u0131, bir dizideki elemanlar\u0131 belirli bir ko\u015fula g\u00f6re “filtrelemek”tir. callbackFunction<\/code>, her eleman i\u00e7in true<\/code> veya false<\/code> d\u00f6nd\u00fcrmelidir. E\u011fer true<\/code> d\u00f6nerse, o eleman yeni diziye dahil edilir; false<\/code> d\u00f6nerse, dahil edilmez. Bu nedenle, filter()<\/code> taraf\u0131ndan d\u00f6nd\u00fcr\u00fclen dizinin eleman say\u0131s\u0131 orijinal diziden daha az veya e\u015fit olabilir.<\/p>\nconst sayilar = [1, 2, 3, 4, 5, 6];\n\n\/\/ .filter() ile: Belirli bir ko\u015fulu sa\u011flayan elemanlar\u0131 se\u00e7er\nconst ciftSayilar = sayilar.filter(sayi => sayi % 2 === 0);\nconsole.log(\"Filtrelenmi\u015f \u00e7ift say\u0131lar:\", ciftSayilar); \/\/ [2, 4, 6]\nconsole.log(\"Orijinal say\u0131lar:\", sayilar); \/\/ [1, 2, 3, 4, 5, 6]\n\n\/\/ .map() ile: Her eleman\u0131 d\u00f6n\u00fc\u015ft\u00fcr\u00fcr, eleman say\u0131s\u0131 de\u011fi\u015fmez\nconst karesiAlinmisSayilar = sayilar.map(sayi => sayi * sayi);\nconsole.log(\"Karesi al\u0131nm\u0131\u015f say\u0131lar:\", karesiAlinmisSayilar); \/\/ [1, 4, 9, 16, 25, 36]<\/code><\/pre>\nNe zaman hangisini kullanmal\u0131?<\/strong>
\n* filter()<\/code><\/strong>: Bir diziden belirli kriterlere uyan elemanlar\u0131 ay\u0131klaman\u0131z ve orijinal dizinin bir alt k\u00fcmesini olu\u015fturman\u0131z gerekti\u011finde.
\n* map()<\/code><\/strong>: Bir dizinin her eleman\u0131n\u0131 d\u00f6n\u00fc\u015ft\u00fcrmeniz ve ayn\u0131 say\u0131da elemana sahip yeni bir diziye ihtiyac\u0131n\u0131z oldu\u011funda.<\/p>\nBirlikte Kullan\u0131m (Zincirleme):<\/strong>
\nfilter()<\/code> ve map()<\/code> genellikle birlikte zincirlenerek karma\u015f\u0131k d\u00f6n\u00fc\u015f\u00fcmler ger\u00e7ekle\u015ftirilir:<\/p>\nconst urunler = [\n { id: 1, ad: \"Laptop\", fiyat: 1200, stok: 10 },\n { id: 2, ad: \"Fare\", fiyat: 25, stok: 0 },\n { id: 3, ad: \"Klavye\", fiyat: 75, stok: 5 },\n { id: 4, ad: \"Monit\u00f6r\", fiyat: 300, stok: 12 }\n];\n\n\/\/ Stokta olan \u00fcr\u00fcnlerin sadece adlar\u0131n\u0131 ve indirimli fiyatlar\u0131n\u0131 (fiyat*0.9) alal\u0131m\nconst indirimliUrunAdlari = urunler\n .filter(urun => urun.stok > 0) \/\/ Sadece stokta olanlar\u0131 filtrele\n .map(urun => ({\n ad: urun.ad,\n indirimliFiyat: urun.fiyat * 0.9\n })); \/\/ Her birini yeni bir nesneye d\u00f6n\u00fc\u015ft\u00fcr\n\nconsole.log(indirimliUrunAdlari);\n\/*\n[\n { ad: 'Laptop', indirimliFiyat: 1080 },\n { ad: 'Klavye', indirimliFiyat: 67.5 },\n { ad: 'Monit\u00f6r', indirimliFiyat: 270 }\n]\n*\/<\/code><\/pre>\nBu \u00f6rnek, zincirlemenin ne kadar g\u00fc\u00e7l\u00fc olabilece\u011fini g\u00f6stermektedir. \u00d6nce filtreleme, sonra d\u00f6n\u00fc\u015ft\u00fcrme i\u015flemi tek bir ak\u0131c\u0131 sat\u0131rda yap\u0131lm\u0131\u015ft\u0131r.<\/p>\n
reduce()<\/code> ile Fark\u0131<\/h4>\nreduce()<\/code> metodu, bir dizideki t\u00fcm elemanlar\u0131 tek bir de\u011fere (say\u0131, dize, nesne, dizi vb.) indirgemek i\u00e7in kullan\u0131l\u0131r. Bu metodun callbackFunction<\/code>‘\u0131 d\u00f6rt arg\u00fcman al\u0131r: accumulator<\/code> (toplay\u0131c\u0131), currentValue<\/code> (mevcut de\u011fer), currentIndex<\/code> (mevcut indeks) ve array<\/code> (dizi). accumulator<\/code>, her iterasyonda geri \u00e7a\u011f\u0131r\u0131m fonksiyonunun d\u00f6nd\u00fcrd\u00fc\u011f\u00fc de\u011feri tutar ve bir sonraki iterasyonda ba\u015flang\u0131\u00e7 de\u011feri olarak kullan\u0131l\u0131r.<\/p>\nconst sayilar = [1, 2, 3, 4, 5];\n\n\/\/ .reduce() ile: T\u00fcm elemanlar\u0131n toplam\u0131n\u0131 bulma (tek bir de\u011fere indirgeme)\nconst toplam = sayilar.reduce((acc, current) => acc + current, 0); \/\/ 0 ba\u015flang\u0131\u00e7 de\u011feri\nconsole.log(\"Toplam (reduce):\", toplam); \/\/ 15\n\n\/\/ .map() ile: Her eleman\u0131 d\u00f6n\u00fc\u015ft\u00fcrerek yeni bir dizi olu\u015fturma\nconst kareler = sayilar.map(sayi => sayi * sayi);\nconsole.log(\"Kareler (map):\", kareler); \/\/ [1, 4, 9, 16, 25]<\/code><\/pre>\nNe zaman hangisini kullanmal\u0131?<\/strong>
\n* reduce()<\/code><\/strong>: Bir dizi elemanlar\u0131n\u0131 tek bir sonuca (bir toplam, ortalama, tek bir nesne, tek bir birle\u015ftirilmi\u015f dize vb.) d\u00f6n\u00fc\u015ft\u00fcrmeniz gerekti\u011finde.
\n* map()<\/code><\/strong>: Bir dizinin her eleman\u0131n\u0131 d\u00f6n\u00fc\u015ft\u00fcrerek, ayn\u0131 uzunlukta yeni bir dizi olu\u015fturman\u0131z gerekti\u011finde.<\/p>\nHer \u00fc\u00e7 metot (map<\/code>, filter<\/code>, reduce<\/code>) de orijinal diziyi de\u011fi\u015ftirmez ve yeni bir dizi (veya reduce<\/code> durumunda tek bir de\u011fer) d\u00f6nd\u00fcr\u00fcr. Bu da onlar\u0131 i\u015flevsel programlama i\u00e7in harika ara\u00e7lar yapar.<\/p>\nPratik Kullan\u0131m Senaryolar\u0131 ve \u0130leri D\u00fczey \u00d6rnekler<\/h3>\n
.map()<\/code> metodunun g\u00fcc\u00fc, sadece basit d\u00f6n\u00fc\u015f\u00fcmlerle s\u0131n\u0131rl\u0131 de\u011fildir. Ger\u00e7ek d\u00fcnya uygulamalar\u0131nda, karma\u015f\u0131k veri yap\u0131lar\u0131n\u0131 manip\u00fcle etmekten kullan\u0131c\u0131 aray\u00fczleri olu\u015fturmaya kadar geni\u015f bir yelpazede kullan\u0131l\u0131r.<\/p>\nNesne Dizilerini D\u00f6n\u00fc\u015ft\u00fcrme<\/h4>\n
API’lerden gelen veriler genellikle karma\u015f\u0131k nesne dizileri \u015feklinde olur. Bu verileri kullan\u0131c\u0131 aray\u00fcz\u00fcnde g\u00f6stermeden \u00f6nce belirli bir formata d\u00f6n\u00fc\u015ft\u00fcrmek yayg\u0131n bir ihtiya\u00e7t\u0131r.<\/p>\n
const kullanicilarApiVerisi = [\n { id: \"user1\", firstName: \"Ali\", lastName: \"Can\", email: \"ali@example.com\", isActive: true },\n { id: \"user2\", firstName: \"Ay\u015fe\", lastName: \"Y\u0131lmaz\", email: \"ayse@example.com\", isActive: false },\n { id: \"user3\", firstName: \"Mehmet\", lastName: \"Demir\", email: \"mehmet@example.com\", isActive: true }\n];\n\n\/\/ Sadece aktif kullan\u0131c\u0131lar\u0131n tam ad\u0131n\u0131 ve e-postas\u0131n\u0131 i\u00e7eren bir dizi olu\u015ftural\u0131m\nconst aktifKullaniciBilgileri = kullanicilarApiVerisi\n .filter(kullanici => kullanici.isActive)\n .map(kullanici => ({\n fullName: ${kullanici.firstName} ${kullanici.lastName}<\/code>,\n contactEmail: kullanici.email\n }));\n\nconsole.log(aktifKullaniciBilgileri);\n\/*\n[\n { fullName: 'Ali Can', contactEmail: 'ali@example.com' },\n { fullName: 'Mehmet Demir', contactEmail: 'mehmet@example.com' }\n]\n*\/<\/code><\/pre>\nBu \u00f6rnekte, \u00f6nce filter<\/code> ile aktif kullan\u0131c\u0131lar se\u00e7iliyor, ard\u0131ndan map<\/code> ile her bir kullan\u0131c\u0131 nesnesi, UI’da g\u00f6sterilmeye haz\u0131r yeni bir formatta d\u00f6n\u00fc\u015ft\u00fcr\u00fcl\u00fcyor.<\/p>\nReact\/Vue gibi Frontend \u00c7er\u00e7evelerinde Kullan\u0131m<\/h4>\n
Frontend \u00e7er\u00e7evelerinde, dinamik listeler veya bile\u015fen koleksiyonlar\u0131 olu\u015fturmak i\u00e7in .map()<\/code> vazge\u00e7ilmezdir.<\/p>\nReact \u00d6rne\u011fi (JSX i\u00e7inde):<\/strong><\/p>\nimport React from 'react';\n\nconst products = [\n { id: 1, name: 'Laptop', price: 1200 },\n { id: 2, name: 'Mouse', price: 25 },\n { id: 3, name: 'Keyboard', price: 75 },\n];\n\nfunction ProductList() {\n return (\n \n \u00dcr\u00fcnlerimiz<\/h2>\n \n {products.map(product => (\n - \n {product.name} - ${product.price}\n <\/li>\n ))}\n <\/ul>\n <\/div>\n );\n}\n\nexport default ProductList;<\/code><\/pre>\n
Burada products<\/code> dizisindeki her bir \u00fcr\u00fcn nesnesi, bir <\/p>\n- <\/code> eleman\u0131na d\u00f6n\u00fc\u015ft\u00fcr\u00fcl\u00fcyor.
key<\/code> prop’u, React’in liste elemanlar\u0131n\u0131 verimli bir \u015fekilde g\u00fcncellemesi i\u00e7in \u00f6nemlidir ve .map()<\/code> ile her zaman benzersiz bir de\u011fer d\u00f6nd\u00fcr\u00fclmelidir.
\nKo\u015fullu D\u00f6n\u00fc\u015f\u00fcmler<\/h4>\n
callbackFunction<\/code> i\u00e7inde if\/else<\/code> veya ternary operat\u00f6rleri kullanarak elemanlar\u0131 ko\u015fullu olarak d\u00f6n\u00fc\u015ft\u00fcrebilirsiniz.<\/p>\nconst puanlar = [75, 40, 90, 55, 80];\n\n\/\/ Ge\u00e7enlere \"Ge\u00e7ti\", kalanlara \"Kald\u0131\" yazal\u0131m\nconst durumlar = puanlar.map(puan => {\n if (puan >= 50) {\n return \"Ge\u00e7ti\";\n } else {\n return \"Kald\u0131\";\n }\n});\n\nconsole.log(durumlar); \/\/ [\"Ge\u00e7ti\", \"Kald\u0131\", \"Ge\u00e7ti\", \"Ge\u00e7ti\", \"Ge\u00e7ti\"]\n\n\/\/ Ternary operat\u00f6r\u00fc ile daha k\u0131sa yaz\u0131m\nconst durumlarTernary = puanlar.map(puan => (puan >= 50 ? \"Ge\u00e7ti\" : \"Kald\u0131\"));\nconsole.log(durumlarTernary); \/\/ [\"Ge\u00e7ti\", \"Kald\u0131\", \"Ge\u00e7ti\", \"Ge\u00e7ti\", \"Ge\u00e7ti\"]<\/code><\/pre>\nArrow Fonksiyonlar\u0131 ile Daha K\u0131sa Yaz\u0131m<\/h4>\n
Arrow fonksiyonlar\u0131, .map()<\/code> gibi geri \u00e7a\u011f\u0131r\u0131m fonksiyonlar\u0131n\u0131 daha k\u0131sa ve okunabilir hale getirir. \u00d6zellikle tek sat\u0131rl\u0131k d\u00f6n\u00fc\u015f\u00fcmlerde bu fark belirgindir.<\/p>\nconst kelimeler = [\"elma\", \"armut\", \"kiraz\"];\n\n\/\/ Geleneksel fonksiyon\nconst uzunluklarGeleneksel = kelimeler.map(function(kelime) {\n return kelime.length;\n});\nconsole.log(uzunluklarGeleneksel); \/\/ [4, 5, 5]\n\n\/\/ Arrow fonksiyonu (tek parametre, tek ifade)\nconst uzunluklarArrow = kelimeler.map(kelime => kelime.length);\nconsole.log(uzunluklarArrow); \/\/ [4, 5, 5]\n\n\/\/ Arrow fonksiyonu (birden fazla parametre, tek ifade)\nconst indeksliKelimeler = kelimeler.map((kelime, index) => ${index + 1}. ${kelime}<\/code>);\nconsole.log(indeksliKelimeler); \/\/ [\"1. elma\", \"2. armut\", \"3. kiraz\"]<\/code><\/pre>\nArrow fonksiyonlar\u0131n\u0131n this<\/code> ba\u011flam\u0131n\u0131 lexical olarak ba\u011flamas\u0131, yani tan\u0131mland\u0131\u011f\u0131 kapsamdaki this<\/code> de\u011ferini almas\u0131, bazen thisArg<\/code> kullanma ihtiyac\u0131n\u0131 ortadan kald\u0131rabilir.<\/p>\nthisArg<\/code> Parametresinin Kullan\u0131m\u0131<\/h4>\nNadiren de olsa, callbackFunction<\/code> i\u00e7inde this<\/code> anahtar kelimesini belirli bir de\u011fere ba\u011flaman\u0131z gerekebilir. thisArg<\/code> parametresi bu amaca hizmet eder.<\/p>\nclass Hesaplayici {\n constructor(carpan) {\n this.carpan = carpan;\n }\n\n carp(sayi) {\n return sayi * this.carpan;\n }\n}\n\nconst sayilar = [1, 2, 3];\nconst hesaplayici = new Hesaplayici(5);\n\n\/\/ E\u011fer thisArg kullanmazsak, carp fonksiyonundaki this undefined olur\n\/\/ const sonucYanlis = sayilar.map(hesaplayici.carp); \/\/ Hata: 'this' undefined\n\n\/\/ thisArg kullanarak hesaplayici nesnesini carp fonksiyonunun this'i olarak ba\u011flar\u0131z\nconst sonucDogru = sayilar.map(hesaplayici.carp, hesaplayici);\nconsole.log(sonucDogru); \/\/ [5, 10, 15]\n\n\/\/ Arrow fonksiyonlar\u0131 lexical this'e sahip oldu\u011fu i\u00e7in bu senaryoda daha basittir:\nconst sonucArrow = sayilar.map(sayi => hesaplayici.carp(sayi));\nconsole.log(sonucArrow); \/\/ [5, 10, 15]<\/code><\/pre>\nthisArg<\/code> kullan\u0131m\u0131, \u00f6zellikle eski tarz fonksiyon tan\u0131mlar\u0131 veya belirli k\u00fct\u00fcphanelerle entegrasyonlarda faydal\u0131 olabilirken, modern JavaScript’te arrow fonksiyonlar\u0131 genellikle bu ihtiyac\u0131 daha zarif bir \u015fekilde kar\u015f\u0131lar.<\/p>\nZincirleme (Chaining) Uygulamalar\u0131<\/h4>\n
Daha \u00f6nce de bahsedildi\u011fi gibi, .map()<\/code>‘in yeni bir dizi d\u00f6nd\u00fcrmesi, di\u011fer dizi metotlar\u0131yla zincirleme yapmay\u0131 m\u00fcmk\u00fcn k\u0131lar. Bu, karma\u015f\u0131k veri i\u015fleme ad\u0131mlar\u0131n\u0131 tek bir ak\u0131c\u0131 ifadede birle\u015ftirmenizi sa\u011flar.<\/p>\nconst ogrenciler = [\n { ad: \"Ay\u015fe\", notlar: [80, 90, 75], cinsiyet: \"K\" },\n { ad: \"Ali\", notlar: [60, 50, 70], cinsiyet: \"E\" },\n { ad: \"Fatma\", notlar: [95, 85, 90], cinsiyet: \"K\" },\n { ad: \"Can\", notlar: [40, 30, 20], cinsiyet: \"E\" }\n];\n\n\/\/ 1. Sadece k\u0131z \u00f6\u011frencileri filtrele.\n\/\/ 2. Her bir k\u0131z \u00f6\u011frencinin not ortalamas\u0131n\u0131 hesapla.\n\/\/ 3. Ortalamas\u0131 80 ve \u00fczeri olanlar\u0131n ad\u0131n\u0131 ve ortalamas\u0131n\u0131 i\u00e7eren yeni bir dizi olu\u015ftur.\n\nconst basariliKizOgrenciler = ogrenciler\n .filter(ogrenci => ogrenci.cinsiyet === \"K\") \/\/ K\u0131z \u00f6\u011frencileri filtrele\n .map(ogrenci => {\n const toplamNot = ogrenci.notlar.reduce((sum, not) => sum + not, 0);\n const ortalama = toplamNot \/ ogrenci.notlar.length;\n return { ad: ogrenci.ad, ortalama: ortalama }; \/\/ Ad ve ortalama i\u00e7eren nesneye d\u00f6n\u00fc\u015ft\u00fcr\n })\n .filter(ogrenci => ogrenci.ortalama >= 80); \/\/ Ortalamas\u0131 80 ve \u00fczeri olanlar\u0131 filtrele\n\nconsole.log(basariliKizOgrenciler);\n\/*\n[\n { ad: 'Ay\u015fe', ortalama: 81.66666666666667 },\n { ad: 'Fatma', ortalama: 90 }\n]\n*\/<\/code><\/pre>\nBu \u00f6rnek, filter<\/code>, map<\/code> ve reduce<\/code> metotlar\u0131n\u0131n bir araya gelerek nas\u0131l g\u00fc\u00e7l\u00fc bir veri i\u015fleme hatt\u0131 olu\u015fturdu\u011funu g\u00f6stermektedir. Her ad\u0131mda yeni bir dizi olu\u015fturuldu\u011fu i\u00e7in orijinal ogrenciler<\/code> dizisi de\u011fi\u015fmeden kal\u0131r.<\/p>\nPotansiyel Tuzaklar ve Dikkat Edilmesi Gerekenler<\/h3>\n
.map()<\/code> metodu g\u00fc\u00e7l\u00fc ve kullan\u0131\u015fl\u0131 olsa da, baz\u0131 noktalara dikkat etmek \u00f6nemlidir:<\/p>\n* Performans (B\u00fcy\u00fck Diziler)<\/strong>: \u00c7ok b\u00fcy\u00fck dizilerle \u00e7al\u0131\u015f\u0131rken (\u00f6rne\u011fin, y\u00fcz binlerce veya milyonlarca eleman), .map()<\/code> gibi her eleman \u00fczerinde iterasyon yapan metotlar\u0131n performans\u0131 etkileyebilece\u011fini unutmay\u0131n. \u00c7o\u011fu web uygulamas\u0131 i\u00e7in bu bir sorun te\u015fkil etmez, ancak performans kritik uygulamalarda dikkatli olmak ve gerekti\u011finde farkl\u0131 algoritmalar veya optimize edilmi\u015f yakla\u015f\u0131mlar d\u00fc\u015f\u00fcnmek gerekebilir. Ancak genellikle, elle yaz\u0131lm\u0131\u015f bir for<\/code> d\u00f6ng\u00fcs\u00fcne g\u00f6re taray\u0131c\u0131lar taraf\u0131ndan daha iyi optimize edilmi\u015f olabilir.
\n* Bo\u015f Diziler<\/strong>: Bo\u015f bir dizi \u00fczerinde .map()<\/code> \u00e7a\u011f\u0131rmak, bo\u015f bir dizi d\u00f6nd\u00fcr\u00fcr. Bu beklenen bir davran\u0131\u015ft\u0131r ve genellikle bir sorun te\u015fkil etmez:<\/p>\nconst bosDizi = [];\n const sonuc = bosDizi.map(item => item * 2);\n console.log(sonuc); \/\/ []<\/code><\/pre>\n* Yan Etkilerden Ka\u00e7\u0131nma<\/strong>: .map()<\/code>‘in temel prensibi, orijinal diziyi de\u011fi\u015ftirmemektir. callbackFunction<\/code> i\u00e7inde orijinal dizinin elemanlar\u0131n\u0131 veya d\u0131\u015far\u0131daki de\u011fi\u015fkenleri de\u011fi\u015ftirmekten ka\u00e7\u0131nmal\u0131s\u0131n\u0131z. Bu t\u00fcr yan etkiler, kodun \u00f6ng\u00f6r\u00fclemez hale gelmesine ve hata ay\u0131klaman\u0131n zorla\u015fmas\u0131na neden olabilir. E\u011fer yan etkilere ihtiyac\u0131n\u0131z varsa, forEach()<\/code> daha uygun bir se\u00e7im olabilir.<\/p>\nconst sayilar = [1, 2, 3];\n const yanEtkiliSonuc = sayilar.map(sayi => {\n sayilar[0] = 99; \/\/ D\u0130KKAT: Orijinal diziyi de\u011fi\u015ftiriyoruz!\n return sayi * 2;\n });\n console.log(yanEtkiliSonuc); \/\/ [2, 4, 6]\n console.log(sayilar); \/\/ [99, 2, 3] - Orijinal dizi de\u011fi\u015fti! Bu k\u00f6t\u00fc bir pratik.<\/code><\/pre>\n* Seyrek Diziler (Sparse Arrays)<\/strong>: .map()<\/code> seyrek dizilerdeki (yani baz\u0131 indekslerde eleman olmayan diziler) bo\u015f yuvalar\u0131 atlar. Bu yuvalar i\u00e7in callbackFunction<\/code> \u00e7a\u011fr\u0131lmaz.<\/p>\nconst seyrekDizi = [1, , 3]; \/\/ \u0130kinci eleman bo\u015f\n const sonuc = seyrekDizi.map(sayi => sayi * 2);\n console.log(sonuc); \/\/ [2,