{"id":34956,"date":"2025-11-24T04:40:41","date_gmt":"2025-11-24T01:40:41","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/?p=34956"},"modified":"2025-11-24T04:40:41","modified_gmt":"2025-11-24T01:40:41","slug":"es6-modulleri-javascriptte-import-ve-export-kullanimi","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/es6-modulleri-javascriptte-import-ve-export-kullanimi\/","title":{"rendered":"ES6 Mod\u00fclleri: JavaScript&#8217;te Import ve Export Kullan\u0131m\u0131"},"content":{"rendered":"<p><body><\/p>\n<h2>ES6 Mod\u00fclleri: JavaScript&#8217;te Import ve Export Kullan\u0131m\u0131<\/h2>\n<p>Modern JavaScript geli\u015ftirmesinde mod\u00fcller, kodun d\u00fczenlenmesi, y\u00f6netilmesi ve yeniden kullan\u0131labilirli\u011fi i\u00e7in vazge\u00e7ilmez bir ara\u00e7 haline gelmi\u015ftir. ES6 (ECMAScript 2015) ile birlikte JavaScript&#8217;e do\u011fal mod\u00fcl sistemi entegre edilmi\u015f, bu da geli\u015ftiricilerin daha temiz, daha s\u00fcrd\u00fcr\u00fclebilir ve daha performansl\u0131 uygulamalar olu\u015fturmas\u0131na olanak tan\u0131m\u0131\u015ft\u0131r. Bu makalede, ES6 mod\u00fcllerinin ne oldu\u011funu, neden ihtiya\u00e7 duyuldu\u011funu ve \u00f6zellikle <code>import<\/code> ile <code>export<\/code> anahtar kelimelerinin nas\u0131l kullan\u0131laca\u011f\u0131n\u0131 derinlemesine inceleyece\u011fiz.<\/p>\n<h3>Giri\u015f: Neden Mod\u00fcllere \u0130htiya\u00e7 Duyar\u0131z?<\/h3>\n<p>JavaScript&#8217;in ilk zamanlar\u0131nda, t\u00fcm kod genellikle tek bir k\u00fcresel kapsamda (global scope) \u00e7al\u0131\u015f\u0131rd\u0131. Bu yakla\u015f\u0131m, basit uygulamalar i\u00e7in yeterli olsa da, projeler b\u00fcy\u00fcd\u00fck\u00e7e ciddi sorunlara yol a\u00e7maya ba\u015flad\u0131:<\/p>\n<ul>\n<li><strong>K\u00fcresel Kapsam Kirlili\u011fi (Global Scope Pollution):<\/strong> T\u00fcm de\u011fi\u015fkenler ve fonksiyonlar k\u00fcresel kapsamda tan\u0131mland\u0131\u011f\u0131nda, isim \u00e7ak\u0131\u015fmalar\u0131 (name collisions) ka\u00e7\u0131n\u0131lmaz hale geliyordu. Farkl\u0131 k\u00fct\u00fcphaneler veya geli\u015ftiriciler ayn\u0131 isimleri kulland\u0131\u011f\u0131nda beklenmedik davran\u0131\u015flar ortaya \u00e7\u0131kabiliyordu.<\/li>\n<li><strong>Ba\u011f\u0131ml\u0131l\u0131k Y\u00f6netimi Zorluklar\u0131:<\/strong> Bir dosyan\u0131n ba\u015fka bir dosyaya veya k\u00fct\u00fcphaneye ba\u011f\u0131ml\u0131 olmas\u0131 durumunda, bu ba\u011f\u0131ml\u0131l\u0131klar\u0131n do\u011fru s\u0131rada y\u00fcklenmesini sa\u011flamak karma\u015f\u0131k bir hal al\u0131yordu. Manuel olarak <code><script><\/code> etiketlerini s\u0131ralamak hataya a\u00e7\u0131kt\u0131 ve bak\u0131m\u0131 zordu.<\/li>\n<li><strong>Kodun Yeniden Kullan\u0131labilirli\u011fi ve Bak\u0131m\u0131:<\/strong> Kod par\u00e7alar\u0131n\u0131 farkl\u0131 projelerde veya uygulaman\u0131n farkl\u0131 b\u00f6l\u00fcmlerinde yeniden kullanmak, k\u00fcresel kapsamdaki ba\u011f\u0131ml\u0131l\u0131klar nedeniyle zorla\u015f\u0131yordu. Bir kod par\u00e7as\u0131n\u0131 de\u011fi\u015ftirmek, uygulaman\u0131n beklenmedik ba\u015fka yerlerini etkileyebiliyordu.<\/li>\n<li><strong>Kaps\u00fclleme Eksikli\u011fi:<\/strong> Veri gizleme ve kaps\u00fclleme (encapsulation) mekanizmalar\u0131 yetersizdi. Her \u015fey k\u00fcresel kapsamda eri\u015filebilir oldu\u011fundan, dahili uygulama detaylar\u0131n\u0131 d\u0131\u015far\u0131dan izole etmek zordu.<\/li>\n<\/ul>\n<p>Bu sorunlar\u0131 \u00e7\u00f6zmek i\u00e7in ES6 \u00f6ncesinde CommonJS (Node.js i\u00e7in) ve AMD (Asynchronous Module Definition, RequireJS gibi taray\u0131c\u0131lar i\u00e7in) gibi \u00e7e\u015fitli mod\u00fcl sistemleri geli\u015ftirildi. Bu sistemler kendi i\u00e7lerinde ba\u015far\u0131l\u0131 olsa da, JavaScript'in dilin bir par\u00e7as\u0131 olan standart bir mod\u00fcl sistemine ihtiyac\u0131 vard\u0131. \u0130\u015fte bu noktada ES6 mod\u00fclleri devreye girdi.<\/p>\n<h3>ES6 Mod\u00fclleri Nedir?<\/h3>\n<p>ES6 mod\u00fclleri (resmi ad\u0131yla ECMAScript Mod\u00fclleri veya ESM), JavaScript'in dil seviyesinde tan\u0131mlanm\u0131\u015f standart mod\u00fcl sistemidir. Bu sistem, kodunuzu mant\u0131ksal par\u00e7alara ay\u0131rman\u0131za ve bu par\u00e7alar aras\u0131nda kontroll\u00fc bir \u015fekilde bilgi al\u0131\u015fveri\u015fi yapman\u0131za olanak tan\u0131r. Temel \u00f6zellikleri \u015funlard\u0131r:<\/p>\n<ul>\n<li><strong>Statik Yap\u0131:<\/strong> ES6 mod\u00fclleri, kod \u00e7al\u0131\u015ft\u0131r\u0131lmadan \u00f6nce ba\u011f\u0131ml\u0131l\u0131klar\u0131 statik olarak analiz edebilir. Bu, hata kontrol\u00fc, optimizasyon (\u00f6rne\u011fin tree-shaking) ve daha iyi ara\u00e7 deste\u011fi sa\u011flar.<\/li>\n<li><strong>Tekil Mod\u00fcl Kapsam\u0131:<\/strong> Her mod\u00fcl kendi \u00f6zel kapsam\u0131na (module scope) sahiptir. Bir mod\u00fclde tan\u0131mlanan de\u011fi\u015fkenler, fonksiyonlar veya s\u0131n\u0131flar, a\u00e7\u0131k\u00e7a d\u0131\u015fa aktar\u0131lmad\u0131k\u00e7a di\u011fer mod\u00fcllerden do\u011frudan eri\u015filemez. Bu, k\u00fcresel kapsam kirlili\u011fini \u00f6nler.<\/li>\n<li><strong>Belirgin Ba\u011f\u0131ml\u0131l\u0131klar:<\/strong> Bir mod\u00fcl\u00fcn ba\u015fka bir mod\u00fcle ba\u011f\u0131ml\u0131l\u0131\u011f\u0131 <code>import<\/code> anahtar kelimesi ile a\u00e7\u0131k\u00e7a belirtilir. Bu, kodun okunabilirli\u011fini ve anla\u015f\u0131labilirli\u011fini art\u0131r\u0131r.<\/li>\n<li><strong>Taray\u0131c\u0131 ve Node.js Deste\u011fi:<\/strong> ES6 mod\u00fclleri hem modern taray\u0131c\u0131larda hem de Node.js ortam\u0131nda do\u011fal olarak desteklenir. Bu, ayn\u0131 mod\u00fcl yap\u0131s\u0131n\u0131n farkl\u0131 JavaScript \u00e7al\u0131\u015fma zamanlar\u0131nda kullan\u0131labilmesini sa\u011flar.<\/li>\n<\/ul>\n<p>Bir JavaScript dosyas\u0131n\u0131 mod\u00fcl olarak kullanmak i\u00e7in, taray\u0131c\u0131da <code><script><\/code> etiketine <code>type=\"module\"<\/code> \u00f6zniteli\u011fini eklemeniz gerekir:<\/p>\n<pre><code class=\"language-html\"><script type=\"module\" src=\".\/main.js\"><\/script>\n<\/code><\/pre>\n<p>Node.js ortam\u0131nda ise, <code>package.json<\/code> dosyan\u0131za <code>\"type\": \"module\"<\/code> ekleyebilir veya mod\u00fcl dosyalar\u0131n\u0131z\u0131 <code>.mjs<\/code> uzant\u0131s\u0131yla kaydedebilirsiniz.<\/p>\n<h3>Export Kullan\u0131m\u0131<\/h3>\n<p><code>export<\/code> anahtar kelimesi, bir mod\u00fcldeki de\u011fi\u015fkenleri, fonksiyonlar\u0131, s\u0131n\u0131flar\u0131 veya sabitleri d\u0131\u015f d\u00fcnyaya (yani di\u011fer mod\u00fcllere) a\u00e7mak i\u00e7in kullan\u0131l\u0131r. \u0130ki ana t\u00fcrde d\u0131\u015fa aktar\u0131m vard\u0131r: adland\u0131r\u0131lm\u0131\u015f (named) ve varsay\u0131lan (default).<\/p>\n<h4>Adland\u0131r\u0131lm\u0131\u015f D\u0131\u015fa Aktar\u0131mlar (Named Exports)<\/h4>\n<p>Adland\u0131r\u0131lm\u0131\u015f d\u0131\u015fa aktar\u0131mlar, bir mod\u00fclden birden fazla de\u011feri belirli isimlerle d\u0131\u015fa aktarman\u0131za olanak tan\u0131r. \u0130\u00e7e aktaran mod\u00fcl, bu de\u011ferleri ayn\u0131 isimlerle veya yeniden adland\u0131rarak alabilir.<\/p>\n<h5>Tek Tek D\u0131\u015fa Aktarma<\/h5>\n<p>Her bir \u00f6\u011fenin ba\u015f\u0131na <code>export<\/code> anahtar kelimesini koyarak d\u0131\u015fa aktarabilirsiniz:<\/p>\n<pre><code class=\"language-javascript\">\/\/ utils.js\nexport const PI = 3.14159;\n\nexport function add(a, b) {\n    return a + b;\n}\n\nexport class Calculator {\n    constructor() {\n        this.result = 0;\n    }\n    multiply(a, b) {\n        return a * b;\n    }\n}\n\nexport const subtract = (a, b) => a - b;\n<\/code><\/pre>\n<h5>Toplu D\u0131\u015fa Aktarma<\/h5>\n<p>Mod\u00fcl\u00fcn sonunda, s\u00fcsl\u00fc parantezler i\u00e7inde d\u0131\u015fa aktarmak istedi\u011finiz t\u00fcm \u00f6\u011feleri listeleyerek de toplu d\u0131\u015fa aktar\u0131m yapabilirsiniz:<\/p>\n<pre><code class=\"language-javascript\">\/\/ constants.js\nconst API_KEY = \"your_api_key\";\nconst MAX_RETRIES = 5;\n\nfunction getConfig() {\n    return { API_KEY, MAX_RETRIES };\n}\n\nexport { API_KEY, MAX_RETRIES, getConfig };\n<\/code><\/pre>\n<h5>Yeniden Adland\u0131rarak D\u0131\u015fa Aktarma (as keyword)<\/h5>\n<p>D\u0131\u015fa aktarma s\u0131ras\u0131nda bir \u00f6\u011feyi farkl\u0131 bir isimle d\u0131\u015fa aktarmak isterseniz <code>as<\/code> anahtar kelimesini kullanabilirsiniz. Bu, isim \u00e7ak\u0131\u015fmalar\u0131n\u0131 \u00f6nlemek veya daha a\u00e7\u0131klay\u0131c\u0131 isimler sa\u011flamak i\u00e7in kullan\u0131\u015fl\u0131d\u0131r.<\/p>\n<pre><code class=\"language-javascript\">\/\/ mathOperations.js\nfunction sum(a, b) {\n    return a + b;\n}\n\nfunction difference(a, b) {\n    return a - b;\n}\n\nexport { sum as addFunction, difference as subtractFunction };\n<\/code><\/pre>\n<h4>Varsay\u0131lan D\u0131\u015fa Aktar\u0131mlar (Default Exports)<\/h4>\n<p>Her mod\u00fcl sadece bir tane varsay\u0131lan d\u0131\u015fa aktar\u0131ma sahip olabilir. Varsay\u0131lan d\u0131\u015fa aktar\u0131m, o mod\u00fcl\u00fcn \"ana\" veya \"birincil\" \u00f6\u011fesini temsil etmek i\u00e7in kullan\u0131l\u0131r. \u0130\u00e7e aktar\u0131rken, varsay\u0131lan d\u0131\u015fa aktar\u0131ma istedi\u011finiz herhangi bir ismi verebilirsiniz.<\/p>\n<p><code>export default<\/code> anahtar kelimesi ile do\u011frudan bir de\u011fi\u015fkeni, fonksiyonu, s\u0131n\u0131f\u0131 veya ifadeyi d\u0131\u015fa aktarabilirsiniz:<\/p>\n<pre><code class=\"language-javascript\">\/\/ myModule.js\nconst greeting = \"Hello from my module!\";\nexport default greeting;\n<\/code><\/pre>\n<pre><code class=\"language-javascript\">\/\/ utilityFunction.js\nexport default function multiply(a, b) {\n    return a * b;\n}\n<\/code><\/pre>\n<pre><code class=\"language-javascript\">\/\/ User.js\nexport default class User {\n    constructor(name) {\n        this.name = name;\n    }\n    greet() {\n        return <code>Hi, I'm ${this.name}<\/code>;\n    }\n}\n<\/code><\/pre>\n<p>Varsay\u0131lan d\u0131\u015fa aktar\u0131mlar genellikle bir mod\u00fcl\u00fcn ana i\u015flevini veya tek bir ana bile\u015fenini d\u0131\u015fa aktarmak i\u00e7in tercih edilir. \u00d6rne\u011fin, bir React bile\u015feni veya bir yard\u0131mc\u0131 fonksiyon k\u00fct\u00fcphanesi.<\/p>\n<h4>Yeniden D\u0131\u015fa Aktarma (Re-exporting)<\/h4>\n<p>Bazen bir mod\u00fcl\u00fcn, ba\u015fka bir mod\u00fclden ald\u0131\u011f\u0131 \u00f6\u011feleri do\u011frudan d\u0131\u015fa aktarmas\u0131 gerekebilir. Bu, mod\u00fcl hiyerar\u015filerini basitle\u015ftirmek ve kodun daha d\u00fczenli g\u00f6r\u00fcnmesini sa\u011flamak i\u00e7in kullan\u0131\u015fl\u0131d\u0131r.<\/p>\n<pre><code class=\"language-javascript\">\/\/ common\/index.js\nexport { add, subtract } from '.\/math.js';\nexport { fetchData } from '.\/api.js';\n<\/code><\/pre>\n<p>Bu \u00f6rnekte, <code>common\/index.js<\/code> dosyas\u0131, <code>math.js<\/code> ve <code>api.js<\/code> dosyalar\u0131ndan ald\u0131\u011f\u0131 \u00f6\u011feleri kendi d\u0131\u015fa aktar\u0131mlar\u0131 aras\u0131na kat\u0131yor. B\u00f6ylece, di\u011fer mod\u00fcller <code>math.js<\/code> ve <code>api.js<\/code> yerine sadece <code>common\/index.js<\/code> dosyas\u0131ndan t\u00fcm bu i\u015flevlere eri\u015febilir.<\/p>\n<p>T\u00fcm adland\u0131r\u0131lm\u0131\u015f d\u0131\u015fa aktar\u0131mlar\u0131 yeniden d\u0131\u015fa aktarmak i\u00e7in wildcard (<code>*<\/code>) kullanabilirsiniz:<\/p>\n<pre><code class=\"language-javascript\">\/\/ common\/index.js\nexport * from '.\/math.js'; \/\/ math.js i\u00e7indeki t\u00fcm adland\u0131r\u0131lm\u0131\u015f export'lar\u0131 yeniden d\u0131\u015fa aktar\u0131r\nexport * from '.\/api.js';  \/\/ api.js i\u00e7indeki t\u00fcm adland\u0131r\u0131lm\u0131\u015f export'lar\u0131 yeniden d\u0131\u015fa aktar\u0131r\n<\/code><\/pre>\n<p>Ancak, bu y\u00f6ntem varsay\u0131lan d\u0131\u015fa aktar\u0131mlar\u0131 do\u011frudan yeniden d\u0131\u015fa aktarmaz. Varsay\u0131lan d\u0131\u015fa aktar\u0131m\u0131 yeniden d\u0131\u015fa aktarmak i\u00e7in \u00f6zel bir s\u00f6zdizimi kullanman\u0131z gerekir:<\/p>\n<pre><code class=\"language-javascript\">\/\/ moduleA.js\nexport default function sayHello() { return \"Hello!\"; }\n\n\/\/ moduleB.js\nexport { default as sayHelloFromA } from '.\/moduleA.js';\n<\/code><\/pre>\n<h3>Import Kullan\u0131m\u0131<\/h3>\n<p><code>import<\/code> anahtar kelimesi, ba\u015fka bir mod\u00fcl taraf\u0131ndan d\u0131\u015fa aktar\u0131lm\u0131\u015f de\u011ferleri mevcut mod\u00fcl\u00fcn\u00fcze dahil etmek i\u00e7in kullan\u0131l\u0131r. <code>export<\/code> gibi, <code>import<\/code> da adland\u0131r\u0131lm\u0131\u015f, varsay\u0131lan ve t\u00fcm\u00fcn\u00fc i\u00e7e aktarma gibi farkl\u0131 bi\u00e7imlere sahiptir.<\/p>\n<h4>Adland\u0131r\u0131lm\u0131\u015f \u0130\u00e7e Aktar\u0131mlar (Named Imports)<\/h4>\n<p>Adland\u0131r\u0131lm\u0131\u015f d\u0131\u015fa aktar\u0131mlar\u0131 i\u00e7e aktarmak i\u00e7in, s\u00fcsl\u00fc parantezler i\u00e7inde d\u0131\u015fa aktar\u0131lan \u00f6\u011felerin isimlerini belirtirsiniz. Bu isimler, d\u0131\u015fa aktar\u0131lan mod\u00fcldeki isimlerle tam olarak e\u015fle\u015fmelidir.<\/p>\n<pre><code class=\"language-javascript\">\/\/ main.js\nimport { PI, add, Calculator, subtract } from '.\/utils.js';\nimport { API_KEY, getConfig } from '.\/constants.js';\nimport { addFunction, subtractFunction } from '.\/mathOperations.js'; \/\/ Yeniden adland\u0131r\u0131lm\u0131\u015f import\n\nconsole.log(PI); \/\/ 3.14159\nconsole.log(add(5, 3)); \/\/ 8\n\nconst calc = new Calculator();\nconsole.log(calc.multiply(4, 2)); \/\/ 8\n\nconsole.log(API_KEY); \/\/ \"your_api_key\"\nconsole.log(getConfig()); \/\/ { API_KEY: \"your_api_key\", MAX_RETRIES: 5 }\n\nconsole.log(addFunction(10, 5)); \/\/ 15\n<\/code><\/pre>\n<h5>Yeniden Adland\u0131rarak \u0130\u00e7e Aktarma (as keyword)<\/h5>\n<p>\u0130\u00e7e aktarma s\u0131ras\u0131nda bir \u00f6\u011feyi farkl\u0131 bir isimle kullanmak isterseniz <code>as<\/code> anahtar kelimesini kullanabilirsiniz. Bu, yerel kapsamdaki isim \u00e7ak\u0131\u015fmalar\u0131n\u0131 \u00f6nlemek veya daha k\u0131sa\/anlaml\u0131 isimler kullanmak i\u00e7in faydal\u0131d\u0131r.<\/p>\n<pre><code class=\"language-javascript\">\/\/ main.js\nimport { add as sumNumbers, subtract as minusNumbers } from '.\/mathOperations.js';\n\nconsole.log(sumNumbers(10, 20)); \/\/ 30\nconsole.log(minusNumbers(50, 10)); \/\/ 40\n<\/code><\/pre>\n<h4>Varsay\u0131lan \u0130\u00e7e Aktar\u0131mlar (Default Imports)<\/h4>\n<p>Varsay\u0131lan d\u0131\u015fa aktar\u0131mlar\u0131 i\u00e7e aktar\u0131rken, s\u00fcsl\u00fc parantez kullanman\u0131za gerek yoktur. D\u0131\u015fa aktar\u0131lan \u00f6\u011feye istedi\u011finiz herhangi bir ismi verebilirsiniz.<\/p>\n<pre><code class=\"language-javascript\">\/\/ main.js\nimport myGreeting from '.\/myModule.js'; \/\/ 'myGreeting' istedi\u011fimiz isim\nimport performMultiply from '.\/utilityFunction.js'; \/\/ 'performMultiply' istedi\u011fimiz isim\nimport MyUserClass from '.\/User.js'; \/\/ 'MyUserClass' istedi\u011fimiz isim\n\nconsole.log(myGreeting); \/\/ \"Hello from my module!\"\nconsole.log(performMultiply(7, 8)); \/\/ 56\n\nconst user = new MyUserClass(\"Alice\");\nconsole.log(user.greet()); \/\/ \"Hi, I'm Alice\"\n<\/code><\/pre>\n<p>Bir mod\u00fcl hem varsay\u0131lan hem de adland\u0131r\u0131lm\u0131\u015f d\u0131\u015fa aktar\u0131mlara sahipse, bunlar\u0131 tek bir <code>import<\/code> ifadesinde birle\u015ftirebilirsiniz:<\/p>\n<pre><code class=\"language-javascript\">\/\/ mixedModule.js\nexport const SOME_CONSTANT = 100;\nexport default function processData(data) { \/<em> ... <\/em>\/ }\n\n\/\/ main.js\nimport processData, { SOME_CONSTANT } from '.\/mixedModule.js';\n\nconsole.log(SOME_CONSTANT); \/\/ 100\nprocessData([]);\n<\/code><\/pre>\n<h4>T\u00fcm\u00fcn\u00fc \u0130\u00e7e Aktarma (Namespace Imports)<\/h4>\n<p>Bir mod\u00fcldeki t\u00fcm adland\u0131r\u0131lm\u0131\u015f d\u0131\u015fa aktar\u0131mlar\u0131 tek bir nesne alt\u0131nda i\u00e7e aktarmak isterseniz, y\u0131ld\u0131z (<code>*<\/code>) operat\u00f6r\u00fcn\u00fc kullanabilirsiniz. Bu, \u00f6zellikle bir mod\u00fcl\u00fcn \u00e7ok say\u0131da d\u0131\u015fa aktar\u0131m\u0131 oldu\u011funda veya isim \u00e7ak\u0131\u015fmalar\u0131n\u0131 \u00f6nlemek istedi\u011finizde kullan\u0131\u015fl\u0131d\u0131r.<\/p>\n<pre><code class=\"language-javascript\">\/\/ main.js\nimport * as Utils from '.\/utils.js'; \/\/ T\u00fcm d\u0131\u015fa aktar\u0131mlar 'Utils' nesnesi alt\u0131nda toplan\u0131r\n\nconsole.log(Utils.PI); \/\/ 3.14159\nconsole.log(Utils.add(10, 5)); \/\/ 15\nconst calc = new Utils.Calculator();\nconsole.log(calc.multiply(6, 3)); \/\/ 18\n<\/code><\/pre>\n<p>Bu y\u00f6ntem, varsay\u0131lan d\u0131\u015fa aktar\u0131m\u0131 da <code>Utils.default<\/code> olarak eri\u015filebilir k\u0131lar (e\u011fer varsa).<\/p>\n<h4>Yan Etkili \u0130\u00e7e Aktar\u0131mlar (Side-Effect Imports)<\/h4>\n<p>Baz\u0131 mod\u00fcllerin d\u0131\u015fa aktard\u0131\u011f\u0131 belirli bir de\u011fer olmasa da, i\u00e7e aktar\u0131ld\u0131klar\u0131nda k\u00fcresel kapsamda bir de\u011fi\u015fiklik (\u00f6rne\u011fin, bir polyfill y\u00fcklemek, bir stil dosyas\u0131n\u0131 dahil etmek veya bir veritaban\u0131 ba\u011flant\u0131s\u0131 ba\u015flatmak) yapmas\u0131 istenebilir. Bu t\u00fcr mod\u00fclleri sadece yan etkileri i\u00e7in i\u00e7e aktarabilirsiniz:<\/p>\n<pre><code class=\"language-javascript\">\/\/ polyfills.js\n\/\/ Bu dosya, belirli bir \u00f6zelli\u011fi k\u00fcresel kapsamda tan\u0131mlar\nArray.prototype.myCustomMethod = function() {\n    console.log(\"This is a custom array method.\");\n};\n\n\/\/ main.js\nimport '.\/polyfills.js'; \/\/ Sadece yan etkisi i\u00e7in i\u00e7e aktar\u0131l\u0131r\n\nconst arr = [1, 2, 3];\narr.myCustomMethod(); \/\/ \"This is a custom array method.\" \u00e7\u0131kt\u0131s\u0131n\u0131 verir\n<\/code><\/pre>\n<h4>Dinamik Import (Dynamic Imports)<\/h4>\n<p><code>import()<\/code> fonksiyonu, bir mod\u00fcl\u00fc \u00e7al\u0131\u015fma zaman\u0131nda (runtime) ko\u015fullu olarak veya kullan\u0131c\u0131n\u0131n bir eylemine ba\u011fl\u0131 olarak y\u00fcklemenize olanak tan\u0131r. Bu, \u00f6zellikle performans optimizasyonu (code splitting, lazy loading) i\u00e7in \u00e7ok \u00f6nemlidir. <code>import()<\/code>, bir Promise d\u00f6nd\u00fcr\u00fcr ve mod\u00fcl y\u00fcklendikten sonra \u00e7\u00f6z\u00fcmlenir.<\/p>\n<pre><code class=\"language-javascript\">\/\/ main.js\nconst button = document.getElementById('loadModule');\n\nbutton.addEventListener('click', async () => {\n    try {\n        \/\/ Mod\u00fcl\u00fc sadece butona t\u0131kland\u0131\u011f\u0131nda y\u00fckle\n        const module = await import('.\/heavyModule.js');\n        console.log('Mod\u00fcl y\u00fcklendi:', module);\n        module.doSomethingHeavy();\n    } catch (error) {\n        console.error('Mod\u00fcl y\u00fcklenirken hata olu\u015ftu:', error);\n    }\n});\n\n\/\/ heavyModule.js\nexport function doSomethingHeavy() {\n    console.log(\"A\u011f\u0131r bir i\u015flem yap\u0131l\u0131yor...\");\n    \/\/ ...\n}\n\nexport default \"Heavy Module Default Export\";\n<\/code><\/pre>\n<p>Dinamik importlar, \u00f6zellikle b\u00fcy\u00fck uygulamalarda ba\u015flang\u0131\u00e7 y\u00fckleme s\u00fcresini azaltmak i\u00e7in kritik bir rol oynar. Bir kullan\u0131c\u0131 uygulaman\u0131n belirli bir b\u00f6l\u00fcm\u00fcne gitmedi\u011fi s\u00fcrece o b\u00f6l\u00fcmle ilgili kodun y\u00fcklenmesini erteleyebilirsiniz.<\/p>\n<h3>Mod\u00fcl Yollar\u0131 ve \u00c7\u00f6z\u00fcmleme<\/h3>\n<p><code>import<\/code> ifadelerinde belirtilen mod\u00fcl yollar\u0131 (specifiers), taray\u0131c\u0131 veya Node.js taraf\u0131ndan mod\u00fcl dosyas\u0131n\u0131n nerede bulunaca\u011f\u0131n\u0131 belirlemek i\u00e7in kullan\u0131l\u0131r.<\/p>\n<ul>\n<li><strong>Ba\u011f\u0131l Yollar (Relative Paths):<\/strong> Mevcut dosyan\u0131n konumuna g\u00f6re mod\u00fcl\u00fcn yerini belirtir.\n<ul>\n<li><code>.\/module.js<\/code>: Ayn\u0131 dizindeki mod\u00fcl.<\/li>\n<li><code>..\/parent-module.js<\/code>: \u00dcst dizindeki mod\u00fcl.<\/li>\n<li><code>.\/sub-folder\/module.js<\/code>: Alt dizindeki mod\u00fcl.<\/li>\n<\/ul>\n<\/li>\n<li><strong>Mutlak Yollar (Absolute Paths):<\/strong> Sunucunun k\u00f6k dizinine g\u00f6re mod\u00fcl\u00fcn yerini belirtir.\n<ul>\n<li><code>\/scripts\/utils.js<\/code><\/li>\n<\/ul>\n<\/li>\n<li><strong>Bare Import Specifiers (\u00c7\u0131plak \u0130\u00e7e Aktarma Belirleyicileri):<\/strong> Genellikle <code>npm<\/code> paketleri i\u00e7in kullan\u0131l\u0131r ve do\u011frudan paket ad\u0131n\u0131 belirtir.\n<ul>\n<li><code>import React from 'react';<\/code><\/li>\n<li><code>import { debounce } from 'lodash';<\/code><\/li>\n<\/ul>\n<p>Taray\u0131c\u0131lar varsay\u0131lan olarak bare import specifiers'\u0131 \u00e7\u00f6zemez. Bunlar\u0131 kullanabilmek i\u00e7in bir mod\u00fcl y\u00fckleyiciye (bundler) (Webpack, Rollup, Vite) veya <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/HTML\/Element\/script\/type\/module#import_maps\">Import Maps<\/a> gibi taray\u0131c\u0131 \u00f6zelliklerine ihtiyac\u0131n\u0131z vard\u0131r.<\/p>\n<\/li>\n<\/ul>\n<p><strong>Node.js'te Mod\u00fcl \u00c7\u00f6z\u00fcmlemesi:<\/strong> Node.js, bare import specifiers'\u0131 <code>node_modules<\/code> dizinlerinde arayarak \u00e7\u00f6zer. Ayr\u0131ca, dosya uzant\u0131lar\u0131 (<code>.js<\/code>, <code>.json<\/code>, <code>.node<\/code>) veya <code>package.json<\/code> i\u00e7indeki <code>main<\/code> veya <code>exports<\/code> alanlar\u0131n\u0131 kullanarak mod\u00fcl dosyalar\u0131n\u0131 bulabilir.<\/p>\n<h3>Taray\u0131c\u0131da ES6 Mod\u00fclleri<\/h3>\n<p>Modern taray\u0131c\u0131lar ES6 mod\u00fcllerini do\u011frudan destekler. Bir JavaScript dosyas\u0131n\u0131 mod\u00fcl olarak y\u00fcklemek i\u00e7in <code><script type=\"module\"><\/code> etiketini kullanman\u0131z yeterlidir:<\/p>\n<pre><code class=\"language-html\"><!-- index.html -->\n<!DOCTYPE html>\n<html>\n<head>\n    <title>ES6 Modules in Browser<\/title>\n<\/head>\n<body>\n    <h1>Hello Modules!<\/h1>\n    <script type=\"module\" src=\".\/app.js\"><\/script>\n<\/body>\n<\/html>\n<\/code><\/pre>\n<pre><code class=\"language-javascript\">\/\/ app.js\nimport { greet } from '.\/utils.js';\n\ndocument.addEventListener('DOMContentLoaded', () => {\n    document.querySelector('h1').textContent = greet('Browser User');\n});\n\n\/\/ utils.js\nexport function greet(name) {\n    return <code>Merhaba, ${name}!<\/code>;\n}\n<\/code><\/pre>\n<p><code>type=\"module\"<\/code> ile y\u00fcklenen scriptler, varsay\u0131lan olarak <code>defer<\/code> \u00f6zniteli\u011fi gibi davran\u0131r; yani HTML ayr\u0131\u015ft\u0131r\u0131ld\u0131ktan sonra, DOMContentLoaded olay\u0131ndan \u00f6nce \u00e7al\u0131\u015ft\u0131r\u0131l\u0131rlar. Ayr\u0131ca, mod\u00fcller her zaman kat\u0131 modda (strict mode) \u00e7al\u0131\u015f\u0131r.<\/p>\n<p>\u00dcretim ortamlar\u0131nda, genellikle Webpack, Rollup veya Vite gibi mod\u00fcl paketleyiciler (bundlers) kullan\u0131l\u0131r. Bu ara\u00e7lar, birden fazla mod\u00fcl dosyas\u0131n\u0131 tek bir optimize edilmi\u015f dosyada birle\u015ftirerek taray\u0131c\u0131n\u0131n daha az HTTP iste\u011fi yapmas\u0131n\u0131 sa\u011flar ve performans art\u0131\u015f\u0131 sunar. Ayr\u0131ca, bare import specifiers gibi taray\u0131c\u0131n\u0131n do\u011fal olarak desteklemedi\u011fi \u00f6zellikleri de derleme zaman\u0131nda \u00e7\u00f6zerek uyumluluk sa\u011flarlar.<\/p>\n<h3>Node.js'te ES6 Mod\u00fclleri<\/h3>\n<p>Node.js, CommonJS mod\u00fcl sistemini (<code>require()<\/code> ve <code>module.exports<\/code>) uzun s\u00fcredir kullanmaktad\u0131r. ES6 mod\u00fcllerinin Node.js'e entegrasyonu zaman i\u00e7inde geli\u015fmi\u015f ve art\u0131k tam destek sunmaktad\u0131r. Node.js'te ES6 mod\u00fcllerini kullanman\u0131n iki ana yolu vard\u0131r:<\/p>\n<ol>\n<li><strong><code>package.json<\/code> dosyas\u0131nda <code>\"type\": \"module\"<\/code> belirtmek:<\/strong> Bu, Node.js'e projenizdeki t\u00fcm <code>.js<\/code> dosyalar\u0131n\u0131n ES6 mod\u00fclleri olarak ele al\u0131nmas\u0131 gerekti\u011fini s\u00f6yler (CommonJS mod\u00fclleri i\u00e7in <code>.cjs<\/code> uzant\u0131s\u0131 kullanman\u0131z gerekir).\n<pre><code class=\"language-json\">\/\/ package.json\n{\n  \"name\": \"my-esm-project\",\n  \"version\": \"1.0.0\",\n  \"type\": \"module\", \/\/ ES6 mod\u00fcllerini etkinle\u015ftirir\n  \"main\": \"app.js\",\n  \"scripts\": {\n    \"start\": \"node app.js\"\n  }\n}\n        <\/code><\/pre>\n<\/li>\n<li><strong><code>.mjs<\/code> uzant\u0131s\u0131n\u0131 kullanmak:<\/strong> Dosyalar\u0131n\u0131z\u0131 <code>.mjs<\/code> uzant\u0131s\u0131yla kaydetti\u011finizde, Node.js otomatik olarak bunlar\u0131 ES6 mod\u00fcl\u00fc olarak tan\u0131r. Bu, <code>\"type\": \"module\"<\/code> ayar\u0131 olmadan bile \u00e7al\u0131\u015f\u0131r ve CommonJS ile ES6 mod\u00fcllerini ayn\u0131 projede kar\u0131\u015ft\u0131rmak i\u00e7in kullan\u0131\u015fl\u0131d\u0131r (CommonJS i\u00e7in <code>.cjs<\/code> kullan\u0131n).\n<pre><code class=\"language-javascript\">\/\/ app.mjs\nimport { greeting } from '.\/utils.mjs';\n\nconsole.log(greeting('Node.js User'));\n\n\/\/ utils.mjs\nexport const greeting = (name) => <code>Hello from Node.js, ${name}!<\/code>;\n        <\/code><\/pre>\n<\/li>\n<\/ol>\n<p><strong>CommonJS ile ES6 Mod\u00fclleri Aras\u0131ndaki Farklar ve Birlikte \u00c7al\u0131\u015fma:<\/strong><\/p>\n<ul>\n<li>ES6 mod\u00fclleri <code>__dirname<\/code>, <code>__filename<\/code> gibi CommonJS'e \u00f6zg\u00fc global de\u011fi\u015fkenlere do\u011frudan eri\u015femez. Bunlara e\u015fde\u011ferlerini <code>import.meta.url<\/code> kullanarak elde edebilirsiniz.<\/li>\n<li>ES6 mod\u00fcllerinden CommonJS mod\u00fcllerini <code>import<\/code> ile i\u00e7e aktarabilirsiniz (varsay\u0131lan d\u0131\u015fa aktar\u0131m olarak gelir). Ancak CommonJS mod\u00fcllerinden ES6 mod\u00fcllerini <code>require()<\/code> ile do\u011frudan i\u00e7e aktaramazs\u0131n\u0131z. Dinamik <code>import()<\/code> kullan\u0131lmal\u0131d\u0131r.<\/li>\n<li><code>exports<\/code> ve <code>module.exports<\/code> gibi CommonJS anahtar kelimeleri ES6 mod\u00fcl kapsam\u0131 i\u00e7inde tan\u0131ml\u0131 de\u011fildir.<\/li>\n<\/ul>\n<h3>Mod\u00fcl Tasar\u0131m Kal\u0131plar\u0131 ve En \u0130yi Uygulamalar<\/h3>\n<p>ES6 mod\u00fclleri, kodunuzu daha iyi yap\u0131land\u0131rman\u0131za yard\u0131mc\u0131 olur. \u0130\u015fte baz\u0131 en iyi uygulamalar:<\/p>\n<ul>\n<li><strong>Tek Sorumluluk \u0130lkesi (Single Responsibility Principle):<\/strong> Her mod\u00fcl\u00fcn tek bir i\u015flevi veya sorumlulu\u011fu olmal\u0131d\u0131r. Bu, mod\u00fcllerin daha k\u00fc\u00e7\u00fck, daha odakl\u0131 ve bak\u0131m\u0131 daha kolay olmas\u0131n\u0131 sa\u011flar.<\/li>\n<li><strong>Tutarl\u0131 D\u0131\u015fa Aktarma Stratejisi:<\/strong> Bir mod\u00fcl\u00fcn ana i\u015flevi varsa varsay\u0131lan d\u0131\u015fa aktar\u0131m\u0131 kullan\u0131n. Yard\u0131mc\u0131 fonksiyonlar, sabitler veya birden fazla \u00f6\u011fe i\u00e7in adland\u0131r\u0131lm\u0131\u015f d\u0131\u015fa aktar\u0131mlar\u0131 tercih edin.<\/li>\n<li><strong>\u0130simlendirme Kurallar\u0131:<\/strong> D\u0131\u015fa aktar\u0131lan isimler a\u00e7\u0131k ve anla\u015f\u0131l\u0131r olmal\u0131d\u0131r. Yeniden adland\u0131rma (<code>as<\/code> anahtar kelimesiyle) gerekti\u011finde bunu kullanmaktan \u00e7ekinmeyin.<\/li>\n<li><strong>Dairesel Ba\u011f\u0131ml\u0131l\u0131klardan Ka\u00e7\u0131nma:<\/strong> \u0130ki mod\u00fcl\u00fcn birbirini i\u00e7e aktarmas\u0131 (A -> B ve B -> A) dairesel ba\u011f\u0131ml\u0131l\u0131klara yol a\u00e7ar. Bu durum beklenmedik davran\u0131\u015flara veya tan\u0131ms\u0131z de\u011ferlere neden olabilir. M\u00fcmk\u00fcnse dairesel ba\u011f\u0131ml\u0131l\u0131klar\u0131 yeniden yap\u0131land\u0131rma ile \u00e7\u00f6z\u00fcn.<\/li>\n<li><strong>Mod\u00fcl Boyutunu Optimize Etme:<\/strong> \u00d6zellikle taray\u0131c\u0131 uygulamalar\u0131 i\u00e7in, mod\u00fcllerinizi m\u00fcmk\u00fcn oldu\u011funca k\u00fc\u00e7\u00fck tutun. Dinamik importlar ve a\u011fa\u00e7 sallama (tree-shaking) gibi tekniklerle sadece ihtiyac\u0131n\u0131z olan kodu y\u00fckleyin.<\/li>\n<li><strong><code>index.js<\/code> Dosyalar\u0131:<\/strong> Bir dizindeki birden fazla mod\u00fcl\u00fc tek bir noktadan d\u0131\u015fa aktarmak i\u00e7in <code>index.js<\/code> (veya <code>index.mjs<\/code>) dosyalar\u0131 kullanmak yayg\u0131n bir kal\u0131pt\u0131r. Bu, i\u00e7e aktarma yollar\u0131n\u0131 basitle\u015ftirir.\n<pre><code class=\"language-javascript\">\/\/ components\/Button\/index.js\nexport { default } from '.\/Button.js';\nexport { ButtonType } from '.\/constants.js';\n\n\/\/ app.js\nimport Button, { ButtonType } from '.\/components\/Button';\n        <\/code><\/pre>\n<\/li>\n<\/ul>\n<h3>Gelecek ve Sonu\u00e7<\/h3>\n<p>ES6 mod\u00fclleri, JavaScript ekosisteminin temel bir par\u00e7as\u0131 haline gelmi\u015ftir ve modern web geli\u015ftirmenin vazge\u00e7ilmezidir. Taray\u0131c\u0131 ve Node.js taraf\u0131ndan do\u011fal olarak desteklenmesi, geli\u015ftiricilere g\u00fc\u00e7l\u00fc ve standart bir mod\u00fcl sistemi sunar.<\/p>\n<p><code>import<\/code> ve <code>export<\/code> anahtar kelimeleri, kodunuzu daha mod\u00fcler, daha d\u00fczenli ve daha s\u00fcrd\u00fcr\u00fclebilir hale getirir. K\u00fcresel kapsam kirlili\u011fini \u00f6nler, ba\u011f\u0131ml\u0131l\u0131klar\u0131 a\u00e7\u0131k\u00e7a tan\u0131mlar ve kodun yeniden kullan\u0131labilirli\u011fini art\u0131r\u0131r. Dinamik importlar gibi \u00f6zellikler sayesinde, performans optimizasyonlar\u0131 da kolayca uygulanabilir.<\/p>\n<p>ES6 mod\u00fcllerini anlamak ve etkili bir \u015fekilde kullanmak, her JavaScript geli\u015ftiricisi i\u00e7in temel bir yetkinliktir. Bu mod\u00fcller sayesinde, b\u00fcy\u00fck ve karma\u015f\u0131k uygulamalar\u0131 bile y\u00f6netilebilir, test edilebilir ve \u00f6l\u00e7eklenebilir par\u00e7alara ay\u0131rabiliriz. Geli\u015ftirme s\u00fcre\u00e7lerinizi h\u0131zland\u0131r\u0131rken, uygulaman\u0131z\u0131n kalitesini ve performans\u0131n\u0131 art\u0131rmak i\u00e7in ES6 mod\u00fcllerinin sundu\u011fu t\u00fcm avantajlardan yararlanmaya devam edin.<\/p>\n<p><\/body><\/p>\n","protected":false},"excerpt":{"rendered":"ES6 Mod\u00fclleri: JavaScript&#8217;te Import ve Export Kullan\u0131m\u0131\nModern JavaScript geli\u015ftirmesinde mod\u00fcller, kodun d\u00fczenlenmesi, y\u00f6netilmesi ve yenide","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-34956","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-javascript","7":"cs-entry","8":"cs-video-wrap"},"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v20.5 (Yoast SEO v25.3.1) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>ES6 Mod\u00fclleri: JavaScript&#039;te Import ve Export Kullan\u0131m\u0131 - Kodlar\u0131n Gizemli D\u00fcnyas\u0131<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/fatihsoysal.com\/blog\/es6-modulleri-javascriptte-import-ve-export-kullanimi\/\" \/>\n<meta property=\"og:locale\" content=\"tr_TR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"ES6 Mod\u00fclleri: JavaScript&#039;te Import ve Export Kullan\u0131m\u0131\" \/>\n<meta property=\"og:description\" content=\"ES6 Mod\u00fclleri: JavaScript&#039;te Import ve Export Kullan\u0131m\u0131 Modern JavaScript geli\u015ftirmesinde mod\u00fcller, kodun d\u00fczenlenmesi, y\u00f6netilmesi ve yenide\" \/>\n<meta property=\"og:url\" content=\"https:\/\/fatihsoysal.com\/blog\/es6-modulleri-javascriptte-import-ve-export-kullanimi\/\" \/>\n<meta property=\"og:site_name\" content=\"Kodlar\u0131n Gizemli D\u00fcnyas\u0131\" \/>\n<meta property=\"article:published_time\" content=\"2025-11-24T01:40:41+00:00\" \/>\n<meta name=\"author\" content=\"Fatih Soysal\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Yazan:\" \/>\n\t<meta name=\"twitter:data1\" content=\"Fatih Soysal\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tahmini okuma s\u00fcresi\" \/>\n\t<meta name=\"twitter:data2\" content=\"14 dakika\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/es6-modulleri-javascriptte-import-ve-export-kullanimi\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/es6-modulleri-javascriptte-import-ve-export-kullanimi\/\"},\"author\":{\"name\":\"Fatih Soysal\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"headline\":\"ES6 Mod\u00fclleri: JavaScript&#8217;te Import ve Export Kullan\u0131m\u0131\",\"datePublished\":\"2025-11-24T01:40:41+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/es6-modulleri-javascriptte-import-ve-export-kullanimi\/\"},\"wordCount\":2491,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"articleSection\":[\"Javascript\"],\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/es6-modulleri-javascriptte-import-ve-export-kullanimi\/#respond\"]}],\"copyrightYear\":\"2025\",\"copyrightHolder\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/es6-modulleri-javascriptte-import-ve-export-kullanimi\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/es6-modulleri-javascriptte-import-ve-export-kullanimi\/\",\"name\":\"ES6 Mod\u00fclleri: JavaScript'te Import ve Export Kullan\u0131m\u0131 - Kodlar\u0131n Gizemli D\u00fcnyas\u0131\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\"},\"datePublished\":\"2025-11-24T01:40:41+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/es6-modulleri-javascriptte-import-ve-export-kullanimi\/#breadcrumb\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/es6-modulleri-javascriptte-import-ve-export-kullanimi\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/es6-modulleri-javascriptte-import-ve-export-kullanimi\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Anasayfa\",\"item\":\"https:\/\/fatihsoysal.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"ES6 Mod\u00fclleri: JavaScript&#8217;te Import ve Export Kullan\u0131m\u0131\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/\",\"name\":\"Fatihsoysal.com\",\"description\":\"Blog - Yaz\u0131l\u0131m D\u00fcnyas\u0131 Tecr\u00fcbelerim\",\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/fatihsoysal.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"tr\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\",\"name\":\"Fatih Soysal\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"tr\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png\",\"contentUrl\":\"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png\",\"width\":512,\"height\":512,\"caption\":\"Fatih Soysal\"},\"logo\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/\"},\"description\":\"Kullan\u0131m ve kodlama m\u00fckemmeliyetini odak alan uygulamalar olu\u015fturma deneyimine sahip, profesyonel olarak 15+ y\u0131l \u00fczeri deneyime sahip bir yaz\u0131l\u0131m m\u00fchendisi.\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/author\/fatihsoysal\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"ES6 Mod\u00fclleri: JavaScript'te Import ve Export Kullan\u0131m\u0131 - Kodlar\u0131n Gizemli D\u00fcnyas\u0131","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/fatihsoysal.com\/blog\/es6-modulleri-javascriptte-import-ve-export-kullanimi\/","og_locale":"tr_TR","og_type":"article","og_title":"ES6 Mod\u00fclleri: JavaScript'te Import ve Export Kullan\u0131m\u0131","og_description":"ES6 Mod\u00fclleri: JavaScript'te Import ve Export Kullan\u0131m\u0131 Modern JavaScript geli\u015ftirmesinde mod\u00fcller, kodun d\u00fczenlenmesi, y\u00f6netilmesi ve yenide","og_url":"https:\/\/fatihsoysal.com\/blog\/es6-modulleri-javascriptte-import-ve-export-kullanimi\/","og_site_name":"Kodlar\u0131n Gizemli D\u00fcnyas\u0131","article_published_time":"2025-11-24T01:40:41+00:00","author":"Fatih Soysal","twitter_card":"summary_large_image","twitter_misc":{"Yazan:":"Fatih Soysal","Tahmini okuma s\u00fcresi":"14 dakika"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/fatihsoysal.com\/blog\/es6-modulleri-javascriptte-import-ve-export-kullanimi\/#article","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/es6-modulleri-javascriptte-import-ve-export-kullanimi\/"},"author":{"name":"Fatih Soysal","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"headline":"ES6 Mod\u00fclleri: JavaScript&#8217;te Import ve Export Kullan\u0131m\u0131","datePublished":"2025-11-24T01:40:41+00:00","mainEntityOfPage":{"@id":"https:\/\/fatihsoysal.com\/blog\/es6-modulleri-javascriptte-import-ve-export-kullanimi\/"},"wordCount":2491,"commentCount":0,"publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"articleSection":["Javascript"],"inLanguage":"tr","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/fatihsoysal.com\/blog\/es6-modulleri-javascriptte-import-ve-export-kullanimi\/#respond"]}],"copyrightYear":"2025","copyrightHolder":{"@id":"https:\/\/fatihsoysal.com\/blog\/#organization"}},{"@type":"WebPage","@id":"https:\/\/fatihsoysal.com\/blog\/es6-modulleri-javascriptte-import-ve-export-kullanimi\/","url":"https:\/\/fatihsoysal.com\/blog\/es6-modulleri-javascriptte-import-ve-export-kullanimi\/","name":"ES6 Mod\u00fclleri: JavaScript'te Import ve Export Kullan\u0131m\u0131 - Kodlar\u0131n Gizemli D\u00fcnyas\u0131","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/#website"},"datePublished":"2025-11-24T01:40:41+00:00","breadcrumb":{"@id":"https:\/\/fatihsoysal.com\/blog\/es6-modulleri-javascriptte-import-ve-export-kullanimi\/#breadcrumb"},"inLanguage":"tr","potentialAction":[{"@type":"ReadAction","target":["https:\/\/fatihsoysal.com\/blog\/es6-modulleri-javascriptte-import-ve-export-kullanimi\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/fatihsoysal.com\/blog\/es6-modulleri-javascriptte-import-ve-export-kullanimi\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Anasayfa","item":"https:\/\/fatihsoysal.com\/blog\/"},{"@type":"ListItem","position":2,"name":"ES6 Mod\u00fclleri: JavaScript&#8217;te Import ve Export Kullan\u0131m\u0131"}]},{"@type":"WebSite","@id":"https:\/\/fatihsoysal.com\/blog\/#website","url":"https:\/\/fatihsoysal.com\/blog\/","name":"Fatihsoysal.com","description":"Blog - Yaz\u0131l\u0131m D\u00fcnyas\u0131 Tecr\u00fcbelerim","publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/fatihsoysal.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"tr"},{"@type":["Person","Organization"],"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1","name":"Fatih Soysal","image":{"@type":"ImageObject","inLanguage":"tr","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png","contentUrl":"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png","width":512,"height":512,"caption":"Fatih Soysal"},"logo":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/"},"description":"Kullan\u0131m ve kodlama m\u00fckemmeliyetini odak alan uygulamalar olu\u015fturma deneyimine sahip, profesyonel olarak 15+ y\u0131l \u00fczeri deneyime sahip bir yaz\u0131l\u0131m m\u00fchendisi.","url":"https:\/\/fatihsoysal.com\/blog\/author\/fatihsoysal\/"}]}},"yoast_meta":{"yoast_wpseo_title":"","yoast_wpseo_metadesc":"","yoast_wpseo_canonical":""},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/34956","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/comments?post=34956"}],"version-history":[{"count":1,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/34956\/revisions"}],"predecessor-version":[{"id":34957,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/34956\/revisions\/34957"}],"wp:attachment":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/media?parent=34956"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/categories?post=34956"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/tags?post=34956"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}