🟨JavaScript modules

organized and re-usable code (the "set phrases")

Organizing JavaScript code into reusable modules allows for:

• namespace cleanliness: variable names do not get reused and cause confusion

  • instead of calling doStuff, you would call moduleX.doStuff and ensure that moduleX is unique to the program

• functional focus: have one piece of code do one thing and one thing well!

  • this also makes the code more portable and shareable

  • we don't even have to know how they work internally

    • we just care that they do what we want them to do

These ways require ES6 (i.e. use Babel if required) and assume that the imported module lives in the same folder as the importing module

Newer way of doing modules (used in React)

moduleToExport.js

const moduleToExport = { 
    property1: "hi",
    property2: function() { return true },
    property3: function() { return "hi" },
    ...
}

export default moduleToExport

moduleThatImports.js

import * as ImportedModule from './moduleToExport.js'

console.log(ImportedModule.property3)
// "hi"

Note that we can shorten our code slightly by rearranging the export syntax:

moduleToExport.js

export default const moduleToExport = { 
    property1: "hi",
    property2: function() { return true },
    property3: function() { return "hi" },
    ...
}

Older way of doing modules

moduleToExport.js

const moduleToExport = { 
    property1: "hi",
    property2: function() { return true },
    property3: function() { return "hi" }
}

// note the "module" object instead of the "export" keyword
module.exports = moduleToExport

moduleThatImports.js

// note the "require" method
const ImportedModule = require('./moduleToExport.js')

console.log(ImportedModule.property3)