JavaScript projelerinizde eski, karma\u015f\u0131k ve okunmas\u0131 zor kodlarla bo\u011fu\u015fmaktan s\u0131k\u0131ld\u0131n\u0131z m\u0131? Kodunuzun bak\u0131m\u0131n\u0131 yapmak, yeni \u00f6zellikler eklemek veya ekip arkada\u015flar\u0131n\u0131zla i\u015f birli\u011fi yapmak bir kabusa m\u0131 d\u00f6n\u00fc\u015f\u00fcyor? Endi\u015felenmeyin! Modern JavaScript’in sundu\u011fu g\u00fc\u00e7l\u00fc \u00f6zellikler sayesinde kodunuzu daha okunabilir, y\u00f6netilebilir ve verimli hale getirebilirsiniz. Bu rehberde, ES6 ve sonras\u0131ndaki versiyonlarla gelen ve kod yazma \u015feklinizi k\u00f6kten de\u011fi\u015ftirecek modern JavaScript \u00f6zelliklerini ad\u0131m ad\u0131m inceleyece\u011fiz. Ba\u015ftan sona, ger\u00e7ek d\u00fcnya senaryolar\u0131yla desteklenen bu \u00f6zelliklerin kod kalitenizi nas\u0131l art\u0131rd\u0131\u011f\u0131n\u0131 ve geli\u015ftirme s\u00fcrecinizi nas\u0131l h\u0131zland\u0131rd\u0131\u011f\u0131n\u0131 ke\u015ffedeceksiniz.<\/p>\n
JavaScript, web’in kalbi olmaya devam ederken, s\u00fcrekli geli\u015fen bir dil yap\u0131s\u0131na sahip. \u0130lk \u00e7\u0131kt\u0131\u011f\u0131 y\u0131llardan bu yana bir\u00e7ok \u00f6nemli g\u00fcncelleme ve eklemeyle olgunla\u015ft\u0131. \u00d6zellikle ES6 (ECMAScript 2015) ile birlikte gelen yenilikler, dilin yeteneklerini ve geli\u015ftirici deneyimini bir \u00fcst seviyeye ta\u015f\u0131d\u0131. Peki, bu modern \u00f6zellikleri neden benimsemelisiniz? Temelde birka\u00e7 g\u00fc\u00e7l\u00fc neden var:<\/p>\n
let<\/code> ve const<\/code> ile) ve yap\u0131land\u0131r\u0131lm\u0131\u015f asenkronizm (async\/await<\/code> ile), beklenmeyen davran\u0131\u015flar\u0131 minimize eder.<\/li>\n- Daha G\u00fc\u00e7l\u00fc ve G\u00fcvenli Kod:<\/strong>
const<\/code> ile sabitleri tan\u0131mlamak veya let<\/code> ile blok kapsaml\u0131 de\u011fi\u015fkenler kullanmak, kodunuzun \u00f6ng\u00f6r\u00fclebilirli\u011fini art\u0131r\u0131r ve istenmeyen yan etkilerin \u00f6n\u00fcne ge\u00e7er. Bu durum, \u00f6zellikle b\u00fcy\u00fck ve karma\u015f\u0131k uygulamalarda g\u00fcvenli\u011fi ve istikrar\u0131 sa\u011flar.<\/li>\n- Topluluk Standartlar\u0131 ve \u0130leriye D\u00f6n\u00fck Uyumluluk:<\/strong> Modern JavaScript \u00f6zellikleri, sekt\u00f6rdeki yayg\u0131n kodlama pratikleri ve standartlar\u0131 haline gelmi\u015ftir. Bu \u00f6zellikleri kullanmak, hem mevcut geli\u015ftirme toplulu\u011fuyla uyumlu kalman\u0131z\u0131 hem de gelecekteki dil geli\u015fmelerine daha kolay adapte olman\u0131z\u0131 sa\u011flar. Yeni k\u00fct\u00fcphaneler ve framework’ler genellikle bu \u00f6zelliklere dayan\u0131r.<\/li>\n<\/ul>\n
\u00d6zetle, modern JavaScript sadece “yeni” oldu\u011fu i\u00e7in de\u011fil, ayn\u0131 zamanda daha iyi, daha g\u00fcvenilir ve daha bak\u0131m\u0131 kolay kod yazma potansiyeli sundu\u011fu i\u00e7in de\u011ferlidir. Bu \u00f6zellikler, her seviyeden geli\u015ftiricinin ara\u00e7 kutusunda mutlaka bulunmas\u0131 gereken g\u00fc\u00e7l\u00fc silahlar gibidir. \u0130lerleyen b\u00f6l\u00fcmlerde, bu silahlar\u0131n en keskinlerini derinlemesine inceleyece\u011fiz.<\/p>\n
Eski Yakla\u015f\u0131mlar ve Modern \u00c7\u00f6z\u00fcmler Aras\u0131ndaki Fark Nedir?<\/h3>\n
JavaScript’in evrimi, baz\u0131 eski ve sorunlu yakla\u015f\u0131mlara modern ve zarif \u00e7\u00f6z\u00fcmler getirdi. Bu kar\u015f\u0131la\u015ft\u0131rmalar, yeni \u00f6zelliklerin neden birer “usta dokunu\u015fu” oldu\u011funu daha iyi anlamam\u0131z\u0131 sa\u011flar.<\/p>\n
var<\/code> vs. let<\/code> ve const<\/code>: De\u011fi\u015fken Tan\u0131mlamalar\u0131nda Kesinlik<\/h4>\nUzun y\u0131llar boyunca, JavaScript’te de\u011fi\u015fken tan\u0131mlamak i\u00e7in tek anahtar kelime var<\/code> idi. Ancak var<\/code>, fonksiyon kapsaml\u0131 olmas\u0131 ve “hoisting” davran\u0131\u015f\u0131yla beklenmedik sonu\u00e7lara yol a\u00e7abiliyordu. \u00d6zellikle b\u00fcy\u00fck kod tabanlar\u0131nda bu, hatalar\u0131n gizlenmesine neden olabiliyordu. \u0130\u015fte size bir \u00f6rnek:<\/p>\n\n\/\/ Eski Y\u00f6ntem: var<\/code> ile\nfunction eskiYontem() {\n if (true) {\n var sayi = 10;\n }\n console.log(sayi); \/\/ \u00c7\u0131kt\u0131: 10 (if blo\u011funun d\u0131\u015f\u0131ndan eri\u015filebilir)\n}\neskiYontem();\n\nfor (var i = 0; i < 3; i++) {\n setTimeout(function() {\n console.log(i); \/\/ \u00c7\u0131kt\u0131: 3, 3, 3 (beklenenden farkl\u0131)\n }, 100);\n}\n<\/pre>\n<\/code><\/p>\n
let<\/code> ve const<\/code> anahtar kelimeleri, blok kapsaml\u0131 de\u011fi\u015fken tan\u0131mlama imkan\u0131 sunarak bu sorunlar\u0131 \u00e7\u00f6zd\u00fc. let<\/code> ile de\u011feri daha sonra de\u011fi\u015ftirebilece\u011finiz de\u011fi\u015fkenler, const<\/code> ile ise de\u011feri ba\u015flang\u0131\u00e7ta atand\u0131ktan sonra de\u011fi\u015ftirilemeyecek sabitler tan\u0131mlars\u0131n\u0131z. Bu, kodunuzun ak\u0131\u015f\u0131n\u0131 daha \u00f6ng\u00f6r\u00fclebilir ve g\u00fcvenli hale getirir.<\/p>\n\n\/\/ Modern Y\u00f6ntem: let<\/code> ve const<\/code> ile\nfunction modernYontem() {\n if (true) {\n let sayi = 10;\n const sabitSayi = 20;\n console.log(sayi); \/\/ \u00c7\u0131kt\u0131: 10\n }\n \/\/ console.log(sayi); \/\/ Hata: sayi tan\u0131ml\u0131 de\u011fil (blok kapsaml\u0131)\n}\nmodernYontem();\n\nfor (let i = 0; i < 3; i++) {\n setTimeout(function() {\n console.log(i); \/\/ \u00c7\u0131kt\u0131: 0, 1, 2 (beklendi\u011fi gibi)\n }, 100);\n}\n<\/pre>\n<\/code><\/p>\n
G\u00f6r\u00fcld\u00fc\u011f\u00fc gibi, let<\/code> ve const<\/code> kullanarak kodunuzun hangi k\u0131s\u0131mlar\u0131n\u0131n belirli de\u011fi\u015fkenlere eri\u015febilece\u011fini daha iyi kontrol edersiniz. Bu basit de\u011fi\u015fiklik, \u00f6zellikle geni\u015f projelerde hata olas\u0131l\u0131\u011f\u0131n\u0131 b\u00fcy\u00fck \u00f6l\u00e7\u00fcde azalt\u0131r.<\/p>\nCallback Hell vs. Promise\/Async-Await: Asenkron Ak\u0131\u015f\u0131 Y\u00f6netme<\/h4>\n
JavaScript do\u011fas\u0131 gere\u011fi tek i\u015f par\u00e7ac\u0131kl\u0131 bir dildir, ancak web uygulamalar\u0131nda s\u0131kl\u0131kla asenkron i\u015flemlere (API \u00e7a\u011fr\u0131lar\u0131, dosya okuma\/yazma, zamanlay\u0131c\u0131lar) ihtiya\u00e7 duyar\u0131z. Eskiden bu i\u015flemleri y\u00f6netmek i\u00e7in i\u00e7 i\u00e7e ge\u00e7mi\u015f callback fonksiyonlar\u0131 kullan\u0131l\u0131rd\u0131, bu da \"callback hell\" veya \"piramitler\" olarak bilinen okunaks\u0131z ve bak\u0131m\u0131 zor bir yap\u0131ya yol a\u00e7\u0131yordu.<\/p>\n
\n\/\/ Eski Y\u00f6ntem: Callback Hell\nfunction veriYukle(callback) {\n setTimeout(() => {\n const veri1 = \"Kullan\u0131c\u0131 Listesi\";\n console.log(veri1);\n veriGetir(veri1, function(veri2) {\n console.log(veri2);\n islemYap(veri2, function(veri3) {\n console.log(veri3);\n callback(veri3);\n });\n });\n }, 1000);\n}\n\nfunction veriGetir(oncekiVeri, callback) {\n setTimeout(() => {\n const yeniVeri = oncekiVeri + \" - Detaylar\";\n callback(yeniVeri);\n }, 500);\n}\n\nfunction islemYap(oncekiVeri, callback) {\n setTimeout(() => {\n const sonucVeri = oncekiVeri + \" - \u0130\u015flendi\";\n callback(sonucVeri);\n }, 300);\n}\n\nveriYukle((sonuc) => {\n console.log(\"T\u00fcm i\u015flemler tamamland\u0131:\", sonuc);\n});\n<\/pre>\n<\/code><\/p>\n
Bu karma\u015f\u0131k yap\u0131, bir hata durumunda bile her seviyede ayr\u0131 ayr\u0131 hata y\u00f6netimi gerektiriyordu. Modern JavaScript, Promise'ler ve async\/await<\/code> ile asenkron programlamay\u0131 tamamen d\u00f6n\u00fc\u015ft\u00fcrd\u00fc. Promise'ler, asenkron i\u015flemlerin sonu\u00e7lar\u0131n\u0131 (ba\u015far\u0131 veya hata) temsil eden objelerdir ve zincirlenebilirler. async\/await<\/code> ise Promise'ler \u00fczerine in\u015fa edilmi\u015f, asenkron kodu senkron gibi g\u00f6r\u00fcnmesini sa\u011flayan s\u00f6zdizimsel bir \u015fekerdir.<\/p>\n\n\/\/ Modern Y\u00f6ntem: Async\/Await ile\nfunction veriYukleAsync() {\n return new Promise(resolve => {\n setTimeout(() => {\n const veri = \"Kullan\u0131c\u0131 Listesi\";\n console.log(veri);\n resolve(veri);\n }, 1000);\n });\n}\n\nfunction veriGetirAsync(oncekiVeri) {\n return new Promise(resolve => {\n setTimeout(() => {\n const yeniVeri = oncekiVeri + \" - Detaylar\";\n resolve(yeniVeri);\n }, 500);\n });\n}\n\nfunction islemYapAsync(oncekiVeri) {\n return new Promise(resolve => {\n setTimeout(() => {\n const sonucVeri = oncekiVeri + \" - \u0130\u015flendi\";\n resolve(sonucVeri);\n }, 300);\n });\n}\n\nasync function tumIslemleriCalistir() {\n try {\n const ilkVeri = await veriYukleAsync();\n const ikinciVeri = await veriGetirAsync(ilkVeri);\n const sonVeri = await islemYapAsync(ikinciVeri);\n console.log(\"T\u00fcm i\u015flemler tamamland\u0131:\", sonVeri);\n } catch (hata) {\n console.error(\"Bir hata olu\u015ftu:\", hata);\n }\n}\n\ntumIslemleriCalistir();\n<\/pre>\n<\/code><\/p>\n
G\u00f6rd\u00fc\u011f\u00fcn\u00fcz gibi, async\/await<\/code> ile kodumuz \u00e7ok daha do\u011frusal ve okunabilir hale geldi. Hata y\u00f6netimi (try...catch<\/code> blo\u011fu ile) tek bir merkezden yap\u0131labilir. Bu, asenkron kod yaz\u0131m\u0131n\u0131 basitle\u015ftirerek hata olas\u0131l\u0131\u011f\u0131n\u0131 azalt\u0131r ve kodun anla\u015f\u0131l\u0131rl\u0131\u011f\u0131n\u0131 muazzam \u00f6l\u00e7\u00fcde art\u0131r\u0131r. Bu iki kar\u015f\u0131la\u015ft\u0131rma, modern JavaScript \u00f6zelliklerinin kod kalitesini nas\u0131l k\u00f6kten d\u00f6n\u00fc\u015ft\u00fcrd\u00fc\u011f\u00fcn\u00fc a\u00e7\u0131k\u00e7a ortaya koyuyor. \u015eimdi, bu \u00f6zelliklerin her birine daha yak\u0131ndan bakal\u0131m.<\/p>\nTemiz Kodu D\u00f6n\u00fc\u015ft\u00fcren Temel Modern JavaScript \u00d6zellikleri Nelerdir?<\/h2>\n
Modern JavaScript'in zengin ekosistemi, geli\u015ftiricilere temiz, verimli ve bak\u0131m\u0131 kolay kod yazmalar\u0131 i\u00e7in bir dizi g\u00fc\u00e7l\u00fc ara\u00e7 sunar. Bu b\u00f6l\u00fcmde, g\u00fcnl\u00fck kod yazma pratiklerimizi k\u00f6kten de\u011fi\u015ftiren en temel ve etkili modern JavaScript \u00f6zelliklerini detayl\u0131 bir \u015fekilde inceleyece\u011fiz. Her bir \u00f6zelli\u011fin ne i\u015fe yarad\u0131\u011f\u0131n\u0131, nas\u0131l kullan\u0131ld\u0131\u011f\u0131n\u0131 ve kodunuza nas\u0131l de\u011fer katt\u0131\u011f\u0131n\u0131 ad\u0131m ad\u0131m ke\u015ffedece\u011fiz. Ger\u00e7ek d\u00fcnya \u00f6rnekleriyle bu \u00f6zelliklerin g\u00fcc\u00fcn\u00fc somutla\u015ft\u0131racak ve kod taban\u0131n\u0131zda nas\u0131l ustaca uygulayabilece\u011finizi g\u00f6sterece\u011fiz. Bu \u00f6zellikler sadece birer \"s\u00f6zdizimsel \u015feker\" olmaktan \u00f6te, programlama paradigman\u0131z\u0131 de\u011fi\u015ftirecek ve sizi daha iyi bir geli\u015ftirici yapacak potansiyele sahiptir.<\/p>\n
Arrow Function'lar: Daha K\u0131sa ve Anla\u015f\u0131l\u0131r Fonksiyon Yaz\u0131m\u0131<\/h3>\n
Arrow function'lar (ok fonksiyonlar\u0131), ES6 ile birlikte gelen ve fonksiyon tan\u0131mlama \u015feklimizi basitle\u015ftiren en pop\u00fcler \u00f6zelliklerden biridir. Geleneksel fonksiyonlara g\u00f6re daha k\u0131sa s\u00f6zdizimine ve farkl\u0131 bir this<\/code> ba\u011flam\u0131 davran\u0131\u015f\u0131na sahiptirler.<\/p>\nS\u00f6zdizimi ve Kullan\u0131m<\/h4>\n
Arrow function'lar, \u00f6zellikle callback'ler ve tek sat\u0131rl\u0131k ifadeler i\u00e7in idealdir. \u0130\u015fte temel s\u00f6zdizimleri:<\/p>\n
\n\/\/ Geleneksel fonksiyon\nconst toplamaGeleneksel = function(a, b) {\n return a + b;\n};\n\n\/\/ Arrow function (k\u0131sa form)\nconst toplama = (a, b) => a + b;\nconsole.log(Toplama sonucu (arrow): ${toplama(5, 3)}<\/code>); \/\/ \u00c7\u0131kt\u0131: Toplama sonucu (arrow): 8\n\n\/\/ Tek parametre durumunda parantezler iste\u011fe ba\u011fl\u0131d\u0131r\nconst kare = sayi => sayi * sayi;\nconsole.log(Kare (arrow): ${kare(7)}<\/code>); \/\/ \u00c7\u0131kt\u0131: Kare (arrow): 49\n\n\/\/ Parametresiz fonksiyon\nconst selamla = () => \"Merhaba D\u00fcnya!\";\nconsole.log(selamla()); \/\/ \u00c7\u0131kt\u0131: Merhaba D\u00fcnya!\n\n\/\/ Birden fazla ifade i\u00e7in s\u00fcsl\u00fc parantez ve return<\/code> anahtar kelimesi gerekir\nconst cokluIslem = (x, y) => {\n const carpim = x * y;\n return carpim + 10;\n};\nconsole.log(\u00c7oklu i\u015flem (arrow): ${cokluIslem(4, 2)}<\/code>); \/\/ \u00c7\u0131kt\u0131: \u00c7oklu i\u015flem (arrow): 18\n<\/pre>\n<\/code><\/p>\n
Bu s\u00f6zdizimi sadele\u015ftirmesi, \u00f6zellikle dizilerle \u00e7al\u0131\u015fan map<\/code>, filter<\/code>, reduce<\/code> gibi metotlarla birlikte kullan\u0131ld\u0131\u011f\u0131nda kodunuzu \u00e7ok daha okunabilir hale getirir.<\/p>\n\nconst sayilar = [1, 2, 3, 4, 5];\n\n\/\/ \u00c7ift say\u0131lar\u0131 filtrele\nconst ciftSayilar = sayilar.filter(sayi => sayi % 2 === 0);\nconsole.log(\u00c7ift say\u0131lar: ${ciftSayilar}<\/code>); \/\/ \u00c7\u0131kt\u0131: \u00c7ift say\u0131lar: 2,4\n\n\/\/ Her say\u0131n\u0131n karesini al\nconst kareleri = sayilar.map(sayi => sayi * sayi);\nconsole.log(Kareleri: ${kareleri}<\/code>); \/\/ \u00c7\u0131kt\u0131: Kareleri: 1,4,9,16,25\n<\/pre>\n<\/code><\/p>\n
this<\/code> Ba\u011flam\u0131 Fark\u0131<\/h4>\nArrow function'lar\u0131n en \u00f6nemli farklar\u0131ndan biri, this<\/code> anahtar kelimesini kendi kapsam\u0131na g\u00f6re de\u011fil, tan\u0131mland\u0131\u011f\u0131 \u00fcst kapsamdan (lexical scope) almas\u0131d\u0131r. Geleneksel fonksiyonlarda this<\/code>, fonksiyonun nas\u0131l \u00e7a\u011fr\u0131ld\u0131\u011f\u0131na ba\u011fl\u0131 olarak de\u011fi\u015firken, arrow function'larda her zaman sabittir. Bu, \u00f6zellikle nesne metotlar\u0131 ve event handler'lar gibi durumlarda b\u00fcy\u00fck bir avantaj sa\u011flar.<\/p>\n\n\/\/ Geleneksel fonksiyon ile this<\/code> problemi\nconst kullaniciGeleneksel = {\n ad: \"Ali\",\n selamVer: function() {\n setTimeout(function() {\n \/\/ this<\/code> burada window objesini veya undefined'\u0131 i\u015faret eder\n \/\/ ad<\/code> \u00f6zelli\u011fine do\u011frudan eri\u015filemez\n console.log(Merhaba, benim ad\u0131m ${this.ad}<\/code>); \/\/ \u00c7\u0131kt\u0131: Merhaba, benim ad\u0131m undefined\n }, 1000);\n }\n};\nkullaniciGeleneksel.selamVer();\n\n\/\/ Arrow function ile this<\/code> \u00e7\u00f6z\u00fcm\u00fc\nconst kullaniciModern = {\n ad: \"Veli\",\n selamVer: function() {\n setTimeout(() => {\n \/\/ this<\/code> burada kullaniciModern<\/code> objesini i\u015faret eder (tan\u0131mland\u0131\u011f\u0131 \u00fcst kapsam)\n console.log(Merhaba, benim ad\u0131m ${this.ad}<\/code>); \/\/ \u00c7\u0131kt\u0131: Merhaba, benim ad\u0131m Veli\n }, 1000);\n }\n};\nkullaniciModern.selamVer();\n<\/pre>\n<\/code><\/p>\n
Bu davran\u0131\u015f, kodunuzu daha \u00f6ng\u00f6r\u00fclebilir hale getirir ve .bind(this)<\/code> gibi ek y\u00f6ntemlere olan ihtiyac\u0131 ortadan kald\u0131r\u0131r. Ancak dikkatli olun, bir arrow function'\u0131 bir nesne metodu olarak tan\u0131mlad\u0131\u011f\u0131n\u0131zda, this<\/code> ba\u011flam\u0131 bekledi\u011finizden farkl\u0131 olabilir; genellikle objeyi de\u011fil, global objeyi veya mod\u00fcl\u00fcn this<\/code>'ini g\u00f6sterir. Bu y\u00fczden nesne metotlar\u0131 i\u00e7in hala geleneksel fonksiyon ifadeleri \u00f6nerilir.<\/p>\n\n Uzman \u0130pucu: Performans a\u00e7\u0131s\u0131ndan arrow function'lar ile geleneksel fonksiyonlar aras\u0131nda genellikle ihmal edilebilir bir fark vard\u0131r. Temel avantajlar\u0131 s\u00f6zdizimsel k\u0131sal\u0131k ve this<\/code> ba\u011flam\u0131n\u0131n netli\u011fidir. B\u00fcy\u00fck projelerde, \u00f6zellikle callback'lerde arrow function'lar\u0131 kullanarak kodunuzun okunabilirli\u011fini \u00f6nemli \u00f6l\u00e7\u00fcde art\u0131rabilirsiniz.<\/p>\n<\/p><\/div>\nTemplate Literals: Dinamik Dizelerle Kolay \u00c7al\u0131\u015fmak<\/h3>\n
ES6 \u00f6ncesinde, dinamik dizeler olu\u015fturmak, de\u011fi\u015fkenleri dizelere eklemek ve \u00e7ok sat\u0131rl\u0131 metinler yazmak biraz zahmetliydi. String birle\u015ftirme i\u00e7in +<\/code> operat\u00f6r\u00fcn\u00fc kullanmak veya \u00f6zel karakterler i\u00e7in ka\u00e7\u0131\u015f dizileri kullanmak gerekiyordu. Template literals (\u015fablon de\u011fi\u015fmezleri), bu s\u00fcreci \u00e7ok daha sezgisel ve okunabilir hale getirdi.<\/p>\nGeri T\u0131rnak Kullan\u0131m\u0131 ve \u0130fade Ekleme<\/h4>\n
Template literals, tek veya \u00e7ift t\u0131rnak yerine geri t\u0131rnak (<\/code>) kullan\u0131larak tan\u0131mlan\u0131r. En b\u00fcy\u00fck avantaj\u0131, i\u00e7ine JavaScript ifadelerini do\u011frudan ${ifade}<\/code> yap\u0131s\u0131yla ekleyebilmenizdir. Bu, string birle\u015ftirmeyi \u00e7ok daha basitle\u015ftirir.<\/p>\n\nconst isim = \"Ay\u015fe\";\nconst yas = 30;\n\n\/\/ Eski y\u00f6ntem: String birle\u015ftirme\nconst mesajEski = \"Merhaba, benim ad\u0131m \" + isim + \" ve ben \" + yas + \" ya\u015f\u0131nday\u0131m.\";\nconsole.log(mesajEski);\n\n\/\/ Modern y\u00f6ntem: Template literal\nconst mesajModern =<\/code>Merhaba, benim ad\u0131m ${isim} ve ben ${yas} ya\u015f\u0131nday\u0131m.;\nconsole.log(mesajModern);\n<\/code><\/pre>\nSadece de\u011fi\u015fkenler de\u011fil, do\u011frudan ifadeler de ekleyebilirsiniz:<\/p>\n
\nconst fiyat = 150;\nconst kdvOrani = 0.18;\nconst toplamFiyat =<\/code>\u00dcr\u00fcn\u00fcn KDV dahil fiyat\u0131: ${(fiyat * (1 + kdvOrani)).toFixed(2)} TL;\nconsole.log(toplamFiyat); \/\/ \u00c7\u0131kt\u0131: \u00dcr\u00fcn\u00fcn KDV dahil fiyat\u0131: 177.00 TL\n<\/code><\/pre>\n\u00c7ok Sat\u0131rl\u0131 Dizeler<\/h4>\n
Template literals, \u00e7ok sat\u0131rl\u0131 dizeler yazma sorununa da zarif bir \u00e7\u00f6z\u00fcm sunar. Eski y\u00f6ntemlerde her sat\u0131r\u0131n sonuna \\n<\/code> eklemek veya dizeleri birle\u015ftirmek gerekiyordu, bu da okunabilirli\u011fi olumsuz etkiliyordu.<\/p>\n\n\/\/ Eski y\u00f6ntem: \u00c7ok sat\u0131rl\u0131 dize\nconst epostaIcerikEski = \"Merhaba,\\n\" +\n \"Bu bir test e-postas\u0131d\u0131r.\\n\" +\n \"Sayg\u0131lar\u0131mla,\\n\" +\n \"Yazar\";\nconsole.log(epostaIcerikEski);\n\n\/\/ Modern y\u00f6ntem: Template literal ile \u00e7ok sat\u0131rl\u0131 dize\nconst epostaIcerikModern =<\/code>Merhaba,\nBu bir test e-postas\u0131d\u0131r.\nSayg\u0131lar\u0131mla,\nYazar;\nconsole.log(epostaIcerikModern);\n<\/code><\/pre>\nBu \u00f6zellik, \u00f6zellikle e-posta \u015fablonlar\u0131, HTML \u00e7\u0131kt\u0131lar\u0131 veya kullan\u0131c\u0131ya g\u00f6sterilecek uzun metinler olu\u015ftururken kodunuzu b\u00fcy\u00fck \u00f6l\u00e7\u00fcde sadele\u015ftirir ve okunabilirli\u011fini art\u0131r\u0131r. Template literals, string manip\u00fclasyonunu temiz kod yaz\u0131m\u0131n\u0131n ayr\u0131lmaz bir par\u00e7as\u0131 haline getirir.<\/p>\n
Destructuring Assignment: Veri \u00c7ekmeyi Nas\u0131l Basitle\u015ftirir?<\/h3>\n
Destructuring assignment (yap\u0131 bozma atamas\u0131), ES6 ile gelen ve dizilerden veya nesnelerden veri \u00e7ekme i\u015flemini inan\u0131lmaz derecede kolayla\u015ft\u0131ran g\u00fc\u00e7l\u00fc bir \u00f6zelliktir. Teker teker \u00f6zelliklere eri\u015fmek yerine, tek bir ifadeyle birden fazla de\u011feri \u00e7\u0131karman\u0131za olanak tan\u0131r. Bu, kodunuzu daha k\u0131sa, daha temiz ve daha okunabilir hale getirir.<\/p>\n
Dizi Destructuring<\/h4>\n
Dizi destructuring, bir diziden elemanlar\u0131 ayr\u0131 ayr\u0131 de\u011fi\u015fkenlere ataman\u0131z\u0131 sa\u011flar. S\u0131ralamaya dayal\u0131 olarak \u00e7al\u0131\u015f\u0131r.<\/p>\n
\nconst renkler = [\"k\u0131rm\u0131z\u0131\", \"ye\u015fil\", \"mavi\"];\n\n\/\/ Eski y\u00f6ntem\nconst birinciRenkEski = renkler[0];\nconst ikinciRenkEski = renkler[1];\nconsole.log(birinciRenkEski, ikinciRenkEski); \/\/ \u00c7\u0131kt\u0131: k\u0131rm\u0131z\u0131 ye\u015fil\n\n\/\/ Modern y\u00f6ntem: Dizi Destructuring\nconst [birinciRenk, ikinciRenk, ucuncuRenk] = renkler;\nconsole.log(birinciRenk, ikinciRenk, ucuncuRenk); \/\/ \u00c7\u0131kt\u0131: k\u0131rm\u0131z\u0131 ye\u015fil mavi\n\n\/\/ Belirli elemanlar\u0131 atlayabilirsiniz\nconst [, , sonRenk] = renkler;\nconsole.log(sonRenk); \/\/ \u00c7\u0131kt\u0131: mavi\n\n\/\/ Varsay\u0131lan de\u011ferler atayabilirsiniz\nconst [a, b, c, d = \"sar\u0131\"] = [\"elma\", \"armut\", \"kiraz\"];\nconsole.log(a, b, c, d); \/\/ \u00c7\u0131kt\u0131: elma armut kiraz sar\u0131\n\n\/\/ Destructuring ile de\u011fi\u015fkenleri takas etme\nlet x = 10;\nlet y = 20;\n[x, y] = [y, x]; \/\/ x \u015fimdi 20, y \u015fimdi 10\nconsole.log(<\/code>x: ${x}, y: ${y}); \/\/ \u00c7\u0131kt\u0131: x: 20, y: 10\n<\/code><\/pre>\nNesne Destructuring<\/h4>\n
Nesne destructuring, bir nesneden belirli \u00f6zellikleri (anahtarlar\u0131) ay\u0131klaman\u0131z\u0131 sa\u011flar. Anahtar adlar\u0131na g\u00f6re \u00e7al\u0131\u015f\u0131r.<\/p>\n
\nconst kullanici = {\n id: 1,\n ad: \"Can\",\n email: \"can@example.com\",\n adres: {\n sehir: \"\u0130stanbul\",\n ulke: \"T\u00fcrkiye\"\n }\n};\n\n\/\/ Eski y\u00f6ntem\nconst kullaniciAdiEski = kullanici.ad;\nconst kullaniciEmailEski = kullanici.email;\nconsole.log(kullaniciAdiEski, kullaniciEmailEski); \/\/ \u00c7\u0131kt\u0131: Can can@example.com\n\n\/\/ Modern y\u00f6ntem: Nesne Destructuring\nconst { ad, email } = kullanici;\nconsole.log(ad, email); \/\/ \u00c7\u0131kt\u0131: Can can@example.com\n\n\/\/ Yeni de\u011fi\u015fken adlar\u0131 atayabilirsiniz\nconst { ad: kullaniciAdSoyad, email: ePosta } = kullanici;\nconsole.log(kullaniciAdSoyad, ePosta); \/\/ \u00c7\u0131kt\u0131: Can can@example.com\n\n\/\/ Varsay\u0131lan de\u011ferler ve i\u00e7 i\u00e7e destructuring\nconst { id, ad: kullaniciIsmi, telefon = \"Bilinmiyor\", adres: { sehir } } = kullanici;\nconsole.log(id, kullaniciIsmi, telefon, sehir); \/\/ \u00c7\u0131kt\u0131: 1 Can Bilinmiyor \u0130stanbul\n<\/code><\/pre>\nFonksiyon Parametrelerinde Destructuring<\/h4>\n
Destructuring, fonksiyon parametrelerini tan\u0131mlarken de b\u00fcy\u00fck kolayl\u0131k sa\u011flar. \u00d6zellikle bir\u00e7ok parametre alan veya ayar objesi olarak ge\u00e7en durumlarda kodunuzu \u00e7ok daha okunakl\u0131 hale getirir.<\/p>\n
\n\/\/ Parametre destructuring olmadan\nfunction kullaniciBilgisiGosterEski(kullaniciObj) {\n console.log(<\/code>ID: ${kullaniciObj.id}, Ad: ${kullaniciObj.ad}, E-posta: ${kullaniciObj.email});\n}\nkullaniciBilgisiGosterEski(kullanici); \/\/ \u00c7\u0131kt\u0131: ID: 1, Ad: Can, E-posta: can@example.com\n\n\/\/ Parametre destructuring ile\nfunction kullaniciBilgisiGosterModern({ id, ad, email, telefon = \"Yok\" }) {\n console.log(<\/code>ID: ${id}, Ad: ${ad}, E-posta: ${email}, Telefon: ${telefon});\n}\nkullaniciBilgisiGosterModern(kullanici); \/\/ \u00c7\u0131kt\u0131: ID: 1, Ad: Can, E-posta: can@example.com, Telefon: Yok\n<\/code><\/pre>\nFonksiyon parametrelerinde destructuring kullanmak, fonksiyonunuzun hangi verilere ihtiya\u00e7 duydu\u011funu ilk bak\u0131\u015fta anlaman\u0131z\u0131 sa\u011flar ve gereksiz ara de\u011fi\u015fken tan\u0131mlamalar\u0131n\u0131n \u00f6n\u00fcne ge\u00e7er. Bu \u00f6zellik, API yan\u0131tlar\u0131ndan belirli verileri ay\u0131klarken veya bile\u015fen props'lar\u0131n\u0131 i\u015flerken (\u00f6zellikle React gibi k\u00fct\u00fcphanelerde) inan\u0131lmaz derecede kullan\u0131\u015fl\u0131d\u0131r.<\/p>\n
Spread ve Rest Operat\u00f6rleri: Esnek Fonksiyon Parametreleri ve Kopyalama<\/h3>\n
Spread (yayma) ve Rest (toplama) operat\u00f6rleri, her ikisi de \u00fc\u00e7 nokta (...<\/code>) ile temsil edilen ancak farkl\u0131 ba\u011flamlarda kullan\u0131lan iki g\u00fc\u00e7l\u00fc ES6 \u00f6zelli\u011fidir. Temiz kod yazarken dizilerle, nesnelerle ve fonksiyon arg\u00fcmanlar\u0131yla daha esnek ve okunakl\u0131 \u00e7al\u0131\u015fman\u0131z\u0131 sa\u011flarlar.<\/p>\nSpread Operat\u00f6r\u00fc (Yayma)<\/h4>\n
Spread operat\u00f6r\u00fc, bir yinelenebilir (iterable) \u00f6\u011fenin (dizi, string) elemanlar\u0131n\u0131 veya bir nesnenin \u00f6zelliklerini ayr\u0131 ayr\u0131 \"yayarak\" yeni bir dizi, nesne veya fonksiyon arg\u00fcmanlar\u0131 listesi olu\u015fturman\u0131z\u0131 sa\u011flar. En yayg\u0131n kullan\u0131m alanlar\u0131 \u015funlard\u0131r:<\/p>\n
Dizileri Birle\u015ftirme veya Kopyalama<\/h5>\n\nconst dizi1 = [1, 2, 3];\nconst dizi2 = [4, 5, 6];\n\n\/\/ Eski y\u00f6ntem: concat() veya push()\nconst birlesikDiziEski = dizi1.concat(dizi2);\nconsole.log(birlesikDiziEski); \/\/ \u00c7\u0131kt\u0131: [1, 2, 3, 4, 5, 6]\n\n\/\/ Modern y\u00f6ntem: Spread operat\u00f6r\u00fc ile birle\u015ftirme\nconst birlesikDiziModern = [...dizi1, ...dizi2, 7, 8];\nconsole.log(birlesikDiziModern); \/\/ \u00c7\u0131kt\u0131: [1, 2, 3, 4, 5, 6, 7, 8]\n\n\/\/ Diziyi kopyalama (s\u0131\u011f kopyalama)\nconst orijinalDizi = [10, 20, 30];\nconst kopyaDizi = [...orijinalDizi];\nconsole.log(kopyaDizi); \/\/ \u00c7\u0131kt\u0131: [10, 20, 30]\nkopyaDizi.push(40);\nconsole.log(orijinalDizi); \/\/ \u00c7\u0131kt\u0131: [10, 20, 30] (orijinal dizi etkilenmez)\n<\/code><\/pre>\nNesneleri Birle\u015ftirme veya Kopyalama<\/h5>\n
Spread operat\u00f6r\u00fc, nesneleri birle\u015ftirmek veya s\u0131\u011f bir kopyas\u0131n\u0131 olu\u015fturmak i\u00e7in de kullan\u0131labilir.<\/p>\n
\nconst kullaniciBilgisi = { ad: \"Zeynep\", yas: 28 };\nconst adresBilgisi = { sehir: \"Ankara\", postaKodu: \"06000\" };\n\n\/\/ Eski y\u00f6ntem: Object.assign()\nconst tamKullaniciEski = Object.assign({}, kullaniciBilgisi, adresBilgisi);\nconsole.log(tamKullaniciEski); \/\/ \u00c7\u0131kt\u0131: { ad: \"Zeynep\", yas: 28, sehir: \"Ankara\", postaKodu: \"06000\" }\n\n\/\/ Modern y\u00f6ntem: Spread operat\u00f6r\u00fc ile nesne birle\u015ftirme\nconst tamKullaniciModern = { ...kullaniciBilgisi, ...adresBilgisi, ulke: \"T\u00fcrkiye\" };\nconsole.log(tamKullaniciModern); \/\/ \u00c7\u0131kt\u0131: { ad: \"Zeynep\", yas: 28, sehir: \"Ankara\", postaKodu: \"06000\", ulke: \"T\u00fcrkiye\" }\n\n\/\/ Nesne kopyalama\nconst orijinalNesne = { a: 1, b: 2 };\nconst kopyaNesne = { ...orijinalNesne };\nconsole.log(kopyaNesne); \/\/ \u00c7\u0131kt\u0131: { a: 1, b: 2 }\nkopyaNesne.c = 3;\nconsole.log(orijinalNesne); \/\/ \u00c7\u0131kt\u0131: { a: 1, b: 2 } (orijinal nesne etkilenmez)\n<\/code><\/pre>\nFonksiyon \u00c7a\u011fr\u0131lar\u0131nda Kullan\u0131m<\/h5>\n
Bir dizinin elemanlar\u0131n\u0131 bir fonksiyonun ayr\u0131 ayr\u0131 arg\u00fcmanlar\u0131 olarak yaymak i\u00e7in de spread operat\u00f6r\u00fc kullan\u0131labilir.<\/p>\n
\nfunction toplam(a, b, c) {\n return a + b + c;\n}\n\nconst sayiListesi = [10, 20, 30];\n\n\/\/ Eski y\u00f6ntem: apply()\nconsole.log(toplam.apply(null, sayiListesi)); \/\/ \u00c7\u0131kt\u0131: 60\n\n\/\/ Modern y\u00f6ntem: Spread operat\u00f6r\u00fc ile\nconsole.log(toplam(...sayiListesi)); \/\/ \u00c7\u0131kt\u0131: 60\n<\/code><\/pre>\nRest Operat\u00f6r\u00fc (Toplama)<\/h4>\n
Rest operat\u00f6r\u00fc, spread operat\u00f6r\u00fcn\u00fcn tam tersi gibi d\u00fc\u015f\u00fcn\u00fclebilir. Fonksiyon parametrelerinde veya destructuring atamalar\u0131nda kullan\u0131l\u0131r ve birden fazla ba\u011f\u0131ms\u0131z \u00f6\u011feyi \"toplayarak\" bir diziye d\u00f6n\u00fc\u015ft\u00fcr\u00fcr. Her zaman en son parametre veya eleman olmal\u0131d\u0131r.<\/p>\n
Esnek Fonksiyon Parametreleri<\/h5>\n\n\/\/ Rest operat\u00f6r\u00fc ile istedi\u011finiz kadar arg\u00fcman alabilen fonksiyon\nfunction listeyeEkle(baslik, ...ogeler) {\n console.log(<\/code>${baslik}:);\n ogeler.forEach(oge => console.log(<\/code>- ${oge}));\n}\n\nlisteyeEkle(\"Al\u0131\u015fveri\u015f Listesi\", \"S\u00fct\", \"Ekmek\", \"Yumurta\");\n\/\/ \u00c7\u0131kt\u0131:\n\/\/ Al\u0131\u015fveri\u015f Listesi:\n\/\/ - S\u00fct\n\/\/ - Ekmek\n\/\/ - Yumurta\n\nlisteyeEkle(\"Yap\u0131lacaklar\", \"Rapor Yaz\", \"Toplant\u0131ya Kat\u0131l\");\n\/\/ \u00c7\u0131kt\u0131:\n\/\/ Yap\u0131lacaklar:\n\/\/ - Rapor Yaz\n\/\/ - Toplant\u0131ya Kat\u0131l\n<\/code><\/pre>\nDizi Destructuring ile Kullan\u0131m<\/h5>\n
Destructuring yaparken dizinin geri kalan elemanlar\u0131n\u0131 tek bir de\u011fi\u015fkende toplamak i\u00e7in rest operat\u00f6r\u00fcn\u00fc kullanabilirsiniz.<\/p>\n
\nconst sayilarDizisi = [1, 2, 3, 4, 5, 6];\n\nconst [ilk, ikinci, ...geriKalanlar] = sayilarDizisi;\nconsole.log(ilk); \/\/ \u00c7\u0131kt\u0131: 1\nconsole.log(ikinci); \/\/ \u00c7\u0131kt\u0131: 2\nconsole.log(geriKalanlar); \/\/ \u00c7\u0131kt\u0131: [3, 4, 5, 6]\n\n\/\/ Nesne destructuring ile de benzer \u015fekilde kullan\u0131labilir (ES2018)\nconst { a, b, ...digerleri } = { a: 10, b: 20, c: 30, d: 40 };\nconsole.log(a); \/\/ \u00c7\u0131kt\u0131: 10\nconsole.log(b); \/\/ \u00c7\u0131kt\u0131: 20\nconsole.log(digerleri); \/\/ \u00c7\u0131kt\u0131: { c: 30, d: 40 }\n<\/code><\/pre>\nSpread ve Rest operat\u00f6rleri, kodunuzu daha esnek, mod\u00fcler ve fonksiyonel programlama prensiplerine daha uygun hale getirir. \u00d6zellikle dizi ve nesne manip\u00fclasyonlar\u0131nda tekrarlayan kod miktar\u0131n\u0131 azalt\u0131r ve okunabilirli\u011fi art\u0131r\u0131r.<\/p>\n
Asenkron Programlamada Devrim: Promise'ler ve<\/code>async\/await<\/h2>\nModern web uygulamalar\u0131, kullan\u0131c\u0131 deneyimini kesintiye u\u011fratmadan arka planda veri \u00e7ekme, dosya y\u00fckleme gibi uzun s\u00fcren i\u015flemleri ger\u00e7ekle\u015ftirmek zorundad\u0131r. JavaScript'in asenkron programlama yetenekleri, bu t\u00fcr i\u015flemleri y\u00f6netmenin temelidir. ES6 ile gelen Promise'ler ve ES2017 ile gelen async\/await<\/code>, asenkron kodu yazma ve y\u00f6netme \u015feklimizi k\u00f6kten de\u011fi\u015ftirerek \"callback hell\" sorununa zarif ve g\u00fc\u00e7l\u00fc \u00e7\u00f6z\u00fcmler sunmu\u015ftur. Bu \u00f6zellikler, \u00f6zellikle karma\u015f\u0131k API \u00e7a\u011fr\u0131lar\u0131 veya s\u0131ral\u0131 asenkron ad\u0131mlar i\u00e7eren senaryolarda kodunuzu \u00e7ok daha temiz, okunabilir ve bak\u0131m\u0131 kolay hale getirir.<\/p>\nPromise'ler: Asenkron \u0130\u015flemlerin Sonu\u00e7lar\u0131n\u0131 Y\u00f6netmek<\/h3>\n
Promise, asenkron bir i\u015flemin nihai tamamlanmas\u0131n\u0131 (veya ba\u015far\u0131s\u0131zl\u0131\u011f\u0131n\u0131) temsil eden bir JavaScript nesnesidir. Bir Promise, \u00fc\u00e7 ana durumda olabilir:<\/p>\n
\n- Pending (Beklemede):<\/strong> \u0130\u015flem hen\u00fcz tamamlanmam\u0131\u015f ve sonu\u00e7 bilinmiyor.<\/li>\n
- Fulfilled (Yerine Getirilmi\u015f):<\/strong> \u0130\u015flem ba\u015far\u0131yla tamamland\u0131 ve bir sonu\u00e7 de\u011feri d\u00f6nd\u00fcrd\u00fc.<\/li>\n
- Rejected (Reddedilmi\u015f):<\/strong> \u0130\u015flem bir hata nedeniyle ba\u015far\u0131s\u0131z oldu ve bir hata nedeni d\u00f6nd\u00fcrd\u00fc.<\/li>\n<\/ul>\n
Promise'ler, .then()<\/code> metodu ile ba\u015far\u0131l\u0131 sonucu i\u015flemek ve .catch()<\/code> metodu ile hatalar\u0131 yakalamak i\u00e7in zincirlenebilir bir yap\u0131 sunar. Bu zincirleme, callback'lerin i\u00e7 i\u00e7e ge\u00e7mesini \u00f6nler.<\/p>\n\nfunction veriGetirPromise(id) {\n return new Promise((resolve, reject) => {\n \/\/ Asenkron bir i\u015flem sim\u00fcle edelim (\u00f6rne\u011fin bir API \u00e7a\u011fr\u0131s\u0131)\n setTimeout(() => {\n if (id === 1) {\n resolve({ id: 1, ad: \"Burak\", urun: \"Laptop\" }); \/\/ Ba\u015far\u0131l\u0131 sonu\u00e7\n } else {\n reject(\"Kullan\u0131c\u0131 bulunamad\u0131 veya bir hata olu\u015ftu.\"); \/\/ Hatal\u0131 sonu\u00e7\n }\n }, 1500);\n });\n}\n\n\/\/ Promise'i kullanma\nveriGetirPromise(1)\n .then(kullaniciVerisi => {\n console.log(\"Kullan\u0131c\u0131 verisi ba\u015far\u0131yla al\u0131nd\u0131:\", kullaniciVerisi);\n return veriGetirPromise(2); \/\/ Zincirleme: Yeni bir promise d\u00f6nd\u00fcr\n })\n .then(ikinciKullaniciVerisi => {\n console.log(\"\u0130kinci kullan\u0131c\u0131 verisi ba\u015far\u0131yla al\u0131nd\u0131:\", ikinciKullaniciVerisi);\n })\n .catch(hata => {\n console.error(\"Bir hata olu\u015ftu:\", hata); \/\/ T\u00fcm zincirdeki hatalar\u0131 yakalar\n })\n .finally(() => {\n console.log(\"Promise zinciri tamamland\u0131 (ba\u015far\u0131l\u0131 veya ba\u015far\u0131s\u0131z).\");\n });\n<\/code><\/pre>\nPromise'ler, asenkron ak\u0131\u015f\u0131 do\u011frusal bir \u015fekilde yazmam\u0131z\u0131 sa\u011flayarak okunabilirli\u011fi art\u0131r\u0131r ve hata y\u00f6netimini merkezi hale getirir. Promise.all()<\/code>, Promise.race()<\/code> gibi statik metotlar\u0131 sayesinde birden fazla promise'i paralel \u00e7al\u0131\u015ft\u0131rma veya en h\u0131zl\u0131 tamamlanan\u0131 yakalama gibi geli\u015fmi\u015f senaryolar\u0131 da kolayca y\u00f6netebiliriz.<\/p>\n<\/code>async\/await: Asenkron Kodu Senkron Gibi Yazmak<\/h3>\nasync\/await<\/code>, Promise'ler \u00fczerine in\u015fa edilmi\u015f ve asenkron kod yaz\u0131m\u0131n\u0131 daha da basitle\u015ftiren s\u00f6zdizimsel bir \u015fekerdir. async<\/code> anahtar kelimesiyle i\u015faretlenmi\u015f bir fonksiyon her zaman bir Promise d\u00f6nd\u00fcr\u00fcr. await<\/code> anahtar kelimesi ise sadece async<\/code> fonksiyonlar i\u00e7inde kullan\u0131labilir ve bir Promise'in \u00e7\u00f6z\u00fcmlenmesini (ba\u015far\u0131l\u0131 veya hatal\u0131) bekler. Bu, asenkron kodu adeta senkron bir dilde yaz\u0131yormu\u015f gibi g\u00f6r\u00fcnmesini sa\u011flar, bu da kodun okunabilirli\u011fini muazzam \u00f6l\u00e7\u00fcde art\u0131r\u0131r.<\/p>\n\n\/\/ \u00d6nceki Promise fonksiyonlar\u0131m\u0131z\u0131 kullanal\u0131m\n\/\/ function veriGetirPromise(id) { ... }\n\nasync function tumVerileriGetir() {\n try {\n console.log(\"Veri \u00e7ekiliyor...\");\n const kullanici1 = await veriGetirPromise(1); \/\/ Promise'in \u00e7\u00f6z\u00fclmesini bekler\n console.log(\"\u0130lk kullan\u0131c\u0131:\", kullanici1);\n\n const kullanici2 = await veriGetirPromise(2); \/\/ Hata f\u0131rlatacak\n console.log(\"\u0130kinci kullan\u0131c\u0131:\", kullanici2); \/\/ Bu sat\u0131ra asla ula\u015f\u0131lamaz\n } catch (hata) {\n console.error(\"async\/await i\u00e7inde bir hata olu\u015ftu:\", hata);\n } finally {\n console.log(\"T\u00fcm veri \u00e7ekme denemesi tamamland\u0131.\");\n }\n}\n\ntumVerileriGetir();\n<\/code><\/pre>\nYukar\u0131daki \u00f6rnekte, await<\/code> sayesinde kodumuz yukar\u0131dan a\u015fa\u011f\u0131ya do\u011fru okunur ve her bir asenkron ad\u0131m\u0131n tamamlanmas\u0131n\u0131 bekleriz. Hata y\u00f6netimi, senkron kodda oldu\u011fu gibi standart try...catch<\/code> bloklar\u0131yla yap\u0131labilir. Bu, asenkron kodun karma\u015f\u0131kl\u0131\u011f\u0131n\u0131 \u00f6nemli \u00f6l\u00e7\u00fcde azalt\u0131r.<\/p>\nGer\u00e7ek D\u00fcnya Senaryosu: Bir API'den Veri \u00c7ekme<\/h4>\n
Bir e-ticaret uygulamas\u0131nda \u00fcr\u00fcn listesini ve ard\u0131ndan se\u00e7ilen \u00fcr\u00fcn\u00fcn detaylar\u0131n\u0131 bir API'den \u00e7ekmek istedi\u011fimizi varsayal\u0131m. \u0130\u015fte bu senaryonun async\/await<\/code> ile ne kadar temiz g\u00f6r\u00fcnd\u00fc\u011f\u00fc:<\/p>\n\n\/\/<\/code>fetchAPI'si varsay\u0131lan olarak Promise d\u00f6nd\u00fcr\u00fcr\nasync function urunBilgileriniGetir(urunId) {\n try {\n \/\/ \u00dcr\u00fcn listesini \u00e7ek\n const responseList = await fetch('https:\/\/fakestoreapi.com\/products');\n if (!responseList.ok) {\n throw new Error(<\/code>HTTP hata! Durum: ${responseList.status});\n }\n const urunListesi = await responseList.json();\n console.log(\"T\u00fcm \u00fcr\u00fcnler:\", urunListesi.slice(0, 3)); \/\/ \u0130lk 3 \u00fcr\u00fcn\u00fc g\u00f6sterelim\n\n \/\/ Belirli bir \u00fcr\u00fcn\u00fcn detay\u0131n\u0131 \u00e7ek\n const responseDetail = await fetch(<\/code>https:\/\/fakestoreapi.com\/products\/${urunId});\n if (!responseDetail.ok) {\n throw new Error(<\/code>HTTP hata! Durum: ${responseDetail.status});\n }\n const urunDetay = await responseDetail.json();\n console.log(<\/code>ID ${urunId} olan \u00fcr\u00fcn detaylar\u0131:, urunDetay);\n\n return urunDetay;\n\n } catch (error) {\n console.error(\"Veri \u00e7ekme s\u0131ras\u0131nda bir hata olu\u015ftu:\", error);\n \/\/ Hatan\u0131n \u00e7a\u011fr\u0131c\u0131ya iletilmesi i\u00e7in f\u0131rlat\u0131labilir\n throw error;\n }\n}\n\n\/\/ Uygulama ba\u015flang\u0131c\u0131nda \u00e7a\u011fr\u0131\nurunBilgileriniGetir(5); \/\/ ID'si 5 olan \u00fcr\u00fcn\u00fc getirelim\n<\/code><\/pre>\nBu kod blo\u011fu, ilk olarak t\u00fcm \u00fcr\u00fcn listesini \u00e7eker, ard\u0131ndan belirtilen urunId<\/code>'ye sahip \u00fcr\u00fcn\u00fcn detaylar\u0131n\u0131 \u00e7eker. Her await<\/code> ifadesi, bir \u00f6nceki i\u015flemin tamamlanmas\u0131n\u0131 bekler ve hata olu\u015ftu\u011funda catch<\/code> blo\u011funa d\u00fc\u015fer. Bu yap\u0131, eski callback yakla\u015f\u0131mlar\u0131na k\u0131yasla \u00e7ok daha d\u00fcz ve anla\u015f\u0131l\u0131rd\u0131r.<\/p>\n\n Uzman \u0130pucu: Birden fazla ba\u011f\u0131ms\u0131z asenkron i\u015flemi ayn\u0131 anda ba\u015flatmak ve hepsinin tamamlanmas\u0131n\u0131 beklemek istiyorsan\u0131z,<\/code>Promise.all()metodunu<\/code>async\/awaitile birlikte kullan\u0131n. Bu, performans\u0131 art\u0131r\u0131rken kodun okunabilirli\u011fini korur.<\/p>\n\nasync function paralelIslemler() {\n try {\n const [veri1, veri2] = await Promise.all([\n fetch('https:\/\/api.example.com\/data1').then(res => res.json()),\n fetch('https:\/\/api.example.com\/data2').then(res => res.json())\n ]);\n console.log(\"Paralel gelen veri 1:\", veri1);\n console.log(\"Paralel gelen veri 2:\", veri2);\n } catch (error) {\n console.error(\"Paralel i\u015flemler s\u0131ras\u0131nda hata:\", error);\n }\n}\nparalelIslemler();\n<\/code><\/pre>\n<\/p><\/div>\nPromise'ler ve async\/await<\/code>, modern JavaScript geli\u015ftirmenin temel ta\u015flar\u0131ndan ikisidir. Bu \u00f6zellikleri ustaca kullanmak, asenkron programlamay\u0131 bir problem olmaktan \u00e7\u0131kar\u0131p, uygulaman\u0131z\u0131n en g\u00fc\u00e7l\u00fc yanlar\u0131ndan biri haline getirmenizi sa\u011flayacakt\u0131r.<\/p>\nMod\u00fcller: B\u00fcy\u00fck Projelerde Kodu Nas\u0131l Organize Ederiz?<\/h2>\n
JavaScript uygulamalar\u0131 b\u00fcy\u00fcd\u00fck\u00e7e, kodu mant\u0131ksal birimlere ay\u0131rmak ve her bir birimin kendi sorumlulu\u011funu yerine getirmesini sa\u011flamak kritik hale gelir. \u0130\u015fte bu noktada JavaScript Mod\u00fclleri (ES Modules) devreye girer. ES Mod\u00fclleri, kodun farkl\u0131 dosyalara ayr\u0131lmas\u0131n\u0131, bu dosyalar aras\u0131nda g\u00fcvenli ve a\u00e7\u0131k bir \u015fekilde i\u015flevsellik payla\u015f\u0131m\u0131n\u0131 sa\u011flar. Bu sayede kod tekrar\u0131n\u0131 azalt\u0131r, ba\u011f\u0131ml\u0131l\u0131klar\u0131 y\u00f6netir, okunabilirli\u011fi art\u0131r\u0131r ve b\u00fcy\u00fck \u00f6l\u00e7ekli uygulamalar\u0131n geli\u015ftirilmesini kolayla\u015ft\u0131r\u0131r.<\/p>\n
Mod\u00fcllerin temel amac\u0131, k\u00fcresel kapsamda (global scope) de\u011fi\u015fken \u00e7ak\u0131\u015fmalar\u0131n\u0131 \u00f6nlemek ve kodu kaps\u00fcllemektir. ES6'dan \u00f6nce bu genellikle IIFE (Immediately Invoked Function Expressions) veya CommonJS \/ AMD gibi farkl\u0131 mod\u00fcl sistemleriyle yap\u0131l\u0131rd\u0131. Ancak ES Mod\u00fclleri, dilin kendi b\u00fcnyesinde standart bir \u00e7\u00f6z\u00fcm sunarak bu s\u00fcreci \u00e7ok daha modern ve entegre hale getirdi.<\/p>\n
import<\/code> ve export<\/code> S\u00f6zdizimi<\/h3>\nES Mod\u00fcllerinin kalbinde iki anahtar kelime bulunur: export<\/code> ve import<\/code>.<\/p>\n\nexport<\/code>: Bir mod\u00fclden d\u0131\u015far\u0131ya a\u00e7mak istedi\u011finiz de\u011fi\u015fkenleri, fonksiyonlar\u0131 veya s\u0131n\u0131flar\u0131 i\u015faretlemek i\u00e7in kullan\u0131l\u0131r. Ba\u015fka bir dosya bu i\u015faretlenmi\u015f \u00f6\u011feleri kullanabilir.<\/li>\nimport<\/code>: Ba\u015fka bir mod\u00fcl taraf\u0131ndan d\u0131\u015far\u0131ya a\u00e7\u0131lm\u0131\u015f \u00f6\u011feleri (export<\/code> edilmi\u015f) mevcut dosyaya getirmek i\u00e7in kullan\u0131l\u0131r.<\/li>\n<\/ul>\n\u00d6rnek: Matematik Mod\u00fcl\u00fc Olu\u015fturma<\/h4>\n
\u015eimdi basit bir matematik i\u015flemlerini i\u00e7eren bir mod\u00fcl olu\u015ftural\u0131m. Bu mod\u00fcl\u00fc matematik.js<\/code> ad\u0131nda bir dosyada tan\u0131mlayal\u0131m:<\/p>\n\n\/\/ matematik.js dosyas\u0131\nexport const PI = 3.14159; \/\/ Sabit export edildi\n\nexport function topla(a, b) { \/\/ Fonksiyon export edildi\n return a + b;\n}\n\nexport function cikar(a, b) { \/\/ Fonksiyon export edildi\n return a - b;\n}\n\n\/\/ Varsay\u0131lan (default) export: Mod\u00fclden tek bir ana de\u011feri d\u0131\u015fa aktarmak i\u00e7in kullan\u0131l\u0131r.\n\/\/ Her mod\u00fcl sadece bir default export'a sahip olabilir.\nconst carp = (a, b) => a * b;\nexport default carp;\n<\/code><\/pre>\nMod\u00fcl\u00fc Ba\u015fka Bir Dosyada Kullanma<\/h4>\n
\u015eimdi bu matematik.js<\/code> mod\u00fcl\u00fcn\u00fc uygulama.js<\/code> ad\u0131nda ba\u015fka bir dosyada nas\u0131l kullanaca\u011f\u0131m\u0131za bakal\u0131m:<\/p>\n\n\/\/ uygulama.js dosyas\u0131\nimport { PI, topla, cikar } from '.\/matematik.js'; \/\/ \u0130simlendirilmi\u015f export'lar\u0131 import etme\nimport carpmaIslemi from '.\/matematik.js'; \/\/ Default export'u import etme (iste\u011fe ba\u011fl\u0131 isimle)\n\nconsole.log(<\/code>Pi say\u0131s\u0131: ${PI}); \/\/ \u00c7\u0131kt\u0131: Pi say\u0131s\u0131: 3.14159\nconsole.log(<\/code>2 + 3 = ${topla(2, 3)}); \/\/ \u00c7\u0131kt\u0131: 2 + 3 = 5\nconsole.log(<\/code>5 - 2 = ${cikar(5, 2)}); \/\/ \u00c7\u0131kt\u0131: 5 - 2 = 3\nconsole.log(<\/code>4 * 6 = ${carpmaIslemi(4, 6)}); \/\/ \u00c7\u0131kt\u0131: 4 * 6 = 24\n\n\/\/ T\u00fcm export'lar\u0131 tek bir nesne olarak import etme\nimport * as Matematik from '.\/matematik.js';\nconsole.log(<\/code>T\u00fcm matematik mod\u00fcl\u00fc: ${Matematik.topla(10, 5)}); \/\/ \u00c7\u0131kt\u0131: T\u00fcm matematik mod\u00fcl\u00fc: 15\n<\/code><\/pre>\nBu \u00f6rnekte, import<\/code> ve export<\/code> sayesinde matematik.js<\/code> dosyas\u0131ndaki i\u015flevselli\u011fi, uygulama.js<\/code> dosyas\u0131nda herhangi bir \u00e7ak\u0131\u015fma riski olmadan kolayca kullanabiliyoruz. Mod\u00fcl yollar\u0131 ('.\/matematik.js'<\/code>) taray\u0131c\u0131da veya Node.js'te \u00e7al\u0131\u015ft\u0131r\u0131l\u0131rken do\u011fru \u015fekilde \u00e7\u00f6z\u00fcmlenmelidir. Taray\u0131c\u0131da kullan\u0131rken