Modern JavaScript geli\u015ftirmesinde, fonksiyonlara de\u011fi\u015fken say\u0131da arg\u00fcman ge\u00e7irme ihtiyac\u0131 olduk\u00e7a yayg\u0131nd\u0131r. ES6 (ECMAScript 2015) \u00f6ncesinde bu t\u00fcr senaryolar i\u00e7in ES6 \u00f6ncesinde, bir fonksiyona ka\u00e7 arg\u00fcman g\u00f6nderilece\u011fini bilmedi\u011fimiz veya de\u011fi\u015fken say\u0131da arg\u00fcman\u0131 i\u015flemek istedi\u011fimiz durumlarda Her fonksiyon \u00e7a\u011fr\u0131ld\u0131\u011f\u0131nda, JavaScript motoru otomatik olarak bu JavaScript motorlar\u0131, Bu s\u0131n\u0131rlamalar, ES6'n\u0131n Rest Parametreleri \u00f6zelli\u011finin neden \u00f6nemli bir iyile\u015ftirme oldu\u011funu a\u00e7\u0131k\u00e7a ortaya koymaktad\u0131r.<\/p>\n Rest Parametreleri, ES6 ile JavaScript'e eklenen ve bir fonksiyona ge\u00e7irilen kalan t\u00fcm arg\u00fcmanlar\u0131 \"toplayarak\" ger\u00e7ek bir JavaScript dizisi (Array) olarak alman\u0131z\u0131 sa\u011flayan bir \u00f6zelliktir. Bu \u00f6zellik, \u00fc\u00e7 nokta ( Rest parametresi, bir fonksiyonun son parametresi olarak tan\u0131mlan\u0131r ve \u00f6n\u00fcne \u00fc\u00e7 nokta ( Yukar\u0131daki \u00f6rnekte, 1. Son Parametre Olma Zorunlulu\u011fu:<\/strong> Bir fonksiyonda yaln\u0131zca bir rest parametresi bulunabilir ve bu parametre her zaman parametre listesinin en sonunda<\/em> yer almal\u0131d\u0131r. Aksi takdirde bir Bu kural mant\u0131kl\u0131d\u0131r, \u00e7\u00fcnk\u00fc rest parametresi \"kalan\" arg\u00fcmanlar\u0131 toplar. E\u011fer arkas\u0131nda ba\u015fka parametreler olsayd\u0131, hangi arg\u00fcmanlar\u0131n rest parametresine ait oldu\u011fu belirsiz hale gelirdi.<\/p>\n 2. Yaln\u0131zca Bir Tane:<\/strong> Bir fonksiyonda sadece bir rest parametresi kullanabilirsiniz. Birden fazla rest parametresi tan\u0131mlamak mant\u0131ks\u0131zd\u0131r ve hataya yol a\u00e7ar.<\/p>\n Rest Parametreleri, Rest parametreleri, fonksiyonun imzas\u0131nda a\u00e7\u0131k\u00e7a belirtildi\u011fi i\u00e7in kodun okunabilirli\u011fini \u00f6nemli \u00f6l\u00e7\u00fcde art\u0131r\u0131r. Parametrenin amac\u0131n\u0131 belirten anlaml\u0131 bir isim verebilirsiniz (\u00f6rne\u011fin Bu, Rest Parametrelerinin en b\u00fcy\u00fck avantaj\u0131d\u0131r. Rest Parametreleri, JavaScript motorlar\u0131 taraf\u0131ndan Arrow fonksiyonlar, kendi Rest parametreleri, fonksiyonlar\u0131n \u00e7ok daha esnek olmas\u0131n\u0131 sa\u011flar. Fonksiyonun \u00e7a\u011fr\u0131ld\u0131\u011f\u0131 anda ka\u00e7 arg\u00fcmanla \u00e7a\u011fr\u0131laca\u011f\u0131n\u0131 \u00f6nceden bilmenize gerek kalmaz. Bu, \u00f6zellikle k\u00fct\u00fcphane veya \u00e7er\u00e7eve (framework) geli\u015ftirirken, kullan\u0131c\u0131lar\u0131n farkl\u0131 say\u0131da girdi sa\u011flamas\u0131na izin veren API'ler tasarlarken \u00e7ok de\u011ferlidir.<\/p>\n Rest parametreleri, bir\u00e7ok farkl\u0131 senaryoda kodunuzu basitle\u015ftirmek ve daha esnek hale getirmek i\u00e7in kullan\u0131labilir.<\/p>\n En temel kullan\u0131m senaryosu, bir fonksiyona de\u011fi\u015fken say\u0131da arg\u00fcman ge\u00e7irmek ve bunlar\u0131 bir dizi olarak i\u015flemektir.<\/p>\n * Say\u0131lar\u0131n Toplam\u0131\/Ortalamas\u0131:<\/strong><\/p>\n * String Birle\u015ftirme:<\/strong><\/p>\n * Loglama Fonksiyonlar\u0131:<\/strong><\/p>\n Rest parametresi sayesinde, fonksiyon arg\u00fcmanlar\u0131n\u0131 do\u011frudan dizi metotlar\u0131yla i\u015fleyebilirsiniz.<\/p>\n K\u00fct\u00fcphane veya \u00e7er\u00e7eve geli\u015ftirirken, kullan\u0131c\u0131lar\u0131n ekstra se\u00e7enekler veya dinleyiciler ge\u00e7irmesine izin veren esnek API'ler tasarlamak i\u00e7in rest parametreleri kullan\u0131labilir.<\/p>\n Rest Parametreleri ve Spread Operat\u00f6r\u00fc, ayn\u0131 \u00fc\u00e7 nokta ( Rest Parametresi (Toplama\/Paketleme):<\/strong> Bir fonksiyonun parametre listesinde kullan\u0131l\u0131r ve kalan arg\u00fcmanlar\u0131 <\/em>bir diziye toplar*. Bir\u00e7ok \u00f6\u011feyi tek bir diziye \"paketler\".<\/p>\n Spread Operat\u00f6r\u00fc (Yayma\/A\u00e7ma):<\/strong> Bir dizi veya yinelenebilir (iterable) bir nesnenin \u00f6\u011felerini <\/em>tek tek yayar* veya \"a\u00e7ar\". Bir diziyi veya nesneyi ayr\u0131 ayr\u0131 \u00f6\u011felere \"a\u00e7ar\".<\/p>\n Rest Parametresi:<\/strong> Sadece bir fonksiyonun <\/em>parametre listesinde* kullan\u0131l\u0131r. Ayn\u0131 Bu \u00f6rnek, Rest parametreleri g\u00fc\u00e7l\u00fc olsa da, do\u011fru kullan\u0131m\u0131 i\u00e7in belirli kurallar\u0131 ve s\u0131n\u0131rlamalar\u0131 anlamak \u00f6nemlidir.<\/p>\n Daha \u00f6nce belirtildi\u011fi gibi, rest parametresi her zaman bir fonksiyonun son parametresi olmal\u0131d\u0131r.<\/p>\n Bu kural, JavaScript motorunun hangi arg\u00fcmanlar\u0131n normal parametrelere, hangi arg\u00fcmanlar\u0131n ise rest parametresine ait oldu\u011funu a\u00e7\u0131k\u00e7a belirlemesini sa\u011flar.<\/p>\n Bir fonksiyonda yaln\u0131zca bir rest parametresi tan\u0131mlayabilirsiniz. Birden fazla rest parametresi kullanmak yine E\u011fer bir fonksiyona rest parametresi i\u00e7in hi\u00e7 arg\u00fcman ge\u00e7irilmezse, rest parametresi bo\u015f bir dizi ( Bir fonksiyonda hem normal parametreler, hem rest parametresi hem de G\u00f6r\u00fcld\u00fc\u011f\u00fc gibi, Rest parametrelerini etkili ve temiz bir \u015fekilde kullanmak i\u00e7in baz\u0131 ipu\u00e7lar\u0131 ve en iyi uygulamalar \u015funlard\u0131r:<\/p>\n Rest parametresine anlaml\u0131 ve a\u00e7\u0131klay\u0131c\u0131 bir isim verin. \u00d6rne\u011fin, say\u0131lar\u0131 topluyorsan\u0131z Rest parametresi bir dizi oldu\u011fundan, bu dizinin elemanlar\u0131n\u0131n beklenen t\u00fcrde olup olmad\u0131\u011f\u0131n\u0131 kontrol etmek isteyebilirsiniz. \u00d6zellikle d\u0131\u015f kaynaklardan gelen verileri i\u015flerken bu \u00f6nemlidir.<\/p>\n Rest parametreleri, daha mod\u00fcler ve yeniden kullan\u0131labilir fonksiyonlar tasarlaman\u0131za yard\u0131mc\u0131 olabilir. \u00d6rne\u011fin, bir ana fonksiyonun farkl\u0131 yard\u0131mc\u0131 fonksiyonlara de\u011fi\u015fken say\u0131da arg\u00fcman\u0131 iletmesini sa\u011flayabilirsiniz.<\/p>\n Bu \u00f6rnekte, Rest Parametreleri, JavaScript'in ES6 ile gelen en de\u011ferli \u00f6zelliklerinden biridir. Ger\u00e7ek bir dizi olarak arg\u00fcmanlar\u0131 toplama yetene\u011fi, Rest Parametreleri ve Spread Operat\u00f6r\u00fc aras\u0131ndaki net fark\u0131 anlamak, \u00d6zetle, Rest Parametreleri, JavaScript fonksiyonlar\u0131n\u0131 daha esnek, okunabilir ve bak\u0131m\u0131 kolay hale getiren g\u00fc\u00e7l\u00fc bir dil \u00f6zelli\u011fidir. Modern JavaScript kod tabanlar\u0131nda arguments<\/code> nesnesi kullan\u0131l\u0131rken, ES6 ile birlikte Rest Parametreleri (Rest Parameters) ad\u0131nda \u00e7ok daha temiz, esnek ve g\u00fc\u00e7l\u00fc bir \u00e7\u00f6z\u00fcm sunulmu\u015ftur. Bu makale, JavaScript’teki Rest Parametrelerini derinlemesine inceleyecek, geleneksel arguments<\/code> nesnesiyle kar\u015f\u0131la\u015ft\u0131racak, avantajlar\u0131n\u0131, kullan\u0131m senaryolar\u0131n\u0131, Spread Operat\u00f6r\u00fc ile farklar\u0131n\u0131 ve en iyi uygulamalar\u0131n\u0131 detayl\u0131 bir \u015fekilde ele alacakt\u0131r.<\/p>\nGeleneksel Yakla\u015f\u0131m:
arguments<\/code> Nesnesi<\/h3>\narguments<\/code> ad\u0131nda \u00f6zel bir anahtar kelime kullan\u0131l\u0131rd\u0131. arguments<\/code> nesnesi, bir fonksiyonun \u00e7a\u011fr\u0131l\u0131rken ald\u0131\u011f\u0131 t\u00fcm arg\u00fcmanlar\u0131 i\u00e7eren, dizi benzeri (array-like) bir nesnedir.<\/p>\narguments<\/code> Nesnesinin \u00c7al\u0131\u015fma \u015eekli<\/h4>\narguments<\/code> nesnesini olu\u015fturur ve fonksiyonun kapsam\u0131na yerle\u015ftirir. Bu nesne, indekslenmi\u015f elemanlara (\u00f6rne\u011fin arguments[0]<\/code>, arguments[1]<\/code>) ve bir length<\/code> \u00f6zelli\u011fine sahiptir.<\/p>\nfunction toplam(...sayilar) { \/\/ Rest parametresi kullan\u0131ld\u0131\n let toplam = 0;\n for (let i = 0; i < sayilar.length; i++) {\n toplam += sayilar[i];\n }\n return toplam;\n}\n\nconsole.log(toplam(1, 2, 3)); \/\/ \u00c7\u0131kt\u0131: 6\nconsole.log(toplam(10, 20, 30, 40)); \/\/ \u00c7\u0131kt\u0131: 100\n\n\/\/ Geleneksel arguments nesnesi ile \u00f6rnek\nfunction eskiToplam() {\n let toplam = 0;\n for (let i = 0; i < arguments.length; i++) {\n toplam += arguments[i];\n }\n return toplam;\n}\n\nconsole.log(eskiToplam(1, 2, 3)); \/\/ \u00c7\u0131kt\u0131: 6<\/code><\/pre>\narguments<\/code> Nesnesinin S\u0131n\u0131rlamalar\u0131<\/h4>\narguments<\/code> nesnesi, de\u011fi\u015fken say\u0131da arg\u00fcman\u0131 ele almak i\u00e7in bir \u00e7\u00f6z\u00fcm sunsa da, beraberinde baz\u0131 \u00f6nemli s\u0131n\u0131rlamalar ve dezavantajlar getirir:<\/p>\nGer\u00e7ek Bir Dizi Olmamas\u0131<\/h5>\n
arguments<\/code> nesnesi, bir dizi gibi g\u00f6r\u00fcnse de (indekslenebilir ve length<\/code> \u00f6zelli\u011fine sahip olmas\u0131), asl\u0131nda ger\u00e7ek bir Array<\/code> \u00f6rne\u011fi de\u011fildir. Bu, map()<\/code>, filter()<\/code>, reduce()<\/code>, forEach()<\/code> gibi standart dizi metotlar\u0131na do\u011frudan eri\u015femeyece\u011fi anlam\u0131na gelir. Bu metotlar\u0131 kullanabilmek i\u00e7in arguments<\/code> nesnesini \u00f6nce ger\u00e7ek bir diziye d\u00f6n\u00fc\u015ft\u00fcrmek gerekirdi, ki bu da genellikle Array.prototype.slice.call(arguments)<\/code> veya ES6 ile birlikte Array.from(arguments)<\/code> gibi y\u00f6ntemlerle yap\u0131l\u0131rd\u0131.<\/p>\nfunction eskiIslem() {\n \/\/ arguments nesnesi \u00fczerinde map() kullan\u0131lamaz\n \/\/ const kareler = arguments.map(x => x * x); \/\/ Hata verir\n\n \/\/ Ger\u00e7ek bir diziye d\u00f6n\u00fc\u015ft\u00fcrme\n const argDizisi = Array.prototype.slice.call(arguments);\n const kareler = argDizisi.map(x => x * x);\n console.log(kareler);\n}\n\neskiIslem(1, 2, 3); \/\/ \u00c7\u0131kt\u0131: [1, 4, 9]<\/code><\/pre>\nOkunabilirlik Sorunlar\u0131<\/h5>\n
arguments<\/code> nesnesi, fonksiyonun imzas\u0131nda a\u00e7\u0131k\u00e7a belirtilmedi\u011fi i\u00e7in kodun okunabilirli\u011fini ve anla\u015f\u0131l\u0131rl\u0131\u011f\u0131n\u0131 azalt\u0131r. Fonksiyonu okuyan bir geli\u015ftirici, hangi arg\u00fcmanlar\u0131n beklendi\u011fini veya ka\u00e7 arg\u00fcmanla \u00e7al\u0131\u015f\u0131ld\u0131\u011f\u0131n\u0131 anlamak i\u00e7in fonksiyonun g\u00f6vdesini incelemek zorunda kal\u0131r. Parametrelerin adlar\u0131 yerine jenerik arguments[i]<\/code> kullan\u0131m\u0131 da kodu daha az a\u00e7\u0131klay\u0131c\u0131 hale getirir.<\/p>\nPerformans Etkileri<\/h5>\n
arguments<\/code> nesnesini i\u00e7eren fonksiyonlar\u0131 optimize etmekte zorlanabilir. Bu durum, \u00f6zellikle y\u00fcksek performans gerektiren uygulamalarda beklenmedik performans d\u00fc\u015f\u00fc\u015flerine yol a\u00e7abilir. JIT (Just-In-Time) derleyiciler, arguments<\/code> nesnesinin dinamik yap\u0131s\u0131 nedeniyle baz\u0131 optimizasyonlar\u0131 devre d\u0131\u015f\u0131 b\u0131rakabilir.<\/p>\nKapsam (Scope) Sorunlar\u0131 ve Arrow Fonksiyonlar<\/h5>\n
arguments<\/code> nesnesi, arrow (ok) fonksiyonlarda mevcut de\u011fildir. Arrow fonksiyonlar, kendi arguments<\/code> nesnelerine sahip olmak yerine, kapsay\u0131c\u0131 (enclosing) fonksiyonun arguments<\/code> nesnesini miras al\u0131rlar. Bu durum, arrow fonksiyonlar\u0131n yayg\u0131nla\u015fmas\u0131yla birlikte arguments<\/code> nesnesinin kullan\u0131m\u0131n\u0131 daha da k\u0131s\u0131tlam\u0131\u015ft\u0131r.<\/p>\nfunction disFonksiyon() {\n const icFonksiyon = () => {\n \/\/ console.log(arguments); \/\/ Hata: arguments burada d\u0131\u015f fonksiyonun arguments'\u0131n\u0131 referans al\u0131r\n \/\/ veya strict modda bir hata olabilir.\n \/\/ Arrow fonksiyonlar\u0131n kendi arguments nesnesi yoktur.\n \/\/ Bu y\u00fczden arrow fonksiyon i\u00e7inde arguments kullanmak kafa kar\u0131\u015f\u0131kl\u0131\u011f\u0131 yaratabilir.\n };\n icFonksiyon();\n}\ndisFonksiyon(1, 2, 3);<\/code><\/pre>\nRest Parametreleri Nedir?<\/h3>\n
...<\/code>) s\u00f6zdizimi kullan\u0131larak bir fonksiyonun parametre listesinde belirtilir.<\/p>\nS\u00f6zdizimi ve \u00c7al\u0131\u015fma Prensibi<\/h4>\n
...<\/code>) konulur. Bu \u00fc\u00e7 nokta, \"kalan t\u00fcm arg\u00fcmanlar\u0131 topla\" anlam\u0131na gelir.<\/p>\nfunction logMesajlar(baslik, ...mesajlar) {\n console.log(Ba\u015fl\u0131k: ${baslik}<\/code>);\n console.log('Mesajlar:');\n mesajlar.forEach((mesaj, index) => {\n console.log(${index + 1}. ${mesaj}<\/code>);\n });\n}\n\nlogMesajlar('Bilgi', 'Kullan\u0131c\u0131 giri\u015f yapt\u0131', 'Veritaban\u0131 g\u00fcncellendi', 'Rapor olu\u015fturuldu');\n\/\/ \u00c7\u0131kt\u0131:\n\/\/ Ba\u015fl\u0131k: Bilgi\n\/\/ Mesajlar:\n\/\/ 1. Kullan\u0131c\u0131 giri\u015f yapt\u0131\n\/\/ 2. Veritaban\u0131 g\u00fcncellendi\n\/\/ 3. Rapor olu\u015fturuldu\n\nlogMesajlar('Hata', 'A\u011f ba\u011flant\u0131s\u0131 kesildi');\n\/\/ \u00c7\u0131kt\u0131:\n\/\/ Ba\u015fl\u0131k: Hata\n\/\/ Mesajlar:\n\/\/ 1. A\u011f ba\u011flant\u0131s\u0131 kesildi\n\nlogMesajlar('Uyar\u0131');\n\/\/ \u00c7\u0131kt\u0131:\n\/\/ Ba\u015fl\u0131k: Uyar\u0131\n\/\/ Mesajlar: (bo\u015f dizi oldu\u011fu i\u00e7in hi\u00e7bir \u015fey yazmaz)<\/code><\/pre>\nbaslik<\/code> parametresi ilk arg\u00fcman\u0131 al\u0131r. ...mesajlar<\/code> ise baslik<\/code> parametresinden sonra gelen t\u00fcm arg\u00fcmanlar\u0131 mesajlar<\/code> ad\u0131nda bir dizi olarak toplar. E\u011fer baslik<\/code>'tan sonra hi\u00e7 arg\u00fcman gelmezse, mesajlar<\/code> bo\u015f bir dizi ([]<\/code>) olacakt\u0131r.<\/p>\nRest Parametresi Kurallar\u0131<\/h4>\n
SyntaxError<\/code> hatas\u0131 al\u0131rs\u0131n\u0131z.<\/p>\n\/\/ Ge\u00e7erli\n function ornek(a, b, ...kalanlar) { \/ ... <\/em>\/ }\n\n \/\/ Ge\u00e7ersiz (SyntaxError)\n \/\/ function ornek(...kalanlar, a, b) { \/ ... <\/em>\/ }\n \/\/ function ornek(a, ...kalanlar, b) { \/ ... <\/em>\/ }<\/code><\/pre>\nRest Parametrelerinin Avantajlar\u0131<\/h3>\n
arguments<\/code> nesnesine k\u0131yasla bir\u00e7ok \u00f6nemli avantaj sunar ve modern JavaScript kodunu daha iyi hale getirir.<\/p>\nDaha Okunabilir ve Anla\u015f\u0131l\u0131r Kod<\/h4>\n
...sayilar<\/code>, ...elemanlar<\/code>, ...secenekler<\/code>). Bu, fonksiyonun ne t\u00fcr arg\u00fcmanlar bekledi\u011fini ve nas\u0131l i\u015fleyece\u011fini ilk bak\u0131\u015fta anlamay\u0131 kolayla\u015ft\u0131r\u0131r.<\/p>\n\/\/ arguments ile: Ne bekledi\u011fi net de\u011fil\nfunction sumArgs() {\n \/\/ ...\n}\n\n\/\/ Rest parametresi ile: say\u0131lar dizisi bekledi\u011fi a\u00e7\u0131k\nfunction sum(...numbers) {\n \/\/ ...\n}<\/code><\/pre>\nGer\u00e7ek Bir Dizi<\/h4>\n
arguments<\/code> nesnesinin aksine, rest parametresi taraf\u0131ndan toplanan de\u011ferler ger\u00e7ek bir JavaScript dizisidir. Bu sayede map()<\/code>, filter()<\/code>, reduce()<\/code>, forEach()<\/code>, find()<\/code>, some()<\/code>, every()<\/code> gibi t\u00fcm dizi metotlar\u0131n\u0131 do\u011frudan kullanabilirsiniz. Bu durum, kodu daha k\u0131sa, daha temiz ve daha i\u015flevsel hale getirir.<\/p>\nfunction filtreleCiftSayilar(...sayilar) {\n return sayilar.filter(sayi => sayi % 2 === 0);\n}\n\nconsole.log(filtreleCiftSayilar(1, 2, 3, 4, 5, 6)); \/\/ \u00c7\u0131kt\u0131: [2, 4, 6]\n\nfunction ortalama(...notlar) {\n if (notlar.length === 0) return 0;\n const toplam = notlar.reduce((acc, current) => acc + current, 0);\n return toplam \/ notlar.length;\n}\n\nconsole.log(ortalama(85, 90, 78, 92)); \/\/ \u00c7\u0131kt\u0131: 86.25\nconsole.log(ortalama()); \/\/ \u00c7\u0131kt\u0131: 0<\/code><\/pre>\narguments<\/code> nesnesinde bu i\u015flemleri yapmak i\u00e7in \u00f6nce d\u00f6n\u00fc\u015ft\u00fcrme ad\u0131m\u0131 gerekiyordu, Rest Parametreleri bu gereksinimi ortadan kald\u0131r\u0131r.<\/p>\nPerformans \u0130yile\u015ftirmeleri<\/h4>\n
arguments<\/code> nesnesine k\u0131yasla daha verimli bir \u015fekilde optimize edilebilir. Motorlar, rest parametrelerinin statik ve \u00f6ng\u00f6r\u00fclebilir yap\u0131s\u0131n\u0131 daha iyi anlayarak JIT derleme s\u00fcre\u00e7lerinde daha iyi optimizasyonlar uygulayabilir. Bu, \u00f6zellikle b\u00fcy\u00fck veya s\u0131k \u00e7a\u011fr\u0131lan fonksiyonlarda performans a\u00e7\u0131s\u0131ndan fayda sa\u011flayabilir.<\/p>\nArrow Fonksiyonlarla Uyum<\/h4>\n
arguments<\/code> nesnelerine sahip de\u011fildir. Bu durum, arrow fonksiyonlar i\u00e7inde de\u011fi\u015fken say\u0131da arg\u00fcman\u0131 ele almak gerekti\u011finde arguments<\/code> nesnesinin kullan\u0131lamayaca\u011f\u0131 anlam\u0131na gelir. Rest Parametreleri, bu sorunu zarif bir \u015fekilde \u00e7\u00f6zer ve arrow fonksiyonlar i\u00e7inde de de\u011fi\u015fken say\u0131da arg\u00fcman\u0131 kolayca i\u015flemenizi sa\u011flar.<\/p>\nconst topla = (...sayilar) => {\n return sayilar.reduce((acc, current) => acc + current, 0);\n};\n\nconsole.log(topla(5, 10, 15)); \/\/ \u00c7\u0131kt\u0131: 30<\/code><\/pre>\nParametre Say\u0131s\u0131n\u0131 Bilmeden \u00c7al\u0131\u015fma<\/h4>\n
Rest Parametrelerinin Kullan\u0131m Senaryolar\u0131<\/h3>\n
De\u011fi\u015fken Say\u0131da Arg\u00fcman Alan Fonksiyonlar<\/h4>\n
function sum(...numbers) {\n return numbers.reduce((total, num) => total + num, 0);\n }\n console.log(sum(1, 2, 3, 4, 5)); \/\/ 15\n console.log(sum(10, 20)); \/\/ 30<\/code><\/pre>\nfunction concatenate(...strings) {\n return strings.join(' ');\n }\n console.log(concatenate('Merhaba', 'd\u00fcnya', 'bug\u00fcn', 'g\u00fczel')); \/\/ \"Merhaba d\u00fcnya bug\u00fcn g\u00fczel\"<\/code><\/pre>\nfunction customLogger(level, ...messages) {\n const timestamp = new Date().toISOString();\n console.log([${timestamp}] [${level.toUpperCase()}]:<\/code>, ...messages);\n }\n customLogger('info', 'Kullan\u0131c\u0131 ID:', 123, 'Giri\u015f ba\u015far\u0131l\u0131.');\n customLogger('error', 'Veritaban\u0131 ba\u011flant\u0131 hatas\u0131:', 'SQLSTATE 23505');<\/code><\/pre>\nFonksiyon Arg\u00fcmanlar\u0131n\u0131 Bir Dizi Olarak \u0130\u015fleme<\/h4>\n
function findMax(...values) {\n if (values.length === 0) return undefined;\n return Math.max(...values); \/\/ Burada Spread operat\u00f6r\u00fc kullan\u0131ld\u0131\n}\nconsole.log(findMax(10, 5, 20, 15)); \/\/ 20\n\nfunction capitalizeWords(...words) {\n return words.map(word => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase());\n}\nconsole.log(capitalizeWords('hello', 'WORLD', 'javascript')); \/\/ [\"Hello\", \"World\", \"Javascript\"]<\/code><\/pre>\nEsnek API Tasar\u0131m\u0131<\/h4>\n
\/\/ Bir event dinleyicisi ekleyen fonksiyon \u00f6rne\u011fi\nfunction addEventListener(element, eventType, handler, ...options) {\n console.log(Eleman: ${element}, Olay Tipi: ${eventType}<\/code>);\n console.log(Dinleyici Fonksiyonu: ${handler.name || 'anonim'}<\/code>);\n if (options.length > 0) {\n console.log('Ek Se\u00e7enekler:', options);\n \/\/ Ger\u00e7ek d\u00fcnyada, options dizisini i\u015fleyip,\n \/\/ addEventListener'a uygun bir options objesi olu\u015fturulurdu.\n \/\/ element.addEventListener(eventType, handler, options[0]);\n } else {\n \/\/ element.addEventListener(eventType, handler);\n }\n}\n\nconst myButton = 'myButtonElement'; \/\/ Ger\u00e7ek bir DOM eleman\u0131 oldu\u011funu varsayal\u0131m\nconst handleClick = () => console.log('T\u0131kland\u0131!');\n\naddEventListener(myButton, 'click', handleClick, { once: true, capture: false });\n\/\/ \u00c7\u0131kt\u0131:\n\/\/ Eleman: myButtonElement, Olay Tipi: click\n\/\/ Dinleyici Fonksiyonu: handleClick\n\/\/ Ek Se\u00e7enekler: [ { once: true, capture: false } ]\n\naddEventListener(myButton, 'mouseover', () => console.log('\u00dczerine gelindi'));\n\/\/ \u00c7\u0131kt\u0131:\n\/\/ Eleman: myButtonElement, Olay Tipi: mouseover\n\/\/ Dinleyici Fonksiyonu: anonim<\/code><\/pre>\nRest Parametreleri ve Spread Operat\u00f6r\u00fc Aras\u0131ndaki Fark<\/h3>\n
...<\/code>) s\u00f6zdizimini kullanmalar\u0131 nedeniyle s\u0131k\u00e7a kar\u0131\u015ft\u0131r\u0131l\u0131r. Ancak, i\u015flevleri ve kullan\u0131ld\u0131klar\u0131 yerler a\u00e7\u0131s\u0131ndan tamamen z\u0131t roller \u00fcstlenirler.<\/p>\nTemel Fark<\/h4>\n
function foo(a, b, ...rest) { \/\/ rest: arg\u00fcmanlar\u0131 toplar\n console.log(rest);\n }\n foo(1, 2, 3, 4, 5); \/\/ \u00c7\u0131kt\u0131: [3, 4, 5]<\/code><\/pre>\nconst arr = [1, 2, 3];\n console.log(...arr); \/\/ \u00c7\u0131kt\u0131: 1 2 3 (ayr\u0131 ayr\u0131 arg\u00fcmanlar olarak yay\u0131l\u0131r)\n\n const arr2 = [...arr, 4, 5]; \/\/ arr'nin elemanlar\u0131n\u0131 yeni bir diziye yayar\n console.log(arr2); \/\/ \u00c7\u0131kt\u0131: [1, 2, 3, 4, 5]\n\n const obj1 = { a: 1, b: 2 };\n const obj2 = { ...obj1, c: 3 }; \/\/ obj1'in \u00f6zelliklerini yeni bir nesneye yayar\n console.log(obj2); \/\/ \u00c7\u0131kt\u0131: { a: 1, b: 2, c: 3 }<\/code><\/pre>\nKullan\u0131m Yerleri<\/h4>\n
\n* Spread Operat\u00f6r\u00fc:<\/strong>
\n * Fonksiyon \u00e7a\u011fr\u0131lar\u0131nda (arg\u00fcmanlar\u0131 yaymak i\u00e7in).
\n * Dizi de\u011fi\u015fmezlerinde (yeni bir dizi olu\u015ftururken elemanlar\u0131 yaymak i\u00e7in).
\n * Nesne de\u011fi\u015fmezlerinde (yeni bir nesne olu\u015ftururken \u00f6zellikleri yaymak i\u00e7in, ES2018 ile geldi).<\/p>\n\u00d6rneklerle A\u00e7\u0131klama<\/h4>\n
...<\/code> s\u00f6zdiziminin farkl\u0131 ba\u011flamlarda nas\u0131l kullan\u0131ld\u0131\u011f\u0131n\u0131 g\u00f6steren bir \u00f6rnek:<\/p>\n\/\/ Rest Parametresi: Fonksiyon parametrelerinde arg\u00fcmanlar\u0131 toplar\nfunction birlesikIslem(ilk, ikinci, ...kalan) {\n console.log('\u0130lk:', ilk);\n console.log('\u0130kinci:', ikinci);\n console.log('Kalan (Rest Parametresi):', kalan); \/\/ Bir dizi: [3, 4, 5]\n\n \/\/ Spread Operat\u00f6r\u00fc: Fonksiyon \u00e7a\u011fr\u0131s\u0131nda bir diziyi arg\u00fcmanlara yayar\n const maxKalan = Math.max(...kalan); \/\/ kalan dizisini Math.max(3, 4, 5) olarak yayar\n console.log('Kalan\u0131n maksimum de\u011feri:', maxKalan);\n\n \/\/ Spread Operat\u00f6r\u00fc: Yeni bir dizi olu\u015ftururken elemanlar\u0131 yayar\n const yeniDizi = [0, ...kalan, 6]; \/\/ [0, 3, 4, 5, 6]\n console.log('Yeni Dizi (Spread ile):', yeniDizi);\n}\n\nbirlesikIslem(1, 2, 3, 4, 5);<\/code><\/pre>\n...kalan<\/code>\u0131n bir rest parametresi olarak arg\u00fcmanlar\u0131 nas\u0131l toplad\u0131\u011f\u0131n\u0131 ve ...kalan<\/code>\u0131n Math.max()<\/code> \u00e7a\u011fr\u0131s\u0131nda veya yeniDizi<\/code> olu\u015fturulurken bir spread operat\u00f6r\u00fc olarak nas\u0131l yayd\u0131\u011f\u0131n\u0131 net bir \u015fekilde g\u00f6stermektedir. \u00d6zetle, Rest \"toplar\", Spread \"a\u00e7ar\".<\/p>\nS\u0131n\u0131rlamalar ve Dikkat Edilmesi Gerekenler<\/h3>\n
Son Parametre Olma Zorunlulu\u011fu<\/h4>\n
function hatal\u0131Kullan\u0131m(...a, b) { \/\/ SyntaxError\n \/\/ ...\n}\n\nfunction do\u011fruKullan\u0131m(a, ...b) {\n \/\/ ...\n}<\/code><\/pre>\nYaln\u0131zca Bir Tane Rest Parametresi<\/h4>\n
SyntaxError<\/code> ile sonu\u00e7lan\u0131r. Bu da \"son parametre olma\" kural\u0131n\u0131n do\u011fal bir sonucudur.<\/p>\nfunction hatal\u0131CokluKullan\u0131m(...a, ...b) { \/\/ SyntaxError\n \/\/ ...\n}<\/code><\/pre>\nArg\u00fcman Say\u0131s\u0131 S\u0131f\u0131r Olabilir<\/h4>\n
[]<\/code>) olarak tan\u0131mlan\u0131r. Bu durum hata vermez ve \u00e7o\u011fu zaman beklenen davran\u0131\u015ft\u0131r.<\/p>\nfunction logArgs(ilkArg, ...digerleri) {\n console.log('\u0130lk Arg\u00fcman:', ilkArg);\n console.log('Di\u011ferleri:', digerleri);\n console.log('Di\u011ferleri dizisinin boyutu:', digerleri.length);\n}\n\nlogArgs('Sadece ilk arg\u00fcman');\n\/\/ \u00c7\u0131kt\u0131:\n\/\/ \u0130lk Arg\u00fcman: Sadece ilk arg\u00fcman\n\/\/ Di\u011ferleri: []\n\/\/ Di\u011ferleri dizisinin boyutu: 0<\/code><\/pre>\narguments<\/code> Nesnesi ile Birlikte Kullan\u0131m<\/h4>\narguments<\/code> nesnesi ayn\u0131 anda bulunabilir. Ancak bu durum genellikle kafa kar\u0131\u015ft\u0131r\u0131c\u0131d\u0131r ve \u00f6nerilmez. E\u011fer hem rest parametresi hem de arguments<\/code> nesnesi varsa:
\n arguments<\/code> nesnesi, fonksiyonun \u00e7a\u011fr\u0131l\u0131rken ald\u0131\u011f\u0131 <\/em>t\u00fcm* arg\u00fcmanlar\u0131 i\u00e7erir.
\n Rest parametresi ise sadece <\/em>toplad\u0131\u011f\u0131* arg\u00fcmanlar\u0131 (yani normal parametrelerden sonra gelenleri) i\u00e7erir.<\/p>\nfunction karisikFonksiyon(a, b, ...rest) {\n console.log('a:', a); \/\/ \u0130lk arg\u00fcman\n console.log('b:', b); \/\/ \u0130kinci arg\u00fcman\n console.log('rest:', rest); \/\/ \u00dc\u00e7\u00fcnc\u00fcden sonuncuya kadar olanlar (dizi)\n console.log('arguments:', arguments); \/\/ T\u00fcm arg\u00fcmanlar (dizi benzeri nesne)\n}\n\nkarisikFonksiyon(1, 2, 3, 4, 5);\n\/\/ \u00c7\u0131kt\u0131:\n\/\/ a: 1\n\/\/ b: 2\n\/\/ rest: [3, 4, 5]\n\/\/ arguments: [1, 2, 3, 4, 5] (Arguments { '0': 1, '1': 2, '2': 3, '3': 4, '4': 5, length: 5 })<\/code><\/pre>\narguments<\/code> hala t\u00fcm arg\u00fcmanlar\u0131 tutarken, rest<\/code> sadece kalanlar\u0131 tutar. Bu karma\u015f\u0131kl\u0131k nedeniyle, arguments<\/code> nesnesini kullanmaktan ka\u00e7\u0131nmak ve Rest Parametrelerini tercih etmek en iyi uygulamad\u0131r.<\/p>\nGeli\u015fmi\u015f Kullan\u0131m \u0130pu\u00e7lar\u0131 ve En \u0130yi Uygulamalar<\/h3>\n
Parametrelerin Adland\u0131r\u0131lmas\u0131<\/h4>\n
...numbers<\/code>, se\u00e7enekleri topluyorsan\u0131z ...options<\/code>, genel arg\u00fcmanlar\u0131 topluyorsan\u0131z ...args<\/code> veya ...items<\/code> gibi isimler kullan\u0131n. Bu, kodun okunabilirli\u011fini art\u0131r\u0131r.<\/p>\n\/\/ K\u00f6t\u00fc\nfunction process(...x) { \/ ... <\/em>\/ }\n\n\/\/ \u0130yi\nfunction processItems(...items) { \/ ... <\/em>\/ }\nfunction configureOptions(...configOptions) { \/ ... <\/em>\/ }<\/code><\/pre>\nType Kontrol\u00fc ve Do\u011frulama<\/h4>\n
function calculateSum(...numbers) {\n if (numbers.some(isNaN)) {\n throw new Error('T\u00fcm arg\u00fcmanlar say\u0131 olmal\u0131d\u0131r.');\n }\n return numbers.reduce((total, num) => total + num, 0);\n}\n\ntry {\n console.log(calculateSum(1, 2, 3)); \/\/ 6\n console.log(calculateSum(10, 'abc', 20)); \/\/ Hata f\u0131rlat\u0131r\n} catch (e) {\n console.error(e.message);\n}<\/code><\/pre>\nMod\u00fcler Fonksiyon Tasar\u0131m\u0131<\/h4>\n
function logDetails(type, ...details) {\n \/\/ details dizisini i\u015flemek i\u00e7in farkl\u0131 yard\u0131mc\u0131 fonksiyonlar \u00e7a\u011f\u0131r\u0131labilir\n if (type === 'user') {\n logUserEvent(...details); \/\/ Spread operat\u00f6r\u00fc ile yayma\n } else if (type === 'system') {\n logSystemEvent(...details);\n }\n}\n\nfunction logUserEvent(userId, action, ...extraInfo) {\n console.log([USER] ID: ${userId}, Action: ${action}, Extra: ${extraInfo.join(', ')}<\/code>);\n}\n\nfunction logSystemEvent(component, message, ...data) {\n console.log([SYSTEM] Component: ${component}, Message: ${message}, Data: ${JSON.stringify(data)}<\/code>);\n}\n\nlogDetails('user', 456, 'login', 'IP: 192.168.1.1');\nlogDetails('system', 'Database', 'Connection lost', { error: 500, retry: true });<\/code><\/pre>\nlogDetails<\/code> fonksiyonu, details<\/code> rest parametresini toplayarak, bu diziyi daha spesifik loglama fonksiyonlar\u0131na ...details<\/code> (spread operat\u00f6r\u00fc) ile yayarak iletir. Bu, sorumluluklar\u0131n ayr\u0131lmas\u0131na ve kodun daha d\u00fczenli olmas\u0131na yard\u0131mc\u0131 olur.<\/p>\nSonu\u00e7<\/h3>\n
arguments<\/code> nesnesinin karma\u015f\u0131kl\u0131\u011f\u0131n\u0131, okunabilirlik sorunlar\u0131n\u0131 ve performans k\u0131s\u0131tlamalar\u0131n\u0131 ortadan kald\u0131rarak, de\u011fi\u015fken say\u0131da arg\u00fcman\u0131 ele almak i\u00e7in \u00e7ok daha modern, temiz ve g\u00fc\u00e7l\u00fc bir mekanizma sunar.<\/p>\nmap<\/code>, filter<\/code>, reduce<\/code> gibi g\u00fc\u00e7l\u00fc dizi metotlar\u0131n\u0131 do\u011frudan kullanma imkan\u0131 sa\u011flar. Bu da kodu daha i\u015flevsel, daha k\u0131sa ve daha az hataya a\u00e7\u0131k hale getirir. Ayr\u0131ca, arrow fonksiyonlarla uyumu ve performans avantajlar\u0131, Rest Parametrelerini modern JavaScript geli\u015ftirmesinde vazge\u00e7ilmez bir ara\u00e7 haline getirir.<\/p>\n...<\/code> s\u00f6zdizimini do\u011fru ba\u011flamlarda kullanmak i\u00e7in kritik \u00f6neme sahiptir. Rest Parametreleri \"toplar\" (fonksiyon parametrelerinde), Spread Operat\u00f6r\u00fc ise \"a\u00e7ar\" (fonksiyon \u00e7a\u011fr\u0131lar\u0131nda, dizi ve nesne de\u011fi\u015fmezlerinde).<\/p>\narguments<\/code> nesnesi yerine Rest Parametrelerini kullanmak, kod kalitesini art\u0131rmak ve ES6'n\u0131n sundu\u011fu avantajlardan tam olarak yararlanmak i\u00e7in en iyi uygulamad\u0131r.<\/body><\/p>\n","protected":false},"excerpt":{"rendered":"JavaScript’te Rest Parametreleri: ES6 ile Gelen G\u00fc\u00e7l\u00fc Bir \u00d6zellik\nModern JavaScript geli\u015ftirmesinde, fonksiyonlara de\u011fi\u015fken say\u0131da arg\u00fcman g","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-36871","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-javascript","7":"cs-entry","8":"cs-video-wrap"},"yoast_head":"\n