esra-justBI
1/30/2019 - 2:54 PM

Modules

Modules - reusable pieces of code that can be exported from one program and imported for use in another program.

  • find, fix & debug more easily
  • reuse and recycle defined logic in different parts of our application.
  • keep info private & protected from other modules
  • prevent pollution of the global namespace.

Pattern to export modules

  1. Define an object to represent the module
  2. Add data/behaviour to the module
  3. Export the module.

Pattern to import module:

  1. Import the module with require()
  2. Use the module & properties.

We can also wrap any collection of data & functions inan object, and export the object using module.exports.

Default export = works like module.exports, allowing to export one module per file.

Named exports - export data through the use of variables. Each export is stored in its own variable. In JS every function is in fact a function object. Named exports are also distinct in that they can be exported as soon as they are declared, by placing the keyword export in front of variable declarations. To import variables that are declared, we simply use the original syntax that describes the variable name. In other words, exporting upon declaration does not have an impact on how we import the variables.

Named exports also conveniently offer a way to change the name of variables when we export or import them. We can do this with the as keyword. To import named export aliases with the as keyword, we add the aliased variable in our import statement. Note that we have an option to alias an object that was not previously aliased when exported. Another way of using aliases is to import the entire module as an alias.

We can also use named exports and default exports together. While it's better to avoid combining two methods of exporting, it is useful on occasion. For example, if you suspect developers may only be interested in importing a specific function and won't need to import the entire default export.

We can import the collection of objects and functions with the same data.

Recap

  • module.exports exports the module for use in another program.
  • require() imports the module for use in the current program.
  • default exports use export default to export JavaScript objects, functions, and primitive data types.
  • named exports use the export keyword to export data in variables.
  • named exports can be aliased with the as keyword.
  • import is a keyword that imports any object, function, or data type.
modules
content_copyfile_download
//export
let Menu = {}; // the object that represents the module Menu
Menu.specialty = "Roasted Beet Burger with Mint Sauce"; //property of the Menu module. Add data to the object by setting properties & value on that object.

module.exports = Menu; //exports the menu object as a module. Module is a variable that represents the module, and exports exposes the module as an object.

//import
const Menu = require('./menu.js'); //enables a module to load by passing in the module's filepath as a parameter, with argument (./menu.js)

function placeOrder() { //uses Menu module in its function definition. 
  console.log('My order is: ' + Menu.specialty); //the specialty property defined in the menu module is accessed.
}

placeOrder();

//exports 2
let Menu = {};

module.exports = { //current module as an object
  specialty: "Roasted Beet Burger with Mint Sauce", //property
  getSpecialty: function() { //property
    return this.specialty;
  } 
};

const Menu = require('./menu.js');
console.log(Menu.getSpecialty());

//export default
let Menu = {};
export default Menu; //exports objects, functions, primitive data types.

//import 2
import Menu from './menu'; //Menu: specifies the name of the variable to store the default export in.
//from specifies where to load the module from.
//'./menu' is the name of the module to load. When dealing with local files, it specifically refers to the name of the file without the extension of the file.

//named exports
let specialty = ''; //string object
function isVegetarian() { //objects in the form of functions.
}; 
function isLowSodium() { //objects in the form of functions.
}; 

export { specialty, isVegetarian }; //exports objects by their variable names. 

//named imports
import { specialty, isVegetarian } from './menu';

//export named exports
export let specialty = ''; //allows us to export objects upon declaration
export function isVegetarian() {
}; 
function isLowSodium() {
};

//export & import as
export { specialty as chefsSpecial, isVegetarian as isVeg, isLowSodium };
import { chefsSpecial, isVeg } from './menu';
import {isLowSodium as saltFree} from 'Menu';
//import entire module as an alias
import * as Carte from './menu'; //module with alies 'Carte'
Carte.chefsSpecial; //whatever name we exported would be available to us as properties of that module
Carte.isVeg();
Carte.isLowSodium();

//combined exports
let specialty = '';
function isVegetarian() {
}; 
function isLowSodium() {
}; 
function isGlutenFree() {
};

export { specialty as chefsSpecial, isVegetarian as isVeg };
export default isGlutenFree;

//combining import statements 
import { specialty, isVegetarian, isLowSodium } from './menu';

import GlutenFree from './menu';