JavaScript, web geli\u015ftirmeden sunucu taraf\u0131 uygulamalara kadar geni\u015f bir yelpazede kullan\u0131lan dinamik bir dildir. Bu dilin temel veri yap\u0131lar\u0131ndan biri olan diziler (Arrays), veri koleksiyonlar\u0131n\u0131 d\u00fczenlemek ve y\u00f6netmek i\u00e7in vazge\u00e7ilmezdir. JavaScript dizileri, bu koleksiyonlar \u00fczerinde \u00e7e\u015fitli i\u015flemler yapmam\u0131z\u0131 sa\u011flayan zengin bir metot setine sahiptir. Bu metotlar iki ana kategoriye ayr\u0131l\u0131r: mutator (de\u011fi\u015ftirici) metotlar ve non-mutator (de\u011fi\u015ftirmeyen) metotlar.<\/p>\n
Bu rehberde, orijinal diziyi do\u011frudan de\u011fi\u015ftiren “mutator” metotlara odaklanaca\u011f\u0131z. Bu metotlar, dizinin i\u00e7eri\u011fini, boyutunu veya elemanlar\u0131n\u0131n s\u0131ras\u0131n\u0131 do\u011frudan manip\u00fcle ederek performans\u0131 art\u0131rabilir veya bellek kullan\u0131m\u0131n\u0131 optimize edebilir. Ancak, bu davran\u0131\u015f\u0131n yan etkileri olabilece\u011fi i\u00e7in dikkatli kullan\u0131lmalar\u0131 gerekir. Gelin, bu g\u00fc\u00e7l\u00fc metotlar\u0131 ve pratik kullan\u0131mlar\u0131n\u0131 derinlemesine inceleyelim.<\/p>\n
Mutator metotlar, \u00e7a\u011fr\u0131ld\u0131klar\u0131 diziyi do\u011frudan (in-place) de\u011fi\u015ftirirler. Bu, metodun yeni bir dizi d\u00f6nd\u00fcrmek yerine, mevcut dizinin kendisini modifiye etti\u011fi anlam\u0131na gelir. Bu davran\u0131\u015f, \u00f6zellikle b\u00fcy\u00fck dizilerle \u00e7al\u0131\u015f\u0131rken bellek verimlili\u011fi sa\u011flayabilir, ancak dizinin referans\u0131n\u0131 kullanan di\u011fer kod par\u00e7alar\u0131n\u0131 da etkileyece\u011fi i\u00e7in dikkatli olunmal\u0131d\u0131r.<\/p>\n
push()<\/code>, pop()<\/code>, shift()<\/code>, unshift()<\/code><\/h3>\nBu d\u00f6rt metot, dizinin ba\u015f\u0131ndan veya sonundan eleman eklemek veya \u00e7\u0131karmak i\u00e7in en s\u0131k kullan\u0131lan mutator metotlard\u0131r.<\/p>\n
push()<\/code>: Dizinin Sonuna Eleman Ekleme<\/h4>\npush()<\/code> metodu, bir veya daha fazla eleman\u0131 dizinin sonuna ekler ve dizinin yeni uzunlu\u011funu d\u00f6nd\u00fcr\u00fcr.<\/p>\n\n let meyveler = [\"elma\", \"muz\", \"\u00e7ilek\"];\n console.log(\"Orijinal dizi:\", meyveler); \/\/ [\"elma\", \"muz\", \"\u00e7ilek\"]\n\n let yeniUzunluk = meyveler.push(\"portakal\");\n console.log(\"push sonras\u0131 dizi:\", meyveler); \/\/ [\"elma\", \"muz\", \"\u00e7ilek\", \"portakal\"]\n console.log(\"Yeni uzunluk:\", yeniUzunluk); \/\/ 4\n\n meyveler.push(\"kivi\", \"\u00fcz\u00fcm\");\n console.log(\"Birden fazla eleman ekleme sonras\u0131:\", meyveler); \/\/ [\"elma\", \"muz\", \"\u00e7ilek\", \"portakal\", \"kivi\", \"\u00fcz\u00fcm\"]\n <\/code><\/pre>\npop()<\/code>: Dizinin Sonundan Eleman \u00c7\u0131karma<\/h4>\npop()<\/code> metodu, dizinin sonundaki eleman\u0131 kald\u0131r\u0131r ve bu eleman\u0131 d\u00f6nd\u00fcr\u00fcr. Dizi bo\u015fsa undefined<\/code> d\u00f6nd\u00fcr\u00fcr.<\/p>\n\n let sayilar = [1, 2, 3, 4, 5];\n console.log(\"Orijinal dizi:\", sayilar); \/\/ [1, 2, 3, 4, 5]\n\n let sonEleman = sayilar.pop();\n console.log(\"pop sonras\u0131 dizi:\", sayilar); \/\/ [1, 2, 3, 4]\n console.log(\"\u00c7\u0131kar\u0131lan eleman:\", sonEleman); \/\/ 5\n\n sayilar.pop(); \/\/ Bir eleman daha \u00e7\u0131kar\n console.log(\"\u0130kinci pop sonras\u0131 dizi:\", sayilar); \/\/ [1, 2, 3]\n <\/code><\/pre>\nshift()<\/code>: Dizinin Ba\u015f\u0131ndan Eleman \u00c7\u0131karma<\/h4>\nshift()<\/code> metodu, dizinin ba\u015f\u0131ndaki eleman\u0131 kald\u0131r\u0131r ve bu eleman\u0131 d\u00f6nd\u00fcr\u00fcr. Dizi bo\u015fsa undefined<\/code> d\u00f6nd\u00fcr\u00fcr. pop()<\/code>‘un aksine, bu i\u015flem dizideki t\u00fcm di\u011fer elemanlar\u0131n indekslerini de\u011fi\u015ftirdi\u011finden, b\u00fcy\u00fck dizilerde pop()<\/code>‘a g\u00f6re daha yava\u015f olabilir.<\/p>\n\n let ogrenciler = [\"Ali\", \"Ay\u015fe\", \"Mehmet\", \"Zeynep\"];\n console.log(\"Orijinal dizi:\", ogrenciler); \/\/ [\"Ali\", \"Ay\u015fe\", \"Mehmet\", \"Zeynep\"]\n\n let ilkOgrenci = ogrenciler.shift();\n console.log(\"shift sonras\u0131 dizi:\", ogrenciler); \/\/ [\"Ay\u015fe\", \"Mehmet\", \"Zeynep\"]\n console.log(\"\u00c7\u0131kar\u0131lan \u00f6\u011frenci:\", ilkOgrenci); \/\/ Ali\n <\/code><\/pre>\nunshift()<\/code>: Dizinin Ba\u015f\u0131na Eleman Ekleme<\/h4>\nunshift()<\/code> metodu, bir veya daha fazla eleman\u0131 dizinin ba\u015f\u0131na ekler ve dizinin yeni uzunlu\u011funu d\u00f6nd\u00fcr\u00fcr. shift()<\/code> gibi, bu i\u015flem de t\u00fcm mevcut elemanlar\u0131n indekslerini de\u011fi\u015ftirdi\u011fi i\u00e7in b\u00fcy\u00fck dizilerde push()<\/code>‘a g\u00f6re daha yava\u015f olabilir.<\/p>\n\n let renkler = [\"k\u0131rm\u0131z\u0131\", \"mavi\"];\n console.log(\"Orijinal dizi:\", renkler); \/\/ [\"k\u0131rm\u0131z\u0131\", \"mavi\"]\n\n let yeniUzunlukRenk = renkler.unshift(\"ye\u015fil\");\n console.log(\"unshift sonras\u0131 dizi:\", renkler); \/\/ [\"ye\u015fil\", \"k\u0131rm\u0131z\u0131\", \"mavi\"]\n console.log(\"Yeni uzunluk:\", yeniUzunlukRenk); \/\/ 3\n\n renkler.unshift(\"sar\u0131\", \"mor\");\n console.log(\"Birden fazla eleman ekleme sonras\u0131:\", renkler); \/\/ [\"sar\u0131\", \"mor\", \"ye\u015fil\", \"k\u0131rm\u0131z\u0131\", \"mavi\"]\n <\/code><\/pre>\nPratik Bilgi:<\/strong> Performans kritik uygulamalarda, dizinin ba\u015f\u0131ndan eleman ekleme\/\u00e7\u0131karma (shift()<\/code>\/unshift()<\/code>) yerine, dizinin sonundan eleman ekleme\/\u00e7\u0131karma (push()<\/code>\/pop()<\/code>) tercih etmek genellikle daha verimlidir. \u00c7\u00fcnk\u00fc shift()<\/code> ve unshift()<\/code>, dizideki her eleman\u0131n indeksini yeniden hesaplamay\u0131 gerektirirken, push()<\/code> ve pop()<\/code> sadece dizinin sonunu etkiler.<\/p>\n2. Esnek De\u011fi\u015fiklikler \u0130\u00e7in splice()<\/code> Metodu<\/h2>\nsplice()<\/code> metodu, JavaScript’teki en g\u00fc\u00e7l\u00fc ve \u00e7ok y\u00f6nl\u00fc mutator metotlardan biridir. Dizinin herhangi bir yerinden eleman eklemenize, silmenize veya mevcut elemanlar\u0131 de\u011fi\u015ftirmenize olanak tan\u0131r. Silinen elemanlar\u0131 i\u00e7eren bir dizi d\u00f6nd\u00fcr\u00fcr.<\/p>\nS\u00f6zdizimi: array.splice(ba\u015flang\u0131\u00e7Indeksi, silinecekElemanSay\u0131s\u0131, eklenecekEleman1, ...)<\/code><\/h3>\n\nba\u015flang\u0131\u00e7Indeksi<\/code>: \u0130\u015flemin ba\u015flayaca\u011f\u0131 indeks. Negatif bir de\u011fer, dizinin sonundan itibaren sayar.<\/li>\nsilinecekElemanSay\u0131s\u0131<\/code>: ba\u015flang\u0131\u00e7Indeksi<\/code>‘nden itibaren ka\u00e7 eleman\u0131n silinece\u011fini belirtir. 0 ise hi\u00e7bir eleman silinmez.<\/li>\neklenecekEleman1, ...<\/code>: \u0130ste\u011fe ba\u011fl\u0131 olarak, silinen elemanlar\u0131n yerine eklenecek elemanlar.<\/li>\n<\/ul>\n\u00d6rnekler:<\/h4>\n\n let urunler = [\"laptop\", \"telefon\", \"tablet\", \"mouse\", \"klavye\"];\n console.log(\"Orijinal \u00fcr\u00fcnler:\", urunler);\n\n \/\/ 1. Eleman silme: 2. indeksten ba\u015flayarak 1 eleman sil\n let silinenTablet = urunler.splice(2, 1);\n console.log(\"Tablet silme sonras\u0131:\", urunler); \/\/ [\"laptop\", \"telefon\", \"mouse\", \"klavye\"]\n console.log(\"Silinen eleman:\", silinenTablet); \/\/ [\"tablet\"]\n\n \/\/ 2. Eleman ekleme: 1. indekse \"kulakl\u0131k\" ekle, hi\u00e7bir \u015fey silme\n urunler.splice(1, 0, \"kulakl\u0131k\");\n console.log(\"Kulakl\u0131k ekleme sonras\u0131:\", urunler); \/\/ [\"laptop\", \"kulakl\u0131k\", \"telefon\", \"mouse\", \"klavye\"]\n\n \/\/ 3. Eleman de\u011fi\u015ftirme: 3. indeksten ba\u015flayarak 1 eleman\u0131 sil ve yerine \"webcam\" ekle\n let silinenMouse = urunler.splice(3, 1, \"webcam\");\n console.log(\"Mouse yerine webcam:\", urunler); \/\/ [\"laptop\", \"kulakl\u0131k\", \"telefon\", \"webcam\", \"klavye\"]\n console.log(\"Silinen eleman:\", silinenMouse); \/\/ [\"mouse\"]\n\n \/\/ 4. Sondan sayma: Sondan 2. eleman\u0131 sil (\"klavye\")\n urunler.splice(-1, 1);\n console.log(\"Sondan eleman silme:\", urunler); \/\/ [\"laptop\", \"kulakl\u0131k\", \"telefon\", \"webcam\"]\n <\/code><\/pre>\nPratik Bilgi:<\/strong> splice()<\/code> metodu, bir dizinin belirli bir b\u00f6l\u00fcm\u00fcn\u00fc tamamen de\u011fi\u015ftirmek, araya eleman sokmak veya belirli elemanlar\u0131 kald\u0131rmak gibi karma\u015f\u0131k dizi manip\u00fclasyonlar\u0131 i\u00e7in vazge\u00e7ilmezdir. \u00d6zellikle bir “CRUD” (Olu\u015fturma, Okuma, G\u00fcncelleme, Silme) uygulamas\u0131nda bir listedeki \u00f6\u011feleri y\u00f6netirken \u00e7ok i\u015fe yarar.<\/p>\n3. S\u0131ralama ve Ters \u00c7evirme Metotlar\u0131: sort()<\/code> ve reverse()<\/code><\/h2>\nBu metotlar, dizinin elemanlar\u0131n\u0131n s\u0131ras\u0131n\u0131 do\u011frudan de\u011fi\u015ftirir.<\/p>\n
3.1. reverse()<\/code>: Diziyi Ters \u00c7evirme<\/h3>\nreverse()<\/code> metodu, bir dizinin elemanlar\u0131n\u0131n s\u0131ras\u0131n\u0131 tersine \u00e7evirir. \u0130lk eleman son, son eleman ilk olur.<\/p>\n\n let alfabe = [\"a\", \"b\", \"c\", \"d\"];\n console.log(\"Orijinal alfabe:\", alfabe); \/\/ [\"a\", \"b\", \"c\", \"d\"]\n\n alfabe.reverse();\n console.log(\"Ters \u00e7evrilmi\u015f alfabe:\", alfabe); \/\/ [\"d\", \"c\", \"b\", \"a\"]\n\n let sayilarTers = [1, 2, 3, 4, 5];\n sayilarTers.reverse();\n console.log(\"Say\u0131lar ters \u00e7evrilmi\u015f:\", sayilarTers); \/\/ [5, 4, 3, 2, 1]\n <\/code><\/pre>\n3.2. sort()<\/code>: Diziyi S\u0131ralama<\/h3>\nsort()<\/code> metodu, bir dizinin elemanlar\u0131n\u0131 yerinde s\u0131ralar ve s\u0131ralanm\u0131\u015f diziyi d\u00f6nd\u00fcr\u00fcr. Varsay\u0131lan olarak, elemanlar string’e d\u00f6n\u00fc\u015ft\u00fcr\u00fcl\u00fcr ve Unicode kod noktalar\u0131na g\u00f6re alfabetik olarak s\u0131ralan\u0131r.<\/p>\nVarsay\u0131lan S\u0131ralama (String Kar\u015f\u0131la\u015ft\u0131rma)<\/h4>\n\n let kelimeler = [\"elma\", \"muz\", \"\u00e7ilek\", \"portakal\"];\n kelimeler.sort();\n console.log(\"Alfabetik s\u0131ralama:\", kelimeler); \/\/ [\"\u00e7ilek\", \"elma\", \"muz\", \"portakal\"]\n\n let karisikSayilar = [1, 10, 2, 20, 3];\n karisikSayilar.sort();\n \/\/ D\u0130KKAT: Say\u0131sal olarak de\u011fil, string olarak s\u0131ralar! \"10\" \"2\"den \u00f6nce gelir.\n console.log(\"Yanl\u0131\u015f say\u0131sal s\u0131ralama (varsay\u0131lan):\", karisikSayilar); \/\/ [1, 10, 2, 20, 3]\n <\/code><\/pre>\n\u00d6zel Kar\u015f\u0131la\u015ft\u0131rma Fonksiyonu Kullan\u0131m\u0131<\/h4>\n
Say\u0131lar\u0131 veya nesneleri do\u011fru bir \u015fekilde s\u0131ralamak i\u00e7in sort()<\/code> metoduna bir kar\u015f\u0131la\u015ft\u0131rma fonksiyonu ge\u00e7irmelisiniz. Bu fonksiyon, iki arg\u00fcman (a<\/code> ve b<\/code>) al\u0131r ve \u015fu de\u011ferleri d\u00f6nd\u00fcrmelidir:<\/p>\n\n- Negatif bir de\u011fer:
a<\/code>, b<\/code>‘den \u00f6nce gelir.<\/li>\n- Pozitif bir de\u011fer:
a<\/code>, b<\/code>‘den sonra gelir.<\/li>\n- 0:
a<\/code> ve b<\/code> e\u015fittir, s\u0131ralama de\u011fi\u015fmez.<\/li>\n<\/ul>\n\n let sayilarDuzgun = [1, 10, 2, 20, 3];\n\n \/\/ Artan s\u0131rada s\u0131ralama (k\u00fc\u00e7\u00fckten b\u00fcy\u00fc\u011fe)\n sayilarDuzgun.sort((a, b) => a - b);\n console.log(\"Do\u011fru say\u0131sal artan s\u0131ralama:\", sayilarDuzgun); \/\/ [1, 2, 3, 10, 20]\n\n \/\/ Azalan s\u0131rada s\u0131ralama (b\u00fcy\u00fckten k\u00fc\u00e7\u00fc\u011fe)\n sayilarDuzgun.sort((a, b) => b - a);\n console.log(\"Do\u011fru say\u0131sal azalan s\u0131ralama:\", sayilarDuzgun); \/\/ [20, 10, 3, 2, 1]\n\n \/\/ Nesneleri s\u0131ralama (\u00f6rne\u011fin, ya\u015fa g\u00f6re)\n let kisiler = [\n { ad: \"Ali\", yas: 30 },\n { ad: \"Ay\u015fe\", yas: 25 },\n { ad: \"Mehmet\", yas: 35 }\n ];\n\n kisiler.sort((a, b) => a.yas - b.yas); \/\/ Ya\u015fa g\u00f6re artan s\u0131ralama\n console.log(\"Ya\u015fa g\u00f6re s\u0131ralanm\u0131\u015f ki\u015filer:\", kisiler);\n \/*\n [\n { ad: 'Ay\u015fe', yas: 25 },\n { ad: 'Ali', yas: 30 },\n { ad: 'Mehmet', yas: 35 }\n ]\n *\/\n <\/code><\/pre>\nPratik Bilgi:<\/strong> Say\u0131sal dizileri s\u0131ralarken her zaman bir kar\u015f\u0131la\u015ft\u0131rma fonksiyonu kullan\u0131n. Aksi takdirde, sort()<\/code>‘un varsay\u0131lan davran\u0131\u015f\u0131 beklenmedik sonu\u00e7lar verecektir. Nesnelerle \u00e7al\u0131\u015f\u0131rken de hangi \u00f6zelli\u011fe g\u00f6re s\u0131ralama yapaca\u011f\u0131n\u0131z\u0131 kar\u015f\u0131la\u015ft\u0131rma fonksiyonunda belirtmeniz gerekir.<\/p>\n4. Di\u011fer Faydal\u0131 Mutator Metotlar: fill()<\/code> ve copyWithin()<\/code><\/h2>\nBu metotlar, belirli senaryolarda olduk\u00e7a kullan\u0131\u015fl\u0131 olan daha \u00f6zel mutator i\u015flemler sunar.<\/p>\n
4.1. fill()<\/code>: Diziyi Belirli Bir De\u011ferle Doldurma<\/h3>\nfill()<\/code> metodu, bir dizinin elemanlar\u0131n\u0131 belirtilen bir de\u011ferle de\u011fi\u015ftirir. \u0130ste\u011fe ba\u011fl\u0131 olarak bir ba\u015flang\u0131\u00e7 ve biti\u015f indeksi belirterek dizinin yaln\u0131zca bir k\u0131sm\u0131n\u0131 doldurabilirsiniz.<\/p>\nS\u00f6zdizimi: array.fill(de\u011fer, ba\u015flang\u0131\u00e7Indeksi, biti\u015fIndeksi)<\/code><\/h3>\n\n let bosDizi = new Array(5); \/\/ [undefined, undefined, undefined, undefined, undefined]\n bosDizi.fill(0);\n console.log(\"S\u0131f\u0131rlarla doldurulmu\u015f dizi:\", bosDizi); \/\/ [0, 0, 0, 0, 0]\n\n let mektupNotlari = [\"A\", \"B\", \"C\", \"D\", \"F\"];\n mektupNotlari.fill(\"P\", 2, 4); \/\/ 2. indeksten (dahil) 4. indekse (hari\u00e7) kadar doldur\n console.log(\"K\u0131smi doldurma:\", mektupNotlari); \/\/ [\"A\", \"B\", \"P\", \"P\", \"F\"]\n\n mektupNotlari.fill(\"X\", 1); \/\/ 1. indeksten sonuna kadar doldur\n console.log(\"K\u0131smi doldurma (ba\u015ftan sona):\", mektupNotlari); \/\/ [\"A\", \"X\", \"X\", \"X\", \"X\"]\n <\/code><\/pre>\n4.2. copyWithin()<\/code>: Dizinin Elemanlar\u0131n\u0131 Kendi \u0130\u00e7inde Kopyalama<\/h3>\ncopyWithin()<\/code> metodu, dizinin bir k\u0131sm\u0131n\u0131 kendi i\u00e7inde ba\u015fka bir konuma kopyalar ve orijinal diziyi de\u011fi\u015ftirir. Dizinin uzunlu\u011funu de\u011fi\u015ftirmez.<\/p>\nS\u00f6zdizimi: array.copyWithin(hedefIndeks, ba\u015flang\u0131\u00e7Indeksi, biti\u015fIndeksi)<\/code><\/h3>\n\nhedefIndeks<\/code>: Kopyalanan elemanlar\u0131n yap\u0131\u015ft\u0131r\u0131laca\u011f\u0131 s\u0131f\u0131r tabanl\u0131 indeks.<\/li>\nba\u015flang\u0131\u00e7Indeksi<\/code>: Kopyalaman\u0131n ba\u015flayaca\u011f\u0131 s\u0131f\u0131r tabanl\u0131 indeks.<\/li>\nbiti\u015fIndeksi<\/code>: Kopyalaman\u0131n bitece\u011fi s\u0131f\u0131r tabanl\u0131 indeks (hari\u00e7).<\/li>\n<\/ul>\n\n let numaralar = [1, 2, 3, 4, 5, 6, 7];\n console.log(\"Orijinal numaralar:\", numaralar);\n\n \/\/ 0. indeksten ba\u015flayarak 3. indeksten 5. indekse kadar olan elemanlar\u0131 kopyala\n \/\/ Yani [4, 5] elemanlar\u0131n\u0131 kopyala ve 0. indekse yap\u0131\u015ft\u0131r\n numaralar.copyWithin(0, 3, 5);\n console.log(\"copyWithin (0, 3, 5):\", numaralar); \/\/ [4, 5, 3, 4, 5, 6, 7]\n\n let harfler = [\"a\", \"b\", \"c\", \"d\", \"e\"];\n \/\/ 2. indeksten ba\u015flayarak 0. indeksten 2. indekse kadar olan elemanlar\u0131 kopyala\n \/\/ Yani [\"a\", \"b\"] elemanlar\u0131n\u0131 kopyala ve 2. indekse yap\u0131\u015ft\u0131r\n harfler.copyWithin(2, 0, 2);\n console.log(\"copyWithin (2, 0, 2):\", harfler); \/\/ [\"a\", \"b\", \"a\", \"b\", \"e\"]\n <\/code><\/pre>\nPratik Bilgi:<\/strong> fill()<\/code> ve copyWithin()<\/code>, \u00f6zellikle belirli bir aral\u0131\u011f\u0131 h\u0131zl\u0131ca doldurman\u0131z veya dizinin i\u00e7inde veri bloklar\u0131n\u0131 ta\u015f\u0131man\u0131z gerekti\u011finde kullan\u0131\u015fl\u0131d\u0131r. \u00d6rne\u011fin, bir oyun tahtas\u0131n\u0131 s\u0131f\u0131rlamak veya bir veri arabelle\u011fini y\u00f6netmek gibi durumlarda faydal\u0131 olabilirler.<\/p>\nSonu\u00e7 ve S\u0131k\u00e7a Sorulan Sorular (SSS)<\/h2>\n
JavaScript’teki mutator metotlar, dizileri verimli bir \u015fekilde de\u011fi\u015ftirmek i\u00e7in g\u00fc\u00e7l\u00fc ara\u00e7lard\u0131r. Orijinal diziyi do\u011frudan manip\u00fcle etmeleri, performans avantajlar\u0131 sa\u011flarken, kodunuzun \u00f6ng\u00f6r\u00fclebilirli\u011fini etkileyebilece\u011fi i\u00e7in dikkatli kullan\u0131m gerektirir. Hangi metodu ne zaman kullanaca\u011f\u0131n\u0131z\u0131 bilmek, daha temiz, daha verimli ve daha g\u00fcvenilir JavaScript kodu yazman\u0131za yard\u0131mc\u0131 olacakt\u0131r.<\/p>\n
Bu rehberde ele ald\u0131\u011f\u0131m\u0131z metotlar\u0131 \u00f6zetleyecek olursak:<\/p>\n
\npush()<\/code>, pop()<\/code>, shift()<\/code>, unshift()<\/code>: Dizinin ba\u015f\u0131ndan veya sonundan eleman ekleme\/\u00e7\u0131karma.<\/li>\nsplice()<\/code>: Dizinin herhangi bir yerinden eleman ekleme, silme veya de\u011fi\u015ftirme.<\/li>\nreverse()<\/code>: Dizinin elemanlar\u0131n\u0131n s\u0131ras\u0131n\u0131 tersine \u00e7evirme.<\/li>\nsort()<\/code>: Dizinin elemanlar\u0131n\u0131 s\u0131ralama (genellikle \u00f6zel bir kar\u015f\u0131la\u015ft\u0131rma fonksiyonu ile).<\/li>\nfill()<\/code>: Dizinin elemanlar\u0131n\u0131 belirli bir de\u011ferle doldurma.<\/li>\ncopyWithin()<\/code>: Dizinin bir k\u0131sm\u0131n\u0131 kendi i\u00e7inde ba\u015fka bir konuma kopyalama.<\/li>\n<\/ul>\nBu metotlar, g\u00fcnl\u00fck programlama g\u00f6revlerinizde size b\u00fcy\u00fck kolayl\u0131k sa\u011flayacakt\u0131r.<\/p>\n
S\u0131k\u00e7a Sorulan Sorular (SSS)<\/h3>\n1. Mutator metotlar\u0131 kullanmak ne zaman iyidir?<\/h4>\n
Mutator metotlar\u0131, \u00f6zellikle performans\u0131n \u00f6nemli oldu\u011fu veya dizinin de\u011fi\u015ftirilmesinin beklenen davran\u0131\u015f oldu\u011fu durumlarda kullanmak iyidir. \u00d6rne\u011fin, bir kullan\u0131c\u0131n\u0131n sepetine \u00fcr\u00fcn eklemek veya bir listeden \u00f6\u011fe kald\u0131rmak gibi durumlarda, orijinal diziyi do\u011frudan de\u011fi\u015ftirmek mant\u0131kl\u0131 olabilir. Ayr\u0131ca, bellek kullan\u0131m\u0131n\u0131 minimize etmek istedi\u011finiz b\u00fcy\u00fck dizilerle \u00e7al\u0131\u015f\u0131rken de avantajl\u0131d\u0131rlar \u00e7\u00fcnk\u00fc yeni bir dizi olu\u015fturmazlar.<\/p>\n
2. Mutator metotlar\u0131 kullanmaktan ne zaman ka\u00e7\u0131nmal\u0131y\u0131z?<\/h4>\n
Mutator metotlardan, \u00f6zellikle uygulaman\u0131z\u0131n durum y\u00f6netiminde (state management) “de\u011fi\u015fmezlik” (immutability) prensibini benimsedi\u011fi durumlarda ka\u00e7\u0131nmal\u0131s\u0131n\u0131z. React, Redux gibi k\u00fct\u00fcphanelerle \u00e7al\u0131\u015f\u0131rken veya verinin beklenmedik \u015fekilde de\u011fi\u015fmesini istemedi\u011finiz karma\u015f\u0131k uygulamalarda, orijinal diziyi de\u011fi\u015ftirmeyen (non-mutator) metotlar\u0131 (\u00f6rne\u011fin concat()<\/code>, slice()<\/code>, map()<\/code>, filter()<\/code>, reduce()<\/code>) tercih etmelisiniz. Bu, hata ay\u0131klamay\u0131 kolayla\u015ft\u0131r\u0131r ve uygulaman\u0131n durumunun daha \u00f6ng\u00f6r\u00fclebilir olmas\u0131n\u0131 sa\u011flar.<\/p>\n3. Bir metodun mutator olup olmad\u0131\u011f\u0131n\u0131 nas\u0131l anlar\u0131m?<\/h4>\n
Bir metodun mutator olup olmad\u0131\u011f\u0131n\u0131 anlaman\u0131n birka\u00e7 yolu vard\u0131r:<\/p>\n
\n- Dok\u00fcmantasyon:<\/strong> MDN Web Docs gibi g\u00fcvenilir kaynaklar, her metodun “mutates the array” veya “returns a new array” gibi ifadelerle davran\u0131\u015f\u0131n\u0131 a\u00e7\u0131k\u00e7a belirtir.<\/li>\n
- D\u00f6n\u00fc\u015f De\u011feri:<\/strong> \u00c7o\u011fu mutator metot (
pop()<\/code>, shift()<\/code> hari\u00e7) dizinin yeni uzunlu\u011funu veya dizinin kendisini (referans\u0131n\u0131) d\u00f6nd\u00fcr\u00fcr. Non-mutator metotlar ise genellikle yeni bir dizi d\u00f6nd\u00fcr\u00fcr.<\/li>\n- Deneme:<\/strong> Emin de\u011filseniz, k\u00fc\u00e7\u00fck bir dizi \u00fczerinde metodu \u00e7a\u011f\u0131r\u0131n ve metot \u00e7a\u011fr\u0131s\u0131ndan sonra orijinal diziyi kontrol edin.<\/li>\n
- Metot Ad\u0131:<\/strong> Baz\u0131 metot adlar\u0131 (\u00f6rne\u011fin
push<\/code>, pop<\/code>, sort<\/code>, reverse<\/code>) genellikle bir de\u011fi\u015fiklik ima ederken, concat<\/code>, slice<\/code> gibi metotlar yeni bir kopya olu\u015fturmay\u0131 d\u00fc\u015f\u00fcnd\u00fcr\u00fcr.<\/li>\n<\/ul>\n4. Mutator metotlar performans a\u00e7\u0131s\u0131ndan nas\u0131ld\u0131r?<\/h4>\n
Genel olarak, mutator metotlar, yeni bir dizi olu\u015fturmad\u0131klar\u0131 i\u00e7in bellek a\u00e7\u0131s\u0131ndan daha verimlidir. Ancak, performanslar\u0131 metodun kendisine ve dizinin boyutuna ba\u011fl\u0131d\u0131r:<\/p>\n
\npush()<\/code> ve pop()<\/code> genellikle \u00e7ok h\u0131zl\u0131d\u0131rlar (O(1) zaman karma\u015f\u0131kl\u0131\u011f\u0131).<\/li>\nshift()<\/code> ve unshift()<\/code>, dizinin t\u00fcm elemanlar\u0131n\u0131n indekslerini de\u011fi\u015ftirmeyi gerektirdi\u011fi i\u00e7in b\u00fcy\u00fck dizilerde pahal\u0131 olabilir (O(n) zaman karma\u015f\u0131kl\u0131\u011f\u0131).<\/li>\nsplice()<\/code>, sort()<\/code>, fill()<\/code> ve copyWithin()<\/code> gibi metotlar da dizinin boyutuna ve yap\u0131lan i\u015fleme ba\u011fl\u0131 olarak O(n) veya O(n log n) gibi zaman karma\u015f\u0131kl\u0131klar\u0131na sahip olabilirler.<\/li>\n<\/ul>\nPerformans kritik uygulamalarda, \u00f6zellikle b\u00fcy\u00fck veri setleriyle \u00e7al\u0131\u015f\u0131rken, bu farkl\u0131l\u0131klar\u0131 g\u00f6z \u00f6n\u00fcnde bulundurmak \u00f6nemlidir.<\/p>\n
<\/body><\/p>\n","protected":false},"excerpt":{"rendered":"JavaScript Dizilerinde Mutator Metotlar: Detayl\u0131 Rehber\n JavaScript, web geli\u015ftirmeden sunucu taraf\u0131 uygulamalara kadar geni\u015f bir yelpaze","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-33714","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-javascript","7":"cs-entry","8":"cs-video-wrap"},"yoast_head":"\n
JavaScript Dizilerinde Mutator Metotlar: Detayl\u0131 Rehber - 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\/javascript-dizilerinde-mutator-metotlar-detayli-rehber\/\" \/>\n<meta property=\"og:locale\" content=\"tr_TR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"JavaScript Dizilerinde Mutator Metotlar: Detayl\u0131 Rehber\" \/>\n<meta property=\"og:description\" content=\"JavaScript Dizilerinde Mutator Metotlar: Detayl\u0131 Rehber JavaScript, web geli\u015ftirmeden sunucu taraf\u0131 uygulamalara kadar geni\u015f bir yelpaze\" \/>\n<meta property=\"og:url\" content=\"https:\/\/fatihsoysal.com\/blog\/javascript-dizilerinde-mutator-metotlar-detayli-rehber\/\" \/>\n<meta property=\"og:site_name\" content=\"Kodlar\u0131n Gizemli D\u00fcnyas\u0131\" \/>\n<meta property=\"article:published_time\" content=\"2025-11-06T03:41:31+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=\"12 dakika\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/javascript-dizilerinde-mutator-metotlar-detayli-rehber\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/javascript-dizilerinde-mutator-metotlar-detayli-rehber\/\"},\"author\":{\"name\":\"Fatih Soysal\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"headline\":\"JavaScript Dizilerinde Mutator Metotlar: Detayl\u0131 Rehber\",\"datePublished\":\"2025-11-06T03:41:31+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/javascript-dizilerinde-mutator-metotlar-detayli-rehber\/\"},\"wordCount\":1554,\"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\/javascript-dizilerinde-mutator-metotlar-detayli-rehber\/#respond\"]}],\"copyrightYear\":\"2025\",\"copyrightHolder\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/javascript-dizilerinde-mutator-metotlar-detayli-rehber\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/javascript-dizilerinde-mutator-metotlar-detayli-rehber\/\",\"name\":\"JavaScript Dizilerinde Mutator Metotlar: Detayl\u0131 Rehber - Kodlar\u0131n Gizemli D\u00fcnyas\u0131\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\"},\"datePublished\":\"2025-11-06T03:41:31+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/javascript-dizilerinde-mutator-metotlar-detayli-rehber\/#breadcrumb\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/javascript-dizilerinde-mutator-metotlar-detayli-rehber\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/javascript-dizilerinde-mutator-metotlar-detayli-rehber\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Anasayfa\",\"item\":\"https:\/\/fatihsoysal.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"JavaScript Dizilerinde Mutator Metotlar: Detayl\u0131 Rehber\"}]},{\"@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 Dizilerinde Mutator Metotlar: Detayl\u0131 Rehber - 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\/javascript-dizilerinde-mutator-metotlar-detayli-rehber\/","og_locale":"tr_TR","og_type":"article","og_title":"JavaScript Dizilerinde Mutator Metotlar: Detayl\u0131 Rehber","og_description":"JavaScript Dizilerinde Mutator Metotlar: Detayl\u0131 Rehber JavaScript, web geli\u015ftirmeden sunucu taraf\u0131 uygulamalara kadar geni\u015f bir yelpaze","og_url":"https:\/\/fatihsoysal.com\/blog\/javascript-dizilerinde-mutator-metotlar-detayli-rehber\/","og_site_name":"Kodlar\u0131n Gizemli D\u00fcnyas\u0131","article_published_time":"2025-11-06T03:41:31+00:00","author":"Fatih Soysal","twitter_card":"summary_large_image","twitter_misc":{"Yazan:":"Fatih Soysal","Tahmini okuma s\u00fcresi":"12 dakika"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/fatihsoysal.com\/blog\/javascript-dizilerinde-mutator-metotlar-detayli-rehber\/#article","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/javascript-dizilerinde-mutator-metotlar-detayli-rehber\/"},"author":{"name":"Fatih Soysal","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"headline":"JavaScript Dizilerinde Mutator Metotlar: Detayl\u0131 Rehber","datePublished":"2025-11-06T03:41:31+00:00","mainEntityOfPage":{"@id":"https:\/\/fatihsoysal.com\/blog\/javascript-dizilerinde-mutator-metotlar-detayli-rehber\/"},"wordCount":1554,"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\/javascript-dizilerinde-mutator-metotlar-detayli-rehber\/#respond"]}],"copyrightYear":"2025","copyrightHolder":{"@id":"https:\/\/fatihsoysal.com\/blog\/#organization"}},{"@type":"WebPage","@id":"https:\/\/fatihsoysal.com\/blog\/javascript-dizilerinde-mutator-metotlar-detayli-rehber\/","url":"https:\/\/fatihsoysal.com\/blog\/javascript-dizilerinde-mutator-metotlar-detayli-rehber\/","name":"JavaScript Dizilerinde Mutator Metotlar: Detayl\u0131 Rehber - Kodlar\u0131n Gizemli D\u00fcnyas\u0131","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/#website"},"datePublished":"2025-11-06T03:41:31+00:00","breadcrumb":{"@id":"https:\/\/fatihsoysal.com\/blog\/javascript-dizilerinde-mutator-metotlar-detayli-rehber\/#breadcrumb"},"inLanguage":"tr","potentialAction":[{"@type":"ReadAction","target":["https:\/\/fatihsoysal.com\/blog\/javascript-dizilerinde-mutator-metotlar-detayli-rehber\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/fatihsoysal.com\/blog\/javascript-dizilerinde-mutator-metotlar-detayli-rehber\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Anasayfa","item":"https:\/\/fatihsoysal.com\/blog\/"},{"@type":"ListItem","position":2,"name":"JavaScript Dizilerinde Mutator Metotlar: Detayl\u0131 Rehber"}]},{"@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\/33714","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=33714"}],"version-history":[{"count":1,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/33714\/revisions"}],"predecessor-version":[{"id":33715,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/33714\/revisions\/33715"}],"wp:attachment":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/media?parent=33714"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/categories?post=33714"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/tags?post=33714"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}