A history of different JavaScript module formats - https://youtu.be/GebL7ToOohE

1-globals.js

var MY_CONSTANT = 42

// Implementation of a class
var MyClass = function () {
  // constructor
}
MyClass.prototype.getAnswer = function () {
  return MY_CONSTANT
}

// Consumer of a class
var myInstance = new MyClass()
myInstance.getAnswer()

2-namespaces.js

// Namespace: still a global, but at least 'scoped'
window.NS = {} || window.NS

// Dependency of MyClass, not in global scope
NS.MY_CONSTANT = 42

// Implementation of a class
NS.MyClass = function () {
  // constructor
}
NS.MyClass.prototype.getAnswer = function () {
  return NS.MY_CONSTANT
}

//////////////////////////////////////////////////

// functionality available via namespace access
new NS.Carrousel()

3-iife.js

;(function () {
  // internal definition - truly private, no globals
  var MY_CONSTANT = 42

  // Implementation of a class
  var MyClass = function () {
    // constructor
  }
  MyClass.prototype.getAnswer = function () {
    return MY_CONSTANT
  }

  // Consumer of a class
  var myInstance = new MyClass()
  myInstance.getAnswer()
})()

4-module-pattern.js

// dependencies specified as arguments
var MyClass = (function (jQuery) {
  // internal definition - truly private, no globals
  var APPROXIMATE_ANSWER = 40

  // Implementation of a class
  var MyClass = function () {
    this.answerModifier = jQuery.get('https://answ.er/')
  }
  MyClass.prototype.getAnswer = function () {
    return APPROXIMATE_ANSWER + this.answerModifier
  }

  // functionality available via explicit return
  return MyClass
})(jQuery) // dependencies given as arguments

//////////////////////////////////////////////////

// Consumer of a class
var myInstance = new MyClass()
myInstance.getAnswer()

5-nodejs-commonjs.js

// dependencies loaded via require()
var http = require('http')
var router = require('./router.js')

var startServer = function () {
  var server = http.createServer(router)
  server.listen(8080)
}

// functionality available via explicit export
exports = { startServer } // same as module.exports

//////////////////////////////////////////////////

;(function (exports, require, module, __filename, __dirname) {
  //
  // ... your source code
  //
}.call(thisValue, exports, require, module, filename, dirname))

6.0-amd.js

// dependencies specified as arguments
define(['jquery', 'b'], function (jQuery, b) {
  // internal definition - truly private, no globals
  var APPROXIMATE_ANSWER = 40

  // Implementation of a class
  var MyClass = function () {
    this.answerModifier = jQuery.get('https://answ.er/')
  }
  MyClass.prototype.getAnswer = function () {
    return APPROXIMATE_ANSWER + this.answerModifier
  }

  // functionality available via explicit return
  return MyClass
})

6.1-amd-require.js

define(function (require) {
  // ..
  // async dependencies specified as arguments to require()
  require(['jquery'], function (jQuery) {
    // internal definition - truly private, no globals
    var APPROXIMATE_ANSWER = 40

    // Implementation of a class
    var MyClass = function () {
      this.answerModifier = jQuery.get('https://answ.er/')
    }
    MyClass.prototype.getAnswer = function () {
      return APPROXIMATE_ANSWER + this.answerModifier
    }
  })
})

6.2-umd.js

// Universal Module Definition
;(function (root, factory) {
  if (typeof define === 'function' && define.amd) {
    define(['jquery'], factory)
  } else if (typeof module === 'object' && module.exports) {
    module.exports = factory(require('jquery'))
  } else {
    root.returnExports = factory(root.jquery)
  }
})(typeof self !== 'undefined' ? self : this, function (jquery) {
  //
  // ... your source code, using `jquery`
  //
})

7-es-modules.js

import express from 'npm:express@^4.18'

const ANSWER = 42

class MyClass {
  constructor() {
    // ...
  }
  async getAnswer() {
    const { sqrt } = await import('math')
    return sqrt(1764)
  }
}

export { ANSWER } // list of named exports
export default MyClass // single unnamed export