{"id":34101,"date":"2025-11-11T06:31:26","date_gmt":"2025-11-11T03:31:26","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/arrow-fonksiyonlarinda-parantezler-neden-onemli-typescript-derin-dalis\/"},"modified":"2025-11-11T06:31:26","modified_gmt":"2025-11-11T03:31:26","slug":"arrow-fonksiyonlarinda-parantezler-neden-onemli-typescript-derin-dalis","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/arrow-fonksiyonlarinda-parantezler-neden-onemli-typescript-derin-dalis\/","title":{"rendered":"Arrow Fonksiyonlar\u0131nda Parantezler Neden \u00d6nemli? TypeScript Derin Dal\u0131\u015f"},"content":{"rendered":"

JavaScript ve TypeScript d\u00fcnyas\u0131nda arrow fonksiyonlar (ok fonksiyonlar\u0131), kod yaz\u0131m\u0131n\u0131 b\u00fcy\u00fck \u00f6l\u00e7\u00fcde basitle\u015ftiren ve modern geli\u015ftirmede vazge\u00e7ilmez bir ara\u00e7 haline gelen g\u00fc\u00e7l\u00fc bir \u00f6zelliktir. Ancak, bu kompakt s\u00f6zdizimi \u00e7o\u011fu zaman “parantezleri ne zaman kullanmal\u0131y\u0131m?”, “s\u00fcsl\u00fc parantezlere ne zaman ihtiyac\u0131m var?” gibi sorular\u0131 da beraberinde getirir. Bu makale, TypeScript ba\u011flam\u0131nda arrow fonksiyonlar\u0131n\u0131n parantez kullan\u0131m\u0131n\u0131 derinlemesine inceleyecek, hem ba\u015flang\u0131\u00e7 seviyesindeki geli\u015ftiricilerin kafas\u0131ndaki soru i\u015faretlerini giderecek hem de deneyimli kullan\u0131c\u0131lar i\u00e7in pratik bilgiler sunacakt\u0131r. Amac\u0131m\u0131z, kodunuzu daha okunabilir, daha anla\u015f\u0131l\u0131r ve TypeScrip’in sundu\u011fu tip g\u00fcvenli\u011fi avantajlar\u0131ndan tam olarak yararlanan bir yap\u0131ya kavu\u015fturman\u0131za yard\u0131mc\u0131 olmakt\u0131r.<\/p>\n

TypeScript’te Kodunuzu Daha Anla\u015f\u0131l\u0131r K\u0131lmak \u0130\u00e7in Parantezleri Do\u011fru Kullan\u0131n<\/h3>\n

Modern web geli\u015ftirme, s\u00fcrekli olarak daha temiz, daha \u00f6zl\u00fc ve daha i\u015flevsel kod yazma aray\u0131\u015f\u0131ndad\u0131r. ECMAScript 2015 (ES6) ile hayat\u0131m\u0131za giren arrow fonksiyonlar, bu hedefe ula\u015fmam\u0131zda bize \u00f6nemli bir ara\u00e7 sunmu\u015ftur. Geleneksel fonksiyon ifadelerine k\u0131yasla hem daha k\u0131sa bir s\u00f6zdizimine sahiptirler hem de this<\/code> ba\u011flam\u0131n\u0131 daha sezgisel bir \u015fekilde y\u00f6netirler. Ancak, bu k\u0131salt\u0131lm\u0131\u015f s\u00f6zdizimi beraberinde baz\u0131 kafa kar\u0131\u015f\u0131kl\u0131klar\u0131n\u0131 da getirebilir. \u00d6zellikle parametre listesindeki parantezler ve fonksiyon g\u00f6vdesindeki s\u00fcsl\u00fc parantezler, ne zaman zorunlu olduklar\u0131, ne zaman atlanabilecekleri konusunda yeni ba\u015flayanlar i\u00e7in bir muamma olabilir. TypeScript’in tip g\u00fcvenli\u011fi katman\u0131 eklendi\u011finde ise bu durum, do\u011fru tip tan\u0131mlamalar\u0131yla daha da \u00f6nem kazan\u0131r.<\/p>\n

Bu makalede, arrow fonksiyonlar\u0131n\u0131n temel yap\u0131s\u0131ndan ba\u015flayarak, parantezlerin \u00e7e\u015fitli senaryolarda nas\u0131l kullan\u0131ld\u0131\u011f\u0131n\u0131 ad\u0131m ad\u0131m inceleyece\u011fiz. Tek parametreli fonksiyonlardan \u00e7ok parametreli ve destructuring kullanan karma\u015f\u0131k yap\u0131lara kadar her durumu ele alaca\u011f\u0131z. Fonksiyon g\u00f6vdesinde s\u00fcsl\u00fc parantezlerin kullan\u0131m\u0131, \u00f6rt\u00fcl\u00fc (implicit) ve a\u00e7\u0131k (explicit) d\u00f6n\u00fc\u015f de\u011ferleri aras\u0131ndaki farklar ve TypeScript’in bu senaryolarda tip \u00e7\u0131kar\u0131m\u0131 (type inference) yetene\u011fi \u00fczerinde duraca\u011f\u0131z. Ayr\u0131ca, this<\/code> ba\u011flam\u0131n\u0131n arrow fonksiyonlarla nas\u0131l farkl\u0131la\u015ft\u0131\u011f\u0131n\u0131 ve bunun ger\u00e7ek d\u00fcnya uygulamalar\u0131nda ne anlama geldi\u011fini detayland\u0131raca\u011f\u0131z. Son olarak, s\u0131k\u00e7a yap\u0131lan hatalar\u0131 ve bu hatalardan ka\u00e7\u0131nmak i\u00e7in uygulanabilecek en iyi pratikleri listeleyecek, b\u00f6ylece TypeScript projelerinizde daha sa\u011flam ve bak\u0131m\u0131 kolay kodlar yazman\u0131za yard\u0131mc\u0131 olaca\u011f\u0131z.<\/p>\n

Amac\u0131m\u0131z, bu konudaki t\u00fcm belirsizlikleri ortadan kald\u0131rmak ve arrow fonksiyonlar\u0131n\u0131 tam potansiyeliyle kullanman\u0131z i\u00e7in size sa\u011flam bir temel sunmakt\u0131r. Bu sayede, hem kodunuzun okunabilirli\u011fini art\u0131racak hem de TypeScript’in sa\u011flad\u0131\u011f\u0131 tip g\u00fcvenli\u011fi avantajlar\u0131ndan tam olarak faydalanabileceksiniz. \u015eimdi bu derin dal\u0131\u015fa ba\u015flayal\u0131m ve arrow fonksiyonlar\u0131n\u0131n parantezlerle olan ili\u015fkisini ad\u0131m ad\u0131m ke\u015ffedelim.<\/p>\n

Uzman \u0130pucu: Kod okunabilirli\u011fi ve tutarl\u0131l\u0131k, k\u0131sa yaz\u0131m kolayl\u0131\u011f\u0131ndan daha \u00f6nemlidir. \u00d6zellikle tak\u0131m projelerinde net kurallar belirlemek, olas\u0131 kar\u0131\u015f\u0131kl\u0131klar\u0131n \u00f6n\u00fcne ge\u00e7er.<\/p>\n

Arrow Fonksiyonlar\u0131n\u0131n Temelleri: Nereden Ba\u015flamal\u0131y\u0131z?<\/h3>\n

Arrow fonksiyonlar, ES6 (ECMAScript 2015) ile JavaScript’e eklenen ve fonksiyon ifadelerini daha k\u0131sa ve s\u00f6zdizimsel olarak daha temiz bir \u015fekilde yazmam\u0131z\u0131 sa\u011flayan bir \u00f6zelliktir. Geleneksel fonksiyon ifadelerinin yerini almas\u0131 ama\u00e7lanmam\u0131\u015ft\u0131r, ancak bir\u00e7ok durumda onlar\u0131n yerine tercih edilirler. En belirgin \u00f6zellikleri, function<\/code> anahtar kelimesinin olmamas\u0131 ve =><\/code> operat\u00f6r\u00fcn\u00fcn kullan\u0131lmas\u0131d\u0131r. Arrow fonksiyonlar\u0131 \u00f6zellikle callback (geri \u00e7a\u011f\u0131r\u0131m) fonksiyonlar\u0131 olarak veya fonksiyonel programlama paradigmalar\u0131nda yayg\u0131n olarak kullan\u0131l\u0131r.<\/p>\n

Peki, bir arrow fonksiyonunun temel yap\u0131s\u0131 nas\u0131ld\u0131r? Temelde \u00fc\u00e7 ana bile\u015feni vard\u0131r:<\/p>\n

1. Parametre Listesi<\/strong>: Fonksiyonun alaca\u011f\u0131 arg\u00fcmanlar\u0131 tan\u0131mlar. Bu liste, parantez ()<\/code> i\u00e7inde yer al\u0131r.
\n2. Ok Operat\u00f6r\u00fc<\/strong>: =><\/code> sembol\u00fc, parametre listesi ile fonksiyon g\u00f6vdesi aras\u0131ndaki ba\u011flant\u0131y\u0131 g\u00f6sterir.
\n3. Fonksiyon G\u00f6vdesi<\/strong>: Fonksiyonun ger\u00e7ekle\u015ftirece\u011fi i\u015flemleri i\u00e7erir. Bu g\u00f6vde, s\u00fcsl\u00fc parantez {}<\/code> i\u00e7inde yer alabilir veya tek bir ifade ise atlanabilir.<\/p>\n

\u015eimdi bu temel yap\u0131y\u0131 farkl\u0131 senaryolarla inceleyelim:<\/p>\n

* Parametresiz Arrow Fonksiyonlar<\/strong>: Hi\u00e7bir parametre almayan bir arrow fonksiyonu tan\u0131mlarken, parametre listesi i\u00e7in her zaman bo\u015f parantezler ()<\/code> kullanmak zorunludur.<\/p>\n

const selamla = () => {\n        console.log(\"Merhaba D\u00fcnya!\");\n      };\n      selamla(); \/\/ \u00c7\u0131kt\u0131: Merhaba D\u00fcnya!<\/pre>\n
<\/code><\/p>\n
    Burada selamla<\/code> fonksiyonu hi\u00e7bir arg\u00fcman almad\u0131\u011f\u0131 i\u00e7in ()<\/code> kullan\u0131lm\u0131\u015ft\u0131r. S\u00fcsl\u00fc parantezler ise fonksiyon g\u00f6vdesinde birden fazla ifade veya yan etki (side effect) oldu\u011fu i\u00e7in gereklidir (\u00f6rne\u011fin, console.log<\/code>).<\/p>\n
*   Tek Parametreli Arrow Fonksiyonlar<\/strong>: E\u011fer arrow fonksiyonunuz sadece bir parametre al\u0131yorsa ve bu parametreye bir tip tan\u0131mlamas\u0131 yapm\u0131yorsan\u0131z, parametre listesindeki parantezleri ()<\/code> atlayabilirsiniz. Bu, arrow fonksiyonlar\u0131n\u0131n en s\u0131k kullan\u0131lan ve en k\u0131sa halidir.<\/p>\n
const karesiniAl = sayi => {\n        return sayi * sayi;\n      };\n      console.log(karesiniAl(5)); \/\/ \u00c7\u0131kt\u0131: 25<\/pre>\n
<\/code><\/p>\n
    Yukar\u0131daki \u00f6rnekte sayi<\/code> tek parametre oldu\u011fu i\u00e7in parantez kullan\u0131lmam\u0131\u015ft\u0131r. Ancak, e\u011fer bu sayi<\/code> parametresine a\u00e7\u0131k\u00e7a bir tip atamas\u0131 yapmak isteseydik (ki TypeScript ile genellikle yapar\u0131z), o zaman parantezler zorunlu hale gelirdi. Bu konuya bir sonraki b\u00f6l\u00fcmde daha detayl\u0131 de\u011finece\u011fiz.<\/p>\n
*   Tek \u0130fadeli Fonksiyon G\u00f6vdeleri ve \u00d6rt\u00fcl\u00fc D\u00f6n\u00fc\u015f<\/strong>: Arrow fonksiyonlar\u0131n\u0131n bir di\u011fer pop\u00fcler \u00f6zelli\u011fi de, fonksiyon g\u00f6vdesinin sadece tek bir ifade i\u00e7erdi\u011fi durumlarda s\u00fcsl\u00fc parantezleri {}<\/code> ve return<\/code> anahtar kelimesini atlayabilmemizdir. Bu duruma \"\u00f6rt\u00fcl\u00fc d\u00f6n\u00fc\u015f\" (implicit return) denir. Fonksiyon, ifadenin sonucunu otomatik olarak d\u00f6nd\u00fcr\u00fcr.<\/p>\n
const karesiniAlKisa = sayi => sayi * sayi;\n      console.log(karesiniAlKisa(7)); \/\/ \u00c7\u0131kt\u0131: 49\n    \n      const topla = (a, b) => a + b;\n      console.log(topla(3, 4)); \/\/ \u00c7\u0131kt\u0131: 7<\/pre>\n
<\/code><\/p>\n
    karesiniAlKisa<\/code> \u00f6rne\u011finde, sayi * sayi<\/code> tek bir ifade oldu\u011fu i\u00e7in s\u00fcsl\u00fc parantezlere ve return<\/code> anahtar kelimesine ihtiya\u00e7 duyulmam\u0131\u015ft\u0131r. topla<\/code> fonksiyonunda ise birden fazla parametre oldu\u011fu i\u00e7in parametre listesindeki parantezler zorunludur, ancak yine tek ifade oldu\u011fu i\u00e7in g\u00f6vdede s\u00fcsl\u00fc parantezler ve return<\/code> atlanm\u0131\u015ft\u0131r.<\/p>\n
Bu temel bilgilerle birlikte, arrow fonksiyonlar\u0131n\u0131n ne kadar esnek ve g\u00fc\u00e7l\u00fc oldu\u011funu g\u00f6rm\u00fc\u015f olmal\u0131s\u0131n\u0131z. Ancak, bu esneklik do\u011fru kullan\u0131lmad\u0131\u011f\u0131nda kafa kar\u0131\u015f\u0131kl\u0131\u011f\u0131na yol a\u00e7abilir. \u00d6zellikle TypeScript ile \u00e7al\u0131\u015f\u0131rken tip g\u00fcvenli\u011fini sa\u011flamak i\u00e7in parantezlerin do\u011fru kullan\u0131m\u0131 kritik \u00f6neme sahiptir. Bir sonraki b\u00f6l\u00fcmde, parametre y\u00f6netimi ve parantezlerin ne zaman kesinlikle zorunlu oldu\u011funa odaklanaca\u011f\u0131z. Bu sayede kodunuzu hem daha k\u0131sa hem de daha hatas\u0131z hale getirebileceksiniz.<\/p>\n
Uzman \u0130pucu: Tek ifadeli arrow fonksiyonlar\u0131, \u00f6zellikle map<\/code>, filter<\/code>, reduce<\/code> gibi dizi metodlar\u0131yla birlikte kullan\u0131ld\u0131\u011f\u0131nda kodunuzu inan\u0131lmaz derecede temiz ve i\u015flevsel yapar.<\/p>\n
Parametre Y\u00f6netimi: Parantezler Ne Zaman Zorunlu?<\/h3>\n
Arrow fonksiyonlar\u0131nda parametre listesindeki parantezlerin kullan\u0131m\u0131, fonksiyonun alaca\u011f\u0131 arg\u00fcmanlar\u0131n say\u0131s\u0131na, tiplerine ve yap\u0131lar\u0131na g\u00f6re de\u011fi\u015fiklik g\u00f6sterir. Bu b\u00f6l\u00fcm, parantezlerin zorunlu oldu\u011fu t\u00fcm senaryolar\u0131 a\u00e7\u0131kl\u0131\u011fa kavu\u015fturacak ve TypeScript ile nas\u0131l entegre edildi\u011fini g\u00f6sterecektir.<\/p>\n
*   S\u0131f\u0131r Parametre Durumu: Her Zaman Parantez Gerekli ()<\/code><\/strong>
\n    Arrow fonksiyonu hi\u00e7bir parametre almad\u0131\u011f\u0131nda, parametre listesi her zaman bo\u015f parantezler ()<\/code> ile belirtilmelidir. Bu, fonksiyonun parametre almad\u0131\u011f\u0131n\u0131 a\u00e7\u0131k\u00e7a g\u00f6steren tek yoldur.<\/p>\n
const calistirIslem = (): void => {\n        console.log(\"\u0130\u015flem ba\u015flat\u0131ld\u0131.\");\n        \/\/ Karma\u015f\u0131k bir i\u015flem...\n      };\n      calistirIslem(); \/\/ \u00c7\u0131kt\u0131: \u0130\u015flem ba\u015flat\u0131ld\u0131.<\/pre>\n
<\/code>
\n    Yukar\u0131daki \u00f6rnekte, calistirIslem<\/code> fonksiyonu bir parametre almaz ve void<\/code> d\u00f6nd\u00fcrd\u00fc\u011f\u00fcn\u00fc belirtir. Bu nedenle ()<\/code> zorunludur.<\/p>\n
*   Birden Fazla Parametre Durumu: Her Zaman Parantez Gerekli (param1, param2)<\/code><\/strong>
\n    Arrow fonksiyonunuz iki veya daha fazla parametre al\u0131yorsa, parametre listesi mutlaka parantezler i\u00e7inde olmal\u0131d\u0131r. Parametreler virg\u00fcl ile ayr\u0131l\u0131r. TypeScript ile \u00e7al\u0131\u015f\u0131rken, bu parametrelere tip atamalar\u0131 da yapabiliriz.<\/p>\n
const toplamHesapla = (sayi1: number, sayi2: number): number => {\n        return sayi1 + sayi2;\n      };\n      console.log(toplamHesapla(10, 20)); \/\/ \u00c7\u0131kt\u0131: 30\n    \n      const kullaniciBilgisiGoster = (ad: string, soyad: string, yas: number): void => {\n        console.log(Ad: ${ad}, Soyad: ${soyad}, Ya\u015f: ${yas}<\/code>);\n      };\n      kullaniciBilgisiGoster(\"Can\", \"Y\u0131lmaz\", 30); \/\/ \u00c7\u0131kt\u0131: Ad: Can, Soyad: Y\u0131lmaz, Ya\u015f: 30<\/pre>\n
<\/code>
\n    Burada toplamHesapla<\/code> ve kullaniciBilgisiGoster<\/code> fonksiyonlar\u0131 birden fazla parametre ald\u0131\u011f\u0131 i\u00e7in parantezler ()<\/code> zorunludur. Ayr\u0131ca TypeScript ile parametre tipleri (number<\/code>, string<\/code>) ve d\u00f6n\u00fc\u015f tipi (number<\/code>, void<\/code>) belirtilmi\u015ftir.<\/p>\n
*   Tek Parametreye Tip Atamas\u0131 Durumu: Her Zaman Parantez Gerekli (param: Type)<\/code><\/strong>
\n    Daha \u00f6nce bahsetti\u011fimiz gibi, tek parametreli arrow fonksiyonlarda parametre listesindeki parantezleri atlamak m\u00fcmk\u00fcnd\u00fcr (sayi => sayi * sayi<\/code>). Ancak, TypeScript kullanarak bu tek parametreye bir tip atamas\u0131 yapmak isterseniz, parantezleri kullanmak zorunludur.<\/p>\n
\/\/ Hatal\u0131 kullan\u0131m: Tek parametreye tip atan\u0131rken parantez atlanamaz\n      \/\/ const karesiniAlHata: (sayi: number) => number = sayi: number => sayi * sayi; \/\/ Syntax Error\n    \n      \/\/ Do\u011fru kullan\u0131m: Tek parametreye tip atan\u0131rken parantez zorunludur\n      const karesiniAlDogru = (sayi: number): number => sayi * sayi;\n      console.log(karesiniAlDogru(8)); \/\/ \u00c7\u0131kt\u0131: 64<\/pre>\n
<\/code>
\n    karesiniAlDogru<\/code> \u00f6rne\u011finde, sayi<\/code> parametresinin number<\/code> tipinde oldu\u011funu belirtmek i\u00e7in (sayi: number)<\/code> parantezleri kullan\u0131lm\u0131\u015ft\u0131r.<\/p>\n
*   Parametre Destructuring (Yap\u0131 Bozma) Durumu: Her Zaman Parantez Gerekli ({ prop1, prop2 })<\/code> veya ([item1, item2])<\/code><\/strong>
\n    Parametre olarak bir nesnenin veya dizinin belirli \u00f6zelliklerini do\u011frudan almak i\u00e7in destructuring (yap\u0131 bozma) kullan\u0131ld\u0131\u011f\u0131nda, parametre listesi her zaman parantezler i\u00e7inde olmal\u0131d\u0131r.<\/p>\n
interface Kullanici {\n        id: number;\n        ad: string;\n        eposta: string;\n      }\n    \n      const kullaniciBilgisiniYazdir = ({ ad, eposta }: Kullanici): void => {\n        console.log(Kullan\u0131c\u0131 Ad\u0131: ${ad}, E-posta: ${eposta}<\/code>);\n      };\n    \n      const user: Kullanici = { id: 1, ad: \"Ay\u015fe\", eposta: \"ayse@example.com\" };\n      kullaniciBilgisiniYazdir(user); \/\/ \u00c7\u0131kt\u0131: Kullan\u0131c\u0131 Ad\u0131: Ay\u015fe, E-posta: ayse@example.com\n    \n      const ilkIkiElemaniYazdir = ([ilk, ikinci]: [string, string]): void => {\n        console.log(\u0130lk: ${ilk}, \u0130kinci: ${ikinci}<\/code>);\n      };\n      ilkIkiElemaniYazdir([\"elma\", \"armut\"]); \/\/ \u00c7\u0131kt\u0131: \u0130lk: elma, \u0130kinci: armut<\/pre>\n
<\/code>
\n    Her iki destructuring \u00f6rne\u011finde de ({ ad, eposta }<\/code> ve [ilk, ikinci]<\/code>), parametre listesi parantezler i\u00e7inde olmak zorundad\u0131r.<\/p>\n
*   Rest Parametreleri Durumu: Her Zaman Parantez Gerekli (...args)<\/code><\/strong>
\n    Belirli say\u0131da olmayan arg\u00fcmanlar\u0131 bir dizi olarak yakalamak i\u00e7in rest parametreleri (...<\/code>) kullan\u0131ld\u0131\u011f\u0131nda da parametre listesi parantez i\u00e7inde olmal\u0131d\u0131r.<\/p>\n
const tumSayilariTopla = (...sayilar: number[]): number => {\n        return sayilar.reduce((toplam, mevcut) => toplam + mevcut, 0);\n      };\n      console.log(tumSayilariTopla(1, 2, 3, 4, 5)); \/\/ \u00c7\u0131kt\u0131: 15<\/pre>\n
<\/code>
\n    tumSayilariTopla<\/code> fonksiyonu, number<\/code> tipinde herhangi say\u0131da arg\u00fcman alabilir ve bunlar\u0131 sayilar<\/code> dizisi olarak yakalar. Bu durumda da parantez kullan\u0131m\u0131 zorunludur.<\/p>\n
*   Varsay\u0131lan Parametreler Durumu: Her Zaman Parantez Gerekli (param = 'default')<\/code><\/strong>
\n    Bir parametreye varsay\u0131lan bir de\u011fer atand\u0131\u011f\u0131nda, parametre listesi her zaman parantezler i\u00e7inde olmal\u0131d\u0131r.<\/p>\n
const selamlamaMesaji = (isim: string = \"Misafir\"): string => {\n        return Merhaba, ${isim}!<\/code>;\n      };\n      console.log(selamlamaMesaji(\"Mehmet\")); \/\/ \u00c7\u0131kt\u0131: Merhaba, Mehmet!\n      console.log(selamlamaMesaji()); \/\/ \u00c7\u0131kt\u0131: Merhaba, Misafir!<\/pre>\n
<\/code>
\n    Burada isim<\/code> parametresinin varsay\u0131lan de\u011feri oldu\u011fu i\u00e7in parantezler zorunludur.<\/p>\n
\u00d6zetle, arrow fonksiyonlar\u0131nda tek parametreli ve tip atanmam\u0131\u015f durumlar d\u0131\u015f\u0131nda parantezler (()<\/code>) her zaman zorunludur. TypeScript ile \u00e7al\u0131\u015f\u0131rken, \u00e7o\u011fu zaman tip g\u00fcvenli\u011fi sa\u011flamak i\u00e7in parametrelerinize tip atayaca\u011f\u0131n\u0131zdan, tek parametreli durumlarda bile parantez kullanman\u0131z gerekecektir. Bu durum, kodunuzun hem daha tutarl\u0131 hem de daha g\u00fcvenli olmas\u0131n\u0131 sa\u011flar.<\/p>\n
G\u00f6vde Yap\u0131s\u0131: Curly Brace'ler ve D\u00f6n\u00fc\u015f De\u011ferleri<\/h3>\n
Arrow fonksiyonlar\u0131n\u0131n g\u00f6vde yap\u0131s\u0131 da parantezlerin kullan\u0131m\u0131 kadar esnek ve bazen kafa kar\u0131\u015ft\u0131r\u0131c\u0131 olabilir. Fonksiyonun ger\u00e7ekle\u015ftirece\u011fi i\u015flemin karma\u015f\u0131kl\u0131\u011f\u0131na g\u00f6re s\u00fcsl\u00fc parantezlerin {}<\/code> kullan\u0131l\u0131p kullan\u0131lmayaca\u011f\u0131 ve return<\/code> anahtar kelimesinin gerekip gerekmedi\u011fi belirlenir. Bu, \"\u00f6rt\u00fcl\u00fc d\u00f6n\u00fc\u015f\" (implicit return) ve \"a\u00e7\u0131k d\u00f6n\u00fc\u015f\" (explicit return) kavramlar\u0131n\u0131 anlamakla yak\u0131ndan ili\u015fkilidir.<\/p>\n
*   \u00d6rt\u00fcl\u00fc D\u00f6n\u00fc\u015f (Implicit Return): S\u00fcsl\u00fc Parantezler Atlanabilir<\/strong>
\n    E\u011fer arrow fonksiyonunun g\u00f6vdesi sadece tek bir ifade i\u00e7eriyorsa ve bu ifadenin sonucunu d\u00f6nd\u00fcrmek istiyorsan\u0131z, s\u00fcsl\u00fc parantezleri {}<\/code> ve return<\/code> anahtar kelimesini atlayabilirsiniz. Bu durumda fonksiyon, ifadenin de\u011ferlendirilmi\u015f sonucunu otomatik olarak d\u00f6nd\u00fcr\u00fcr. Bu, \u00f6zellikle k\u0131sa ve basit d\u00f6n\u00fc\u015f de\u011ferlerine sahip fonksiyonlar i\u00e7in kodun olduk\u00e7a okunabilir ve \u00f6zl\u00fc olmas\u0131n\u0131 sa\u011flar.<\/p>\n
\/\/ Tek parametre, tek ifade, \u00f6rt\u00fcl\u00fc d\u00f6n\u00fc\u015f\n      const kareAl = (sayi: number): number => sayi * sayi;\n      console.log(kareAl(6)); \/\/ \u00c7\u0131kt\u0131: 36\n    \n      \/\/ \u0130ki parametre, tek ifade, \u00f6rt\u00fcl\u00fc d\u00f6n\u00fc\u015f\n      const carp = (a: number, b: number): number => a * b;\n      console.log(carp(4, 5)); \/\/ \u00c7\u0131kt\u0131: 20<\/pre>\n
<\/code>
\n    Yukar\u0131daki \u00f6rneklerde, kareAl<\/code> ve carp<\/code> fonksiyonlar\u0131 tek bir matematiksel ifade i\u00e7erdi\u011finden, s\u00fcsl\u00fc parantezlere ve return<\/code> ifadesine gerek kalmam\u0131\u015ft\u0131r. TypeScript, bu durumda d\u00f6n\u00fc\u015f tipini ifadeye g\u00f6re otomatik olarak \u00e7\u0131karabilir (number<\/code>), ancak a\u00e7\u0131k\u00e7a belirtmek kod okunabilirli\u011fini art\u0131r\u0131r.<\/p>\n
*   A\u00e7\u0131k D\u00f6n\u00fc\u015f (Explicit Return): S\u00fcsl\u00fc Parantezler ve return<\/code> Zorunlu<\/strong>
\n    E\u011fer arrow fonksiyonunun g\u00f6vdesi birden fazla ifade i\u00e7eriyorsa, yan etkileri varsa (\u00f6rne\u011fin console.log<\/code> \u00e7a\u011f\u0131rmak) veya karma\u015f\u0131k bir mant\u0131k y\u00fcr\u00fct\u00fcyorsa, s\u00fcsl\u00fc parantezleri {}<\/code> kullanmak ve d\u00f6n\u00fc\u015f de\u011ferini a\u00e7\u0131k\u00e7a return<\/code> anahtar kelimesiyle belirtmek zorunludur.<\/p>\n
const islemYap = (deger: number): number => {\n        console.log(\"\u0130\u015flem ba\u015flat\u0131l\u0131yor...\");\n        const sonuc = deger * 2 + 5;\n        console.log(Hesaplanan sonu\u00e7: ${sonuc}<\/code>);\n        return sonuc;\n      };\n      console.log(islemYap(10));\n      \/\/ \u00c7\u0131kt\u0131:\n      \/\/ \u0130\u015flem ba\u015flat\u0131l\u0131yor...\n      \/\/ Hesaplanan sonu\u00e7: 25\n      \/\/ 25<\/pre>\n
<\/code>
\n    Bu \u00f6rnekte, islemYap<\/code> fonksiyonu hem console.log<\/code> \u00e7a\u011fr\u0131lar\u0131 gibi yan etkilere sahiptir hem de birden fazla ad\u0131mda hesaplama yapar. Bu nedenle, s\u00fcsl\u00fc parantezler {}<\/code> ve return sonuc;<\/code> ifadesi zorunludur.<\/p>\n
*   Nesne Literallerini \u00d6rt\u00fcl\u00fc D\u00f6nd\u00fcrme: Ek Parantezler Neden Gerekli?<\/strong>
\n    Bu, arrow fonksiyonlar\u0131 ile ilgili en yayg\u0131n kafa kar\u0131\u015f\u0131kl\u0131klar\u0131ndan biridir. E\u011fer bir arrow fonksiyonundan do\u011frudan bir nesne literalini (object literal) \u00f6rt\u00fcl\u00fc olarak d\u00f6nd\u00fcrmek isterseniz, nesne literalini \u00e7evreleyen ek parantezler ()<\/code> kullanman\u0131z gerekir. Aksi takdirde, JavaScript\/TypeScript s\u00fcsl\u00fc parantezleri bir fonksiyon g\u00f6vdesi blo\u011fu olarak yorumlar ve return<\/code> ifadesi bekler.<\/p>\n
\/\/ Yanl\u0131\u015f kullan\u0131m: S\u00fcsl\u00fc parantezler fonksiyon g\u00f6vdesi olarak yorumlan\u0131r\n      \/\/ const kullaniciOlusturHata = (ad: string, yas: number) => { ad: ad, yas: yas };\n      \/\/ console.log(kullaniciOlusturHata(\"Ali\", 25)); \/\/ Hata: 'ad' bir etiket olarak yorumlan\u0131r, d\u00f6n\u00fc\u015f de\u011feri yok.\n    \n      \/\/ Do\u011fru kullan\u0131m: Nesne literalini parantez i\u00e7ine alarak \u00f6rt\u00fcl\u00fc d\u00f6n\u00fc\u015f\n      interface Personel {\n        ad: string;\n        yas: number;\n        aktif: boolean;\n      }\n    \n      const kullaniciOlusturDogru = (ad: string, yas: number): Personel => ({ ad: ad, yas: yas, aktif: true });\n      console.log(kullaniciOlusturDogru(\"Veli\", 28));\n      \/\/ \u00c7\u0131kt\u0131: { ad: 'Veli', yas: 28, aktif: true }<\/pre>\n
<\/code>
\n    kullaniciOlusturDogru<\/code> \u00f6rne\u011finde, { ad: ad, yas: yas, aktif: true }<\/code> nesne literalini ()<\/code> i\u00e7ine alarak, JavaScript'e bu s\u00fcsl\u00fc parantezlerin bir fonksiyon blo\u011fu de\u011fil, d\u00f6nd\u00fcr\u00fclecek bir nesne oldu\u011funu belirtmi\u015f oluyoruz. Bu, \u00f6rt\u00fcl\u00fc d\u00f6n\u00fc\u015f\u00fcn g\u00fcc\u00fcn\u00fc kullan\u0131rken nesne d\u00f6nd\u00fcrmek i\u00e7in kritik bir detayd\u0131r.<\/p>\n
*   void<\/code> D\u00f6n\u00fc\u015f Tipi<\/strong>
\n    TypeScript'te void<\/code> d\u00f6n\u00fc\u015f tipi, fonksiyonun herhangi bir de\u011fer d\u00f6nd\u00fcrmedi\u011fini belirtmek i\u00e7in kullan\u0131l\u0131r. Bu genellikle yan etki olu\u015fturan veya sadece bir i\u015flemi ger\u00e7ekle\u015ftiren fonksiyonlar i\u00e7in ge\u00e7erlidir.<\/p>\n
const logMesaji = (mesaj: string): void => {\n        console.log(Log: ${mesaj}<\/code>);\n      };\n      logMesaji(\"Uygulama ba\u015flat\u0131ld\u0131.\"); \/\/ \u00c7\u0131kt\u0131: Log: Uygulama ba\u015flat\u0131ld\u0131.<\/pre>\n
<\/code>
\n    Burada logMesaji<\/code> fonksiyonu bir de\u011fer d\u00f6nd\u00fcrmedi\u011fi i\u00e7in void<\/code> olarak i\u015faretlenmi\u015ftir. Fonksiyon g\u00f6vdesi s\u00fcsl\u00fc parantez i\u00e7indedir \u00e7\u00fcnk\u00fc console.log<\/code> bir yan etkidir ve bir d\u00f6n\u00fc\u015f de\u011feri yoktur.<\/p>\n
Bu b\u00f6l\u00fcmde g\u00f6rd\u00fc\u011f\u00fcm\u00fcz gibi, arrow fonksiyonlar\u0131n\u0131n g\u00f6vdesinde s\u00fcsl\u00fc parantezlerin kullan\u0131m\u0131 ve return<\/code> anahtar kelimesinin gereklili\u011fi, tamamen fonksiyonun ne yapt\u0131\u011f\u0131na ba\u011fl\u0131d\u0131r. Tek bir ifadenin sonucunu d\u00f6nd\u00fcrmek istiyorsan\u0131z \u00f6rt\u00fcl\u00fc d\u00f6n\u00fc\u015f \u00e7ok pratiktir, ancak daha karma\u015f\u0131k i\u015flemler veya yan etkiler s\u00f6z konusu oldu\u011funda a\u00e7\u0131k d\u00f6n\u00fc\u015f tercih edilmelidir. \u00d6zellikle nesne literallerini \u00f6rt\u00fcl\u00fc d\u00f6nd\u00fcr\u00fcrken ek parantezleri unutmamak, yayg\u0131n bir hatay\u0131 engellemenize yard\u0131mc\u0131 olacakt\u0131r.<\/p>\n
Uzman \u0130pucu: \u00d6rt\u00fcl\u00fc d\u00f6n\u00fc\u015f, \u00f6zellikle Array.prototype.map()<\/code> gibi y\u00fcksek dereceli fonksiyonlarla kullan\u0131ld\u0131\u011f\u0131nda kodunuzu \u00e7ok daha temiz hale getirir. Ancak, mant\u0131k karma\u015f\u0131kla\u015fmaya ba\u015flad\u0131\u011f\u0131nda a\u00e7\u0131k d\u00f6n\u00fc\u015fe ge\u00e7mekten \u00e7ekinmeyin.<\/p>\n
this<\/code> Ba\u011flam\u0131 ve Arrow Fonksiyonlar\u0131n S\u00fcper G\u00fcc\u00fc<\/h3>\n
Arrow fonksiyonlar\u0131n\u0131n tan\u0131t\u0131lmas\u0131ndaki en \u00f6nemli motivasyonlardan biri, JavaScript'teki this<\/code> anahtar kelimesinin kafa kar\u0131\u015ft\u0131r\u0131c\u0131 davran\u0131\u015f\u0131n\u0131 ortadan kald\u0131rmakt\u0131. Geleneksel fonksiyonlarda this<\/code>'in de\u011feri, fonksiyonun nas\u0131l \u00e7a\u011fr\u0131ld\u0131\u011f\u0131na ba\u011fl\u0131 olarak de\u011fi\u015firken (invocation context), arrow fonksiyonlar\u0131 this<\/code> ba\u011flam\u0131n\u0131 \"lexical\" olarak (tan\u0131mland\u0131\u011f\u0131 kapsamdan) miras al\u0131r. Bu, \u00f6zellikle s\u0131n\u0131f bile\u015fenlerinde veya olay i\u015fleyicilerinde b\u00fcy\u00fck bir kolayl\u0131k sa\u011flar.<\/p>\n
*   Geleneksel Fonksiyonlarda this<\/code> Problemi<\/strong>
\n    Geleneksel bir fonksiyon i\u00e7inde this<\/code>, fonksiyonun \u00e7a\u011fr\u0131ld\u0131\u011f\u0131 nesneye veya global nesneye (taray\u0131c\u0131da window<\/code>, Node.js'de global<\/code>) i\u015faret eder. Bu durum, \u00f6zellikle bir s\u0131n\u0131f metodunu bir callback olarak ba\u015fka bir fonksiyona ge\u00e7irdi\u011finizde veya bir olaya ba\u011flad\u0131\u011f\u0131n\u0131zda sorunlara yol a\u00e7abilir. this<\/code>, beklenmedik bir \u015fekilde ba\u011flam\u0131n\u0131 kaybedebilir.<\/p>\n
class GelenekselSayac {\n        sayi: number = 0;\n    \n        arttirGecikmeli() {\n          setTimeout(function() {\n            \/\/ Burada 'this' 'window' (veya undefined strict mode'da) i\u015faret eder, GelenekselSayac \u00f6rne\u011fine de\u011fil.\n            \/\/ Bu nedenle 'this.sayi' hata verir veya beklenmeyen davran\u0131\u015f g\u00f6sterir.\n            \/\/ console.log(this.sayi); \/\/ Hata veya NaN\n            console.log(\"Geleneksel Fonksiyonda this:\", this);\n          }, 1000);\n        }\n      }\n    \n      const gelenekselOrnek = new GelenekselSayac();\n      gelenekselOrnek.arttirGecikmeli();\n      \/\/ \u00c7\u0131kt\u0131 (yakla\u015f\u0131k 1 saniye sonra): Geleneksel Fonksiyonda this: Window {} (taray\u0131c\u0131da)<\/pre>\n
<\/code>
\n    Bu sorunu \u00e7\u00f6zmek i\u00e7in bind()<\/code>, call()<\/code>, apply()<\/code> gibi y\u00f6ntemler veya self = this<\/code> gibi ge\u00e7ici de\u011fi\u015fkenler kullanmak gerekirdi ki bu da kodu daha karma\u015f\u0131k hale getirirdi.<\/p>\n
*   Arrow Fonksiyonlarda Lexical this<\/code> Ba\u011flam\u0131<\/strong>
\n    Arrow fonksiyonlar, kendi this<\/code> ba\u011flamlar\u0131n\u0131 olu\u015fturmazlar. Bunun yerine, tan\u0131mland\u0131klar\u0131 yerdeki (lexical scope) this<\/code> de\u011ferini miras al\u0131rlar. Bu, bir s\u0131n\u0131f metodunun i\u00e7inde tan\u0131mlanan bir arrow fonksiyonunun, o metodun ait oldu\u011fu s\u0131n\u0131f \u00f6rne\u011finin this<\/code> de\u011ferini koruyaca\u011f\u0131 anlam\u0131na gelir.<\/p>\n
class ModernSayac {\n        sayi: number = 0;\n    \n        arttirGecikmeli() {\n          setTimeout(() => {\n            \/\/ Arrow fonksiyonu, tan\u0131mland\u0131\u011f\u0131 yerdeki 'this'i (ModernSayac \u00f6rne\u011fi) miras al\u0131r.\n            this.sayi++;\n            console.log(\"G\u00fcncel Say\u0131:\", this.sayi);\n          }, 1000);\n        }\n    \n        basla() {\n          console.log(\"Sayac Ba\u015flat\u0131ld\u0131.\");\n          this.arttirGecikmeli();\n          this.arttirGecikmeli();\n        }\n      }\n    \n      const modernOrnek = new ModernSayac();\n      modernOrnek.basla();\n      \/\/ \u00c7\u0131kt\u0131 (yakla\u015f\u0131k 1 saniye sonra): G\u00fcncel Say\u0131: 1\n      \/\/ \u00c7\u0131kt\u0131 (yakla\u015f\u0131k 1 saniye sonra): G\u00fcncel Say\u0131: 2<\/pre>\n
<\/code>
\n    Bu \u00f6rnekte, setTimeout<\/code> i\u00e7indeki arrow fonksiyonu, arttirGecikmeli<\/code> metodunun ait oldu\u011fu ModernSayac<\/code> s\u0131n\u0131f \u00f6rne\u011finin this<\/code>'ini do\u011fru bir \u015fekilde i\u015faret eder. Bu sayede this.sayi<\/code> g\u00fcvenli bir \u015fekilde g\u00fcncellenebilir.<\/p>\n
*   Ger\u00e7ek D\u00fcnya Uygulamalar\u0131 ve this<\/code><\/strong><\/p>\n
    1.  React Bile\u015fenlerinde Olay \u0130\u015fleyicileri<\/strong>: React'ta s\u0131n\u0131f bile\u015fenleri kullan\u0131rken, olay i\u015fleyicilerini arrow fonksiyonlar olarak tan\u0131mlamak, this<\/code> ba\u011flam\u0131n\u0131 otomatik olarak bile\u015fen \u00f6rne\u011fine ba\u011flar ve bind()<\/code> metodunu kullanma ihtiyac\u0131n\u0131 ortadan kald\u0131r\u0131r.<\/p>\n
\/\/ React Bile\u015feni \u00d6rne\u011fi (s\u00f6zde kod)\n          class MyButton extends React.Component {\n            state = { count: 0 };\n          \n            \/\/ Arrow fonksiyon kullanarak this ba\u011flam\u0131n\u0131 koruma\n            handleClick = () => {\n              this.setState({ count: this.state.count + 1 });\n            };\n          \n            render() {\n              return (\n