{"id":19146,"date":"2025-04-25T07:30:15","date_gmt":"2025-04-25T04:30:15","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/js-modulleri-kodun-omurgasi\/"},"modified":"2025-04-25T07:30:15","modified_gmt":"2025-04-25T04:30:15","slug":"js-modulleri-kodun-omurgasi","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/js-modulleri-kodun-omurgasi\/","title":{"rendered":"JS Mod\u00fclleri: Kodun Omurgas\u0131"},"content":{"rendered":"

<\/p>\n

JS Mod\u00fclleri: Kodun Omurgas\u0131<\/p>\n

Merhaba! Fatih Soysal olarak, sizlerle JavaScript mod\u00fcllerinin g\u00fcc\u00fcnden ve \u00f6nemini ke\u015ffedece\u011fimiz bir yolculu\u011fa \u00e7\u0131k\u0131yoruz. B\u00fcy\u00fck ve karma\u015f\u0131k JavaScript projelerini y\u00f6netmek i\u00e7in JavaScript mod\u00fclleri olmazsa olmaz bir ara\u00e7t\u0131r. Bu makalede, JavaScript mod\u00fcllerinin ne oldu\u011funu, nas\u0131l kullan\u0131ld\u0131\u011f\u0131n\u0131, avantajlar\u0131n\u0131 ve baz\u0131 \u00f6rneklerini detayl\u0131 bir \u015fekilde ele alaca\u011f\u0131z. \u00d6ncelikle, geleneksel JavaScript’te kar\u015f\u0131la\u015ft\u0131\u011f\u0131m\u0131z sorunlar\u0131 anlamak faydal\u0131 olacakt\u0131r.<\/p>\n

Geleneksel JavaScript’in S\u0131n\u0131rlamalar\u0131<\/h2>\n

Geleneksel JavaScript’te, global de\u011fi\u015fkenleri kullanarak fonksiyonlar ve de\u011fi\u015fkenler aras\u0131nda veri payla\u015f\u0131m\u0131 yap\u0131l\u0131rd\u0131. Ancak bu yakla\u015f\u0131m, b\u00fcy\u00fck projelerde s\u00fcrd\u00fcr\u00fclebilirli\u011fi olduk\u00e7a zorla\u015ft\u0131r\u0131r. \u00c7\u00fcnk\u00fc global alanda de\u011fi\u015fken isimleri \u00e7ak\u0131\u015fabilir, beklenmedik hatalara yol a\u00e7abilir ve kodun okunabilirli\u011fini ve bak\u0131m\u0131 g\u00fc\u00e7le\u015ftirebilir. Sonu\u00e7 olarak, kodun karma\u015f\u0131kla\u015fmas\u0131 ve bak\u0131m\u0131 zorla\u015f\u0131r. Bu problemleri a\u015fmak i\u00e7in mod\u00fcller tasarlanm\u0131\u015ft\u0131r.<\/p>\n

JS Mod\u00fclleri: D\u00fczen ve Yeniden Kullan\u0131labilirlik<\/h2>\n

JavaScript mod\u00fclleri, kodu ba\u011f\u0131ms\u0131z, yeniden kullan\u0131labilir par\u00e7alara ay\u0131rmam\u0131z\u0131 sa\u011flar. Bu par\u00e7alar, di\u011fer mod\u00fcllerden ba\u011f\u0131ms\u0131z olarak geli\u015ftirilebilir ve test edilebilir. Ayr\u0131ca, bir mod\u00fcl\u00fcn i\u00e7 yap\u0131s\u0131 di\u011fer mod\u00fcller taraf\u0131ndan gizlenebilir, bu da kodun daha g\u00fcvenli ve s\u00fcrd\u00fcr\u00fclebilir olmas\u0131n\u0131 sa\u011flar. Bu sayede, b\u00fcy\u00fck projeler daha d\u00fczenli ve y\u00f6netilebilir hale gelir. K\u0131sacas\u0131, karma\u015fay\u0131 \u00f6nlemek ve geli\u015ftirmeyi kolayla\u015ft\u0131rmak i\u00e7in mod\u00fcller ideal bir \u00e7\u00f6z\u00fcmd\u00fcr.<\/p>\n

import ve export Kullan\u0131m\u0131<\/h2>\n

Mod\u00fcller aras\u0131nda veri payla\u015f\u0131m\u0131, export ve import anahtar kelimeleri ile yap\u0131l\u0131r. export anahtar kelimesi, bir mod\u00fcl\u00fcn di\u011fer mod\u00fcller taraf\u0131ndan eri\u015filebilecek fonksiyonlar, de\u011fi\u015fkenler veya s\u0131n\u0131flar\u0131 tan\u0131mlar. \u00d6rne\u011fin:<\/p>\n

\n\/\/ myModule.js\nexport const myVariable = \"Merhaba D\u00fcnya!\";\n\nexport function myFunction() {\n  console.log(myVariable);\n}\n<\/code><\/pre>\n
Di\u011fer bir mod\u00fclde ise, import anahtar kelimesi ile bu de\u011fi\u015fken ve fonksiyonu kullanabiliriz:<\/p>\n
\n\/\/ myOtherModule.js\nimport { myVariable, myFunction } from '.\/myModule.js';\n\nconsole.log(myVariable); \/\/ \"Merhaba D\u00fcnya!\"\nmyFunction(); \/\/ \"Merhaba D\u00fcnya!\" yazd\u0131r\u0131r\n<\/code><\/pre>\n
Bu \u00f6rnekte, myModule.js dosyas\u0131ndaki myVariable ve myFunction’\u0131 myOtherModule.js dosyas\u0131na i\u00e7e aktard\u0131k.  Bu \u015fekilde, kodumuzun farkl\u0131 b\u00f6l\u00fcmlerini birbirinden ba\u011f\u0131ms\u0131z olarak geli\u015ftirebilir ve y\u00f6netebiliriz.<\/p>\n
JS Mod\u00fcllerinin Avantajlar\u0131<\/h2>\n
JavaScript mod\u00fcllerinin bir\u00e7ok avantaj\u0131 vard\u0131r.  Bunlardan baz\u0131lar\u0131 \u015funlard\u0131r: <\/p>\n