---

JavaScript modules are a way to organize and encapsulate code into separate files, making it easier to manage and reuse code in large projects. Modules allow you to break up your code into logical units, each with its own scope and dependencies, which can then be imported and used in other parts of your code. In JavaScript, there are two types of modules: ES6 modules and Common JS modules.

ES6 modules are the newer type of module in JavaScript and are supported in modern browsers and Node.js versions. They use the import and export keywords to define and use modules. ES6 modules are loaded asynchronously and have a static structure, which means that the imports and exports are resolved at compile time, rather than at runtime.

---

1. Import

Import is a keyword in JavaScript that is used to import functionalities from other modules or scripts. It is part of the ES6 module system, which allows you to organize your code into smaller, reusable modules that can be imported and used in other parts of your codebase.

Once you have imported a module, you can use its exports in your code. For example, if you have a module called math.js that exports a function called add, you can import it and use it like this:

Note that import statements must be at the top level of your module, and cannot be used inside functions or blocks.

Also, keep in mind that the ES6 module system is not yet fully supported in all browsers, so you may need to use a bundler like Webpack or Rollup to bundle your modules into a format that can be used in all browsers.

---

2. Export

Export is a keyword in JavaScript that is used to export variables, functions, classes, or other values from a module. It is part of the ES6 module system, which allows you to organize your code into smaller, reusable modules that can be imported and used in other parts of your codebase.

There are two types of exports in ES6: 

1. Named exports
2. Default exports

A. Named Exports

Import is a keyword in JavaScript that is used to import functionalities from other modules or scripts. It is part of the ES6 module system, which allows you to organise your code into smaller, reusable modules that can be imported and used in other parts of your codebase.

Also, keep in mind that the ES6 module system is not yet fully supported in all browsers, so you may need to use a bundler like Webpack or Rollup to bundle your modules into a format that can be used in all browsers.

---

B. Default Exports

Default exports allow you to export a single value from a module using a default identifier. You can export any value as a default export, but you can only have one default export per module. You can also combine named and default exports in the same module. Once you have exported a value from a module, you can import it into another module using the import keyword.

Note that the ES6 module system is not yet fully supported in all browsers, so you may need to use a bundler like Webpack or Rollup to bundle your modules into a format that can be used in all browsers.