{"id":8035,"date":"2021-08-17T12:05:42","date_gmt":"2021-08-17T12:05:42","guid":{"rendered":"https:\/\/www.scmgalaxy.com\/tutorials\/?p=8035"},"modified":"2022-04-13T16:30:44","modified_gmt":"2022-04-13T16:30:44","slug":"how-does-the-import-and-export-module-work-in-javascript","status":"publish","type":"post","link":"https:\/\/www.scmgalaxy.com\/tutorials\/how-does-the-import-and-export-module-work-in-javascript\/","title":{"rendered":"How does the Import and Export module work in JavaScript?"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\"><strong>What is Module<\/strong><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">In JavaScript, a Module is a JavaScript file where we write codes. The object is a module that is not available for use unless the module file exports them.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Exporting Module<\/strong><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">export &#8211; The export statement is used when creating JavaScript modules to export functions, objects, or primitive values from the module so they can be used by other programs with the import statement.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">There are two different types of export &#8211; named and default. You can have multiple named exports per module but only one default export.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Default Export<\/strong><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">You can have only one default export per module. A default export can be imported with any name.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>mobile.js<\/strong><\/p>\n\n\n\n<script src=\"https:\/\/gist.github.com\/vijaypk376\/e27fd4a53c4afe7031f59e4cee42ed6f.js\"><\/script>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Named Export<\/strong><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">You can have multiple named exports per module. Named exports are useful to export several values. During the import, it is mandatory to use the same name of the corresponding object.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>mobile.js<\/strong><\/p>\n\n\n\n<script src=\"https:\/\/gist.github.com\/vijaypk376\/fda5d2801c015ec1f3007030ca38ae87.js\"><\/script>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Named Export<\/strong><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">You can have multiple named exports per module. Named exports are useful to export several values. During the import, it is mandatory to use the same name of the corresponding object.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>mobile.js<\/strong><\/p>\n\n\n\n<script src=\"https:\/\/gist.github.com\/vijaypk376\/b7354d25186a5a4e80934a280f5d44aa.js\"><\/script>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Importing Module<\/strong><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">import &#8211;\u00a0 The static import statement is used to import bindings that are exported by another module. Imported modules are in strict mode whether you declare them as such or not.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Importing Defaults<\/strong><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">You can have only one default export per module. A default export can be imported with any name.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>mobile.js<\/strong><\/p>\n\n\n\n<script src=\"https:\/\/gist.github.com\/vijaypk376\/76527b487f1809518a9152f9fed21353.js\"><\/script>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>app.js<\/strong><\/p>\n\n\n\n<script src=\"https:\/\/gist.github.com\/vijaypk376\/755c7dcbbcd4ada2f918a7da01f27cc8.js\"><\/script>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Importing Named<\/strong><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">You can have multiple named exports per module. Named exports are useful to export several values. During the import, it is mandatory to use the same name of the corresponding object.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>mobile.js<\/strong><\/p>\n\n\n\n<script src=\"https:\/\/gist.github.com\/vijaypk376\/9e48d2e806d2149b4f4556de93a1f0bd.js\"><\/script>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>app.js<\/strong><\/p>\n\n\n\n<script src=\"https:\/\/gist.github.com\/vijaypk376\/dfb3834b694d7fa97061e48e7d439834.js\"><\/script>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Importing All<\/strong><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>mobile.js<\/strong><\/p>\n\n\n\n<script src=\"https:\/\/gist.github.com\/vijaypk376\/0af62339a17e70e62b4afe0040c543bf.js\"><\/script>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>app.js<\/strong><\/p>\n\n\n\n<script src=\"https:\/\/gist.github.com\/vijaypk376\/583de7bbf52bc8964aaa870a02deba75.js\"><\/script>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Importing Default and Named<\/strong><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>mobile.js<\/strong><\/p>\n\n\n\n<script src=\"https:\/\/gist.github.com\/vijaypk376\/1dfef39ec1ba40684401113396a21d6c.js\"><\/script>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>app.js<\/strong><\/p>\n\n\n\n<script src=\"https:\/\/gist.github.com\/vijaypk376\/ea6936168e80911505359282b49348a8.js\"><\/script>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>What is Module In JavaScript, a Module is a JavaScript file where we write codes. The object is a module [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_joinchat":[],"footnotes":""},"categories":[16],"tags":[2338,5144,1926,5095,297],"class_list":["post-8035","post","type-post","status-publish","format-standard","hentry","category-javascript","tag-export","tag-functions","tag-import","tag-javascript","tag-module"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v28.4 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>How does the Import and Export module work in JavaScript? - scmGalaxy<\/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:\/\/www.scmgalaxy.com\/tutorials\/how-does-the-import-and-export-module-work-in-javascript\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How does the Import and Export module work in JavaScript? - scmGalaxy\" \/>\n<meta property=\"og:description\" content=\"What is Module In JavaScript, a Module is a JavaScript file where we write codes. The object is a module [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.scmgalaxy.com\/tutorials\/how-does-the-import-and-export-module-work-in-javascript\/\" \/>\n<meta property=\"og:site_name\" content=\"scmGalaxy\" \/>\n<meta property=\"article:published_time\" content=\"2021-08-17T12:05:42+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-04-13T16:30:44+00:00\" \/>\n<meta name=\"author\" content=\"rajeshkumar\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"rajeshkumar\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.scmgalaxy.com\\\/tutorials\\\/how-does-the-import-and-export-module-work-in-javascript\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.scmgalaxy.com\\\/tutorials\\\/how-does-the-import-and-export-module-work-in-javascript\\\/\"},\"author\":{\"name\":\"rajeshkumar\",\"@id\":\"https:\\\/\\\/www.scmgalaxy.com\\\/tutorials\\\/#\\\/schema\\\/person\\\/a40e0dd38feee7c2779460a804d49361\"},\"headline\":\"How does the Import and Export module work in JavaScript?\",\"datePublished\":\"2021-08-17T12:05:42+00:00\",\"dateModified\":\"2022-04-13T16:30:44+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.scmgalaxy.com\\\/tutorials\\\/how-does-the-import-and-export-module-work-in-javascript\\\/\"},\"wordCount\":301,\"commentCount\":0,\"keywords\":[\"Export\",\"functions\",\"Import\",\"Javascript\",\"Module\"],\"articleSection\":[\"JavaScript\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.scmgalaxy.com\\\/tutorials\\\/how-does-the-import-and-export-module-work-in-javascript\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.scmgalaxy.com\\\/tutorials\\\/how-does-the-import-and-export-module-work-in-javascript\\\/\",\"url\":\"https:\\\/\\\/www.scmgalaxy.com\\\/tutorials\\\/how-does-the-import-and-export-module-work-in-javascript\\\/\",\"name\":\"How does the Import and Export module work in JavaScript? - scmGalaxy\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.scmgalaxy.com\\\/tutorials\\\/#website\"},\"datePublished\":\"2021-08-17T12:05:42+00:00\",\"dateModified\":\"2022-04-13T16:30:44+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.scmgalaxy.com\\\/tutorials\\\/#\\\/schema\\\/person\\\/a40e0dd38feee7c2779460a804d49361\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.scmgalaxy.com\\\/tutorials\\\/how-does-the-import-and-export-module-work-in-javascript\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.scmgalaxy.com\\\/tutorials\\\/how-does-the-import-and-export-module-work-in-javascript\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.scmgalaxy.com\\\/tutorials\\\/how-does-the-import-and-export-module-work-in-javascript\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.scmgalaxy.com\\\/tutorials\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How does the Import and Export module work in JavaScript?\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.scmgalaxy.com\\\/tutorials\\\/#website\",\"url\":\"https:\\\/\\\/www.scmgalaxy.com\\\/tutorials\\\/\",\"name\":\"scmGalaxy\",\"description\":\"A Platform for Software Engineers\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.scmgalaxy.com\\\/tutorials\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.scmgalaxy.com\\\/tutorials\\\/#\\\/schema\\\/person\\\/a40e0dd38feee7c2779460a804d49361\",\"name\":\"rajeshkumar\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/82337e1fc8642c7f36795aa0775af055a4f38882994004b593efd31758d4434e?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/82337e1fc8642c7f36795aa0775af055a4f38882994004b593efd31758d4434e?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/82337e1fc8642c7f36795aa0775af055a4f38882994004b593efd31758d4434e?s=96&d=mm&r=g\",\"caption\":\"rajeshkumar\"},\"url\":\"https:\\\/\\\/www.scmgalaxy.com\\\/tutorials\\\/author\\\/rajeshkumar\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How does the Import and Export module work in JavaScript? - scmGalaxy","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:\/\/www.scmgalaxy.com\/tutorials\/how-does-the-import-and-export-module-work-in-javascript\/","og_locale":"en_US","og_type":"article","og_title":"How does the Import and Export module work in JavaScript? - scmGalaxy","og_description":"What is Module In JavaScript, a Module is a JavaScript file where we write codes. The object is a module [&hellip;]","og_url":"https:\/\/www.scmgalaxy.com\/tutorials\/how-does-the-import-and-export-module-work-in-javascript\/","og_site_name":"scmGalaxy","article_published_time":"2021-08-17T12:05:42+00:00","article_modified_time":"2022-04-13T16:30:44+00:00","author":"rajeshkumar","twitter_card":"summary_large_image","twitter_misc":{"Written by":"rajeshkumar","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.scmgalaxy.com\/tutorials\/how-does-the-import-and-export-module-work-in-javascript\/#article","isPartOf":{"@id":"https:\/\/www.scmgalaxy.com\/tutorials\/how-does-the-import-and-export-module-work-in-javascript\/"},"author":{"name":"rajeshkumar","@id":"https:\/\/www.scmgalaxy.com\/tutorials\/#\/schema\/person\/a40e0dd38feee7c2779460a804d49361"},"headline":"How does the Import and Export module work in JavaScript?","datePublished":"2021-08-17T12:05:42+00:00","dateModified":"2022-04-13T16:30:44+00:00","mainEntityOfPage":{"@id":"https:\/\/www.scmgalaxy.com\/tutorials\/how-does-the-import-and-export-module-work-in-javascript\/"},"wordCount":301,"commentCount":0,"keywords":["Export","functions","Import","Javascript","Module"],"articleSection":["JavaScript"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.scmgalaxy.com\/tutorials\/how-does-the-import-and-export-module-work-in-javascript\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.scmgalaxy.com\/tutorials\/how-does-the-import-and-export-module-work-in-javascript\/","url":"https:\/\/www.scmgalaxy.com\/tutorials\/how-does-the-import-and-export-module-work-in-javascript\/","name":"How does the Import and Export module work in JavaScript? - scmGalaxy","isPartOf":{"@id":"https:\/\/www.scmgalaxy.com\/tutorials\/#website"},"datePublished":"2021-08-17T12:05:42+00:00","dateModified":"2022-04-13T16:30:44+00:00","author":{"@id":"https:\/\/www.scmgalaxy.com\/tutorials\/#\/schema\/person\/a40e0dd38feee7c2779460a804d49361"},"breadcrumb":{"@id":"https:\/\/www.scmgalaxy.com\/tutorials\/how-does-the-import-and-export-module-work-in-javascript\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.scmgalaxy.com\/tutorials\/how-does-the-import-and-export-module-work-in-javascript\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.scmgalaxy.com\/tutorials\/how-does-the-import-and-export-module-work-in-javascript\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.scmgalaxy.com\/tutorials\/"},{"@type":"ListItem","position":2,"name":"How does the Import and Export module work in JavaScript?"}]},{"@type":"WebSite","@id":"https:\/\/www.scmgalaxy.com\/tutorials\/#website","url":"https:\/\/www.scmgalaxy.com\/tutorials\/","name":"scmGalaxy","description":"A Platform for Software Engineers","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.scmgalaxy.com\/tutorials\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.scmgalaxy.com\/tutorials\/#\/schema\/person\/a40e0dd38feee7c2779460a804d49361","name":"rajeshkumar","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/82337e1fc8642c7f36795aa0775af055a4f38882994004b593efd31758d4434e?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/82337e1fc8642c7f36795aa0775af055a4f38882994004b593efd31758d4434e?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/82337e1fc8642c7f36795aa0775af055a4f38882994004b593efd31758d4434e?s=96&d=mm&r=g","caption":"rajeshkumar"},"url":"https:\/\/www.scmgalaxy.com\/tutorials\/author\/rajeshkumar\/"}]}},"_links":{"self":[{"href":"https:\/\/www.scmgalaxy.com\/tutorials\/wp-json\/wp\/v2\/posts\/8035","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.scmgalaxy.com\/tutorials\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.scmgalaxy.com\/tutorials\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.scmgalaxy.com\/tutorials\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.scmgalaxy.com\/tutorials\/wp-json\/wp\/v2\/comments?post=8035"}],"version-history":[{"count":1,"href":"https:\/\/www.scmgalaxy.com\/tutorials\/wp-json\/wp\/v2\/posts\/8035\/revisions"}],"predecessor-version":[{"id":8047,"href":"https:\/\/www.scmgalaxy.com\/tutorials\/wp-json\/wp\/v2\/posts\/8035\/revisions\/8047"}],"wp:attachment":[{"href":"https:\/\/www.scmgalaxy.com\/tutorials\/wp-json\/wp\/v2\/media?parent=8035"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.scmgalaxy.com\/tutorials\/wp-json\/wp\/v2\/categories?post=8035"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.scmgalaxy.com\/tutorials\/wp-json\/wp\/v2\/tags?post=8035"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}