JavaScript, g\u00fcn\u00fcm\u00fcz web d\u00fcnyas\u0131n\u0131n tart\u0131\u015fmas\u0131z en \u00f6nemli ve dinamik programlama dillerinden biridir. Ba\u015flang\u0131\u00e7ta web taray\u0131c\u0131lar\u0131nda interaktif sayfalar olu\u015fturmak i\u00e7in tasarlanm\u0131\u015f olsa da, zamanla frontend’den backend’e, mobil uygulamalardan masa\u00fcst\u00fc yaz\u0131l\u0131mlara kadar uzanan geni\u015f bir ekosistem in\u015fa etmi\u015ftir. Bu makalede, JavaScript’in temel prensiplerinden modern kullan\u0131m alanlar\u0131na, asenkron programlamadan pop\u00fcler framework’lere kadar bir\u00e7ok y\u00f6n\u00fcn\u00fc detayl\u0131 bir \u015fekilde inceleyece\u011fiz.<\/p>\n
JavaScript, web sayfalar\u0131na etkile\u015fim ve dinamizm katmak amac\u0131yla geli\u015ftirilmi\u015f, y\u00fcksek seviyeli, yorumlanabilir bir programlama dilidir. G\u00fcn\u00fcm\u00fczde sadece web taray\u0131c\u0131lar\u0131nda de\u011fil, sunucu taraf\u0131nda (Node.js), mobil uygulamalarda (React Native), masa\u00fcst\u00fc uygulamalarda (Electron) ve hatta IoT cihazlar\u0131nda bile kullan\u0131lmaktad\u0131r. Bu geni\u015f kullan\u0131m alan\u0131, JavaScript’i modern yaz\u0131l\u0131m geli\u015ftirmenin vazge\u00e7ilmez bir par\u00e7as\u0131 haline getirmi\u015ftir.<\/p>\n
JavaScript, 1995 y\u0131l\u0131nda Brendan Eich taraf\u0131ndan Netscape Communications b\u00fcnyesinde, taray\u0131c\u0131da \u00e7al\u0131\u015fan basit betikler i\u00e7in “LiveScript” ad\u0131yla geli\u015ftirildi. K\u0131sa s\u00fcre sonra “JavaScript” olarak yeniden adland\u0131r\u0131ld\u0131. Dilin standartla\u015ft\u0131r\u0131lmas\u0131 amac\u0131yla ECMA International taraf\u0131ndan ECMAScript (ES) ad\u0131 alt\u0131nda bir standart belirlendi. Her y\u0131l yay\u0131nlanan yeni ECMAScript s\u00fcr\u00fcmleriyle (ES6\/ES2015, ES2016 vb.) dil s\u00fcrekli olarak geli\u015fmekte ve modern programlama paradigmalar\u0131na uyum sa\u011flamaktad\u0131r.<\/p>\n
JavaScript, web taray\u0131c\u0131lar\u0131n\u0131n i\u00e7erisinde bulunan \u00f6zel motorlar (\u00f6rne\u011fin Google Chrome i\u00e7in V8, Mozilla Firefox i\u00e7in SpiderMonkey) taraf\u0131ndan yorumlan\u0131r ve \u00e7al\u0131\u015ft\u0131r\u0131l\u0131r. Taray\u0131c\u0131, HTML ve CSS ile sayfan\u0131n yap\u0131s\u0131n\u0131 ve stilini olu\u015ftururken, JavaScript ile sayfan\u0131n davran\u0131\u015flar\u0131n\u0131, kullan\u0131c\u0131 etkile\u015fimlerini ve dinamik i\u00e7erik g\u00fcncellemelerini y\u00f6netir. Bu sayede, kullan\u0131c\u0131lar bir web sitesiyle etkile\u015fime ge\u00e7ti\u011finde sayfan\u0131n yeniden y\u00fcklenmesine gerek kalmadan an\u0131nda geri bildirim alabilirler.<\/p>\n
Her programlama dilinde oldu\u011fu gibi, JavaScript’in de kendine \u00f6zg\u00fc temel yap\u0131 ta\u015flar\u0131 vard\u0131r. Bu b\u00f6l\u00fcm, de\u011fi\u015fkenler, veri tipleri, operat\u00f6rler ve kontrol ak\u0131\u015f\u0131 gibi temel kavramlar\u0131 ele alacakt\u0131r.<\/p>\n
De\u011fi\u015fkenler, verileri depolamak i\u00e7in kullan\u0131lan isimlendirilmi\u015f kapsay\u0131c\u0131lard\u0131r. JavaScript’te de\u011fi\u015fken tan\u0131mlamak i\u00e7in JavaScript’te ba\u015fl\u0131ca veri tipleri \u015funlard\u0131r:<\/p>\n <\/code><\/p>\n Operat\u00f6rler, de\u011ferler \u00fczerinde i\u015flem yapmak i\u00e7in kullan\u0131l\u0131r. JavaScript'te aritmetik (+, -, *, \/, %), atama (=, +=, -=), kar\u015f\u0131la\u015ft\u0131rma (==, ===, !=, !==, >, <, >=, <=) ve mant\u0131ksal (&&, ||, !) operat\u00f6rler bulunur. \u00d6zellikle <\/code><\/p>\n Program\u0131n ak\u0131\u015f\u0131n\u0131 kontrol etmek i\u00e7in ko\u015fullu ifadeler ve d\u00f6ng\u00fcler kullan\u0131l\u0131r. D\u00f6ng\u00fcler, belirli bir kod blo\u011funu tekrar tekrar \u00e7al\u0131\u015ft\u0131rmak i\u00e7in kullan\u0131l\u0131r. JavaScript'teki yayg\u0131n d\u00f6ng\u00fcler \u015funlard\u0131r:<\/p>\n <\/code><\/p>\n Fonksiyonlar, belirli bir g\u00f6revi yerine getiren, tekrar kullan\u0131labilir kod bloklar\u0131d\u0131r. JavaScript'te fonksiyonlar birinci s\u0131n\u0131f vatanda\u015flard\u0131r, yani de\u011fi\u015fkenlere atanabilir, arg\u00fcman olarak ge\u00e7irilebilir ve fonksiyonlardan d\u00f6nd\u00fcr\u00fclebilirler.<\/p>\n JavaScript'te fonksiyon tan\u0131mlaman\u0131n birka\u00e7 yolu vard\u0131r:<\/p>\n <\/code><\/p>\n Kapsam, de\u011fi\u015fkenlerin ve fonksiyonlar\u0131n eri\u015filebilirli\u011fini belirler. JavaScript'te \u00fc\u00e7 t\u00fcr kapsam vard\u0131r:<\/p>\n Bir kapatma (closure), bir i\u00e7 fonksiyonun, tan\u0131mland\u0131\u011f\u0131 d\u0131\u015f fonksiyonun kapsam\u0131ndaki de\u011fi\u015fkenlere eri\u015febilmesi durumudur. Bu, fonksiyonlar\u0131n kendi ortamlar\u0131n\u0131 \"kapatmas\u0131\" anlam\u0131na gelir ve g\u00fc\u00e7l\u00fc soyutlamalar ve veri gizleme mekanizmalar\u0131 sa\u011flar.<\/p>\n <\/code><\/p>\n Y\u00fcksek mertebeden fonksiyonlar, ba\u015fka bir fonksiyonu arg\u00fcman olarak alan veya bir fonksiyon d\u00f6nd\u00fcren fonksiyonlard\u0131r. Bu kavram, fonksiyonel programlaman\u0131n temelini olu\u015fturur ve kodun daha mod\u00fcler, okunabilir ve yeniden kullan\u0131labilir olmas\u0131n\u0131 sa\u011flar. Dizilerle s\u0131k\u00e7a kullan\u0131lan <\/code><\/p>\n JavaScript'in web sayfalar\u0131n\u0131 dinamik hale getirmesinin ana yollar\u0131ndan biri, Document Object Model (DOM) ile etkile\u015fim kurmakt\u0131r. DOM, bir web sayfas\u0131n\u0131n yap\u0131land\u0131r\u0131lm\u0131\u015f bir temsilidir ve JavaScript'in HTML ve CSS \u00f6\u011felerine eri\u015fmesini, onlar\u0131 de\u011fi\u015ftirmesini ve yeni \u00f6\u011feler eklemesini sa\u011flar.<\/p>\n DOM, bir web sayfas\u0131n\u0131n \u00f6\u011felerini (HTML etiketleri, metinler, nitelikler) bir nesne a\u011fac\u0131 olarak temsil eder. JavaScript, Se\u00e7ilen DOM \u00f6\u011felerinin i\u00e7eri\u011fini, niteliklerini veya stilini de\u011fi\u015ftirmek m\u00fcmk\u00fcnd\u00fcr. Ayr\u0131ca, yeni HTML \u00f6\u011feleri olu\u015fturup mevcut sayfaya ekleyebilir veya mevcut \u00f6\u011feleri kald\u0131rabilirsiniz.<\/p>\n <\/code><\/p>\n Web sayfalar\u0131, kullan\u0131c\u0131 etkile\u015fimlerine (t\u0131klama, fare hareketi, klavye giri\u015fi) veya taray\u0131c\u0131 olaylar\u0131na (sayfa y\u00fcklenmesi, pencere boyutu de\u011fi\u015fimi) tepki verebilir. JavaScript, olay dinleyicileri (event listeners) kullanarak bu olaylar\u0131 yakalar ve belirli bir fonksiyonu \u00e7al\u0131\u015ft\u0131r\u0131r.<\/p>\n <\/code><\/p>\n JavaScript, tek i\u015f par\u00e7ac\u0131kl\u0131 (single-threaded) bir dildir. Bu, bir anda sadece tek bir i\u015flemin \u00e7al\u0131\u015fabilece\u011fi anlam\u0131na gelir. Ancak, a\u011f istekleri, dosya okuma\/yazma gibi uzun s\u00fcreli i\u015flemlerin ana i\u015f par\u00e7ac\u0131\u011f\u0131n\u0131 bloke etmesini \u00f6nlemek i\u00e7in asenkron programlama teknikleri kullan\u0131l\u0131r. Asenkron i\u015flemler, di\u011fer kodlar\u0131n \u00e7al\u0131\u015fmas\u0131na izin verirken arka planda \u00e7al\u0131\u015f\u0131r ve tamamland\u0131\u011f\u0131nda bir geri bildirim sa\u011flar.<\/p>\n Asenkron programlaman\u0131n ilk ve en temel yolu callback fonksiyonlar\u0131d\u0131r. Bir asenkron i\u015flem tamamland\u0131\u011f\u0131nda \u00e7al\u0131\u015ft\u0131r\u0131lacak fonksiyonu, o i\u015flemin arg\u00fcman\u0131 olarak ge\u00e7irirsiniz. Ancak, birden fazla i\u00e7 i\u00e7e asenkron i\u015flem oldu\u011funda \"Callback Hell\" (geri \u00e7a\u011f\u0131rma cehennemi) ad\u0131 verilen, okunmas\u0131 ve bak\u0131m\u0131 zor bir yap\u0131 ortaya \u00e7\u0131kabilir.<\/p>\n <\/code><\/p>\n ES6 ile birlikte gelen Promise'ler, asenkron i\u015flemlerin daha y\u00f6netilebilir ve okunabilir bir \u015fekilde ele al\u0131nmas\u0131n\u0131 sa\u011flar. Bir Promise, asenkron bir i\u015flemin nihai sonucunu (ba\u015far\u0131l\u0131 tamamlanma veya hata) temsil eden bir nesnedir. \u00dc\u00e7 durumu vard\u0131r: Promise'ler, <\/code><\/p>\n ES2017 ile tan\u0131t\u0131lan <\/code><\/p>\n JavaScript ekosistemi, ES6 ve sonraki s\u00fcr\u00fcmlerle birlikte b\u00fcy\u00fck bir evrim ge\u00e7irdi. Geli\u015ftiricilerin daha verimli ve \u00f6l\u00e7eklenebilir uygulamalar olu\u015fturmas\u0131n\u0131 sa\u011flayan bir\u00e7ok yeni \u00f6zellik, ara\u00e7 ve k\u00fct\u00fcphane ortaya \u00e7\u0131kt\u0131.<\/p>\n ES6 (ECMAScript 2015) ve sonraki s\u00fcr\u00fcmler, dile bir\u00e7ok \u00f6nemli \u00f6zellik ekledi:<\/p>\n Mod\u00fcller, kodunuzu k\u00fc\u00e7\u00fck, yeniden kullan\u0131labilir par\u00e7alara ay\u0131rman\u0131za olanak tan\u0131r. Bu, kodun daha d\u00fczenli, bak\u0131m\u0131 kolay ve \u00e7ak\u0131\u015fmalardan ar\u0131nd\u0131r\u0131lm\u0131\u015f olmas\u0131n\u0131 sa\u011flar. ES Modules (ESM), JavaScript'in kendi yerel mod\u00fcl sistemidir ve <\/code><\/p>\n Modern web geli\u015ftirme, genellikle bir JavaScript k\u00fct\u00fcphanesi veya framework'\u00fc kullan\u0131larak yap\u0131l\u0131r. Bu ara\u00e7lar, geli\u015ftirme s\u00fcrecini h\u0131zland\u0131r\u0131r, karma\u015f\u0131k UI'lar\u0131 y\u00f6netmeyi kolayla\u015ft\u0131r\u0131r ve daha iyi performans sa\u011flar.<\/p>\n Modern JavaScript projeleri, \u00e7e\u015fitli geli\u015ftirme ara\u00e7lar\u0131na ve paket y\u00f6neticilerine ihtiya\u00e7 duyar:<\/p>\nvar<\/code>, let<\/code> ve const<\/code> anahtar kelimeleri kullan\u0131l\u0131r. let<\/code> ve const<\/code> (ES6 ile gelen) blok kapsaml\u0131d\u0131r ve var<\/code>‘\u0131n baz\u0131 sorunlar\u0131n\u0131 \u00e7\u00f6zer. const<\/code> ise sabit de\u011ferler i\u00e7in kullan\u0131l\u0131r ve bir kez atand\u0131ktan sonra de\u011feri de\u011fi\u015ftirilemez.<\/p>\n\n
string<\/code> (metin), number<\/code> (say\u0131), boolean<\/code> (do\u011fru\/yanl\u0131\u015f), null<\/code> (bo\u015f de\u011fer), undefined<\/code> (tan\u0131ms\u0131z), symbol<\/code> (benzersiz de\u011fer), bigint<\/code> (b\u00fcy\u00fck tamsay\u0131lar).<\/li>\nobject<\/code> (nesneler, diziler, fonksiyonlar).<\/li>\n<\/ul>\nlet kullaniciAdi = \"Alice\"; \/\/ String\nconst yas = 30; \/\/ Number\nlet aktifMi = true; \/\/ Boolean\nlet bosDeger = null; \/\/ Null\nlet tanimsizDeger; \/\/ Undefined\n\nconst kisi = {\n ad: \"Mehmet\",\n soyad: \"Y\u0131lmaz\"\n}; \/\/ Object\n<\/pre>\n2.2. Operat\u00f6rler ve \u0130fadeler<\/h3>\n
==<\/code> (de\u011fer e\u015fitli\u011fi) ve ===<\/code> (de\u011fer ve tip e\u015fitli\u011fi) aras\u0131ndaki fark\u0131 anlamak \u00f6nemlidir.<\/p>\nlet a = 10;\nlet b = 5;\nlet toplam = a + b; \/\/ Aritmetik operat\u00f6r\nlet esitMi = (a === 10); \/\/ Kar\u015f\u0131la\u015ft\u0131rma operat\u00f6r\u00fc\nlet kosul = (toplam > 10 && esitMi); \/\/ Mant\u0131ksal operat\u00f6r\n<\/pre>\n2.3. Ko\u015fullu \u0130fadeler ve D\u00f6ng\u00fcler<\/h3>\n
if\/else if\/else<\/code> bloklar\u0131 belirli bir ko\u015fula g\u00f6re farkl\u0131 kod bloklar\u0131n\u0131 \u00e7al\u0131\u015ft\u0131rmay\u0131 sa\u011flar. switch<\/code> ifadesi ise birden fazla olas\u0131 durumu kontrol etmek i\u00e7in daha temiz bir yol sunar.<\/p>\n\n
for<\/code>: Belirli say\u0131da tekrar i\u00e7in.<\/li>\nwhile<\/code>: Bir ko\u015ful do\u011fru oldu\u011fu s\u00fcrece.<\/li>\ndo...while<\/code>: En az bir kez \u00e7al\u0131\u015f\u0131p sonra ko\u015fulu kontrol eden d\u00f6ng\u00fc.<\/li>\nfor...in<\/code>: Nesne \u00f6zelliklerini yinelemek i\u00e7in.<\/li>\nfor...of<\/code>: Yineleyebilir nesnelerin (diziler, stringler vb.) de\u011ferlerini yinelemek i\u00e7in (ES6).<\/li>\n<\/ul>\nif (yas >= 18) {\n console.log(\"Re\u015fitsiniz.\");\n} else {\n console.log(\"Re\u015fit de\u011filsiniz.\");\n}\n\nfor (let i = 0; i < 5; i++) {\n console.log(\"Say\u0131: \" + i);\n}\n<\/pre>\n3. Fonksiyonlar ve Kapsam Y\u00f6netimi<\/h2>\n
3.1. Fonksiyon Tan\u0131mlama Y\u00f6ntemleri<\/h3>\n
\n
this<\/code> ba\u011flam\u0131n\u0131 farkl\u0131 y\u00f6netir.<\/li>\n<\/ul>\n\/\/ Fonksiyon Bildirimi\nfunction selamVer(isim) {\n return \"Merhaba, \" + isim + \"!\";\n}\n\n\/\/ Fonksiyon \u0130fadesi\nconst topla = function(a, b) {\n return a + b;\n};\n\n\/\/ Ok Fonksiyonu\nconst carp = (x, y) => x * y;\n<\/pre>\n3.2. Kapsam (Scope) ve Kapatmalar (Closures)<\/h3>\n
\n
var<\/code>).<\/li>\nif<\/code>, for<\/code> gibi bloklar i\u00e7inde tan\u0131mlanan let<\/code> ve const<\/code> de\u011fi\u015fkenleri sadece o blok i\u00e7inde eri\u015filebilir.<\/li>\n<\/ul>\nfunction disFonksiyon(x) {\n let icDegisken = \"Merhaba\";\n function icFonksiyon(y) {\n console.log(icDegisken + \" \" + x + y);\n }\n return icFonksiyon;\n}\nconst kapatma = disFonksiyon(\"D\u00fcnya\");\nkapatma(\"!\"); \/\/ \u00c7\u0131kt\u0131: Merhaba D\u00fcnya!\n<\/pre>\n3.3. Y\u00fcksek Mertebeden Fonksiyonlar (Higher-Order Functions)<\/h3>\n
map<\/code>, filter<\/code>, reduce<\/code> gibi metotlar y\u00fcksek mertebeden fonksiyonlara \u00f6rnektir.<\/p>\nconst sayilar = [1, 2, 3, 4, 5];\n\n\/\/ map: Her eleman \u00fczerinde i\u015flem yap\u0131p yeni bir dizi d\u00f6nd\u00fcr\u00fcr\nconst kareler = sayilar.map(sayi => sayi * sayi); \/\/ [1, 4, 9, 16, 25]\n\n\/\/ filter: Belirli bir ko\u015fulu sa\u011flayan elemanlar\u0131 filtreler\nconst ciftSayilar = sayilar.filter(sayi => sayi % 2 === 0); \/\/ [2, 4]\n<\/pre>\n4. DOM Manip\u00fclasyonu ve Olay Y\u00f6netimi<\/h2>\n
4.1. DOM Nedir ve Nas\u0131l Eri\u015filir?<\/h3>\n
document<\/code> nesnesi arac\u0131l\u0131\u011f\u0131yla bu a\u011faca eri\u015febilir. En yayg\u0131n eri\u015fim metotlar\u0131 \u015funlard\u0131r:<\/p>\n\n
document.getElementById('id')<\/code>: Belirli bir ID'ye sahip \u00f6\u011feyi se\u00e7er.<\/li>\ndocument.querySelector('selector')<\/code>: CSS se\u00e7icisi kullanarak ilk e\u015fle\u015fen \u00f6\u011feyi se\u00e7er.<\/li>\ndocument.querySelectorAll('selector')<\/code>: CSS se\u00e7icisi kullanarak t\u00fcm e\u015fle\u015fen \u00f6\u011feleri bir NodeList olarak d\u00f6nd\u00fcr\u00fcr.<\/li>\ndocument.getElementsByClassName('class')<\/code>: Belirli bir s\u0131n\u0131fa sahip t\u00fcm \u00f6\u011feleri se\u00e7er.<\/li>\ndocument.getElementsByTagName('tag')<\/code>: Belirli bir HTML etiketine sahip t\u00fcm \u00f6\u011feleri se\u00e7er.<\/li>\n<\/ul>\n4.2. HTML \u00d6\u011felerini De\u011fi\u015ftirme ve Olu\u015fturma<\/h3>\n
\n
element.textContent<\/code>: \u00d6\u011fenin metin i\u00e7eri\u011fini al\u0131r veya ayarlar.<\/li>\nelement.innerHTML<\/code>: \u00d6\u011fenin HTML i\u00e7eri\u011fini al\u0131r veya ayarlar.<\/li>\nelement.setAttribute('name', 'value')<\/code>: \u00d6\u011feye yeni bir nitelik ekler veya mevcut niteli\u011fi g\u00fcnceller.<\/li>\nelement.classList.add('class')<\/code>, element.classList.remove('class')<\/code>: CSS s\u0131n\u0131flar\u0131n\u0131 y\u00f6netir.<\/li>\ndocument.createElement('tagName')<\/code>: Yeni bir HTML \u00f6\u011fesi olu\u015fturur.<\/li>\nparentElement.appendChild(childElement)<\/code>: Bir \u00f6\u011feyi ba\u015fka bir \u00f6\u011fenin sonuna ekler.<\/li>\nelement.remove()<\/code>: Bir \u00f6\u011feyi DOM'dan kald\u0131r\u0131r.<\/li>\n<\/ul>\n\/\/ Bir div'in i\u00e7eri\u011fini de\u011fi\u015ftirme\nconst baslik = document.getElementById('anaBaslik');\nbaslik.textContent = 'Yeni Ba\u015fl\u0131k!';\n\n\/\/ Yeni bir paragraf olu\u015fturup ekleme\nconst yeniParagraf = document.createElement('p');\nyeniParagraf.textContent = 'Bu, JavaScript ile eklenen yeni bir paragraf.';\ndocument.body.appendChild(yeniParagraf);\n<\/pre>\n4.3. Olay Dinleyicileri (Event Listeners)<\/h3>\n
element.addEventListener('event', function, [options])<\/code> metodu en yayg\u0131n kullan\u0131lan y\u00f6ntemdir. Yayg\u0131n olay t\u00fcrleri aras\u0131nda click<\/code>, mouseover<\/code>, keydown<\/code>, submit<\/code>, load<\/code> bulunur.<\/p>\nconst buton = document.getElementById('tiklaButonu');\n\nbuton.addEventListener('click', function() {\n alert('Butona t\u0131kland\u0131!');\n});\n\ndocument.addEventListener('keydown', function(event) {\n if (event.key === 'Enter') {\n console.log('Enter tu\u015funa bas\u0131ld\u0131.');\n }\n});\n<\/pre>\n5. Asenkron JavaScript: Web'in Duyarl\u0131 Kalmas\u0131n\u0131 Sa\u011flamak<\/h2>\n
5.1. Senkron ve Asenkron \u00c7al\u0131\u015fma Fark\u0131<\/h3>\n
\n
5.2. Callback Fonksiyonlar\u0131 ve Callback Hell<\/h3>\n
function veriGetir(callback) {\n setTimeout(() => {\n const veri = \"Sunucudan gelen veri\";\n callback(veri);\n }, 2000);\n}\n\nveriGetir(function(gelenVeri) {\n console.log(gelenVeri); \/\/ 2 saniye sonra \u00e7al\u0131\u015f\u0131r\n});\n<\/pre>\n5.3. Promise'ler: Asenkron Programlamaya \u00c7\u00f6z\u00fcm<\/h3>\n
pending<\/code> (beklemede), fulfilled<\/code> (ba\u015far\u0131l\u0131), rejected<\/code> (ba\u015far\u0131s\u0131z).<\/p>\n.then()<\/code> metoduyla ba\u015far\u0131l\u0131 sonu\u00e7lar\u0131, .catch()<\/code> metoduyla hatalar\u0131 ve .finally()<\/code> metoduyla her iki durumda da \u00e7al\u0131\u015facak kodu zincirleme (chaining) imkan\u0131 sunar.<\/p>\nfunction veriGetirPromise() {\n return new Promise((resolve, reject) => {\n setTimeout(() => {\n const basarili = true; \/\/ Ger\u00e7ek bir senaryoda bu bir API yan\u0131t\u0131 olabilir\n if (basarili) {\n resolve(\"Promise ile gelen veri\");\n } else {\n reject(\"Veri \u00e7ekilemedi!\");\n }\n }, 2000);\n });\n}\n\nveriGetirPromise()\n .then(veri => {\n console.log(veri);\n })\n .catch(hata => {\n console.error(hata);\n })\n .finally(() => {\n console.log(\"\u0130\u015flem tamamland\u0131.\");\n });\n<\/pre>\n5.4. Async\/Await: Promise'ler \u00dczerine Daha Okunabilir Bir Katman<\/h3>\n
async\/await<\/code> s\u00f6zdizimi, Promise'ler \u00fczerine in\u015fa edilmi\u015f, asenkron kodu senkron kod gibi yazmay\u0131 sa\u011flayan daha modern ve okunabilir bir yakla\u015f\u0131md\u0131r. Bir fonksiyonu async<\/code> olarak i\u015faretledi\u011finizde, i\u00e7inde await<\/code> anahtar kelimesini kullanabilirsiniz. await<\/code>, bir Promise'in \u00e7\u00f6z\u00fclmesini bekler ve Promise \u00e7\u00f6z\u00fcld\u00fc\u011f\u00fcnde de\u011ferini d\u00f6nd\u00fcr\u00fcr. Bu, Callback Hell veya Promise zincirlerinin karma\u015f\u0131kl\u0131\u011f\u0131n\u0131 b\u00fcy\u00fck \u00f6l\u00e7\u00fcde azalt\u0131r.<\/p>\nasync function veriIsle() {\n try {\n console.log(\"Veri \u00e7ekiliyor...\");\n const veri = await veriGetirPromise(); \/\/ Promise'in \u00e7\u00f6z\u00fclmesini bekler\n console.log(\"Gelen veri:\", veri);\n \/\/ await ile ba\u015fka asenkron i\u015flemler de yap\u0131labilir\n } catch (hata) {\n console.error(\"Bir hata olu\u015ftu:\", hata);\n }\n}\n\nveriIsle();\n<\/pre>\n6. Modern JavaScript Geli\u015ftirme ve Ekosistem<\/h2>\n
6.1. ES6+ (ECMAScript 2015 ve Sonras\u0131) Yenilikleri<\/h3>\n
\n
let<\/code> ve const<\/code>: Blok kapsaml\u0131 de\u011fi\u015fken tan\u0131mlama.<\/li>\nthis<\/code> ba\u011flam\u0131 y\u00f6netimi.<\/li>\nimport<\/code>\/export<\/code>).<\/li>\n<\/ul>\n6.2. Mod\u00fcl Sistemleri (ES Modules)<\/h3>\n
import<\/code> ve export<\/code> anahtar kelimelerini kullan\u0131r.<\/p>\n\/\/ utils.js\nexport function topla(a, b) {\n return a + b;\n}\n\nexport const PI = 3.14;\n\n\/\/ main.js\nimport { topla, PI } from '.\/utils.js';\n\nconsole.log(topla(5, 3)); \/\/ 8\nconsole.log(PI); \/\/ 3.14\n<\/pre>\n6.3. Pop\u00fcler JavaScript K\u00fct\u00fcphaneleri ve Frameworkleri<\/h3>\n
\n\n
\n \nFramework\/K\u00fct\u00fcphane<\/th>\n A\u00e7\u0131klama<\/th>\n Temel \u00d6zellikler<\/th>\n<\/tr>\n<\/thead>\n \n React<\/strong><\/td>\n Meta (Facebook) taraf\u0131ndan geli\u015ftirilen bir UI k\u00fct\u00fcphanesi.<\/td>\n Bile\u015fen tabanl\u0131, sanal DOM, tek y\u00f6nl\u00fc veri ak\u0131\u015f\u0131, JSX.<\/td>\n<\/tr>\n \n Angular<\/strong><\/td>\n Google taraf\u0131ndan geli\u015ftirilen kapsaml\u0131 bir framework.<\/td>\n MVC\/MVVM mimarisi, iki y\u00f6nl\u00fc veri ba\u011flama, TypeScript kullan\u0131m\u0131, CLI.<\/td>\n<\/tr>\n \n Vue.js<\/strong><\/td>\n Evan You taraf\u0131ndan geli\u015ftirilen a\u015famal\u0131 (progressive) bir framework.<\/td>\n Basit \u00f6\u011frenme e\u011frisi, bile\u015fen tabanl\u0131, sanal DOM, reaktif veri ba\u011flama.<\/td>\n<\/tr>\n \n Svelte<\/strong><\/td>\n Derleme zaman\u0131nda optimize edilmi\u015f, bile\u015fen tabanl\u0131 bir framework.<\/td>\n Ger\u00e7ek DOM manip\u00fclasyonu, runtime ba\u011f\u0131ml\u0131l\u0131\u011f\u0131 yok, daha k\u00fc\u00e7\u00fck bundle boyutlar\u0131.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n 6.4. Geli\u015ftirme Ara\u00e7lar\u0131 ve Paket Y\u00f6neticileri<\/h3>\n
\n
\n","protected":false},"excerpt":{"rendered":"JavaScript, g\u00fcn\u00fcm\u00fcz web d\u00fcnyas\u0131n\u0131n tart\u0131\u015fmas\u0131z en \u00f6nemli ve dinamik programlama dillerinden biridir. Ba\u015flang\u0131\u00e7ta web taray\u0131c\u0131lar\u0131nda interakt…","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-37086","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-javascript","7":"cs-entry","8":"cs-video-wrap"},"yoast_head":"\n