{"id":35409,"date":"2025-11-29T09:40:44","date_gmt":"2025-11-29T06:40:44","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/?p=35409"},"modified":"2025-11-29T09:40:44","modified_gmt":"2025-11-29T06:40:44","slug":"javascriptte-arrow-fonksiyonlarini-anlamak-kapsamli-bir-rehber","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/javascriptte-arrow-fonksiyonlarini-anlamak-kapsamli-bir-rehber\/","title":{"rendered":"JavaScript’te Arrow Fonksiyonlar\u0131n\u0131 Anlamak: Kapsaml\u0131 Bir Rehber"},"content":{"rendered":"

<\/p>\n

JavaScript’te Arrow Fonksiyonlar\u0131n\u0131 Anlamak: Kapsaml\u0131 Bir Rehber<\/h2>\n

Giri\u015f: Arrow Fonksiyonlar\u0131 Nedir ve Neden \u00d6nemlidir?<\/h3>\n
JavaScript, s\u00fcrekli geli\u015fen ve yeni \u00f6zelliklerle zenginle\u015fen dinamik bir dildir. ECMAScript 2015 (ES6) ile tan\u0131t\u0131lan en \u00f6nemli ve pop\u00fcler \u00f6zelliklerden biri de “Arrow Fonksiyonlar\u0131”d\u0131r. Geleneksel fonksiyon ifadelerine (function expressions) g\u00f6re daha k\u0131sa ve s\u00f6zdizimsel olarak daha temiz bir yaz\u0131m sunan arrow fonksiyonlar\u0131, modern JavaScript geli\u015ftirmenin vazge\u00e7ilmez bir par\u00e7as\u0131 haline gelmi\u015ftir. Ancak, sadece k\u0131sa yaz\u0131m avantaj\u0131yla kalmay\u0131p, \u00f6zellikle `this<\/code> anahtar kelimesinin nas\u0131l davrand\u0131\u011f\u0131 konusunda geleneksel fonksiyonlardan \u00f6nemli \u00f6l\u00e7\u00fcde farkl\u0131l\u0131k g\u00f6sterirler. Bu farkl\u0131l\u0131k, \u00e7o\u011fu geli\u015ftiricinin arrow fonksiyonlar\u0131n\u0131 anlamas\u0131nda kilit bir rol oynar ve do\u011fru kullan\u0131ld\u0131\u011f\u0131nda kodun okunabilirli\u011fini ve bak\u0131m\u0131n\u0131 b\u00fcy\u00fck \u00f6l\u00e7\u00fcde iyile\u015ftirir.<\/p>\n`
Bu makalede, arrow fonksiyonlar\u0131n\u0131n temel s\u00f6zdiziminden ba\u015flayarak, farkl\u0131 kullan\u0131m durumlar\u0131n\u0131, geleneksel fonksiyonlarla aras\u0131ndaki temel farklar\u0131 (\u00f6zellikle this<\/code> ba\u011flam\u0131 a\u00e7\u0131s\u0131ndan), avantajlar\u0131n\u0131, dezavantajlar\u0131n\u0131 ve ne zaman kullan\u0131lmas\u0131 gerekti\u011fini ayr\u0131nt\u0131l\u0131 bir \u015fekilde inceleyece\u011fiz. Amac\u0131m\u0131z, arrow fonksiyonlar\u0131n\u0131n sadece bir “s\u00f6zdizimsel \u015feker”den ibaret olmad\u0131\u011f\u0131n\u0131, ayn\u0131 zamanda JavaScript’in temel \u00e7al\u0131\u015fma prensiplerine derinlemesine bir bak\u0131\u015f a\u00e7\u0131s\u0131 sunan g\u00fc\u00e7l\u00fc bir ara\u00e7 oldu\u011funu g\u00f6stermektir.<\/p>\n

Arrow Fonksiyonlar\u0131n\u0131n Temel S\u00f6zdizimi<\/h3>\nArrow fonksiyonlar\u0131n\u0131n s\u00f6zdizimi, geleneksel fonksiyonlara g\u00f6re olduk\u00e7a basittir ve birka\u00e7 farkl\u0131 varyasyonu bulunur. Temel yap\u0131 parametreler => ifade<\/code> veya parametreler => { g\u00f6vde }<\/code> \u015feklindedir.<\/p>\n
Parametresiz Arrow Fonksiyonlar\u0131<\/h4>\nHi\u00e7bir parametre almayan arrow fonksiyonlar\u0131, bo\u015f parantezler kullan\u0131larak tan\u0131mlan\u0131r:<\/p>\n
\/\/ Geleneksel fonksiyon\nconst greetOld = function() {\n  return \"Merhaba d\u00fcnya!\";\n};\nconsole.log(greetOld()); \/\/ Merhaba d\u00fcnya!\n\n\/\/ Arrow fonksiyonu\nconst greetNew = () => {\n  return \"Merhaba d\u00fcnya!\";\n};\nconsole.log(greetNew()); \/\/ Merhaba d\u00fcnya!<\/code><\/pre>\nE\u011fer fonksiyon g\u00f6vdesi tek bir ifadeden olu\u015fuyorsa ve bu ifadenin de\u011feri do\u011frudan d\u00f6nd\u00fcr\u00fclecekse, s\u00fcsl\u00fc parantezlere ve return<\/code> anahtar kelimesine gerek kalmaz. Bu duruma “\u00f6rt\u00fck d\u00f6n\u00fc\u015f” (implicit return) denir:<\/p>\n
const greetShort = () => \"Merhaba d\u00fcnya!\";\nconsole.log(greetShort()); \/\/ Merhaba d\u00fcnya!<\/code><\/pre>\nTek Parametreli Arrow Fonksiyonlar\u0131<\/h4>\nTek bir parametre alan arrow fonksiyonlar\u0131nda, parametre parantezleri iste\u011fe ba\u011fl\u0131d\u0131r. Genellikle parantez kullan\u0131lmaz.<\/p>\n
\/\/ Geleneksel fonksiyon\nconst squareOld = function(x) {\n  return x * x;\n};\nconsole.log(squareOld(5)); \/\/ 25\n\n\/\/ Arrow fonksiyonu (parantezli parametre)\nconst squareNew = (x) => {\n  return x * x;\n};\nconsole.log(squareNew(5)); \/\/ 25\n\n\/\/ Arrow fonksiyonu (parantezsiz parametre ve \u00f6rt\u00fck d\u00f6n\u00fc\u015f)\nconst squareShort = x => x * x;\nconsole.log(squareShort(5)); \/\/ 25<\/code><\/pre>\nBirden Fazla Parametreli Arrow Fonksiyonlar\u0131<\/h4>\nBirden fazla parametre alan arrow fonksiyonlar\u0131nda, parametrelerin parantez i\u00e7inde belirtilmesi zorunludur.<\/p>\n
\/\/ Geleneksel fonksiyon\nconst addOld = function(a, b) {\n  return a + b;\n};\nconsole.log(addOld(3, 7)); \/\/ 10\n\n\/\/ Arrow fonksiyonu (parantezli parametreler ve \u00f6rt\u00fck d\u00f6n\u00fc\u015f)\nconst addNew = (a, b) => a + b;\nconsole.log(addNew(3, 7)); \/\/ 10<\/code><\/pre>\nObje Literali D\u00f6nd\u00fcrme<\/h4>\nE\u011fer bir arrow fonksiyonu do\u011frudan bir obje literalini d\u00f6nd\u00fcrecekse, objeyi \u00e7evreleyen parantezlerin i\u00e7ine alman\u0131z gerekir. Aksi takdirde, JavaScript s\u00fcsl\u00fc parantezleri bir fonksiyon blo\u011fu olarak yorumlar ve beklenen objeyi d\u00f6nd\u00fcrmez.<\/p>\n
\/\/ Yanl\u0131\u015f kullan\u0131m (fonksiyon blo\u011fu olarak yorumlan\u0131r)\n\/\/ const createPersonWrong = (name, age) => { name: name, age: age }; \/\/ SyntaxError veya undefined d\u00f6ner\n\/\/ console.log(createPersonWrong(\"Alice\", 30));\n\n\/\/ Do\u011fru kullan\u0131m (parantez i\u00e7i obje literal)\nconst createPerson = (name, age) => ({ name: name, age: age });\nconsole.log(createPerson(\"Alice\", 30)); \/\/ { name: 'Alice', age: 30 }<\/code><\/pre>\n\u00c7ok Sat\u0131rl\u0131 Fonksiyon G\u00f6vdeleri<\/h4>\nE\u011fer fonksiyon g\u00f6vdesi birden fazla ifade i\u00e7eriyorsa veya karma\u015f\u0131k bir mant\u0131k y\u00fcr\u00fct\u00fcyorsa, s\u00fcsl\u00fc parantezler ve return<\/code> anahtar kelimesi zorunludur.<\/p>\n
const calculateTax = (price, taxRate) => {\n  const taxAmount = price * taxRate;\n  const totalPrice = price + taxAmount;\n  return totalPrice;\n};\nconsole.log(calculateTax(100, 0.18)); \/\/ 118<\/code><\/pre>\nArrow Fonksiyonlar\u0131n\u0131n \u00c7e\u015fitli Kullan\u0131m Durumlar\u0131<\/h3>\nArrow fonksiyonlar\u0131, k\u0131sa ve temiz s\u00f6zdizimleri sayesinde bir\u00e7ok senaryoda geleneksel fonksiyonlara tercih edilir. \u00d6zellikle callback fonksiyonlar\u0131 olarak kullan\u0131ld\u0131klar\u0131nda kodun okunabilirli\u011fini \u00f6nemli \u00f6l\u00e7\u00fcde art\u0131r\u0131rlar.<\/p>\n
Callback Fonksiyonlar\u0131 Olarak Kullan\u0131m<\/h4>\nArrow fonksiyonlar\u0131, dizilerle \u00e7al\u0131\u015fan y\u00fcksek mertebeden fonksiyonlar (higher-order functions) gibi callback alan yerlerde parlar:<\/p>\n
*   Array.prototype.map()<\/code>:<\/strong> Bir dizinin her eleman\u0131 \u00fczerinde i\u015flem yap\u0131p yeni bir dizi d\u00f6nd\u00fcrmek i\u00e7in.<\/p>\n
const numbers = [1, 2, 3, 4, 5];\n    const doubled = numbers.map(num => num * 2);\n    console.log(doubled); \/\/ [2, 4, 6, 8, 10]<\/code><\/pre>\n*   Array.prototype.filter()<\/code>:<\/strong> Bir dizi i\u00e7indeki belirli ko\u015fullar\u0131 sa\u011flayan elemanlar\u0131 filtrelemek i\u00e7in.<\/p>\n
const evens = numbers.filter(num => num % 2 === 0);\n    console.log(evens); \/\/ [2, 4]<\/code><\/pre>\n*   Array.prototype.reduce()<\/code>:<\/strong> Bir dizinin elemanlar\u0131n\u0131 tek bir de\u011fere indirgemek i\u00e7in.<\/p>\n
const sum = numbers.reduce((acc, num) => acc + num, 0);\n    console.log(sum); \/\/ 15<\/code><\/pre>\n*   Array.prototype.forEach()<\/code>:<\/strong> Bir dizinin her eleman\u0131 \u00fczerinde yan etki yaratmak i\u00e7in.<\/p>\n
numbers.forEach(num => console.log(num));\n    \/\/ \u00c7\u0131kt\u0131: 1, 2, 3, 4, 5 (her biri ayr\u0131 sat\u0131rda)<\/code><\/pre>\n*   Zamanlay\u0131c\u0131 Fonksiyonlar\u0131 (setTimeout<\/code>, setInterval<\/code>):<\/strong> Gecikmeli veya tekrarlayan i\u015flemler i\u00e7in.<\/p>\n
setTimeout(() => console.log(\"Bu mesaj 1 saniye sonra g\u00f6r\u00fcnecek.\"), 1000);<\/code><\/pre>\n*   Promise Zincirleri:<\/strong> Asenkron i\u015flemlerin sonu\u00e7lar\u0131n\u0131 i\u015flemek i\u00e7in .then()<\/code> ve .catch()<\/code> metotlar\u0131nda.<\/p>\n
fetch('https:\/\/api.example.com\/data')\n      .then(response => response.json())\n      .then(data => console.log(data))\n      .catch(error => console.error('Hata:', error));<\/code><\/pre>\nFonksiyon Tan\u0131mlamalar\u0131nda K\u0131sa Yaz\u0131m<\/h4>\nAnonim fonksiyonlar\u0131 veya tek kullan\u0131ml\u0131k yard\u0131mc\u0131 fonksiyonlar\u0131 tan\u0131mlarken arrow fonksiyonlar\u0131 kodun daha kompakt olmas\u0131n\u0131 sa\u011flar.<\/p>\n
\/\/ Geleneksel anonim fonksiyon\ndocument.getElementById('myButton').addEventListener('click', function(event) {\n  console.log('Butona t\u0131kland\u0131!', event.target);\n});\n\n\/\/ Arrow fonksiyonu\ndocument.getElementById('myButton').addEventListener('click', (event) => {\n  console.log('Butona t\u0131kland\u0131!', event.target);\n});<\/code><\/pre>\nReact Bile\u015fenlerinde Y\u00f6ntem Ba\u011flama (Class Components i\u00e7in)<\/h4>\nReact’in s\u0131n\u0131f tabanl\u0131 bile\u015fenlerinde, bile\u015fen y\u00f6ntemlerinin this<\/code> ba\u011flam\u0131n\u0131 do\u011fru bir \u015fekilde korumak genellikle sorunluydu. Arrow fonksiyonlar\u0131 bu sorunu do\u011fal olarak \u00e7\u00f6zd\u00fc:<\/p>\n
class MyComponent extends React.Component {\n  constructor(props) {\n    super(props);\n    this.state = { count: 0 };\n    \/\/ Geleneksel y\u00f6ntem: this'i manuel olarak ba\u011flama\n    \/\/ this.handleClick = this.handleClick.bind(this);\n  }\n\n  \/\/ Arrow fonksiyonu kullanarak metot tan\u0131mlama\n  \/\/ Bu y\u00f6ntem, 'this' ba\u011flam\u0131n\u0131 otomatik olarak bile\u015fen \u00f6rne\u011fine ba\u011flar\n  handleClick = () => {\n    this.setState(prevState => ({\n      count: prevState.count + 1\n    }));\n  };\n\n  render() {\n    return (\n