Overview of JavaScript Import and Export Methods

In JavaScript, exports and imports allow you to share variables, functions, or classes between different files (modules). There are various ways to do this:

1. Named Exports/Imports: You export multiple items using export { ... } and import them with import { ... }. Items must match by name.
2. Default Exports/Imports: You can export one default item per module using export default, and import it without braces using any name you choose.
3. Renaming Exports/Imports: Both exports and imports can be renamed using as.
4. Dynamic Imports: You can load modules dynamically at runtime using import().
5. CommonJS (Node.js): Exports using module.exports and imports using require().
6. AMD/UMD: Used for environments like RequireJS or browsers, allowing different loading methods.

This setup makes modular development in JavaScript more efficient and scalable across different environments.

1. Named Exports and Imports

Export:

// Export (Named Export)
export const myVariable = 'Hello';
export function myFunction() {
  console.log('This is a named function.');
}

Import:

// Import (Named Import)
import { myVariable, myFunction } from './myModule.js';

2. Default Exports and Imports

Export:

// Export (Default Export)
const myDefault = 'Default value';
export default myDefault;

Import:

// Import (Default Import)
import myDefault from './myModule.js';

3. Named and Default Exports Together

Export:

// Export (Named and Default together)
const myDefault = 'Default export';
const myNamed = 'Named export';

export default myDefault;
export { myNamed };

Import:

// Import (Named and Default together)
import myDefault, { myNamed } from './myModule.js';

4. Renaming Exports and Imports

Export:

// Export with Renaming
const variableToExport = 100;
export { variableToExport as renamedVariable };

Import:

// Import with Renaming
import { renamedVariable } from './myModule.js';

5. Importing Everything from a Module

Export:

// Export multiple named exports
export const myVariable = 'Hello';
export const anotherVariable = 'World';
export function myFunction() {
  console.log('Function from the module');
}

Import:

// Import everything as an object
import * as myModule from './myModule.js';

// Usage:
console.log(myModule.myVariable);  // 'Hello'
myModule.myFunction();  // 'Function from the module'

6. Dynamic Imports (Asynchronous Import)

Export:

// Export (Named Export as usual)
export const myVariable = 'Dynamically loaded';
export function myFunction() {
  console.log('Dynamically imported function.');
}

Import:

// Dynamic Import
import('./myModule.js').then((module) => {
  console.log(module.myVariable);  // Access dynamically loaded export
  module.myFunction();
});

7. CommonJS Modules (Node.js)

Export (CommonJS):

// Export (CommonJS)
const myVariable = 'CommonJS Variable';
const myFunction = () => console.log('CommonJS Function');

module.exports = { myVariable, myFunction };

Import (CommonJS):

// Import (CommonJS)
const { myVariable, myFunction } = require('./myModule.js');
console.log(myVariable);  // 'CommonJS Variable'
myFunction();  // 'CommonJS Function'

8. AMD (Asynchronous Module Definition)

Export (AMD):

// Export (AMD)
define(function() {
  return {
    myVariable: 'AMD variable',
    myFunction: function() {
      console.log('AMD function');
    }
  };
});

Import (AMD):

// Import (AMD)
require(['myModule'], function(myModule) {
  console.log(myModule.myVariable);  // 'AMD variable'
  myModule.myFunction();  // 'AMD function'
});

9. UMD (Universal Module Definition)

Export (UMD):

// Export (UMD)
(function (root, factory) {
  if (typeof define === 'function' && define.amd) {
    define(factory);
  } else if (typeof module === 'object' && module.exports) {
    module.exports = factory();
  } else {
    root.myModule = factory();
  }
}(this, function () {
  return {
    myVariable: 'UMD Variable',
    myFunction: function() {
      console.log('UMD Function');
    }
  };
}));

Import (UMD):

Depending on the environment, UMD can be imported as follows:

• Node.js (CommonJS):

const myModule = require('./myModule.js');
console.log(myModule.myVariable);  // 'UMD Variable'
myModule.myFunction();  // 'UMD Function'

• AMD (RequireJS):

require(['myModule'], function(myModule) {
  console.log(myModule.myVariable);  // 'UMD Variable'
  myModule.myFunction();  // 'UMD Function'
});

• Browser Global:

<script src="myModule.js"></script>
<script>
  console.log(myModule.myVariable);  // 'UMD Variable'
  myModule.myFunction();  // 'UMD Function'
</script>

Summary Table: Export and Import Comparison

This table and examples give a comprehensive view of how exports and imports work side by side in different module systems. Let me know if you'd like further clarification!