JavaScript, web geli\u015ftirmenin temel ta\u015flar\u0131ndan biridir ve verileri d\u00fczenlemenin, depolaman\u0131n ve \u00fczerinde i\u015flem yapman\u0131n en yayg\u0131n yollar\u0131ndan biri dizilerdir (Arrays). Diziler, birden fazla de\u011feri tek bir de\u011fi\u015fkende saklamam\u0131za olanak tan\u0131yan, s\u0131ral\u0131 koleksiyonlard\u0131r. Ancak dizileri ger\u00e7ekten g\u00fc\u00e7l\u00fc k\u0131lan \u015fey, JavaScript’in sundu\u011fu zengin dizi metotlar\u0131 setidir. Bu metotlar, diziler \u00fczerinde karma\u015f\u0131k i\u015flemleri bile tek bir sat\u0131rda veya birka\u00e7 sat\u0131rda kolayca yapmam\u0131z\u0131 sa\u011flar.<\/p>\n
Dizi metotlar\u0131 genellikle \u00fc\u00e7 ana kategoriye ayr\u0131l\u0131r: Bu makalede, \u00f6zellikle Eri\u015fimci Metotlar<\/strong> \u00fczerine odaklanaca\u011f\u0131z. Eri\u015fimci metotlar, modern JavaScript geli\u015ftirme pratiklerinde, \u00f6zellikle React gibi durum y\u00f6netimini temel alan k\u00fct\u00fcphanelerde, veri b\u00fct\u00fcnl\u00fc\u011f\u00fcn\u00fc koruma ve \u00f6ng\u00f6r\u00fclebilir kod yazma a\u00e7\u0131s\u0131ndan kritik bir rol oynar. Orijinal diziyi de\u011fi\u015ftirmemeleri, beklenmedik yan etkileri \u00f6nler ve kodun daha g\u00fcvenli ve anla\u015f\u0131l\u0131r olmas\u0131n\u0131 sa\u011flar. \u015eimdi, bu g\u00fc\u00e7l\u00fc metotlar\u0131 detayl\u0131 bir \u015fekilde inceleyelim.<\/p>\n JavaScript, diziler \u00fczerinde i\u015flem yaparken orijinal diziyi de\u011fi\u015ftirmeden yeni bir sonu\u00e7 \u00fcretmek i\u00e7in kullanabilece\u011fimiz bir dizi eri\u015fimci metot sunar. Bu metotlar, veri b\u00fct\u00fcnl\u00fc\u011f\u00fcn\u00fc koruman\u0131n ve yan etkileri \u00f6nlemenin anahtar\u0131d\u0131r.<\/p>\n * Ama\u00e7:<\/strong> Birden fazla diziyi birle\u015ftirmek. * Ama\u00e7:<\/strong> Dizi elemanlar\u0131n\u0131 bir dizeye d\u00f6n\u00fc\u015ft\u00fcrmek. * Ama\u00e7:<\/strong> Bir dizinin bir b\u00f6l\u00fcm\u00fcn\u00fc kopyalamak ve yeni bir dizi olarak d\u00f6nd\u00fcrmek. * Ama\u00e7:<\/strong> Bir eleman\u0131n dizideki ilk indeksini bulmak. * Ama\u00e7:<\/strong> Bir eleman\u0131n dizideki son indeksini bulmak. * Ama\u00e7:<\/strong> Bir dizinin belirli bir eleman\u0131 i\u00e7erip i\u00e7ermedi\u011fini kontrol etmek. * Ama\u00e7:<\/strong> Bir diziyi dizeye d\u00f6n\u00fc\u015ft\u00fcrmek. * Ama\u00e7:<\/strong> Diziyi yerel ayarlara duyarl\u0131 bir dizeye d\u00f6n\u00fc\u015ft\u00fcrmek. * Ama\u00e7:<\/strong> Bir dizinin belirli bir indeksindeki eleman\u0131 almak, \u00f6zellikle negatif indekslerle. Eri\u015fimci metotlar\u0131n modern JavaScript geli\u015ftirmedeki \u00f6nemi, onlar\u0131n temel \u00e7al\u0131\u015fma prensibinden, yani orijinal diziyi de\u011fi\u015ftirmeden yeni bir sonu\u00e7 d\u00f6nd\u00fcrmelerinden gelir. Bu “de\u011fi\u015fmezlik” (immutability) prensibi, bir\u00e7ok avantaj sunar:<\/p>\n 1. Veri B\u00fct\u00fcnl\u00fc\u011f\u00fcn\u00fc Koruma:<\/strong> Orijinal verilerinizi asla de\u011fi\u015ftirmedi\u011finiz i\u00e7in, uygulaman\u0131z\u0131n farkl\u0131 yerlerinde ayn\u0131 diziye referans verildi\u011finde beklenmedik de\u011fi\u015fikliklerle kar\u015f\u0131la\u015fmazs\u0131n\u0131z. Bu, \u00f6zellikle karma\u015f\u0131k uygulamalarda durum y\u00f6netimi (state management) i\u00e7in hayati \u00f6neme sahiptir. Eri\u015fimci metotlar\u0131n \u00f6nemini daha iyi anlamak i\u00e7in, de\u011fi\u015ftirici (mutator) metotlarla aralar\u0131ndaki temel fark\u0131 vurgulamak \u00f6nemlidir.<\/p>\n De\u011fi\u015ftirici Metotlar (Mutator Methods):<\/strong> \u00d6rnek:<\/strong><\/p>\n Eri\u015fimci Metotlar (Accessor Methods):<\/strong> \u00d6rnek:<\/strong><\/p>\n Ne zaman hangi metodu kullanaca\u011f\u0131n\u0131z, ihtiyac\u0131n\u0131za ba\u011fl\u0131d\u0131r. E\u011fer orijinal diziyi ger\u00e7ekten de\u011fi\u015ftirmeniz gerekiyorsa (\u00f6rne\u011fin, bir kuyruktan eleman \u00e7\u0131karmak gibi), de\u011fi\u015ftirici metotlar uygun olabilir. Ancak, \u00f6zellikle bir uygulaman\u0131n durumunu y\u00f6netirken veya veri b\u00fct\u00fcnl\u00fc\u011f\u00fcn\u00fc koruman\u0131n kritik oldu\u011fu durumlarda, eri\u015fimci metotlar\u0131 tercih etmek en iyi uygulamad\u0131r. Modern JavaScript geli\u015ftirme, m\u00fcmk\u00fcn oldu\u011funca de\u011fi\u015fmez (immutable) veri yap\u0131lar\u0131n\u0131 kullanmay\u0131 te\u015fvik eder.<\/p>\n Eri\u015fimci metotlar\u0131 etkin bir \u015fekilde kullanmak i\u00e7in baz\u0131 en iyi uygulamalar ve ipu\u00e7lar\u0131:<\/p>\n 1. De\u011fi\u015fmezli\u011fi Tercih Edin:<\/strong> M\u00fcmk\u00fcn oldu\u011funca, orijinal diziyi de\u011fi\u015ftirmeyen eri\u015fimci metotlar\u0131 kullan\u0131n. Bu, \u00f6zellikle b\u00fcy\u00fck ve karma\u015f\u0131k uygulamalarda hatalar\u0131 azalt\u0131r ve kodun \u00f6ng\u00f6r\u00fclebilirli\u011fini art\u0131r\u0131r. Bir\u00e7ok modern JavaScript \u00e7er\u00e7evesi ve k\u00fct\u00fcphanesi (\u00f6rn. React), bu yakla\u015f\u0131m\u0131 te\u015fvik eder. 3. Zincirleme Kullan\u0131m\u0131:<\/strong> Eri\u015fimci metotlar genellikle yeni bir dizi d\u00f6nd\u00fcrd\u00fc\u011f\u00fc i\u00e7in, birden fazla i\u015flemi tek bir sat\u0131rda zincirleyerek ger\u00e7ekle\u015ftirebilirsiniz. Bu, kodunuzu daha k\u0131sa ve daha ifade edici hale getirebilir.<\/p>\n 4. Performans\u0131 G\u00f6z \u00d6n\u00fcnde Bulundurun (Ancak A\u015f\u0131r\u0131 D\u00fc\u015f\u00fcnmeyin):<\/strong> \u00c7o\u011fu modern uygulamada, eri\u015fimci metotlar\u0131n performans maliyeti genellikle ihmal edilebilir d\u00fczeydedir. Yeni bir dizi olu\u015fturmak, orijinal diziyi de\u011fi\u015ftirmekten biraz daha fazla bellek ve i\u015flem s\u00fcresi gerektirebilir, ancak bu fark genellikle sadece \u00e7ok b\u00fcy\u00fck dizilerde veya performans\u0131n kritik oldu\u011fu \u00f6zel durumlarda belirginle\u015fir. Genel olarak, okunabilirlik ve s\u00fcrd\u00fcr\u00fclebilirlik, k\u00fc\u00e7\u00fck performans farklar\u0131ndan daha \u00f6nemlidir. Bu ipu\u00e7lar\u0131n\u0131 takip ederek, JavaScript’te dizi eri\u015fimci metotlar\u0131n\u0131 daha etkili ve g\u00fcvenli bir \u015fekilde kullanabilir, daha sa\u011flam ve s\u00fcrd\u00fcr\u00fclebilir uygulamalar geli\u015ftirebilirsiniz.<\/p>\n JavaScript’teki dizi eri\u015fimci metotlar\u0131, modern web geli\u015ftirmenin temel ta\u015flar\u0131ndan biridir. Orijinal diziyi de\u011fi\u015ftirmeden yeni bir sonu\u00e7 d\u00f6nd\u00fcrme yetenekleri sayesinde, veri b\u00fct\u00fcnl\u00fc\u011f\u00fcn\u00fc korur, kodun \u00f6ng\u00f6r\u00fclebilirli\u011fini art\u0131r\u0131r ve yan etkileri en aza indirirler. Bu \u00f6zellikler, \u00f6zellikle React, Vue gibi durum y\u00f6netimi odakl\u0131 k\u00fct\u00fcphanelerle \u00e7al\u0131\u015f\u0131rken veya genel olarak daha sa\u011flam, bak\u0131m\u0131 kolay ve hata ay\u0131klamas\u0131 basit kod yazmak istedi\u011finizde paha bi\u00e7ilmezdir.<\/p>\n Bu makalede inceledi\u011fimiz
\n1. Eri\u015fimci (Accessor) Metotlar:<\/strong> Orijinal diziyi de\u011fi\u015ftirmeden (mutasyona u\u011fratmadan) dizi \u00fczerinde i\u015flemler yapar ve yeni bir de\u011fer (yeni bir dizi, bir dize veya ba\u015fka bir de\u011fer) d\u00f6nd\u00fcr\u00fcrler. Bu metotlar “immutable” (de\u011fi\u015fmez) prensibiyle \u00e7al\u0131\u015f\u0131r, yani orijinal veri b\u00fct\u00fcnl\u00fc\u011f\u00fcn\u00fc korurlar.
\n2. De\u011fi\u015ftirici (Mutator) Metotlar:<\/strong> Orijinal diziyi do\u011frudan de\u011fi\u015ftirirler (mutasyona u\u011frat\u0131rlar). \u00d6rne\u011fin, bir eleman eklemek, \u00e7\u0131karmak, s\u0131ralamak veya ters \u00e7evirmek gibi i\u015flemler yaparlar.
\n3. \u0130terasyon (Iteration) Metotlar\u0131:<\/strong> Dizinin her bir eleman\u0131 \u00fczerinde bir i\u015flem yapmak i\u00e7in kullan\u0131l\u0131rlar. forEach<\/code>, map<\/code>, filter<\/code>, reduce<\/code> gibi metotlar bu kategoriye girer ve genellikle bir geri arama (callback) fonksiyonu al\u0131rlar.<\/p>\nTemel Eri\u015fimci (Accessor) Metotlar<\/h2>\n
concat()<\/code> Metodu<\/h3>\nconcat()<\/code> metodu, iki veya daha fazla diziyi birle\u015ftirerek yeni bir dizi olu\u015fturur. Orijinal dizileri kesinlikle de\u011fi\u015ftirmez.<\/p>\n
\n* S\u00f6zdizimi:<\/strong> array.concat(value1, value2, ..., valueN)<\/code>
\n* D\u00f6n\u00fc\u015f De\u011feri:<\/strong> Birle\u015ftirilmi\u015f elemanlar\u0131 i\u00e7eren yeni bir dizi.
\n* \u00d6rnekler:<\/strong><\/p>\nconst dizi1 = [1, 2, 3];\nconst dizi2 = [4, 5, 6];\nconst dizi3 = [7, 8, 9];\n\n\/\/ \u0130ki diziyi birle\u015ftirme\nconst birlesikDizi1 = dizi1.concat(dizi2);\nconsole.log(birlesikDizi1); \/\/ [1, 2, 3, 4, 5, 6]\nconsole.log(dizi1); \/\/ [1, 2, 3] (Orijinal dizi de\u011fi\u015fmedi)\n\n\/\/ Birden fazla diziyi birle\u015ftirme\nconst birlesikDizi2 = dizi1.concat(dizi2, dizi3);\nconsole.log(birlesikDizi2); \/\/ [1, 2, 3, 4, 5, 6, 7, 8, 9]\n\n\/\/ Diziye tekil de\u011ferler veya birden fazla de\u011fer ekleme\nconst yeniDizi = dizi1.concat(4, 5, [6, 7]);\nconsole.log(yeniDizi); \/\/ [1, 2, 3, 4, 5, 6, 7]<\/code><\/pre>\nconcat()<\/code> metodu, \u00f6zellikle mevcut bir diziye yeni elemanlar veya ba\u015fka diziler ekleyerek yeni bir dizi olu\u015fturmak istedi\u011finizde \u00e7ok kullan\u0131\u015fl\u0131d\u0131r. Spread operat\u00f6r\u00fc (...<\/code>) de benzer bir i\u015flevi g\u00f6rebilir, ancak concat()<\/code> daha eski ve belirli senaryolarda daha okunabilir olabilir.<\/p>\njoin()<\/code> Metodu<\/h3>\njoin()<\/code> metodu, bir dizinin t\u00fcm elemanlar\u0131n\u0131 birle\u015ftirerek tek bir dize (string) olu\u015fturur. Elemanlar aras\u0131na belirtilen bir ay\u0131r\u0131c\u0131 (separator) eklenir. E\u011fer ay\u0131r\u0131c\u0131 belirtilmezse, varsay\u0131lan olarak virg\u00fcl (,<\/code>) kullan\u0131l\u0131r.<\/p>\n
\n* S\u00f6zdizimi:<\/strong> array.join(separator)<\/code>
\n* D\u00f6n\u00fc\u015f De\u011feri:<\/strong> Birle\u015ftirilmi\u015f elemanlar\u0131 i\u00e7eren bir dize.
\n* \u00d6rnekler:<\/strong><\/p>\nconst meyveler = ['elma', 'armut', 'muz'];\n\n\/\/ Varsay\u0131lan ay\u0131r\u0131c\u0131 (virg\u00fcl) ile birle\u015ftirme\nconst dize1 = meyveler.join();\nconsole.log(dize1); \/\/ \"elma,armut,muz\"\n\n\/\/ Bo\u015fluk ile birle\u015ftirme\nconst dize2 = meyveler.join(' ');\nconsole.log(dize2); \/\/ \"elma armut muz\"\n\n\/\/ Tire ile birle\u015ftirme\nconst dize3 = meyveler.join('-');\nconsole.log(dize3); \/\/ \"elma-armut-muz\"\n\n\/\/ Bo\u015f dize ile birle\u015ftirme (elemanlar\u0131 biti\u015fik yazar)\nconst dize4 = meyveler.join('');\nconsole.log(dize4); \/\/ \"elmaarmutmuz\"\n\nconst sayilar = [1, null, undefined, 4];\n\/\/ null ve undefined elemanlar bo\u015f dize olarak i\u015flenir\nconst dize5 = sayilar.join('-');\nconsole.log(dize5); \/\/ \"1--4\"<\/code><\/pre>\njoin()<\/code> metodu, bir dizinin i\u00e7eri\u011fini kullan\u0131c\u0131ya g\u00f6stermek veya belirli bir formatta bir dize olu\u015fturmak i\u00e7in idealdir. \u00d6rne\u011fin, bir URL slug’\u0131 olu\u015ftururken veya bir CSV dosyas\u0131n\u0131n sat\u0131rlar\u0131n\u0131 haz\u0131rlarken kullan\u0131labilir.<\/p>\nslice()<\/code> Metodu<\/h3>\nslice()<\/code> metodu, bir dizinin belirli bir b\u00f6l\u00fcm\u00fcn\u00fc “dilimleyerek” yeni bir dizi olu\u015fturur. Orijinal diziyi de\u011fi\u015ftirmez. start<\/code> ve end<\/code> indeksleri alabilir. start<\/code> indeksi dahil, end<\/code> indeksi hari\u00e7tir.<\/p>\n
\n* S\u00f6zdizimi:<\/strong> array.slice(start, end)<\/code>
\n* D\u00f6n\u00fc\u015f De\u011feri:<\/strong> Se\u00e7ilen elemanlar\u0131 i\u00e7eren yeni bir dizi (s\u0131\u011f kopya).
\n* Parametreler:<\/strong>
\n * start<\/code> (iste\u011fe ba\u011fl\u0131): Dilimlemeye ba\u015flanacak s\u0131f\u0131r tabanl\u0131 indeks. Negatif bir de\u011ferse, dizinin sonundan itibaren say\u0131l\u0131r. Varsay\u0131lan olarak 0’d\u0131r.
\n * end<\/code> (iste\u011fe ba\u011fl\u0131): Dilimlemenin bitece\u011fi s\u0131f\u0131r tabanl\u0131 indeks. Bu indeksin eleman\u0131 dahil edilmez. Negatif bir de\u011ferse, dizinin sonundan itibaren say\u0131l\u0131r. Varsay\u0131lan olarak dizinin sonudur.
\n* \u00d6rnekler:<\/strong><\/p>\nconst hayvanlar = ['ant', 'bison', 'camel', 'duck', 'elephant'];\n\n\/\/ Ba\u015ftan 2. indeksten (camel) ba\u015flayarak sona kadar\nconst dilim1 = hayvanlar.slice(2);\nconsole.log(dilim1); \/\/ [\"camel\", \"duck\", \"elephant\"]\n\n\/\/ 1. indeksten (bison) ba\u015flay\u0131p 4. indekse (duck) kadar (4. dahil de\u011fil)\nconst dilim2 = hayvanlar.slice(1, 4);\nconsole.log(dilim2); \/\/ [\"bison\", \"camel\", \"duck\"]\n\n\/\/ Negatif indeksler: Sondan 2. elemandan (duck) ba\u015flay\u0131p sona kadar\nconst dilim3 = hayvanlar.slice(-2);\nconsole.log(dilim3); \/\/ [\"duck\", \"elephant\"]\n\n\/\/ Negatif indeksler: Sondan 3. elemandan (camel) ba\u015flay\u0131p sondan 1. elemana (elephant) kadar (sondan 1. dahil de\u011fil)\nconst dilim4 = hayvanlar.slice(-3, -1);\nconsole.log(dilim4); \/\/ [\"camel\", \"duck\"]\n\n\/\/ T\u00fcm dizinin s\u0131\u011f bir kopyas\u0131n\u0131 olu\u015fturma\nconst tamKopya = hayvanlar.slice();\nconsole.log(tamKopya); \/\/ [\"ant\", \"bison\", \"camel\", \"duck\", \"elephant\"]\nconsole.log(hayvanlar); \/\/ [\"ant\", \"bison\", \"camel\", \"duck\", \"elephant\"] (Orijinal dizi de\u011fi\u015fmedi)<\/code><\/pre>\nslice()<\/code> metodu, \u00f6zellikle dizinin bir b\u00f6l\u00fcm\u00fcn\u00fc kopyalaman\u0131z veya bir alt dizi olu\u015fturman\u0131z gerekti\u011finde \u00e7ok kullan\u0131\u015fl\u0131d\u0131r. Unutulmamal\u0131d\u0131r ki slice()<\/code>, nesneler i\u00e7eren dizilerde s\u0131\u011f bir kopya olu\u015fturur. Yani, kopyalanan dizi elemanlar\u0131 nesnelerse, bu nesneler hala orijinal dizideki nesnelerle ayn\u0131 referansa sahiptir.<\/p>\nindexOf()<\/code> Metodu<\/h3>\nindexOf()<\/code> metodu, belirli bir eleman\u0131n dizideki ilk ge\u00e7ti\u011fi indeks numaras\u0131n\u0131 d\u00f6nd\u00fcr\u00fcr. E\u011fer eleman dizide bulunamazsa -1<\/code> d\u00f6nd\u00fcr\u00fcr. Arama, belirtilen fromIndex<\/code> konumundan ba\u015flar.<\/p>\n
\n* S\u00f6zdizimi:<\/strong> array.indexOf(searchElement, fromIndex)<\/code>
\n* D\u00f6n\u00fc\u015f De\u011feri:<\/strong> Eleman\u0131n indeksi (say\u0131) veya -1.
\n* Parametreler:<\/strong>
\n * searchElement<\/code>: Aranacak eleman.
\n * fromIndex<\/code> (iste\u011fe ba\u011fl\u0131): Aramaya ba\u015flanacak indeks. Varsay\u0131lan olarak 0’d\u0131r. Negatif bir de\u011ferse, dizinin sonundan itibaren say\u0131l\u0131r.
\n* \u00d6rnekler:<\/strong><\/p>\nconst notlar = [10, 20, 30, 20, 40, 50];\n\n\/\/ 20'nin ilk ge\u00e7ti\u011fi indeks\nconst indeks1 = notlar.indexOf(20);\nconsole.log(indeks1); \/\/ 1\n\n\/\/ 60'\u0131n indeksi (bulunamad\u0131\u011f\u0131 i\u00e7in -1)\nconst indeks2 = notlar.indexOf(60);\nconsole.log(indeks2); \/\/ -1\n\n\/\/ 20'yi 2. indeksten (de\u011fer 30) ba\u015flayarak ara\nconst indeks3 = notlar.indexOf(20, 2);\nconsole.log(indeks3); \/\/ 3 (ikinci 20'nin indeksi)\n\n\/\/ Negatif fromIndex: Sondan 3. elemandan (40) ba\u015flayarak 20'yi ara\nconst indeks4 = notlar.indexOf(20, -3);\nconsole.log(indeks4); \/\/ 3 (arama 40'tan ba\u015flar, 20'yi bulur)\n\n\/\/ NaN arama (indexOf NaN'i bulamaz)\nconst karisikDizi = [1, 2, NaN, 4];\nconsole.log(karisikDizi.indexOf(NaN)); \/\/ -1<\/code><\/pre>\nindexOf()<\/code> metodu, ===<\/code> (kat\u0131 e\u015fitlik) operat\u00f6r\u00fcn\u00fc kullanarak kar\u015f\u0131la\u015ft\u0131rma yapar. Bu, NaN<\/code> (Not-a-Number) de\u011ferini bulamad\u0131\u011f\u0131 anlam\u0131na gelir, \u00e7\u00fcnk\u00fc NaN === NaN<\/code> her zaman false<\/code> d\u00f6ner.<\/p>\nlastIndexOf()<\/code> Metodu<\/h3>\nlastIndexOf()<\/code> metodu, belirli bir eleman\u0131n dizideki son ge\u00e7ti\u011fi indeks numaras\u0131n\u0131 d\u00f6nd\u00fcr\u00fcr. E\u011fer eleman dizide bulunamazsa -1<\/code> d\u00f6nd\u00fcr\u00fcr. Arama, belirtilen fromIndex<\/code> konumundan geriye do\u011fru ba\u015flar.<\/p>\n
\n* S\u00f6zdizimi:<\/strong> array.lastIndexOf(searchElement, fromIndex)<\/code>
\n* D\u00f6n\u00fc\u015f De\u011feri:<\/strong> Eleman\u0131n indeksi (say\u0131) veya -1.
\n* Parametreler:<\/strong>
\n * searchElement<\/code>: Aranacak eleman.
\n * fromIndex<\/code> (iste\u011fe ba\u011fl\u0131): Aramaya ba\u015flanacak indeks. Varsay\u0131lan olarak array.length - 1<\/code> (dizinin son eleman\u0131) d\u0131r. Negatif bir de\u011ferse, dizinin sonundan itibaren say\u0131l\u0131r.
\n* \u00d6rnekler:<\/strong><\/p>\nconst notlar = [10, 20, 30, 20, 40, 50];\n\n\/\/ 20'nin son ge\u00e7ti\u011fi indeks\nconst indeks1 = notlar.lastIndexOf(20);\nconsole.log(indeks1); \/\/ 3\n\n\/\/ 60'\u0131n indeksi (bulunamad\u0131\u011f\u0131 i\u00e7in -1)\nconst indeks2 = notlar.lastIndexOf(60);\nconsole.log(indeks2); \/\/ -1\n\n\/\/ 20'yi 4. indeksten (de\u011fer 40) geriye do\u011fru ba\u015flayarak ara\nconst indeks3 = notlar.lastIndexOf(20, 4);\nconsole.log(indeks3); \/\/ 3 (40'tan geriye do\u011fru 20'yi bulur)\n\n\/\/ Negatif fromIndex: Sondan 4. elemandan (30) geriye do\u011fru ba\u015flayarak 20'yi ara\nconst indeks4 = notlar.lastIndexOf(20, -4); \/\/ -4 asl\u0131nda 2. indeks (30)\nconsole.log(indeks4); \/\/ 1 (arama 30'dan geriye do\u011fru ba\u015flar, ilk 20'yi bulur)<\/code><\/pre>\nlastIndexOf()<\/code> da indexOf()<\/code> gibi ===<\/code> operat\u00f6r\u00fcn\u00fc kullan\u0131r ve NaN<\/code> de\u011ferini bulamaz. Bir eleman\u0131n dizide ka\u00e7 kez ge\u00e7ti\u011fini bulmak i\u00e7in indexOf()<\/code> veya lastIndexOf()<\/code>‘u bir d\u00f6ng\u00fcyle birle\u015ftirebilirsiniz.<\/p>\nincludes()<\/code> Metodu<\/h3>\nincludes()<\/code> metodu, bir dizinin belirli bir de\u011feri i\u00e7erip i\u00e7ermedi\u011fini kontrol eder ve true<\/code> veya false<\/code> d\u00f6nd\u00fcr\u00fcr. Bu metot, ES2016 ile birlikte gelmi\u015ftir ve \u00f6zellikle NaN<\/code> de\u011ferlerini do\u011fru bir \u015fekilde kontrol edebilmesiyle indexOf()<\/code>‘tan ayr\u0131l\u0131r.<\/p>\n
\n* S\u00f6zdizimi:<\/strong> array.includes(searchElement, fromIndex)<\/code>
\n* D\u00f6n\u00fc\u015f De\u011feri:<\/strong> Boolean (true<\/code> veya false<\/code>).
\n* Parametreler:<\/strong>
\n * searchElement<\/code>: Aranacak eleman.
\n * fromIndex<\/code> (iste\u011fe ba\u011fl\u0131): Aramaya ba\u015flanacak indeks. Varsay\u0131lan olarak 0’d\u0131r. Negatif bir de\u011ferse, dizinin sonundan itibaren say\u0131l\u0131r.
\n* \u00d6rnekler:<\/strong><\/p>\nconst sayilar = [1, 2, 3, 4, 5];\n\n\/\/ 3 i\u00e7eriyor mu?\nconsole.log(sayilar.includes(3)); \/\/ true\n\n\/\/ 7 i\u00e7eriyor mu?\nconsole.log(sayilar.includes(7)); \/\/ false\n\n\/\/ 3'\u00fc 3. indeksten (de\u011fer 4) ba\u015flayarak ara\nconsole.log(sayilar.includes(3, 3)); \/\/ false (3. indeksten sonra 3 yok)\n\n\/\/ Negatif fromIndex: Sondan 2. elemandan (4) ba\u015flayarak 4'\u00fc ara\nconsole.log(sayilar.includes(4, -2)); \/\/ true\n\n\/\/ NaN ile kullan\u0131m (indexOf'tan farkl\u0131 olarak NaN'i bulur)\nconst karisikDizi = [1, 2, NaN, 4];\nconsole.log(karisikDizi.includes(NaN)); \/\/ true<\/code><\/pre>\nincludes()<\/code> metodu, bir eleman\u0131n varl\u0131\u011f\u0131n\u0131 kontrol etmek i\u00e7in \u00e7ok daha okunabilir ve g\u00fcvenilir bir yol sunar, \u00f6zellikle NaN<\/code> gibi \u00f6zel de\u011ferlerle \u00e7al\u0131\u015f\u0131rken.<\/p>\ntoString()<\/code> Metodu<\/h3>\ntoString()<\/code> metodu, bir diziyi ve elemanlar\u0131n\u0131 temsil eden bir dize d\u00f6nd\u00fcr\u00fcr. Elemanlar virg\u00fclle ayr\u0131l\u0131r. Bu metot, asl\u0131nda join(',')<\/code> ile ayn\u0131 sonucu verir.<\/p>\n
\n* S\u00f6zdizimi:<\/strong> array.toString()<\/code>
\n* D\u00f6n\u00fc\u015f De\u011feri:<\/strong> Bir dize.
\n* \u00d6rnekler:<\/strong><\/p>\nconst meyveler = ['elma', 'armut', 'muz'];\nconst dize1 = meyveler.toString();\nconsole.log(dize1); \/\/ \"elma,armut,muz\"\n\nconst sayilar = [1, 2, 3];\nconst dize2 = sayilar.toString();\nconsole.log(dize2); \/\/ \"1,2,3\"\n\nconst icIceDizi = [1, [2, 3], 4];\nconst dize3 = icIceDizi.toString();\nconsole.log(dize3); \/\/ \"1,2,3,4\" (\u0130\u00e7 i\u00e7e diziler de virg\u00fclle ayr\u0131l\u0131r)<\/code><\/pre>\ntoString()<\/code> genellikle dizileri basit bir metin format\u0131nda g\u00f6r\u00fcnt\u00fclemek veya hata ay\u0131klama s\u0131ras\u0131nda dizinin i\u00e7eri\u011fini h\u0131zl\u0131ca g\u00f6rmek i\u00e7in kullan\u0131l\u0131r.<\/p>\ntoLocaleString()<\/code> Metodu<\/h3>\ntoLocaleString()<\/code> metodu, toString()<\/code> metoduna benzer \u015fekilde bir diziyi ve elemanlar\u0131n\u0131 temsil eden bir dize d\u00f6nd\u00fcr\u00fcr. Ancak, bu metot dizinin elemanlar\u0131n\u0131 yerel ayarlara (locale) duyarl\u0131 bir \u015fekilde dizeye d\u00f6n\u00fc\u015ft\u00fcr\u00fcr. \u00d6zellikle say\u0131lar\u0131, tarihleri ve para birimlerini farkl\u0131 dillerin ve b\u00f6lgelerin formatlar\u0131na g\u00f6re bi\u00e7imlendirmek i\u00e7in kullan\u0131\u015fl\u0131d\u0131r.<\/p>\n
\n* S\u00f6zdizimi:<\/strong> array.toLocaleString(locales, options)<\/code>
\n* D\u00f6n\u00fc\u015f De\u011feri:<\/strong> Yerel ayarlara duyarl\u0131 bir dize.
\n* Parametreler:<\/strong>
\n * locales<\/code> (iste\u011fe ba\u011fl\u0131): Dil veya b\u00f6lge bilgisini i\u00e7eren bir dize veya dize dizisi (\u00f6rn. 'en-US'<\/code>, 'tr-TR'<\/code>).
\n * options<\/code> (iste\u011fe ba\u011fl\u0131): Bi\u00e7imlendirme se\u00e7eneklerini belirten bir nesne.
\n* \u00d6rnekler:<\/strong><\/p>\nconst sayilar = [1000, 1234.56, new Date()];\n\n\/\/ Varsay\u0131lan yerel ayar\nconsole.log(sayilar.toLocaleString()); \/\/ \"1.000, 1.234,56, 11.05.2023 10:30:00\" (\u00d6rnek: T\u00fcrkiye yerel ayar\u0131)\n\n\/\/ Amerikan \u0130ngilizcesi yerel ayar\u0131 ile\nconsole.log(sayilar.toLocaleString('en-US')); \/\/ \"1,000, 1,234.56, 5\/11\/2023, 10:30:00 AM\"\n\n\/\/ Alman yerel ayar\u0131 ile\nconsole.log(sayilar.toLocaleString('de-DE')); \/\/ \"1.000, 1.234,56, 11.5.2023, 10:30:00\"\n\nconst fiyatlar = [100.5, 200];\n\/\/ Para birimi bi\u00e7imlendirmesi\nconsole.log(fiyatlar.toLocaleString('tr-TR', { style: 'currency', currency: 'TRY' })); \/\/ \"100,50 TL, 200,00 TL\"\nconsole.log(fiyatlar.toLocaleString('en-US', { style: 'currency', currency: 'USD' })); \/\/ \"$100.50, $200.00\"<\/code><\/pre>\ntoLocaleString()<\/code> metodu, uluslararas\u0131la\u015fma (i18n) gerektiren uygulamalarda, kullan\u0131c\u0131lar\u0131n kendi b\u00f6lgelerine ve dillerine uygun formatlarda veri g\u00f6rmesini sa\u011flamak i\u00e7in \u00e7ok de\u011ferlidir.<\/p>\nat()<\/code> Metodu<\/h3>\nat()<\/code> metodu, bir dizinin belirli bir indeksindeki eleman\u0131 d\u00f6nd\u00fcr\u00fcr. ES2022 ile eklenmi\u015f olup, \u00f6zellikle negatif indekslerle \u00e7al\u0131\u015f\u0131rken k\u00f6\u015feli parantez notasyonuna (array[index]<\/code>) g\u00f6re daha esnek ve okunabilir bir yol sunar. Negatif indeksler, dizinin sonundan itibaren elemanlar\u0131 se\u00e7mek i\u00e7in kullan\u0131labilir.<\/p>\n
\n* S\u00f6zdizimi:<\/strong> array.at(index)<\/code>
\n* D\u00f6n\u00fc\u015f De\u011feri:<\/strong> Belirtilen indeksteki eleman veya indeks ge\u00e7erli de\u011filse undefined<\/code>.
\n* \u00d6rnekler:<\/strong><\/p>\nconst meyveler = ['elma', 'armut', 'muz', '\u00e7ilek', '\u00fcz\u00fcm'];\n\n\/\/ Pozitif indeks: 2. eleman (muz)\nconsole.log(meyveler.at(2)); \/\/ \"muz\"\nconsole.log(meyveler[2]); \/\/ \"muz\" (ayn\u0131)\n\n\/\/ Negatif indeks: Sondan 1. eleman (\u00fcz\u00fcm)\nconsole.log(meyveler.at(-1)); \/\/ \"\u00fcz\u00fcm\"\n\/\/ K\u00f6\u015feli parantez ile ayn\u0131 i\u015flemi yapmak daha karma\u015f\u0131kt\u0131r:\nconsole.log(meyveler[meyveler.length - 1]); \/\/ \"\u00fcz\u00fcm\"\n\n\/\/ Negatif indeks: Sondan 3. eleman (muz)\nconsole.log(meyveler.at(-3)); \/\/ \"muz\"\n\n\/\/ Ge\u00e7ersiz indeks (undefined d\u00f6ner)\nconsole.log(meyveler.at(10)); \/\/ undefined\nconsole.log(meyveler.at(-10)); \/\/ undefined<\/code><\/pre>\nat()<\/code> metodu, dizinin son eleman\u0131na veya sondan belirli bir elemana eri\u015fmek i\u00e7in array[array.length - N]<\/code> yazmak yerine daha k\u0131sa ve daha sezgisel bir yol sunar. Bu, kodun okunabilirli\u011fini art\u0131r\u0131r ve hata yapma olas\u0131l\u0131\u011f\u0131n\u0131 azalt\u0131r.<\/p>\nNeden Eri\u015fimci Metotlar \u00d6nemlidir?<\/h2>\n
\n2. \u00d6ng\u00f6r\u00fclebilirlik:<\/strong> Bir fonksiyonun veya kod blo\u011funun bir dizi \u00fczerinde i\u015flem yaparken orijinal diziyi de\u011fi\u015ftirip de\u011fi\u015ftirmeyece\u011fini bilmek, kodun davran\u0131\u015f\u0131n\u0131 tahmin etmeyi kolayla\u015ft\u0131r\u0131r. Eri\u015fimci metotlar her zaman yeni bir dizi veya de\u011fer d\u00f6nd\u00fcrd\u00fc\u011f\u00fc i\u00e7in, yan etkileri konusunda endi\u015felenmenize gerek kalmaz.
\n3. Hata Ay\u0131klama Kolayl\u0131\u011f\u0131:<\/strong> Orijinal verilerin de\u011fi\u015fmemesi, bir hatan\u0131n kayna\u011f\u0131n\u0131 bulmay\u0131 kolayla\u015ft\u0131r\u0131r. E\u011fer bir hata olu\u015fursa, dizinin \u00f6nceki durumlar\u0131n\u0131 inceleyerek hatan\u0131n hangi noktada meydana geldi\u011fini daha rahat tespit edebilirsiniz.
\n4. Fonksiyonel Programlama Prensibi:<\/strong> Eri\u015fimci metotlar, fonksiyonel programlama paradigmalar\u0131yla uyumludur. Fonksiyonel programlama, yan etkileri olmayan (pure functions) ve de\u011fi\u015fmez verilerle \u00e7al\u0131\u015fan fonksiyonlar\u0131 te\u015fvik eder. Bu, daha mod\u00fcler, test edilebilir ve yeniden kullan\u0131labilir kod yazmaya yard\u0131mc\u0131 olur.
\n5. De\u011fi\u015fiklik Alg\u0131lama (Change Detection):<\/strong> React, Vue gibi modern UI k\u00fct\u00fcphaneleri, bile\u015fenlerin durum de\u011fi\u015fikliklerini alg\u0131lamak i\u00e7in genellikle referans kar\u015f\u0131la\u015ft\u0131rmas\u0131 yapar. E\u011fer bir dizi de\u011fi\u015ftirici metotlarla do\u011frudan de\u011fi\u015ftirilirse, referans\u0131 ayn\u0131 kalaca\u011f\u0131 i\u00e7in k\u00fct\u00fcphane de\u011fi\u015fikli\u011fi alg\u0131lamayabilir ve UI g\u00fcncellenmeyebilir. Eri\u015fimci metotlar yeni bir dizi referans\u0131 d\u00f6nd\u00fcrd\u00fc\u011f\u00fc i\u00e7in, k\u00fct\u00fcphaneler de\u011fi\u015fikli\u011fi kolayca alg\u0131layabilir ve UI’yi g\u00fcncelleyebilir.
\n6. Zincirleme (Chaining):<\/strong> Bir\u00e7ok eri\u015fimci metot, yeni bir dizi d\u00f6nd\u00fcrd\u00fc\u011f\u00fc i\u00e7in zincirleme olarak kullan\u0131labilir. Bu, birden fazla i\u015flemi tek bir ak\u0131c\u0131 ifadeyle ger\u00e7ekle\u015ftirmeyi sa\u011flar ve kodun daha kompakt ve okunabilir olmas\u0131n\u0131 sa\u011flar. \u00d6rne\u011fin: dizi.slice(1).concat([6, 7]).join('-')<\/code>.<\/p>\nDe\u011fi\u015ftirici (Mutator) Metotlarla Kar\u015f\u0131la\u015ft\u0131rma<\/h2>\n
\n* Orijinal diziyi do\u011frudan de\u011fi\u015ftirirler.
\n* \u00d6rnekler: push()<\/code>, pop()<\/code>, shift()<\/code>, unshift()<\/code>, splice()<\/code>, sort()<\/code>, reverse()<\/code>, fill()<\/code>.
\n* Genellikle d\u00f6nd\u00fcrd\u00fckleri de\u011fer, de\u011fi\u015ftirilen dizinin kendisi veya yap\u0131lan i\u015flemle ilgili bir de\u011ferdir (\u00f6rn. pop()<\/code> \u00e7\u0131kar\u0131lan eleman\u0131 d\u00f6nd\u00fcr\u00fcr, push()<\/code> yeni uzunlu\u011fu d\u00f6nd\u00fcr\u00fcr).
\n* Kullan\u0131ld\u0131klar\u0131nda dikkatli olunmal\u0131d\u0131r, \u00e7\u00fcnk\u00fc di\u011fer kod par\u00e7alar\u0131nda beklenmedik yan etkilere yol a\u00e7abilirler.<\/p>\nconst sayilarMutator = [1, 2, 3];\nsayilarMutator.push(4); \/\/ Orijinal diziyi de\u011fi\u015ftirir\nconsole.log(sayilarMutator); \/\/ [1, 2, 3, 4]\n\nconst siralanacakDizi = [3, 1, 2];\nsiralanacakDizi.sort(); \/\/ Orijinal diziyi de\u011fi\u015ftirir\nconsole.log(siralanacakDizi); \/\/ [1, 2, 3]<\/code><\/pre>\n
\n* Orijinal diziyi de\u011fi\u015ftirmezler; her zaman yeni bir dizi veya de\u011fer d\u00f6nd\u00fcr\u00fcrler.
\n* \u00d6rnekler: concat()<\/code>, slice()<\/code>, join()<\/code>, indexOf()<\/code>, includes()<\/code>, at()<\/code>.
\n* Yan etkileri yoktur, bu da onlar\u0131 daha g\u00fcvenli ve \u00f6ng\u00f6r\u00fclebilir k\u0131lar.<\/p>\nconst sayilarAccessor = [1, 2, 3];\nconst yeniSayilar = sayilarAccessor.concat(4); \/\/ Yeni bir dizi d\u00f6nd\u00fcr\u00fcr\nconsole.log(yeniSayilar); \/\/ [1, 2, 3, 4]\nconsole.log(sayilarAccessor); \/\/ [1, 2, 3] (Orijinal dizi de\u011fi\u015fmedi)\n\nconst dilimlenenDizi = sayilarAccessor.slice(0, 2); \/\/ Yeni bir dizi d\u00f6nd\u00fcr\u00fcr\nconsole.log(dilimlenenDizi); \/\/ [1, 2]\nconsole.log(sayilarAccessor); \/\/ [1, 2, 3] (Orijinal dizi de\u011fi\u015fmedi)<\/code><\/pre>\nEn \u0130yi Uygulamalar ve \u0130pu\u00e7lar\u0131<\/h2>\n
\n2. S\u0131\u011f Kopyaya Dikkat Edin:<\/strong> slice()<\/code> veya concat()<\/code> gibi metotlar, nesneler i\u00e7eren dizilerde “s\u0131\u011f kopya” (shallow copy) olu\u015fturur. Bu, yeni dizinin elemanlar\u0131 orijinal dizideki elemanlarla ayn\u0131 nesne referanslar\u0131na sahip olaca\u011f\u0131 anlam\u0131na gelir. E\u011fer i\u00e7 i\u00e7e nesneleriniz varsa ve bunlar\u0131 da de\u011fi\u015ftirmeden kopyalamak istiyorsan\u0131z, derin kopya (deep copy) y\u00f6ntemlerini (\u00f6rn. JSON.parse(JSON.stringify(array))<\/code> veya bir derin kopya k\u00fct\u00fcphanesi kullanmak) d\u00fc\u015f\u00fcnmelisiniz.<\/p>\nconst ogeler = [{ id: 1, ad: 'A' }, { id: 2, ad: 'B' }];\n const yeniOgeler = ogeler.slice(); \/\/ S\u0131\u011f kopya\n yeniOgeler[0].ad = 'Yeni A';\n console.log(ogeler[0].ad); \/\/ \"Yeni A\" - Orijinal dizi de etkilendi!<\/code><\/pre>\nconst sayilar = [1, 2, 3, 4, 5];\n const islenmisSayilar = sayilar\n .slice(1, 4) \/\/ [2, 3, 4]\n .concat(6, 7) \/\/ [2, 3, 4, 6, 7]\n .join('-'); \/\/ \"2-3-4-6-7\"\n console.log(islenmisSayilar);<\/code><\/pre>\n
\n5. at()<\/code> Kullan\u0131m\u0131n\u0131 Benimseyin:<\/strong> Dizinin son eleman\u0131na veya sondan belirli bir elemana eri\u015fmek i\u00e7in array.at(-1)<\/code> veya array.at(-N)<\/code> kullanmak, array[array.length - 1]<\/code> gibi daha uzun ve hata yapmaya daha a\u00e7\u0131k ifadelerden \u00e7ok daha okunabilir ve pratiktir.
\n6. Do\u011fru Metodu Do\u011fru Ama\u00e7 \u0130\u00e7in Kullan\u0131n:<\/strong> Her metodun belirli bir amac\u0131 vard\u0131r. \u00d6rne\u011fin, bir eleman\u0131n varl\u0131\u011f\u0131n\u0131 kontrol etmek i\u00e7in includes()<\/code> kullanmak, indexOf()<\/code> ile -1<\/code> kontrol\u00fc yapmaktan daha temizdir. Diziyi bir dizeye d\u00f6n\u00fc\u015ft\u00fcrmek i\u00e7in join()<\/code> veya toString()<\/code> kullan\u0131rken, uluslararas\u0131la\u015fma gerekiyorsa toLocaleString()<\/code> tercih edin.<\/p>\nSonu\u00e7<\/h2>\n
concat()<\/code>, join()<\/code>, slice()<\/code>, indexOf()<\/code>,