Her g\u00fcn kulland\u0131\u011f\u0131m\u0131z JavaScript kodlar\u0131n\u0131n b\u00fcy\u00fck bir b\u00f6l\u00fcm\u00fc asl\u0131nda dilin s\u0131n\u0131rl\u0131 bir dizi \u00f6zelli\u011finden mi kaynaklan\u0131yor? Bu makale, pop\u00fcler %80\/20 kural\u0131n\u0131n JavaScript d\u00fcnyas\u0131ndaki yans\u0131malar\u0131n\u0131 derinlemesine inceliyor. Geli\u015ftiricilerin daha verimli, okunabilir ve s\u00fcrd\u00fcr\u00fclebilir kodlar yazmas\u0131na yard\u0131mc\u0131 olacak temel \u00f6zelliklere odaklanman\u0131n \u00f6nemini ke\u015ffedin, karma\u015f\u0131kl\u0131ktan ka\u00e7\u0131nma yollar\u0131n\u0131 \u00f6\u011frenin ve proje y\u00f6netiminde bu prensibin nas\u0131l uygulanabilece\u011fine dair pratik bilgiler edinin.<\/p>\n
JavaScript, g\u00fcn\u00fcm\u00fcz\u00fcn en dinamik ve yayg\u0131n kullan\u0131lan programlama dillerinden biri. S\u00fcrekli geli\u015fen ekosistemi, ES (ECMAScript) standartlar\u0131n\u0131n her y\u0131l yeni \u00f6zellikler sunmas\u0131yla birlikte adeta bir \u00f6zellikler denizi haline geldi. Ancak, bu zenginlik bazen geli\u015ftiricileri bunaltabilir: T\u00fcm bu \u00f6zellikleri \u00f6\u011frenmek zorunda m\u0131y\u0131z? Her projede en yeni ve en karma\u015f\u0131k ara\u00e7lar\u0131 kullanmal\u0131 m\u0131y\u0131z? \u0130\u015fte tam da bu noktada, geli\u015ftirme d\u00fcnyas\u0131nda s\u0131kl\u0131kla dile getirilen %80\/20 kural\u0131 veya Pareto Prensibi devreye giriyor. Bu ilke, genellikle sonu\u00e7lar\u0131n %80’inin nedenlerin %20’sinden kaynakland\u0131\u011f\u0131n\u0131 belirtir. JavaScript ba\u011flam\u0131nda ise bu, yazd\u0131\u011f\u0131m\u0131z kodun b\u00fcy\u00fck bir k\u0131sm\u0131n\u0131n (%80’inin) dilin sadece k\u00fc\u00e7\u00fck bir b\u00f6l\u00fcm\u00fcn\u00fc (%20’sini) olu\u015fturan temel ve yayg\u0131n \u00f6zelliklerden geldi\u011fi anlam\u0131na gelir.<\/p>\n
Peki, bu iddia ne kadar do\u011fru? Ger\u00e7ekten de, \u00e7o\u011fu modern web uygulamas\u0131nda kar\u015f\u0131la\u015ft\u0131\u011f\u0131m\u0131z i\u015flevselli\u011fin, karma\u015f\u0131k JavaScript \u00f6zelliklerinden ziyade de\u011fi\u015fken tan\u0131mlamalar\u0131, fonksiyonlar, d\u00f6ng\u00fcler, ko\u015fullu ifadeler ve dizi metotlar\u0131 gibi temel yap\u0131 ta\u015flar\u0131 \u00fczerinden in\u015fa edildi\u011fini g\u00f6zlemleyebiliriz. Elbette, JavaScript’in derinliklerinde gizlenmi\u015f bir\u00e7ok g\u00fc\u00e7l\u00fc ve ni\u015f \u00f6zellik var. Ancak bunlar\u0131n b\u00fcy\u00fck \u00e7o\u011funlu\u011fu, belirli performans optimizasyonlar\u0131, \u00f6zel veri yap\u0131lar\u0131 veya olduk\u00e7a spesifik senaryolar i\u00e7in ayr\u0131lm\u0131\u015ft\u0131r. G\u00fcndelik geli\u015ftirme ak\u0131\u015f\u0131nda, bu ileri d\u00fczey \u00f6zelliklerin tamam\u0131na ihtiya\u00e7 duymak nadirdir. Bu durum, \u00f6zellikle yeni ba\u015flayan geli\u015ftiriciler i\u00e7in bir rahatlama kayna\u011f\u0131 olabilir; \u00e7\u00fcnk\u00fc bu, dilin t\u00fcm inceliklerini bir anda \u00f6\u011frenmek yerine, \u00f6nce en s\u0131k kullan\u0131lan ve en etkili \u00f6zelliklere odaklanman\u0131n \u00e7ok daha mant\u0131kl\u0131 bir strateji oldu\u011fu anlam\u0131na gelir. Makalemizin ilerleyen b\u00f6l\u00fcmlerinde, bu %20’lik dilimin hangi \u00f6zelliklerden olu\u015ftu\u011funu, neden bu \u00f6zelliklere odaklanmam\u0131z gerekti\u011fini ve ileri d\u00fczey \u00f6zelliklerin ne zaman ve nas\u0131l devreye girebilece\u011fini detayl\u0131ca inceleyece\u011fiz. Bu sayede, hem kod kalitenizi art\u0131racak hem de geli\u015ftirme s\u00fcre\u00e7lerinizi daha verimli hale getireceksiniz. Sonu\u00e7 olarak, bu kurala uymak, kodunuzun daha s\u00fcrd\u00fcr\u00fclebilir, okunabilir ve performansl\u0131 olmas\u0131n\u0131 sa\u011flayacakt\u0131r. \u00d6zellikle ekip i\u00e7inde \u00e7al\u0131\u015f\u0131rken, herkesin anlayabilece\u011fi ortak bir dil olu\u015fturmak, proje h\u0131z\u0131n\u0131 ve kalitesini do\u011frudan etkiler.<\/p>\n
Herhangi bir disiplinde oldu\u011fu gibi, yaz\u0131l\u0131m geli\u015ftirme alan\u0131nda da baz\u0131 temel prensipleri anlamak, daha bilin\u00e7li ve etkili kararlar almam\u0131z\u0131 sa\u011flar. Bu ba\u011flamda, “Pareto Prensibi” veya “80\/20 Kural\u0131” ad\u0131n\u0131 s\u0131kl\u0131kla duyars\u0131n\u0131z. \u0130talyan ekonomist Vilfredo Pareto taraf\u0131ndan g\u00f6zlemlenen bu ilke, pek \u00e7ok durumda sonu\u00e7lar\u0131n yakla\u015f\u0131k %80’inin nedenlerin yakla\u015f\u0131k %20’sinden kaynakland\u0131\u011f\u0131n\u0131 belirtir. \u00d6rne\u011fin, bir \u015firketin cirosunun %80’i m\u00fc\u015fterilerinin %20’sinden gelirken, bir yaz\u0131l\u0131m projesindeki hatalar\u0131n %80’i kodun %20’sinde yo\u011funla\u015fabilir. Peki, bu prensibi JavaScript’e nas\u0131l uygulayabiliriz?<\/p>\n
JavaScript ekosisteminde “\u00f6zellikler” kavram\u0131 olduk\u00e7a geni\u015f bir alan\u0131 kapsar. Bu, sadece dilin temel yap\u0131 ta\u015flar\u0131 olan de\u011fi\u015fken tan\u0131mlamalar\u0131 ( Bizim “\u00e7ekirdek %20” olarak adland\u0131rd\u0131\u011f\u0131m\u0131z k\u0131s\u0131m, genellikle bir web uygulamas\u0131n\u0131n temel mant\u0131\u011f\u0131n\u0131, veri ak\u0131\u015f\u0131n\u0131 ve kullan\u0131c\u0131 aray\u00fcz\u00fc etkile\u015fimlerini y\u00f6netmek i\u00e7in kullan\u0131lan \u00f6zelliklerdir. Bu \u00f6zellikler, hem \u00f6\u011frenmesi g\u00f6rece kolay hem de herhangi bir projenin bel kemi\u011fini olu\u015fturacak kadar g\u00fc\u00e7l\u00fcd\u00fcr. \u00d6te yandan, JavaScript’in daha az bilinen veya “ni\u015f” olarak adland\u0131rabilece\u011fimiz \u00f6zellikleri, genellikle performans optimizasyonu, meta-programlama, karma\u015f\u0131k prototip zinciri manip\u00fclasyonlar\u0131 veya belirli taray\u0131c\u0131 API’leri gibi \u00f6zelle\u015fmi\u015f senaryolara hizmet eder. \u00d6rne\u011fin, Modern JavaScript geli\u015ftiricisinin “mutlaka bilmesi gerekenler” listesi, dilin sundu\u011fu zengin \u00f6zellikler havuzunda belirli bir oranda yo\u011funla\u015f\u0131r. Bu %20’lik dilim, bir web uygulamas\u0131n\u0131n i\u015flevselli\u011finin b\u00fcy\u00fck \u00e7o\u011funlu\u011funu olu\u015fturur ve kodun okunabilirli\u011fini, bak\u0131m\u0131n\u0131 ve performans\u0131n\u0131 do\u011frudan etkiler. \u0130\u015fte bu vazge\u00e7ilmez \u00f6zelliklerden baz\u0131lar\u0131 ve neden bu kadar kritik olduklar\u0131:<\/p>\n <\/code>\n <\/li>\n <\/code>\n <\/li>\n <\/code>\n <\/li>\n <\/code>\n <\/li>\n <\/code>\n <\/li>\n <\/code>\n <\/li>\n <\/code>\n <\/li>\n<\/ol>\n Bu \u00f6zellikler, modern JavaScript geli\u015ftirmenin temelini olu\u015fturur. Bu \u00f6zelliklere hakim olmak, bir geli\u015ftiricinin herhangi bir projede h\u0131zl\u0131ca adapte olabilmesini ve \u00fcretken olabilmesini sa\u011flar. Karma\u015f\u0131k bir framework (React, Vue, Angular) kullan\u0131yor olsan\u0131z bile, bu temel dil \u00f6zelliklerine s\u0131k\u00e7a ba\u015fvuraca\u011f\u0131n\u0131z\u0131 g\u00f6receksiniz. Bu %20'lik dilim, sadece kod yazma h\u0131z\u0131n\u0131z\u0131 art\u0131rmakla kalmaz, ayn\u0131 zamanda yazd\u0131\u011f\u0131n\u0131z kodun daha temiz, daha anla\u015f\u0131l\u0131r ve dolay\u0131s\u0131yla daha kolay bak\u0131m\u0131 yap\u0131labilir olmas\u0131n\u0131 da sa\u011flar. \u00d6zellikle yeni ba\u015flayanlar i\u00e7in bu \u00e7ekirdek \u00f6zelliklere odaklanmak, dilin geri kalan\u0131n\u0131 \u00f6\u011frenmek i\u00e7in sa\u011flam bir temel olu\u015fturacakt\u0131r. Bu sayede gereksiz \u00f6zelliklerin karma\u015f\u0131kl\u0131\u011f\u0131na kap\u0131lmadan, sa\u011flam bir geli\u015fim g\u00f6sterebilirsiniz.<\/p>\n JavaScript'in zengin \u00f6zellikleri aras\u0131nda, her birinin kendine \u00f6zg\u00fc bir kullan\u0131m alan\u0131 oldu\u011fu do\u011frudur. Ancak, baz\u0131 \u00f6zellikler modern geli\u015ftirme pratiklerinde ya eskimi\u015f, ya da belirli performans veya okunabilirlik sorunlar\u0131na yol a\u00e7t\u0131\u011f\u0131 i\u00e7in genellikle ka\u00e7\u0131n\u0131lmas\u0131 gerekenler listesine girmi\u015ftir. Bu \"az bilinen\" veya \"ni\u015f\" \u00f6zelliklere gere\u011finden fazla odaklanmak, gereksiz karma\u015f\u0131kl\u0131k yaratabilir, kodun bak\u0131m\u0131n\u0131 zorla\u015ft\u0131rabilir ve hatta g\u00fcvenlik a\u00e7\u0131klar\u0131na yol a\u00e7abilir. \u0130\u015fte bu t\u00fcr \u00f6zelliklerden baz\u0131lar\u0131 ve neden dikkatli olman\u0131z gerekti\u011fi:<\/p>\n <\/code> <\/code> <\/code>\n <\/li>\n <\/code>\n <\/li>\n <\/code>\n <\/li>\n<\/ol>\n Bu \u00f6zelliklerin tuzaklar\u0131, sadece kodu daha karma\u015f\u0131k hale getirmekle kalmaz, ayn\u0131 zamanda potansiyel hatalara ve bak\u0131m zorluklar\u0131na da yol a\u00e7ar. Bir ekip ortam\u0131nda, herkesin bu ni\u015f \u00f6zelliklere hakim olmas\u0131 beklenemez, bu da kod incelemelerini ve i\u015fbirli\u011fini zorla\u015ft\u0131r\u0131r. Ayr\u0131ca, baz\u0131 eski veya az kullan\u0131lan \u00f6zellikler, modern JavaScript motorlar\u0131nda optimal performans sunmayabilir. Dolay\u0131s\u0131yla, bir \u00f6zelli\u011fi kullanmadan \u00f6nce her zaman \"Bu, sorunu \u00e7\u00f6zmenin en basit, en okunabilir ve en s\u00fcrd\u00fcr\u00fclebilir yolu mu?\" sorusunu sormak \u00f6nemlidir. \u00c7o\u011fu durumda, %20'lik \u00e7ekirdek \u00f6zellikler bu sorunun cevab\u0131n\u0131 verecektir.<\/p>\n B\u00fcy\u00fck \u00f6l\u00e7ekli bir projede, \u00f6rne\u011fin bir e-ticaret platformunun frontend k\u0131sm\u0131nda, %80\/20 kural\u0131n\u0131n nas\u0131l uyguland\u0131\u011f\u0131n\u0131 g\u00f6rmek, teoriyi prati\u011fe d\u00f6kmek i\u00e7in harika bir yoldur. Hayal edin ki, m\u00fc\u015fteri sipari\u015flerini y\u00f6neten, \u00fcr\u00fcn kataloglar\u0131n\u0131 listeleyen ve kullan\u0131c\u0131 deneyimini zenginle\u015ftiren dinamik bir aray\u00fcz geli\u015ftiriyoruz. Bu t\u00fcr bir projenin b\u00fcy\u00fck bir k\u0131sm\u0131, JavaScript'in temel \u00f6zellikleriyle kolayca in\u015fa edilebilir.<\/p>\n M\u00fc\u015fteri paneli, sipari\u015f ge\u00e7mi\u015fini g\u00f6stermek, ki\u015fisel bilgileri g\u00fcncellemek ve favori \u00fcr\u00fcnleri listelemek gibi i\u015flevler i\u00e7erir. \u00dcr\u00fcn listeleme sayfas\u0131 ise, filtreleme, s\u0131ralama ve \u00fcr\u00fcn detaylar\u0131n\u0131 g\u00f6r\u00fcnt\u00fcleme imkanlar\u0131 sunar. Bu iki kritik alanda bile, kodun b\u00fcy\u00fck bir \u00e7o\u011funlu\u011fu \u015fu temel \u00f6zelliklere dayan\u0131r:<\/p>\n <\/code><\/p>\n ${product.description}<\/p>\n $${product.price.toFixed(2)}<\/span>\n let<\/code>, const<\/code>), fonksiyonlar (function<\/code>, arrow functions), d\u00f6ng\u00fcler (for<\/code>, while<\/code>, for...of<\/code>) ve ko\u015fullu ifadeler (if<\/code>, else if<\/code>, switch<\/code>) gibi dilbilgisel \u00f6\u011felerden ibaret de\u011fildir. Ayn\u0131 zamanda, ECMAScript standartlar\u0131yla gelen modern yap\u0131lar (Promise’ler, async\/await<\/code>, mod\u00fcller, destructuring), Web API’leri (DOM manipulasyonu, fetch<\/code> API, localStorage) ve hatta Node.js gibi \u00e7al\u0131\u015fma zamanlar\u0131n\u0131n sa\u011flad\u0131\u011f\u0131 API’ler (fs<\/code> mod\u00fcl\u00fc, http<\/code> mod\u00fcl\u00fc) gibi unsurlar\u0131 da i\u00e7erir. Bu kadar geni\u015f bir yelpaze i\u00e7inde, do\u011fal olarak baz\u0131 \u00f6zellikler di\u011ferlerinden \u00e7ok daha s\u0131k kullan\u0131l\u0131rken, baz\u0131lar\u0131 belirli ni\u015f durumlar i\u00e7in sakl\u0131 kal\u0131r.<\/p>\nProxy<\/code> ve Reflect<\/code> API’leri, nesne etkile\u015fimlerini derinlemesine kontrol etmek i\u00e7in inan\u0131lmaz g\u00fc\u00e7l\u00fc ara\u00e7lar olsa da, \u00e7o\u011fu uygulaman\u0131n ana i\u015flevselli\u011fi i\u00e7in do\u011frudan gerekli de\u011fildir. Benzer \u015fekilde, bitwise operat\u00f6rler veya with<\/code> ifadesi gibi \u00f6zellikler, modern JavaScript geli\u015ftirme pratiklerinde nadiren kullan\u0131l\u0131r ve hatta baz\u0131lar\u0131 k\u00f6t\u00fc pratik olarak kabul edilir. Bu temel ayr\u0131m\u0131 anlamak, geli\u015ftiricilerin \u00f6\u011frenme \u00f6nceliklerini belirlemesine, daha s\u00fcrd\u00fcr\u00fclebilir kod yazmas\u0131na ve gereksiz karma\u015f\u0131kl\u0131ktan ka\u00e7\u0131nmas\u0131na yard\u0131mc\u0131 olur. Sonu\u00e7 olarak, Pareto Prensibi, JavaScript’teki \u00f6\u011frenme ve geli\u015ftirme s\u00fcrecinizi y\u00f6nlendiren g\u00fc\u00e7l\u00fc bir k\u0131lavuz g\u00f6revi g\u00f6r\u00fcr.<\/p>\nModern JavaScript’in Vazge\u00e7ilmez %20’lik Dilimi Hangi \u00d6zellikleri Kapsar?<\/h2>\n
\n
let<\/code> ve const<\/code>):<\/strong> var<\/code>‘\u0131n blok kapsaml\u0131 olmamas\u0131 nedeniyle yol a\u00e7t\u0131\u011f\u0131 sorunlar\u0131n \u00fcstesinden gelmek i\u00e7in let<\/code> ve const<\/code> tan\u0131t\u0131ld\u0131. const<\/code>, sabit de\u011ferler i\u00e7in tercih edilirken, let<\/code> yeniden atanabilir de\u011fi\u015fkenler i\u00e7in kullan\u0131l\u0131r. Bu, kodun daha \u00f6ng\u00f6r\u00fclebilir olmas\u0131n\u0131 sa\u011flar.\n\nconst userName = \"Alice\";\nlet userAge = 30;\n\nif (true) {\n let userAge = 31; \/\/ Farkl\u0131 bir kapsamda yeni bir userAge\n console.log(userAge); \/\/ 31\n}\nconsole.log(userAge); \/\/ 30\n<\/pre>\nthis<\/code> ba\u011flam\u0131n\u0131n daha \u00f6ng\u00f6r\u00fclebilir olmas\u0131 nedeniyle pop\u00fclerdir. \u00d6zellikle callback fonksiyonlar\u0131 i\u00e7in idealdirler.\n\nconst sum = (a, b) => a + b;\nconsole.log(sum(5, 3)); \/\/ 8\n\n\/\/ 'this' ba\u011flam\u0131 \u00f6rne\u011fi\nconst person = {\n name: \"Bob\",\n greet: function() {\n setTimeout(() => {\n console.log(Merhaba, ben ${this.name}<\/code>); \/\/ 'this', person objesine ba\u011fl\u0131 kal\u0131r\n }, 1000);\n }\n};\nperson.greet();\n<\/pre>\nmap<\/code>, filter<\/code>, reduce<\/code>, forEach<\/code>, find<\/code>):<\/strong> Dizilerle \u00e7al\u0131\u015f\u0131rken d\u00f6ng\u00fclerden \u00e7ok daha fonksiyonel ve okunabilir bir yakla\u015f\u0131m sunarlar. Veri d\u00f6n\u00fc\u015f\u00fcm\u00fc, filtreleme ve toplama i\u015flemleri i\u00e7in vazge\u00e7ilmezdir.\n\nconst numbers = [1, 2, 3, 4, 5];\n\nconst doubled = numbers.map(num => num * 2); \/\/ [2, 4, 6, 8, 10]\nconst evens = numbers.filter(num => num % 2 === 0); \/\/ [2, 4]\nconst sumOfNumbers = numbers.reduce((acc, num) => acc + num, 0); \/\/ 15\n<\/pre>\n\nasync function fetchData(url) {\n try {\n const response = await fetch(url);\n const data = await response.json();\n console.log(data);\n } catch (error) {\n console.error(\"Veri \u00e7ekme hatas\u0131:\", error);\n }\n}\nfetchData(\"https:\/\/jsonplaceholder.typicode.com\/todos\/1\");\n<\/pre>\nimport<\/code>\/export<\/code>):<\/strong> Kodun par\u00e7alara ayr\u0131lmas\u0131n\u0131 ve tekrar kullan\u0131labilir olmas\u0131n\u0131 sa\u011flar. B\u00fcy\u00fck projelerde kod organizasyonu i\u00e7in hayati \u00f6neme sahiptir.\n\n\/\/ utils.js\nexport const PI = 3.14;\nexport function add(a, b) {\n return a + b;\n}\n\n\/\/ main.js\nimport { PI, add } from '.\/utils.js';\nconsole.log(PI); \/\/ 3.14\nconsole.log(add(2, 3)); \/\/ 5\n<\/pre>\n\nconst name = \"Ay\u015fe\";\nconst age = 25;\nconst greeting = Merhaba, benim ad\u0131m ${name} ve ${age} ya\u015f\u0131nday\u0131m.<\/code>;\nconsole.log(greeting); \/\/ Merhaba, benim ad\u0131m Ay\u015fe ve 25 ya\u015f\u0131nday\u0131m.\n<\/pre>\n\nconst user = { firstName: \"Ali\", lastName: \"Can\", role: \"admin\" };\nconst { firstName, role } = user;\nconsole.log(firstName); \/\/ Ali\nconsole.log(role); \/\/ admin\n\nconst colors = [\"red\", \"green\", \"blue\"];\nconst [firstColor, secondColor] = colors;\nconsole.log(firstColor); \/\/ red\n<\/pre>\nGereksiz Karma\u015f\u0131kl\u0131ktan Nas\u0131l Ka\u00e7\u0131n\u0131l\u0131r? Az Bilinen \u00d6zelliklerin Tuzaklar\u0131 Nelerdir?<\/h2>\n
\n
with<\/code> ifadesi:<\/strong> Bu ifade, bir nesnenin \u00f6zelliklerine do\u011frudan eri\u015fim sa\u011flamak i\u00e7in kullan\u0131l\u0131r, ancak ciddi okunabilirlik ve performans sorunlar\u0131na yol a\u00e7ar. Kapsam zincirini de\u011fi\u015ftirdi\u011fi i\u00e7in hangi de\u011fi\u015fkenin nereden geldi\u011fini anlamak zorla\u015f\u0131r ve kodun optimizasyonunu g\u00fc\u00e7le\u015ftirir.\n\n\/\/ Ka\u00e7\u0131n\u0131lmas\u0131 gereken bir kullan\u0131m!\nconst user = { name: \"John\", age: 30 };\nwith (user) {\n console.log(name); \/\/ John (user.name'e eri\u015fildi)\n}\n<\/pre>\n
\n Modern alternatif: Destructuring veya do\u011frudan nesne \u00f6zelliklerine eri\u015fim.\n <\/li>\neval()<\/code> fonksiyonu:<\/strong> Bir string olarak ge\u00e7irilen JavaScript kodunu \u00e7al\u0131\u015ft\u0131r\u0131r. G\u00fcvenlik a\u00e7\u0131klar\u0131 (injection), performans sorunlar\u0131 ve hata ay\u0131klama zorlu\u011fu nedeniyle \u015fiddetle ka\u00e7\u0131n\u0131lmas\u0131 gereken bir fonksiyondur.\n\n\/\/ ASLA YAPMAYIN!\nconst code = \"console.log('Tehlikeli Kod');\";\neval(code);\n<\/pre>\n
\n Modern alternatif: Genellikle dinamik kod \u00e7al\u0131\u015ft\u0131rmak yerine, i\u015flevsel programlama veya uygun API'ler kullan\u0131l\u0131r.\n <\/li>\narguments<\/code> nesnesi:<\/strong> Bir fonksiyonun t\u00fcm arg\u00fcmanlar\u0131na indeks tabanl\u0131 eri\u015fim sa\u011flar. Ancak, bir dizi de\u011fildir ve modern JavaScript'te rest parametreleri (...args<\/code>) \u00e7ok daha esnek, okunabilir ve performansl\u0131 bir alternatif sunar.\n\nfunction logArgs() {\n console.log(arguments); \/\/ [Arguments] { '0': 1, '1': 2, '2': 3 }\n}\nlogArgs(1, 2, 3);\n\nfunction logArgsModern(...args) {\n console.log(args); \/\/ [1, 2, 3] (Ger\u00e7ek bir dizi)\n}\nlogArgsModern(1, 2, 3);\n<\/pre>\n&<\/code>, |<\/code>, ^<\/code>, ~<\/code>, <<<\/code>, >><\/code>, >>><\/code>):<\/strong> Bu operat\u00f6rler, say\u0131lar\u0131n ikili temsilcileri \u00fczerinde i\u015flem yapmak i\u00e7in kullan\u0131l\u0131r. Genellikle d\u00fc\u015f\u00fck seviyeli programlamada veya belirli performans optimizasyonlar\u0131nda (\u00f6rn. grafik i\u015flemleri) yararl\u0131 olsalar da, genel web geli\u015ftirme senaryolar\u0131nda nadiren ihtiya\u00e7 duyulur ve kodu anla\u015f\u0131lmaz hale getirebilirler.\n\n\/\/ \u00d6zel durumlarda kullan\u0131l\u0131r, genel web'de nadir\nconsole.log(5 & 1); \/\/ 1 (0101 & 0001 = 0001)\n<\/pre>\nProxy<\/code> ve Reflect<\/code> API'leri (Gereksiz kullan\u0131mda):<\/strong> Bunlar, nesne etkile\u015fimlerini (eri\u015fim, atama, fonksiyon \u00e7a\u011fr\u0131s\u0131 vb.) yakalay\u0131p de\u011fi\u015ftirmek i\u00e7in son derece g\u00fc\u00e7l\u00fc meta-programlama ara\u00e7lar\u0131d\u0131r. Ancak, \u00e7o\u011fu uygulamada bu seviyede bir kontrole ihtiya\u00e7 duyulmaz ve yanl\u0131\u015f kullan\u0131ld\u0131\u011f\u0131nda kodu anla\u015f\u0131lmas\u0131 \u00e7ok zor bir hale getirebilir. K\u00fct\u00fcphane yazarlar\u0131 veya \u00f6zel framework'ler i\u00e7in idealdir, g\u00fcnl\u00fck geli\u015ftirme i\u00e7in nadiren.\n\n\/\/ Karma\u015f\u0131k bir kullan\u0131m \u00f6rne\u011fi - genellikle k\u00fct\u00fcphanelerde g\u00f6r\u00fcl\u00fcr\nconst handler = {\n get: function(obj, prop) {\n if (prop === 'name') {\n return Ho\u015f Geldin, ${obj[prop]}<\/code>;\n }\n return Reflect.get(obj, prop);\n }\n};\nconst user = new Proxy({ name: 'Murat' }, handler);\nconsole.log(user.name); \/\/ Ho\u015f Geldin, Murat\n<\/pre>\nVaka Analizi: B\u00fcy\u00fck Bir Projede %80\/20 Kural\u0131 Uygulamas\u0131 Nas\u0131l G\u00f6r\u00fcn\u00fcr?<\/h2>\n
M\u00fc\u015fteri Paneli ve \u00dcr\u00fcn Listeleme Senaryosu<\/h3>\n
\n
\n
fetch<\/code> API ve async\/await<\/code>: Sipari\u015f ge\u00e7mi\u015fi veya \u00fcr\u00fcn kataloglar\u0131n\u0131 bir API'den asenkron olarak \u00e7ekmek i\u00e7in kullan\u0131l\u0131r.<\/li>\n\nasync function getOrders(userId) {\n try {\n const response = await fetch(\/api\/users\/${userId}\/orders<\/code>);\n if (!response.ok) {\n throw new Error(HTTP hata! Durum: ${response.status}<\/code>);\n }\n const orders = await response.json();\n return orders;\n } catch (error) {\n console.error(\"Sipari\u015fler y\u00fcklenirken hata olu\u015ftu:\", error);\n return [];\n }\n}\n<\/pre>\nlet<\/code> ve const<\/code>: \u00c7ekilen veriyi veya kullan\u0131c\u0131 aray\u00fcz\u00fc durumunu depolamak i\u00e7in de\u011fi\u015fken tan\u0131mlamalar\u0131.<\/li>\n<\/ul>\n<\/li>\n\n
document.querySelector<\/code>, .addEventListener<\/code>, .appendChild<\/code>, .innerHTML<\/code>): Kullan\u0131c\u0131n\u0131n etkile\u015fimde bulunaca\u011f\u0131 butonlar, form elemanlar\u0131 ve dinamik i\u00e7eriklerin olu\u015fturulmas\u0131\/g\u00fcncellenmesi.<\/li>\n\nfunction renderProductList(products, containerId) {\n const container = document.getElementById(containerId);\n container.innerHTML = ''; \/\/ \u00d6nceki i\u00e7eri\u011fi temizle\n\n products.forEach(product => {\n const productCard = document.createElement('div');\n productCard.className = 'product-card'; \/\/ Mobil i\u00e7in responsive bir s\u0131n\u0131f\n productCard.innerHTML = ${product.name}<\/h3>\n