Contents hide 1) Export in Javascript 1.1) Named Export 1.2) Default Export: 2) Import in Javascript 2.1) Importing named export 2.2) Importing default export In this tutorial, we will see how to use import and export in javascript. Due to one of the best features of the ES6 is the ability to import and export the javascript module. Before the ES6 we used to import module using require() function. Export in Javascript There are two different types of export In ES6, named and default. ES6 modules are stored in files. There is only one module per file and one file per module. Named Export A module can export multiple things just by using the export keyword in prefix. The module can export a function or an object or a string. The named export means the function or a variable declared by its name can be exported. utils.js // Exporting a function named `add` export function add(x,y){ return x + y } // Exporting a variable named `company` export let company = ['scotch.io','codepen.io','geekstrick.com','css-trick.com'] Default Export: This default export can only export a single functionality. It allows to export only a single function, objects, or primitive values but you can use the different name while import the module. using default export you donβt have to define a function or a variable name. warning.js // Exporting a function without a name export default function () { alert("Hello there you got a warning."); } Note: you can have more than one default export in a module. Instead use the Named Export type. Also, note that exporting without the default keyword means we will have to use curly braces to import the file. Import in Javascript For importing a module into any script, we can use the import keyword. will use the named export example. Importing named export Here also we can import in two different ways individual imports or import whole module. using-utils.js // importing individual import { add, company } from 'util'; In the above example we are explicitly bringing in the function and variable. Also, we can import the whole module referred by name. using-utils.js // Importing whole module referred by name import * as util from 'util'; console.log(util.addTwoNumbers(2,13)); console.log(util.students); Importing default export A default export can be imported as same above just we have to remove the braces and yeah of course we have to refer a name to that default imported module. using-warning.js // Importing default exported module referred by name import warning from 'warning' Get More tutorials on JavaScript Share this:TwitterFacebookRedditLinkedInWhatsAppPrintTumblr Related Tags: Import and Export in JS, JavaScript, javascript concepts