{"id":29021,"date":"2025-09-06T16:00:30","date_gmt":"2025-09-06T13:00:30","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/javascript-array-metotlari-kapsamli-bir-rehber\/"},"modified":"2025-09-06T16:00:30","modified_gmt":"2025-09-06T13:00:30","slug":"javascript-array-metotlari-kapsamli-bir-rehber","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/javascript-array-metotlari-kapsamli-bir-rehber\/","title":{"rendered":"JavaScript Array Metotlar\u0131: Kapsaml\u0131 Bir Rehber"},"content":{"rendered":"

JavaScript Array Metotlar\u0131: Kapsaml\u0131 Bir Rehber<\/p>\n

JavaScript’te dizi manip\u00fclasyonu, web uygulamalar\u0131n\u0131n dinamik ve verimli \u00e7al\u0131\u015fmas\u0131 i\u00e7in olmazsa olmazd\u0131r. Bu rehberde, JavaScript’in sundu\u011fu g\u00fc\u00e7l\u00fc dizi metotlar\u0131n\u0131; temel seviyeden ileri seviyeye, ad\u0131m ad\u0131m ve bolca \u00f6rneklerle inceleyece\u011fiz. Veri i\u015fleme s\u00fcre\u00e7lerinizi optimize etmenize, daha temiz ve okunabilir kodlar yazman\u0131za yard\u0131mc\u0131 olacak bu rehber, JavaScript yolculu\u011funuzda size e\u015flik edecek. Dizi metotlar\u0131n\u0131n g\u00fcc\u00fcn\u00fc ke\u015ffetmeye haz\u0131r m\u0131s\u0131n\u0131z?<\/p>\n

JavaScript Dizileriyle Tan\u0131\u015fma: Temel Kavramlar<\/h2>\n

JavaScript dizileri, s\u0131ral\u0131 bir veri koleksiyonunu tutmak i\u00e7in kullan\u0131lan, birden fazla de\u011feri tek bir de\u011fi\u015fkende saklaman\u0131za olanak tan\u0131yan temel yap\u0131lard\u0131r. Diziler, say\u0131lar, dizeler, nesneler veya di\u011fer dizileri bile i\u00e7erebilirler. Dizilere s\u0131f\u0131r tabanl\u0131 indeksleme ile eri\u015filir, yani ilk eleman 0. indekste, ikinci eleman 1. indekste yer al\u0131r. Yeni bir dizi olu\u015fturman\u0131n en yayg\u0131n yolu k\u00f6\u015feli parantezler ([]<\/code>) kullanmakt\u0131r. \u00d6rne\u011fin:<\/p>\n

let sayilar = [10, 20, 30, 40, 50];\nlet isimler = [\"Ahmet\", \"Mehmet\", \"Ay\u015fe\"];\nlet karisikDizi = [10, \"Merhaba\", {ad:\"Ali\", yas:30}];<\/pre>\n
<\/code><\/p>\n
Bu \u00f6rneklerde, farkl\u0131 veri tiplerini i\u00e7eren diziler olu\u015fturduk.  Dizilerin boyutu dinamiktir, yani \u00e7al\u0131\u015fma zaman\u0131nda eleman ekleyip \u00e7\u0131karabilirsiniz.  Dizilerin temel \u00f6zelliklerini kavrad\u0131ktan sonra, metotlar\u0131n\u0131 incelemeye ba\u015flayabiliriz.  A\u015fa\u011f\u0131daki b\u00f6l\u00fcmlerde, \u00e7e\u015fitli dizi metotlar\u0131n\u0131 detayl\u0131 olarak ele alaca\u011f\u0131z.  Bu metotlar\u0131 etkili bir \u015fekilde kullanarak, kodlar\u0131n\u0131z\u0131 daha verimli ve okunabilir hale getirebilirsiniz.<\/p>\n
JavaScript Array Metotlar\u0131: Yeni Ba\u015flayanlar \u0130\u00e7in<\/h2>\n
Yeni ba\u015flayanlar i\u00e7in en temel ve s\u0131k kullan\u0131lan JavaScript dizi metotlar\u0131n\u0131 inceleyelim. Bu metotlar\u0131 anlamak, daha karma\u015f\u0131k dizi i\u015flemlerini anlaman\u0131n temelini olu\u015fturacakt\u0131r. \u00d6ncelikle,  length<\/code> \u00f6zelli\u011finden ba\u015flayal\u0131m.  length<\/code>, dizinin i\u00e7indeki eleman say\u0131s\u0131n\u0131 verir.  Daha sonra ise push()<\/code>, pop()<\/code>, unshift()<\/code>, shift()<\/code> metotlar\u0131n\u0131 ele alaca\u011f\u0131z. Bunlar, dizinin ba\u015f\u0131na veya sonuna eleman eklemek ve \u00e7\u0131karmak i\u00e7in kullan\u0131l\u0131rlar.<\/p>\n
let meyveler = [\"elma\", \"armut\", \"muz\"];\n\nconsole.log(meyveler.length); \/\/ 3\n\nmeyveler.push(\"kiraz\"); \/\/ Dizinin sonuna \"kiraz\" ekler\nconsole.log(meyveler); \/\/ [\"elma\", \"armut\", \"muz\", \"kiraz\"]\n\nmeyveler.pop(); \/\/ Dizinin sonundan bir eleman \u00e7\u0131kar\u0131r\nconsole.log(meyveler); \/\/ [\"elma\", \"armut\", \"muz\"]\n\nmeyveler.unshift(\"\u00e7ilek\"); \/\/ Dizinin ba\u015f\u0131na \"\u00e7ilek\" ekler\nconsole.log(meyveler); \/\/ [\"\u00e7ilek\", \"elma\", \"armut\", \"muz\"]\n\nmeyveler.shift(); \/\/ Dizinin ba\u015f\u0131ndan bir eleman \u00e7\u0131kar\u0131r\nconsole.log(meyveler); \/\/ [\"elma\", \"armut\", \"muz\"]<\/pre>\n
<\/code><\/p>\n
Bu basit \u00f6rnekler, dizi elemanlar\u0131n\u0131 y\u00f6netmenin temel yollar\u0131n\u0131 g\u00f6stermektedir.  push()<\/code> ve unshift()<\/code> metotlar\u0131 dizinin boyutunu art\u0131r\u0131rken, pop()<\/code> ve shift()<\/code> metotlar\u0131 boyutunu azalt\u0131r.  Bu metotlar\u0131 kullanarak,  verilerinizi istedi\u011finiz gibi d\u00fczenleyebilirsiniz. Daha fazla bilgi i\u00e7in fatihsoysal.com<\/a> sitesini ziyaret edebilirsiniz.<\/p>\n
Orta Seviye JavaScript Array Metotlar\u0131:  splice()<\/code>, slice()<\/code>, concat()<\/code><\/h2>\n
Orta seviyede, dizileri daha karma\u015f\u0131k \u015fekillerde manip\u00fcle etmemizi sa\u011flayan metotlar devreye girer.  splice()<\/code> metodu, dizinin belirli bir indeksinden itibaren elemanlar\u0131 eklemeyi, silmeyi ve de\u011fi\u015ftirmeyi sa\u011flar.  slice()<\/code> metodu ise dizinin bir b\u00f6l\u00fcm\u00fcn\u00fc kopyalayarak yeni bir dizi olu\u015fturur.  concat()<\/code> metodu ise iki veya daha fazla diziyi birle\u015ftirerek yeni bir dizi olu\u015fturur.  \u0130\u015fte \u00f6rnekler:<\/p>\n
let renkler = [\"k\u0131rm\u0131z\u0131\", \"mavi\", \"ye\u015fil\"];\n\nrenkler.splice(1, 1, \"sar\u0131\"); \/\/ 1. indeksten 1 eleman siler ve yerine \"sar\u0131\" ekler\nconsole.log(renkler); \/\/ [\"k\u0131rm\u0131z\u0131\", \"sar\u0131\", \"ye\u015fil\"]\n\nlet yeniRenkler = renkler.slice(1); \/\/ 1. indeksten sonuna kadar olan k\u0131sm\u0131 kopyalar\nconsole.log(yeniRenkler); \/\/ [\"sar\u0131\", \"ye\u015fil\"]\n\nlet tumRenkler = renkler.concat(yeniRenkler); \/\/ \u0130ki diziyi birle\u015ftirir\nconsole.log(tumRenkler); \/\/ [\"k\u0131rm\u0131z\u0131\", \"sar\u0131\", \"ye\u015fil\", \"sar\u0131\", \"ye\u015fil\"]<\/pre>\n
<\/code><\/p>\n
Bu metotlar, diziler \u00fczerinde daha geli\u015fmi\u015f i\u015flemler yapman\u0131z\u0131 sa\u011flar.  splice()<\/code> metodu, \u00f6zellikle veri g\u00fcncellemelerinde olduk\u00e7a kullan\u0131\u015fl\u0131d\u0131r. slice()<\/code> metodu ise orijinal diziyi de\u011fi\u015ftirmeden yeni bir dizi olu\u015fturarak g\u00fcvenli bir \u015fekilde \u00e7al\u0131\u015fma imkan\u0131 tan\u0131r.  concat()<\/code> metodu ise farkl\u0131 kaynaklardan gelen verileri birle\u015ftirmek i\u00e7in idealdir.  Bu metotlar\u0131 pratik \u00f6rnekler \u00fczerinde \u00e7al\u0131\u015farak daha iyi anlayabilirsiniz.<\/p>\n
\u0130leri D\u00fczey JavaScript Array Metotlar\u0131:  map()<\/code>, filter()<\/code>, reduce()<\/code><\/h2>\n
\u0130leri d\u00fczey JavaScript dizi metotlar\u0131, fonksiyonel programlaman\u0131n g\u00fcc\u00fcn\u00fc diziler \u00fczerinde kullanmam\u0131z\u0131 sa\u011flar.  map()<\/code>, filter()<\/code> ve reduce()<\/code> metotlar\u0131, dizileri d\u00f6n\u00fc\u015ft\u00fcrmek, filtrelemek ve toplamak i\u00e7in olduk\u00e7a g\u00fc\u00e7l\u00fc ara\u00e7lard\u0131r.  map()<\/code>, her bir dizi eleman\u0131na bir fonksiyon uygular ve yeni bir dizi olu\u015fturur.  filter()<\/code>, belirli bir ko\u015fulu sa\u011flayan elemanlar\u0131 i\u00e7eren yeni bir dizi olu\u015fturur.  reduce()<\/code>, dizi elemanlar\u0131n\u0131 tek bir de\u011fere indirger.<\/p>\n
let sayilar2 = [1, 2, 3, 4, 5];\n\nlet kareleri = sayilar2.map(sayi => sayi * sayi); \/\/ Her say\u0131n\u0131n karesini al\u0131r\nconsole.log(kareleri); \/\/ [1, 4, 9, 16, 25]\n\nlet ciftSayilar = sayilar2.filter(sayi => sayi % 2 === 0); \/\/ \u00c7ift say\u0131lar\u0131 filtreler\nconsole.log(ciftSayilar); \/\/ [2, 4]\n\nlet toplam = sayilar2.reduce((toplam, sayi) => toplam + sayi, 0); \/\/ Say\u0131lar\u0131 toplar\nconsole.log(toplam); \/\/ 15<\/pre>\n
<\/code><\/p>\n
Bu metotlar, verileri i\u015flemenin daha temiz ve okunabilir bir yolunu sunar.  Karma\u015f\u0131k veri d\u00f6n\u00fc\u015ft\u00fcrme ve filtreleme i\u015flemlerini birka\u00e7 sat\u0131r kodla ger\u00e7ekle\u015ftirebilirsiniz.  Bu metotlar\u0131 \u00f6\u011frenerek, kodlar\u0131n\u0131z\u0131n performans\u0131n\u0131 ve okunabilirli\u011fini \u00f6nemli \u00f6l\u00e7\u00fcde art\u0131rabilirsiniz. Daha fazla \u00f6rnek ve ipucu i\u00e7in fatihsoysal.com<\/a> sitesini ziyaret etmeyi unutmay\u0131n.<\/p>\n
JavaScript Array Metotlar\u0131: Performans Kar\u015f\u0131la\u015ft\u0131rmalar\u0131<\/h2>\n
Farkl\u0131 dizi metotlar\u0131n\u0131n performans\u0131n\u0131 kar\u015f\u0131la\u015ft\u0131rarak, hangi metodun hangi durumda daha uygun oldu\u011funu anlamak \u00f6nemlidir.  \u00d6rne\u011fin, b\u00fcy\u00fck dizilerde forEach()<\/code> metodu genellikle for<\/code> d\u00f6ng\u00fcs\u00fcnden daha h\u0131zl\u0131d\u0131r.  Ancak, map()<\/code>, filter()<\/code> ve reduce()<\/code> gibi metotlar, daha okunabilir kodlar \u00fcretmelerine ra\u011fmen, baz\u0131 durumlarda for<\/code> d\u00f6ng\u00fcs\u00fcnden daha yava\u015f olabilirler.  Bu nedenle, performans kritik uygulamalarda, farkl\u0131 metotlar\u0131n performans\u0131n\u0131 test etmek ve en uygun olan\u0131n\u0131 se\u00e7mek \u00f6nemlidir.<\/p>\n\n\n\n\n\n\n\n
Metot<\/th>\nA\u00e7\u0131klama<\/th>\nPerformans<\/th>\n<\/tr>\n
for<\/code> d\u00f6ng\u00fcs\u00fc<\/td>\nTemel d\u00f6ng\u00fc yap\u0131s\u0131<\/td>\nGenellikle h\u0131zl\u0131, ancak kod okunabilirli\u011fi d\u00fc\u015f\u00fck olabilir.<\/td>\n<\/tr>\n
forEach()<\/code><\/td>\nHer elemana fonksiyon uygular<\/td>\nGenellikle for<\/code> d\u00f6ng\u00fcs\u00fcnden daha h\u0131zl\u0131, daha okunabilir.<\/td>\n<\/tr>\n
map()<\/code><\/td>\nYeni bir dizi olu\u015fturur<\/td>\nforEach()<\/code> ile benzer performans, ancak yeni bir dizi olu\u015fturur.<\/td>\n<\/tr>\n
filter()<\/code><\/td>\nKo\u015fulu sa\u011flayan elemanlar\u0131 filtreler<\/td>\nforEach()<\/code> ile benzer performans, yeni bir dizi olu\u015fturur.<\/td>\n<\/tr>\n
reduce()<\/code><\/td>\nElemanlar\u0131 tek bir de\u011fere indirger<\/td>\nPerformans\u0131 kullan\u0131lan fonksiyona ba\u011fl\u0131d\u0131r.<\/td>\n<\/tr>\n<\/table>\n
Bu tablo, farkl\u0131 metotlar\u0131n genel performans\u0131n\u0131 \u00f6zetlemektedir.  Ancak, ger\u00e7ek performans, dizi boyutu, kullan\u0131lan fonksiyonlar ve donan\u0131m gibi fakt\u00f6rlere ba\u011fl\u0131 olarak de\u011fi\u015febilir.  Dolay\u0131s\u0131yla, performans kritik uygulamalar i\u00e7in kendi testlerinizi yapman\u0131z \u00f6nerilir.<\/p>\n
Ger\u00e7ek D\u00fcnya Senaryolar\u0131 ve Vaka Analizleri<\/h2>\n
JavaScript dizi metotlar\u0131n\u0131 ger\u00e7ek d\u00fcnya senaryolar\u0131nda nas\u0131l kullanabilece\u011finize dair birka\u00e7 \u00f6rnek inceleyelim. \u00d6rne\u011fin, bir e-ticaret sitesinde \u00fcr\u00fcn listesini filtrelemek i\u00e7in filter()<\/code> metodu kullan\u0131labilir.  Kullan\u0131c\u0131 belirli bir kategoriyi se\u00e7ti\u011finde, filter()<\/code> metodu bu kategoriye ait \u00fcr\u00fcnleri i\u00e7eren yeni bir dizi olu\u015fturur.  Benzer \u015fekilde, bir sosyal medya uygulamas\u0131nda, kullan\u0131c\u0131lar\u0131n takip etti\u011fi ki\u015filerin g\u00f6nderilerini g\u00f6stermek i\u00e7in map()<\/code> metodu kullan\u0131labilir.  Her bir g\u00f6nderi i\u00e7in, map()<\/code> metodu g\u00f6nderi bilgilerini i\u00e7eren bir nesne olu\u015fturur ve bu nesneleri i\u00e7eren yeni bir dizi olu\u015fturur.<\/p>\n
Ba\u015fka bir \u00f6rnek olarak, bir oyun geli\u015ftirme projesinde, oyun karakterlerinin konumlar\u0131n\u0131 tutmak i\u00e7in bir dizi kullan\u0131labilir.  splice()<\/code> metodu, oyun karakterlerinin konumlar\u0131n\u0131 g\u00fcncellemek i\u00e7in kullan\u0131labilir.  push()<\/code> ve pop()<\/code> metotlar\u0131, oyun karakterlerinin eklenmesi veya kald\u0131r\u0131lmas\u0131 i\u00e7in kullan\u0131labilir.  Bu \u00f6rnekler, JavaScript dizi metotlar\u0131n\u0131n \u00e7e\u015fitli uygulamalar\u0131n\u0131 g\u00f6stermektedir.  Her bir uygulama i\u00e7in en uygun metodu se\u00e7mek, kodun verimlili\u011fini ve okunabilirli\u011fini art\u0131r\u0131r.<\/p>\n
G\u00fcvenlik Uyar\u0131lar\u0131 ve Dikkat Edilmesi Gerekenler<\/h2>\n
Dikkat!  JavaScript dizi metotlar\u0131n\u0131 kullan\u0131rken baz\u0131 g\u00fcvenlik hususlar\u0131na dikkat etmek \u00f6nemlidir.  \u00d6rne\u011fin, kullan\u0131c\u0131 girdilerini do\u011frudan dizi metotlar\u0131na ge\u00e7irmek g\u00fcvenlik a\u00e7\u0131\u011f\u0131na neden olabilir.  Kullan\u0131c\u0131 girdilerini do\u011frulamak ve temizlemek, zararl\u0131 kodlar\u0131n \u00e7al\u0131\u015ft\u0131r\u0131lmas\u0131n\u0131 \u00f6nlemek i\u00e7in \u00f6nemlidir.  Ayr\u0131ca, b\u00fcy\u00fck diziler \u00fczerinde i\u015flem yaparken performans sorunlar\u0131 ya\u015fanabilir.  B\u00fcy\u00fck diziler i\u00e7in, daha verimli algoritmalar kullanmak veya dizileri b\u00f6lmek gerekebilir.<\/p>\n
\n  Dikkat:<\/strong> Kullan\u0131c\u0131 girdilerini do\u011frudan dizi metotlar\u0131na ge\u00e7irmek g\u00fcvenlik a\u00e7\u0131\u011f\u0131na yol a\u00e7abilir.  Girdileri her zaman do\u011frulay\u0131n ve temizleyin.\n<\/div>\n
\u00d6\u011frenme Yol Haritas\u0131<\/h2>\n