{"id":30858,"date":"2025-10-02T23:33:13","date_gmt":"2025-10-02T20:33:13","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/es6-nedir-modern-javascript-rehberi-temelden-ileri-seviyeye\/"},"modified":"2025-10-02T23:33:13","modified_gmt":"2025-10-02T20:33:13","slug":"es6-nedir-modern-javascript-rehberi-temelden-ileri-seviyeye","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/es6-nedir-modern-javascript-rehberi-temelden-ileri-seviyeye\/","title":{"rendered":"ES6 Nedir? Modern JavaScript Rehberi | Temelden \u0130leri Seviyeye"},"content":{"rendered":"

<\/p>\n

Web d\u00fcnyas\u0131 s\u00fcrekli evrim ge\u00e7irirken, JavaScript de bu de\u011fi\u015fime ayak uydurmak zorundayd\u0131. Y\u0131llarca web’in kalbinde yer alan JavaScript, \u00f6zellikle b\u00fcy\u00fck ve karma\u015f\u0131k uygulamalar\u0131n geli\u015ftirilmesinde baz\u0131 s\u0131n\u0131rlamalarla kar\u015f\u0131la\u015f\u0131yordu. \u0130\u015fte tam bu noktada, ECMAScript 2015 (ES6)<\/a> ad\u0131 verilen devrim niteli\u011findeki g\u00fcncelleme sahneye \u00e7\u0131kt\u0131. ES6, JavaScript’e getirdi\u011fi yeniliklerle, geli\u015ftiricilerin daha temiz, daha okunabilir ve daha s\u00fcrd\u00fcr\u00fclebilir kod yazmas\u0131na olanak tan\u0131yarak modern web geli\u015ftirme s\u00fcre\u00e7lerini k\u00f6kten de\u011fi\u015ftirdi. Bu rehberde, ES6’n\u0131n temel ta\u015flar\u0131n\u0131 s\u0131f\u0131rdan \u00f6\u011frenerek, mevcut JavaScript bilginizi en g\u00fcncel standartlara ta\u015f\u0131yacak ve projelerinize modern bir dokunu\u015f katacaks\u0131n\u0131z. G\u00fcn\u00fcm\u00fczde front-end framework’leri (React, Vue, Angular) ve Node.js tabanl\u0131 back-end geli\u015ftirmenin vazge\u00e7ilmez bir par\u00e7as\u0131 olan ES6, performans optimizasyonundan kod d\u00fczenine kadar bir\u00e7ok alanda size g\u00fc\u00e7 katacakt\u0131r. Peki, modern JavaScript d\u00fcnyas\u0131nda bir geli\u015ftirici olarak neden ES6’y\u0131 tam anlam\u0131yla bilmeniz gerekiyor? \u00c7\u00fcnk\u00fc ES6 sadece yeni \u00f6zellikler sunmakla kalm\u0131yor, ayn\u0131 zamanda JavaScript ile d\u00fc\u015f\u00fcnme ve problem \u00e7\u00f6zme \u015feklinizi de yeniden yap\u0131land\u0131r\u0131yor. Bu sayede, daha verimli, hatas\u0131z ve \u00f6l\u00e7eklenebilir uygulamalar geli\u015ftirebilirsiniz.<\/p>\n

ES6 ile birlikte gelen yenilikler, sadece s\u00f6zdizimsel kolayl\u0131klar de\u011fil, ayn\u0131 zamanda programlama paradigmalar\u0131nda da \u00f6nemli de\u011fi\u015fiklikler getirdi. \u00d6rne\u011fin, asenkron programlama ve mod\u00fcl y\u00f6netimi gibi kritik konularda sunulan \u00e7\u00f6z\u00fcmler, karma\u015f\u0131k uygulamalar\u0131n geli\u015ftirme ve bak\u0131m s\u00fcre\u00e7lerini b\u00fcy\u00fck \u00f6l\u00e7\u00fcde kolayla\u015ft\u0131rd\u0131. Art\u0131k bir JavaScript geli\u015ftiricisi, eski y\u00f6ntemlerle bo\u011fu\u015fmak yerine, ES6’n\u0131n sundu\u011fu modern ara\u00e7larla \u00e7ok daha h\u0131zl\u0131 ve etkili bir \u015fekilde projeler \u00fcretebiliyor. Bu makale, sizi bu modern JavaScript yolculu\u011funa \u00e7\u0131karacak, her bir ES6 \u00f6zelli\u011fini detayl\u0131 bir \u015fekilde a\u00e7\u0131klayacak ve ger\u00e7ek d\u00fcnya senaryolar\u0131yla peki\u015ftirecektir. Haz\u0131r olun, \u00e7\u00fcnk\u00fc kod yazma deneyiminiz ES6 ile bir \u00fcst seviyeye ta\u015f\u0131nacak ve modern web uygulamalar\u0131 geli\u015ftirmede rakiplerinizin \u00f6n\u00fcne ge\u00e7menizi sa\u011flayacak g\u00fc\u00e7l\u00fc bir bilgi birikimine sahip olacaks\u0131n\u0131z. Unutmay\u0131n, g\u00fcncel kalmak, yaz\u0131l\u0131m d\u00fcnyas\u0131nda ba\u015far\u0131n\u0131n anahtar\u0131d\u0131r ve ES6 bu anahtarlardan biridir. Bu rehber, ba\u015flang\u0131\u00e7 seviyesinden ileri d\u00fczeye kadar her geli\u015ftiricinin faydalanabilece\u011fi kapsaml\u0131 bir kaynak olmay\u0131 hedeflemektedir.<\/p>\n

ES6 ile Gelen Temel Yenilikler: Kodunuzu Nas\u0131l D\u00f6n\u00fc\u015ft\u00fcr\u00fcr?<\/h2>\n

ES6, JavaScript’e sadece birka\u00e7 yeni \u00f6zellik eklemekle kalmad\u0131; dilin temel yap\u0131s\u0131n\u0131 ve i\u015fleyi\u015fini k\u00f6kten de\u011fi\u015ftiren bir dizi yenilik sundu. Bu yenilikler, \u00f6zellikle b\u00fcy\u00fck \u00f6l\u00e7ekli ve karma\u015f\u0131k projelerde kod kalitesini, okunabilirli\u011fini ve bak\u0131m kolayl\u0131\u011f\u0131n\u0131 art\u0131rmay\u0131 hedefledi. ES6’n\u0131n getirdi\u011fi en temel ve s\u0131k kullan\u0131lan \u00f6zelliklerden baz\u0131lar\u0131, geli\u015ftiricilerin g\u00fcnl\u00fck kod yazma al\u0131\u015fkanl\u0131klar\u0131n\u0131 do\u011frudan etkiledi. \u00d6rne\u011fin, de\u011fi\u015fken tan\u0131mlama y\u00f6ntemlerinde yap\u0131lan de\u011fi\u015fiklikler, hatalar\u0131 azaltma ve kodun \u00f6ng\u00f6r\u00fclebilirli\u011fini art\u0131rma konusunda \u00f6nemli bir ad\u0131m oldu. Fonksiyonlar\u0131n yaz\u0131m \u015feklindeki sadele\u015fme, \u00f6zellikle callback’lerin yayg\u0131n oldu\u011fu asenkron i\u015flemlerde b\u00fcy\u00fck bir kolayl\u0131k sa\u011flad\u0131. Ayr\u0131ca, string manip\u00fclasyonu ve veri \u00e7\u0131karma gibi yayg\u0131n g\u00f6revlerde sunulan yeni ara\u00e7lar, kodun daha k\u0131sa ve anla\u015f\u0131l\u0131r olmas\u0131n\u0131n \u00f6n\u00fcn\u00fc a\u00e7t\u0131. Bu b\u00f6l\u00fcmde, ES6’n\u0131n temel ta\u015flar\u0131n\u0131 olu\u015fturan bu \u00f6nemli yeniliklere odaklanaca\u011f\u0131z ve her birinin neden bu kadar kritik oldu\u011funu ger\u00e7ek d\u00fcnya \u00f6rnekleriyle a\u00e7\u0131klayaca\u011f\u0131z. Modern JavaScript’in temelini anlamak i\u00e7in bu \u00f6zelliklere hakim olmak \u015fartt\u0131r.<\/p>\n

Bu temel yenilikler, geli\u015ftiricilerin kar\u015f\u0131la\u015ft\u0131\u011f\u0131 yayg\u0131n sorunlara modern \u00e7\u00f6z\u00fcmler sunar. Eski JavaScript s\u00fcr\u00fcmlerinde kar\u015f\u0131la\u015f\u0131lan ‘callback hell’ veya ‘variable hoisting’ gibi sorunlar, ES6 ile b\u00fcy\u00fck \u00f6l\u00e7\u00fcde giderilmi\u015ftir. Bu sayede, geli\u015ftiriciler daha az hata yapma e\u011filiminde olur ve daha sa\u011flam uygulamalar olu\u015fturabilirler. ES6’n\u0131n getirdi\u011fi bu yenilikler, ayn\u0131 zamanda JavaScript’i di\u011fer modern programlama dillerine daha da yakla\u015ft\u0131rarak, farkl\u0131 dillerden gelen geli\u015ftiricilerin adapte olmas\u0131n\u0131 kolayla\u015ft\u0131rm\u0131\u015ft\u0131r. Gelecekteki JavaScript s\u00fcr\u00fcmleri de bu ES6 temeli \u00fczerine in\u015fa edildi\u011fi i\u00e7in, bu \u00f6zellikleri sa\u011flam bir \u015fekilde kavramak, kariyerinizde sizi bir ad\u0131m \u00f6ne ta\u015f\u0131yacakt\u0131r. Her bir \u00f6zelli\u011fin derinlemesine incelenmesi, sadece nas\u0131l kullan\u0131laca\u011f\u0131n\u0131 de\u011fil, ayn\u0131 zamanda ne zaman ve neden kullan\u0131lmas\u0131 gerekti\u011fini de anlaman\u0131z\u0131 sa\u011flayacakt\u0131r.<\/p>\n

let<\/code> ve const<\/code> ile De\u011fi\u015fken Tan\u0131mlama: var<\/code>‘dan Fark\u0131 Nedir?<\/h3>\n

JavaScript’te ES6’dan \u00f6nce de\u011fi\u015fken tan\u0131mlaman\u0131n tek yolu var<\/code> anahtar kelimesini kullanmakt\u0131. Ancak var<\/code>‘\u0131n kendine \u00f6zg\u00fc baz\u0131 davran\u0131\u015flar\u0131, \u00f6zellikle b\u00fcy\u00fck kod tabanlar\u0131nda beklenmedik hatalara yol a\u00e7abiliyordu. En \u00f6nemlilerinden biri, var<\/code> ile tan\u0131mlanan de\u011fi\u015fkenlerin fonksiyon kapsam\u0131na (function scope) sahip olmas\u0131yd\u0131. Bu da bir for<\/code> d\u00f6ng\u00fcs\u00fcn\u00fcn veya bir if<\/code> blo\u011funun i\u00e7inde tan\u0131mlanan var<\/code> de\u011fi\u015fkeninin, o blo\u011fun d\u0131\u015f\u0131ndan da eri\u015filebilir oldu\u011fu anlam\u0131na geliyordu. Ayr\u0131ca, var<\/code> ile tan\u0131mlanan de\u011fi\u015fkenler “hoisting” ad\u0131 verilen bir mekanizma ile bildirildi\u011fi kapsam\u0131n en \u00fcst\u00fcne ta\u015f\u0131n\u0131r, bu da de\u011fi\u015fkenin tan\u0131mlanmadan \u00f6nce kullan\u0131lmas\u0131na izin verir ve kar\u0131\u015f\u0131kl\u0131klara yol a\u00e7abilirdi.<\/p>\n

ES6, bu sorunlara iki yeni anahtar kelime ile \u00e7\u00f6z\u00fcm getirdi: let<\/code> ve const<\/code>. Bu iki anahtar kelime de blok kapsam\u0131na (block scope) sahiptir. Yani, bir s\u00fcsl\u00fc parantez {}<\/code> blo\u011funun i\u00e7inde tan\u0131mlanan let<\/code> veya const<\/code> de\u011fi\u015fkeni, o blo\u011fun d\u0131\u015f\u0131ndan eri\u015filemez. Bu, kodun daha \u00f6ng\u00f6r\u00fclebilir olmas\u0131n\u0131 ve hata yapma olas\u0131l\u0131\u011f\u0131n\u0131 azalt\u0131r. \u00d6rne\u011fin, bir d\u00f6ng\u00fcde kullan\u0131lan bir saya\u00e7 de\u011fi\u015fkeninin d\u00f6ng\u00fc d\u0131\u015f\u0131nda yanl\u0131\u015fl\u0131kla eri\u015filmesini veya de\u011fi\u015ftirilmesini engeller. <\/p>\n

\u0130kinci \u00f6nemli fark, const<\/code> ile ilgilidir. const<\/code> ile tan\u0131mlanan de\u011fi\u015fkenlerin de\u011feri, tan\u0131mland\u0131ktan sonra de\u011fi\u015ftirilemez (constant – sabit). Bu, uygulaman\u0131zda sabit kalmas\u0131 gereken de\u011ferler (API anahtarlar\u0131, sabit URL’ler vb.) i\u00e7in idealdir ve kodunuzun daha g\u00fcvenli ve okunakl\u0131 olmas\u0131n\u0131 sa\u011flar. Ancak dikkat edilmesi gereken bir nokta var: E\u011fer const<\/code> ile bir nesne veya dizi tan\u0131mlarsan\u0131z, nesnenin kendisi de\u011fi\u015ftirilemezken, i\u00e7indeki \u00f6zellikler veya dizinin elemanlar\u0131 de\u011fi\u015ftirilebilir. \u00c7\u00fcnk\u00fc const<\/code>, de\u011fi\u015fkenin referans\u0131n\u0131n sabit oldu\u011funu garantiler, de\u011ferinin kendisinin de\u011fil. let<\/code> ise de\u011ferinin daha sonra de\u011fi\u015ftirilmesine izin verir; yani var<\/code> gibi ancak blok kapsaml\u0131d\u0131r. Modern JavaScript’te var<\/code> neredeyse hi\u00e7 kullan\u0131lmaz; genellikle bir de\u011ferin de\u011fi\u015fmeyece\u011fi durumlarda const<\/code>, de\u011fi\u015fece\u011fi durumlarda ise let<\/code> tercih edilir. Bu yakla\u015f\u0131m, kodun amac\u0131n\u0131 daha net bir \u015fekilde belirtir ve gelecekteki bak\u0131m\u0131n\u0131 kolayla\u015ft\u0131r\u0131r.<\/p>\n

\n\/\/ var ile \u00f6rnek\nfunction varScope() {\n    if (true) {\n        var x = 10;\n    }\n    console.log(x); \/\/ 10 (if blo\u011funun d\u0131\u015f\u0131ndan eri\u015filebilir)\n}\nvarScope();\n\n\/\/ let ile \u00f6rnek (Block Scope)\nfunction letScope() {\n    if (true) {\n        let y = 20;\n        console.log(y); \/\/ 20\n    }\n    \/\/ console.log(y); \/\/ Hata: y is not defined (if blo\u011fu d\u0131\u015f\u0131ndan eri\u015filemez)\n}\nletScope();\n\n\/\/ const ile \u00f6rnek (Sabit Referans)\nconst PI = 3.14159;\n\/\/ PI = 3.14; \/\/ Hata: Assignment to constant variable.\n\nconst user = {\n    name: \"Alice\",\n    age: 30\n};\nuser.age = 31; \/\/ \u0130zin verilir, \u00e7\u00fcnk\u00fc nesnenin referans\u0131 de\u011fil, i\u00e7eri\u011fi de\u011fi\u015fti.\nconsole.log(user.age); \/\/ 31\n\n\/\/ user = { name: \"Bob\", age: 25 }; \/\/ Hata: Assignment to constant variable.\n    <\/pre>\n
<\/code><\/p>\n
Ok Fonksiyonlar\u0131 (Arrow Functions<\/code>): Yaz\u0131m Kolayl\u0131\u011f\u0131 ve this<\/code> Ba\u011flam\u0131<\/h3>\n
Ok fonksiyonlar\u0131 (Arrow Functions), ES6'n\u0131n getirdi\u011fi en pop\u00fcler ve s\u0131k kullan\u0131lan \u00f6zelliklerden biridir. Geleneksel fonksiyon ifadelerine g\u00f6re daha k\u0131sa ve okunakl\u0131 bir s\u00f6zdizimi sunar. \u00d6zellikle callback fonksiyonlar\u0131n\u0131n yo\u011fun olarak kullan\u0131ld\u0131\u011f\u0131 durumlarda (\u00f6rne\u011fin, dizi metodlar\u0131 veya asenkron i\u015flemler) kodun sadele\u015fmesine b\u00fcy\u00fck katk\u0131 sa\u011flar. Ok fonksiyonlar\u0131, function<\/code> anahtar kelimesi yerine =><\/code> (ok) i\u015faretini kullan\u0131r ve fonksiyonun g\u00f6vdesi tek bir ifade ise s\u00fcsl\u00fc parantezlere ve return<\/code> anahtar kelimesine bile ihtiya\u00e7 duymaz.<\/p>\n
Ancak ok fonksiyonlar\u0131n\u0131n getirdi\u011fi en \u00f6nemli de\u011fi\u015fikliklerden biri, this<\/code> anahtar kelimesinin nas\u0131l davrand\u0131\u011f\u0131d\u0131r. Geleneksel fonksiyonlarda this<\/code>'in de\u011feri, fonksiyonun nas\u0131l \u00e7a\u011fr\u0131ld\u0131\u011f\u0131na ba\u011fl\u0131 olarak dinamik olarak de\u011fi\u015febilir. Bu durum, \u00f6zellikle nesne metodlar\u0131 veya event listener'lar i\u00e7inde this<\/code> kullan\u0131ld\u0131\u011f\u0131nda kafa kar\u0131\u015f\u0131kl\u0131klar\u0131na yol a\u00e7abilirdi. Geli\u015ftiriciler, this<\/code> ba\u011flam\u0131n\u0131 korumak i\u00e7in var self = this;<\/code> gibi ge\u00e7ici de\u011fi\u015fkenler veya bind()<\/code> metodu kullanmak zorunda kal\u0131rlard\u0131. Ok fonksiyonlar\u0131 ise kendi this<\/code> ba\u011flam\u0131n\u0131 olu\u015fturmazlar; bunun yerine, tan\u0131mland\u0131klar\u0131 kapsamdaki (lexical scope) this<\/code> de\u011ferini miras al\u0131rlar. Bu \"lexical this\" \u00f6zelli\u011fi, \u00f6zellikle React gibi k\u00fct\u00fcphanelerde veya DOM olay dinleyicilerinde this<\/code> ba\u011flam\u0131n\u0131 y\u00f6netmeyi son derece basitle\u015ftirir ve beklenmedik hatalar\u0131 \u00f6nler. Art\u0131k this<\/code>'in neye i\u015faret etti\u011fini tahmin etmek \u00e7ok daha kolay hale gelmi\u015ftir.<\/p>\n
Ok fonksiyonlar\u0131, \u00f6zellikle k\u0131sa ve tek kullan\u0131ml\u0131k fonksiyonlar i\u00e7in idealdir. \u00d6rne\u011fin, map()<\/code>, filter()<\/code>, reduce()<\/code> gibi dizi metodlar\u0131yla birlikte kullan\u0131ld\u0131\u011f\u0131nda kodunuzun ne kadar kompakt ve anlaml\u0131 hale geldi\u011fini g\u00f6rebilirsiniz. Ancak her zaman ok fonksiyonu kullanmak do\u011fru bir yakla\u015f\u0131m de\u011fildir. \u00d6rne\u011fin, bir nesnenin metodu olarak tan\u0131mland\u0131\u011f\u0131nda veya bir yap\u0131c\u0131 fonksiyon olarak kullan\u0131lmak istendi\u011finde geleneksel fonksiyon ifadeleri daha uygun olabilir, \u00e7\u00fcnk\u00fc ok fonksiyonlar\u0131 new<\/code> anahtar kelimesiyle kullan\u0131lamaz ve kendi arguments<\/code> nesnelerine sahip de\u011fildir. Bu nedenle, hangi durumda hangi fonksiyon tipini kullanaca\u011f\u0131n\u0131za karar vermek, modern JavaScript geli\u015ftiricili\u011fi i\u00e7in \u00f6nemli bir beceridir. Ok fonksiyonlar\u0131, kodunuzun ak\u0131\u015f\u0131n\u0131 h\u0131zland\u0131r\u0131r ve genel olarak daha deklaratif bir programlama stili benimsemenizi te\u015fvik eder. Bu sayede, fonksiyonlar\u0131n ne yapt\u0131\u011f\u0131n\u0131 anlamak, sadece s\u00f6zdizimine bakarak bile daha kolay hale gelir.<\/p>\n
\n\/\/ Geleneksel Fonksiyon \u00d6rne\u011fi\nconst addTraditional = function(a, b) {\n    return a + b;\n};\nconsole.log(addTraditional(2, 3)); \/\/ 5\n\n\/\/ Ok Fonksiyonu \u00d6rne\u011fi (tek ifade, return ve s\u00fcsl\u00fc parantez yok)\nconst addArrow = (a, b) => a + b;\nconsole.log(addArrow(5, 7)); \/\/ 12\n\n\/\/ Tek parametre i\u00e7in parantezlere gerek yok\nconst square = num => num * num;\nconsole.log(square(4)); \/\/ 16\n\n\/\/ this<\/code> ba\u011flam\u0131 \u00f6rne\u011fi\nfunction User(name) {\n    this.name = name;\n    this.sayHi = function() {\n        \/\/ Geleneksel fonksiyon: this<\/code> global objeyi veya undefined'\u0131 g\u00f6sterebilir.\n        \/\/ E\u011fer bu fonksiyon bir event listener i\u00e7inde \u00e7a\u011fr\u0131l\u0131rsa this<\/code> event hedefini g\u00f6sterebilir.\n        setTimeout(function() {\n            console.log(\"Merhaba, ben \" + this.name); \/\/ Hata veya \"Merhaba, ben undefined\" olabilir\n        }, 1000);\n    };\n    this.sayHiArrow = function() {\n        \/\/ Ok fonksiyonu: this<\/code>'i User nesnesinden miras al\u0131r.\n        setTimeout(() => {\n            console.log(\"Merhaba, ben \" + this.name); \/\/ \"Merhaba, ben Alice\"\n        }, 1000);\n    };\n}\n\nconst alice = new User(\"Alice\");\nalice.sayHiArrow(); \/\/ Do\u011fru \u00e7al\u0131\u015f\u0131r\nalice.sayHi();      \/\/ Muhtemelen yanl\u0131\u015f \u00e7al\u0131\u015f\u0131r, this<\/code> ba\u011flam\u0131 kaybedildi.\n\n\/\/ Dizi metodlar\u0131yla kullan\u0131m\nconst numbers = [1, 2, 3, 4, 5];\nconst doubled = numbers.map(num => num * 2);\nconsole.log(doubled); \/\/ [2, 4, 6, 8, 10]\n    <\/pre>\n
<\/code><\/p>\n
Modern Kod Yap\u0131 Ta\u015flar\u0131: Template Literals ve Destructuring'e Derin Bak\u0131\u015f<\/h2>\n
Modern JavaScript geli\u015ftiricili\u011finde, kodun okunabilirli\u011fini ve yaz\u0131m kolayl\u0131\u011f\u0131n\u0131 art\u0131ran iki g\u00fc\u00e7l\u00fc ES6 \u00f6zelli\u011fi \u00f6ne \u00e7\u0131kar: \u015eablon Dizgileri (Template Literals) ve Yap\u0131 Bozma (Destructuring). Bu \u00f6zellikler, \u00f6zellikle metin manip\u00fclasyonu ve karma\u015f\u0131k veri yap\u0131lar\u0131ndan bilgi \u00e7\u0131karma gibi yayg\u0131n g\u00f6revlerde geli\u015ftiricilere b\u00fcy\u00fck avantajlar sa\u011flar. Template Literals, ES6 \u00f6ncesinde string birle\u015ftirme i\u015flemlerinde kar\u015f\u0131la\u015f\u0131lan zorluklara ve hata yapma potansiyeline zarif bir \u00e7\u00f6z\u00fcm sunar. \u00c7ok sat\u0131rl\u0131 metinleri daha kolay yazma ve de\u011fi\u015fkenleri do\u011frudan string i\u00e7ine g\u00f6mme yetene\u011fi, \u00f6zellikle dinamik HTML \u00e7\u0131kt\u0131s\u0131 veya SQL sorgular\u0131 olu\u015fturan uygulamalarda kodun sadele\u015fmesine yol a\u00e7ar. Geleneksel string birle\u015ftirme y\u00f6ntemleri, \u00f6zellikle birden fazla de\u011fi\u015fkenin kar\u0131\u015ft\u0131\u011f\u0131 durumlarda +<\/code> operat\u00f6r\u00fcn\u00fcn yo\u011fun kullan\u0131m\u0131yla kodun okunabilirli\u011fini d\u00fc\u015f\u00fcr\u00fcrken, Template Literals bu sorunu ortadan kald\u0131r\u0131r. Bu \u00f6zellikler, temiz kod prensiplerini benimseyen her geli\u015ftiricinin ara\u00e7 kutusunda bulunmas\u0131 gereken temel unsurlard\u0131r.<\/p>\n
Destructuring ise, nesnelerden ve dizilerden veri \u00e7\u0131karmak i\u00e7in son derece kullan\u0131\u015fl\u0131 ve k\u0131sa bir s\u00f6zdizimi sunar. Eskiden, bir nesnenin bir\u00e7ok \u00f6zelli\u011fine veya bir dizinin belirli elemanlar\u0131na eri\u015fmek i\u00e7in her birine ayr\u0131 ayr\u0131 referans vermek gerekiyordu. Bu durum, \u00f6zellikle API yan\u0131tlar\u0131 gibi b\u00fcy\u00fck ve karma\u015f\u0131k veri yap\u0131lar\u0131yla \u00e7al\u0131\u015f\u0131rken kodun gereksiz yere uzamas\u0131na ve okunabilirli\u011finin azalmas\u0131na neden oluyordu. Destructuring, bu s\u00fcreci tek bir sat\u0131rda veya daha az kodla halletmenizi sa\u011flayarak, veriyi daha anlaml\u0131 ve kullan\u0131labilir hale getirir. Bu iki \u00f6zellik bir araya geldi\u011finde, modern JavaScript kodunuz sadece daha k\u0131sa de\u011fil, ayn\u0131 zamanda daha ifade edici ve hataya daha az a\u00e7\u0131k hale gelir. Bu b\u00f6l\u00fcmde, hem Template Literals hem de Destructuring'i detayl\u0131 \u00f6rneklerle inceleyecek, onlar\u0131n g\u00fcnl\u00fck geli\u015ftirme i\u015f ak\u0131\u015f\u0131n\u0131zda nas\u0131l bir fark yaratabilece\u011fini g\u00f6sterece\u011fiz. Her iki \u00f6zellik de kodunuzu g\u00fczelle\u015ftirmekle kalmayacak, ayn\u0131 zamanda geli\u015ftirme h\u0131z\u0131n\u0131z\u0131 da art\u0131racakt\u0131r.<\/p>\n
\u015eablon Dizgileri (Template Literals<\/code>): Dinamik \u0130\u00e7erik Olu\u015fturmay\u0131 Kolayla\u015ft\u0131r\u0131n<\/h3>\n
ES6 \u00f6ncesinde JavaScript'te dinamik metinler olu\u015fturmak, \u00f6zellikle birden fazla de\u011fi\u015fkenin veya ifadenin string i\u00e7ine g\u00f6m\u00fclmesi gerekti\u011finde olduk\u00e7a zahmetliydi. Geleneksel olarak +<\/code> operat\u00f6r\u00fc ile string birle\u015ftirme yap\u0131l\u0131rken, bu durum \u00f6zellikle uzun metinlerde veya \u00e7ok sat\u0131rl\u0131 HTML par\u00e7alar\u0131nda okunabilirlik sorunlar\u0131na yol a\u00e7\u0131yordu. \u00d6rne\u011fin, bir kullan\u0131c\u0131n\u0131n ad\u0131n\u0131 ve soyad\u0131n\u0131 i\u00e7eren bir kar\u015f\u0131lama mesaj\u0131 olu\u015fturmak i\u00e7in her de\u011fi\u015fkenin etraf\u0131na t\u0131rnak i\u015faretleri eklemek ve aralar\u0131na +<\/code> koymak gerekiyordu, bu da hata yapma potansiyelini art\u0131r\u0131yordu. Ayr\u0131ca, \u00e7ok sat\u0131rl\u0131 string'ler yazmak i\u00e7in her sat\u0131r\u0131n sonuna \\<\/code> (ters e\u011fik \u00e7izgi) eklemek veya +<\/code> ile birle\u015ftirmek, kodun karma\u015f\u0131kl\u0131\u011f\u0131n\u0131 art\u0131r\u0131yordu.<\/p>\n
\u015eablon Dizgileri (Template Literals<\/code>), bu sorunlara \u015f\u0131k ve g\u00fc\u00e7l\u00fc bir \u00e7\u00f6z\u00fcm sunar. Normal t\u0131rnak i\u015faretleri (''<\/code> veya \"\"<\/code>) yerine ters t\u0131rnak i\u015faretleri (backtick: ``) kullanarak tan\u0131mlan\u0131rlar. Bu sayede, string i\u00e7ine de\u011fi\u015fkenleri veya JavaScript ifadelerini do\u011frudan<\/code>${...}s\u00f6zdizimi ile g\u00f6mebilirsiniz. Bu \u00f6zellik, string interpolasyonu olarak bilinir ve kodunuzu \u00e7ok daha okunabilir ve y\u00f6netilebilir hale getirir. Art\u0131k<\/code>+operat\u00f6r\u00fcn\u00fc s\u00fcrekli kullanmak zorunda kalmadan, dinamik i\u00e7erikleri \u00e7ok daha sezgisel bir \u015fekilde olu\u015fturabilirsiniz. \u00d6zellikle dinamik HTML, e-posta \u015fablonlar\u0131 veya di\u011fer metin tabanl\u0131 \u00e7\u0131kt\u0131lar \u00fcretirken Template Literals, geli\u015ftiricilerin hayat\u0131n\u0131 b\u00fcy\u00fck \u00f6l\u00e7\u00fcde kolayla\u015ft\u0131r\u0131r.<\/p>\n
Bir di\u011fer \u00f6nemli avantaj\u0131 ise \u00e7ok sat\u0131rl\u0131 string'leri desteklemesidir. Ters t\u0131rnaklar aras\u0131na yazd\u0131\u011f\u0131n\u0131z metin, aynen yazd\u0131\u011f\u0131n\u0131z gibi yeni sat\u0131rlar\u0131 koruyarak string'e d\u00f6n\u00fc\u015ft\u00fcr\u00fcl\u00fcr. Bu, \u00f6zellikle HTML par\u00e7ac\u0131klar\u0131 veya SQL sorgular\u0131 gibi birden fazla sat\u0131rdan olu\u015fan metin bloklar\u0131n\u0131 JavaScript i\u00e7inde tan\u0131mlarken inan\u0131lmaz bir kolayl\u0131k sa\u011flar. Art\u0131k sat\u0131r sonu karakterleri i\u00e7in \u00f6zel ka\u00e7\u0131\u015f dizileri kullanmaya veya her sat\u0131r\u0131 tek tek birle\u015ftirmeye gerek kalmaz. Template Literals, ayn\u0131 zamanda \"tagged templates\" ad\u0131 verilen daha geli\u015fmi\u015f bir \u00f6zelli\u011fe de sahiptir. Bu \u00f6zellik, bir fonksiyonu template literal'\u0131n \u00f6n\u00fcne ekleyerek, string'i ayr\u0131\u015ft\u0131rma ve manip\u00fcle etme \u00fczerinde daha fazla kontrol sa\u011flar. Bu, g\u00fcvenlik filtreleme, uluslararas\u0131la\u015ft\u0131rma veya \u00f6zel formatlama gibi senaryolarda olduk\u00e7a g\u00fc\u00e7l\u00fc bir ara\u00e7 olabilir. K\u0131sacas\u0131, Template Literals, modern JavaScript'te string manip\u00fclasyonunun temelini olu\u015fturur ve kodunuzu daha temiz, dinamik ve hatas\u0131z hale getirir.<\/p>\n
\nconst name = \"Ali\";\nconst age = 28;\n\n\/\/ Geleneksel string birle\u015ftirme\nconst greetingOld = \"Merhaba, ben \" + name + \" ve \" + age + \" ya\u015f\u0131nday\u0131m.\";\nconsole.log(greetingOld); \/\/ Merhaba, ben Ali ve 28 ya\u015f\u0131nday\u0131m.\n\n\/\/ Template Literals ile string interpolasyonu\nconst greetingNew =<\/code>Merhaba, ben ${name} ve ${age} ya\u015f\u0131nday\u0131m.;\nconsole.log(greetingNew); \/\/ Merhaba, ben Ali ve 28 ya\u015f\u0131nday\u0131m.\n\n\/\/ \u00c7ok sat\u0131rl\u0131 string \u00f6rne\u011fi\nconst multiLineText =<\/code>\n    Bu \u00e7ok sat\u0131rl\u0131 bir metin \u00f6rne\u011fidir.\n    \u0130kinci sat\u0131ra ge\u00e7tik.\n    Hatta ${name}'in ya\u015f\u0131n\u0131 bile buraya ekleyebiliriz: ${age}.\n;\nconsole.log(multiLineText);\n\n\/\/ Dinamik HTML olu\u015fturma\nconst product = {\n    id: 101,\n    name: \"Ak\u0131ll\u0131 Telefon\",\n    price: 4999\n};\n\nconst productCard =<\/code>\n    
\n        
${product.name}<\/h3>\n        
\u00dcr\u00fcn Kodu: #${product.id}<\/p>\n        
Fiyat: ${product.price} TL<\/p>\n