JavaScript’in ECMAScript 6 (ES6) ile gelen yenilikleri, geli\u015ftiricilere daha temiz, daha okunabilir ve daha g\u00fc\u00e7l\u00fc kod yazma imkan\u0131 sunmu\u015ftur. Bu yeniliklerden biri de arrow functions (ok fonksiyonlar\u0131)d\u0131r. Arrow functions, geleneksel JavaScript fonksiyonlar\u0131na g\u00f6re daha k\u0131sa bir s\u00f6z dizimine sahiptir ve \u00f6zellikle Arrow functions’\u0131n en dikkat \u00e7ekici \u00f6zelli\u011fi, geleneksel Yukar\u0131daki \u00f6rnekte, E\u011fer arrow function’\u0131n\u0131z sadece tek bir parametre al\u0131yorsa, parantezleri kullanman\u0131za gerek yoktur:<\/p>\n E\u011fer arrow function’\u0131n g\u00f6vdesi tek bir ifade i\u00e7eriyorsa ve bu ifade geri d\u00f6nd\u00fcr\u00fclen de\u011fer ise, s\u00fcsl\u00fc parantezleri Bu s\u00f6z dizimi, \u00f6zellikle diziler \u00fczerinde i\u015flem yaparken veya basit matematiksel i\u015flemler yaparken kodu \u00e7ok daha okunabilir hale getirir.<\/p>\n E\u011fer fonksiyon hi\u00e7bir parametre alm\u0131yorsa, bo\u015f parantezler Arrow functions’\u0131n geleneksel fonksiyonlardan en \u00f6nemli farklar\u0131ndan biri, Arrow functions ise “lexical this” \u00f6zelli\u011fine sahiptir. Bu, arrow function’\u0131n kendi A\u015fa\u011f\u0131daki \u00f6rnekte, bir nesnenin metodu i\u00e7inde geleneksel bir fonksiyon ve bir arrow function kullanarak \u0130lk \u00f6rnekte, \u0130kinci \u00f6rnekte ise arrow function, Arrow functions, dizi i\u015fleme metotlar\u0131 ile birlikte kullan\u0131ld\u0131\u011f\u0131nda da b\u00fcy\u00fck kolayl\u0131k sa\u011flar:<\/p>\n Bu \u00f6rneklerde, arrow function’lar\u0131n k\u0131sa s\u00f6z dizimi ve Arrow functions ES6 arrow functions, JavaScript’e getirilen en kullan\u0131\u015fl\u0131 yeniliklerden biridir. Daha k\u0131sa ve \u00f6z s\u00f6z dizimi, geli\u015ftiricilerin daha h\u0131zl\u0131 kod yazmas\u0131na olanak tan\u0131rken, En temel farklar \u015funlard\u0131r: s\u00f6z dizimi (daha k\u0131sa), Arrow function, kendi Nesne metotlar\u0131nda Hay\u0131r, arrow function’lar kendi E\u011fer arrow function’\u0131n g\u00f6vdesi tek bir ifade i\u00e7eriyorsa ve bu ifade geri d\u00f6nd\u00fcr\u00fclecekse, <\/body><\/p>\n","protected":false},"excerpt":{"rendered":"JavaScript’in ECMAScript 6 (ES6) ile gelen yenilikleri, geli\u015ftiricilere daha temiz, daha okunabilir ve daha g\u00fc\u00e7l\u00fc kod yazma imkan\u0131 sunmu\u015ftur.","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-41574","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-javascript","7":"cs-entry","8":"cs-video-wrap"},"yoast_head":"\nthis<\/code> ba\u011flam\u0131 konusunda \u00f6nemli farkl\u0131l\u0131klar sunar. Bu rehberde, ES6 arrow functions’\u0131n temellerini, s\u00f6z dizimini, kullan\u0131m alanlar\u0131n\u0131 ve geleneksel fonksiyonlarla aras\u0131ndaki farklar\u0131 detayl\u0131 bir \u015fekilde inceleyece\u011fiz.<\/p>\nArrow Functions’\u0131n Temel S\u00f6z Dizimi<\/h3>\n
function<\/code> anahtar kelimesini kullanmadan fonksiyon tan\u0131mlama imkan\u0131 sunmas\u0131d\u0131r. S\u00f6z dizimi olduk\u00e7a basittir:<\/p>\n\n \/\/ Geleneksel Fonksiyon\n const toplamaGeleneksel = function(a, b) {\n return a + b;\n };\n\n \/\/ Arrow Function\n const toplamaArrow = (a, b) => {\n return a + b;\n };\n <\/code><\/pre>\ntoplamaArrow<\/code> fonksiyonu toplamaGeleneksel<\/code> fonksiyonu ile ayn\u0131 i\u015flevi yerine getirir ancak \u00e7ok daha az kod kullan\u0131r. =><\/code> sembol\u00fc, fonksiyonun parametrelerini g\u00f6vdesinden ay\u0131r\u0131r.<\/p>\nTek Parametre Durumu<\/h4>\n
\n \/\/ Geleneksel Fonksiyon\n const kareAlGeleneksel = function(x) {\n return x * x;\n };\n\n \/\/ Arrow Function\n const kareAlArrow = x => {\n return x * x;\n };\n <\/code><\/pre>\nTek Sat\u0131rl\u0131k Geri D\u00f6n\u00fc\u015f De\u011feri<\/h4>\n
{}<\/code> ve return<\/code> anahtar kelimesini kullanman\u0131za gerek yoktur. \u0130fade do\u011frudan geri d\u00f6nd\u00fcr\u00fcl\u00fcr:<\/p>\n\n \/\/ Geleneksel Fonksiyon\n const cikarGeleneksel = function(a, b) {\n return a - b;\n };\n\n \/\/ Arrow Function (Tek sat\u0131rda d\u00f6n\u00fc\u015f)\n const cikarArrow = (a, b) => a - b;\n <\/code><\/pre>\nParametresiz Fonksiyonlar<\/h4>\n
()<\/code> kullan\u0131lmal\u0131d\u0131r:<\/p>\n\n const mesajGoster = () => {\n console.log(\"Merhaba, arrow functions!\");\n };\n <\/code><\/pre>\nArrow Functions ve
this<\/code> Ba\u011flam\u0131<\/h3>\nthis<\/code> anahtar kelimesinin nas\u0131l davrand\u0131\u011f\u0131d\u0131r. Geleneksel fonksiyonlarda this<\/code> de\u011feri, fonksiyonun nas\u0131l \u00e7a\u011fr\u0131ld\u0131\u011f\u0131na ba\u011fl\u0131 olarak dinamik olarak de\u011fi\u015fir. Bu durum, \u00f6zellikle nesne metotlar\u0131 veya event handler’lar\u0131 i\u00e7inde this<\/code> ile \u00e7al\u0131\u015f\u0131rken kafa kar\u0131\u015ft\u0131r\u0131c\u0131 olabilir ve s\u0131kl\u0131kla bind()<\/code> metodu veya ge\u00e7ici de\u011fi\u015fkenler (that = this<\/code>) kullanmay\u0131 gerektirir.<\/p>\nthis<\/code> de\u011ferini ba\u011flamad\u0131\u011f\u0131 anlam\u0131na gelir. Bunun yerine, arrow function’\u0131n tan\u0131mland\u0131\u011f\u0131 kapsamdaki this<\/code> de\u011ferini miras al\u0131r. Bu, this<\/code> ile \u00e7al\u0131\u015fmay\u0131 \u00e7ok daha \u00f6ng\u00f6r\u00fclebilir ve basit hale getirir.<\/p>\n\u00d6rnek: Nesne Metotlar\u0131<\/h4>\n
this<\/code>‘in davran\u0131\u015f\u0131n\u0131 g\u00f6zlemleyelim:<\/p>\n\n const kisi = {\n isim: \"Ali\",\n hobiler: [\"kitap okumak\", \"y\u00fczmek\"],\n\n \/\/ Geleneksel Fonksiyon ile hobileri g\u00f6sterme\n hobileriGosterGeleneksel: function() {\n const this<\/em> = this; \/\/ this<\/code>'i kaybetmemek i\u00e7in ge\u00e7ici de\u011fi\u015fken\n setTimeout(function() {\n console.log(${this.isim} hobileri: ${this.hobiler.join(\", \")}<\/code>);\n }, 1000);\n },\n\n \/\/ Arrow Function ile hobileri g\u00f6sterme\n hobileriGosterArrow: function() {\n setTimeout(() => {\n console.log(${this.isim} hobileri: ${this.hobiler.join(\", \")}<\/code>);\n }, 1000);\n }\n };\n\n kisi.hobileriGosterGeleneksel(); \/\/ Hata verecektir veya undefined \u00e7\u0131kt\u0131 verecektir (taray\u0131c\u0131ya g\u00f6re)\n kisi.hobileriGosterArrow(); \/\/ \"Ali hobileri: kitap okumak, y\u00fczmek\" \u00e7\u0131kt\u0131s\u0131n\u0131 verecektir\n <\/code><\/pre>\nsetTimeout<\/code> i\u00e7indeki geleneksel fonksiyon, this<\/code> ba\u011flam\u0131n\u0131 kaybeder. setTimeout<\/code>‘un callback fonksiyonu global kapsamda \u00e7al\u0131\u015f\u0131r ve bu kapsamda this<\/code> genellikle window<\/code> nesnesine (taray\u0131c\u0131 ortam\u0131nda) veya undefined<\/code>‘a (strict mode’da) i\u015faret eder. Bu y\u00fczden this.isim<\/code> ve this.hobiler<\/code> eri\u015filemez hale gelir. var that = this;<\/code> gibi bir \u00e7\u00f6z\u00fcm bu sorunu giderir.<\/p>\nhobileriGosterArrow<\/code> metodu i\u00e7inde tan\u0131mland\u0131\u011f\u0131 i\u00e7in, d\u0131\u015far\u0131daki this<\/code> ba\u011flam\u0131n\u0131 (yani kisi<\/code> nesnesini) miras al\u0131r. Bu sayede this.isim<\/code> ve this.hobiler<\/code> do\u011frudan eri\u015filebilir olur.<\/p>\n\u00d6rnek: Array Metotlar\u0131 (
map<\/code>, filter<\/code>, forEach<\/code>)<\/h4>\n\n const sayilar = [1, 2, 3, 4, 5];\n\n \/\/ Say\u0131lar\u0131n karesini alma\n const kareler = sayilar.map(sayi => sayi * sayi);\n console.log(kareler); \/\/ [1, 4, 9, 16, 25]\n\n \/\/ Sadece \u00e7ift say\u0131lar\u0131 filtreleme\n const ciftSayilar = sayilar.filter(sayi => sayi % 2 === 0);\n console.log(ciftSayilar); \/\/ [2, 4]\n\n \/\/ Her say\u0131y\u0131 yazd\u0131rma\n sayilar.forEach(sayi => console.log(sayi));\n \/\/ 1\n \/\/ 2\n \/\/ 3\n \/\/ 4\n \/\/ 5\n <\/code><\/pre>\nreturn<\/code> anahtar kelimesini gerektirmemesi, kodu \u00e7ok daha ak\u0131c\u0131 ve okunabilir hale getirir.<\/p>\nArrow Functions Kullan\u0131lmamas\u0131 Gereken Yerler<\/h3>\n
this<\/code> ba\u011flam\u0131n\u0131 miras ald\u0131\u011f\u0131 i\u00e7in baz\u0131 durumlarda geleneksel fonksiyonlar tercih edilmelidir:<\/p>\n\n
this<\/code> ba\u011flam\u0131na sahip olmal\u0131 ve bu this<\/code>‘in dinamik olarak de\u011fi\u015fmesi gerekiyorsa (\u00f6rne\u011fin, bir constructor fonksiyonunda), arrow function kullanmak do\u011fru olmayabilir.<\/li>\nthis<\/code>‘inin t\u0131klanan elemente i\u015faret etmesi gerekebilir. Bu gibi durumlarda geleneksel fonksiyonlar daha uygundur.<\/li>\nnew<\/code> anahtar kelimesi ile \u00e7a\u011fr\u0131lacak fonksiyonlar (constructor’lar) arrow function olamaz. Arrow function’lar new<\/code> ile \u00e7a\u011fr\u0131ld\u0131\u011f\u0131nda hata verir.<\/li>\narguments<\/code> Objesi:<\/strong> Arrow function’lar kendi arguments<\/code> nesnesine sahip de\u011fildir. E\u011fer bir fonksiyonda arguments<\/code> nesnesine eri\u015fmeniz gerekiyorsa, geleneksel fonksiyon kullanmal\u0131s\u0131n\u0131z.<\/li>\n<\/ul>\nPratik \u0130pu\u00e7lar\u0131 ve Kullan\u0131m Alanlar\u0131<\/h3>\n
\n
this<\/code> Y\u00f6netimi:<\/strong> \u00d6zellikle setTimeout<\/code>, setInterval<\/code> veya dizi i\u015fleme metotlar\u0131 i\u00e7inde this<\/code> ile \u00e7al\u0131\u015f\u0131rken arrow functions, kodunuzu gereksiz karma\u015f\u0131kl\u0131ktan kurtar\u0131r.<\/li>\nmap<\/code>‘ten sonra filter<\/code> uygulamak) \u00e7ok daha temiz bir \u015fekilde ifade etmenizi sa\u011flar.<\/li>\nSonu\u00e7<\/h3>\n
lexical this<\/code> \u00f6zelli\u011fi this<\/code> ba\u011flam\u0131 ile ilgili s\u0131k kar\u015f\u0131la\u015f\u0131lan sorunlar\u0131 ortadan kald\u0131r\u0131r. Dizi i\u015fleme metotlar\u0131, setTimeout<\/code> gibi zamanlanm\u0131\u015f fonksiyonlar ve basit tek sat\u0131rl\u0131k i\u015flemler i\u00e7in arrow functions m\u00fckemmel bir tercihtir. Ancak, this<\/code>‘in dinamik olarak de\u011fi\u015fmesi gereken veya constructor fonksiyonu olarak kullan\u0131lacak durumlarda geleneksel fonksiyonlar\u0131n tercih edilmesi gerekti\u011fini unutmamak \u00f6nemlidir.<\/p>\nS\u0131k\u00e7a Sorulan Sorular (SSS)<\/h3>\n
Arrow function ile geleneksel fonksiyon aras\u0131ndaki temel farklar nelerdir?<\/h4>\n
this<\/code> ba\u011flam\u0131 (lexical vs. dinamik) ve arguments<\/code> nesnesinin olmamas\u0131. Arrow function’lar new<\/code> ile kullan\u0131lamaz.<\/p>\nArrow function’da
this<\/code> nas\u0131l \u00e7al\u0131\u015f\u0131r?<\/h4>\nthis<\/code> de\u011ferini tan\u0131mlamaz. Bunun yerine, arrow function’\u0131n tan\u0131mland\u0131\u011f\u0131 kapsamdaki this<\/code> de\u011ferini miras al\u0131r.<\/p>\nNe zaman arrow function kullanmamal\u0131y\u0131m?<\/h4>\n
this<\/code>‘in t\u0131klanan elemente i\u015faret etmesi gerekti\u011finde, constructor fonksiyonlar\u0131nda veya arguments<\/code> nesnesine eri\u015fmeniz gerekti\u011finde arrow function yerine geleneksel fonksiyonlar\u0131 tercih etmelisiniz.<\/p>\nArrow function’lar
arguments<\/code> objesini kullanabilir mi?<\/h4>\narguments<\/code> objesine sahip de\u011fildir. E\u011fer arguments<\/code> objesine eri\u015fmeniz gerekiyorsa, geleneksel fonksiyon kullanmal\u0131s\u0131n\u0131z. Bunun yerine rest parametreleri (...args<\/code>) kullanabilirsiniz.<\/p>\nArrow function’da
return<\/code> zorunlu mu?<\/h4>\nreturn<\/code> anahtar kelimesi ve s\u00fcsl\u00fc parantezler {}<\/code> kullan\u0131lmayabilir. Birden fazla ifade varsa veya return<\/code>‘\u00fc a\u00e7\u0131k\u00e7a belirtmek istiyorsan\u0131z, s\u00fcsl\u00fc parantezler ve return<\/code> kullan\u0131l\u0131r.<\/p>\n