JS Dictionary

My sort of JavaScript cheat in one place 😄

---

1. Module Pattern

Or Module Systems in JavaScript. Where "modules" refers to a small unit of independent, reusable code.

Importance:

• Maintainability
• Namespacing
• Reusability

Several ways to create:

• AMD (Asynchronous Module Definition)

  • Browser-first approach
  • Loads modules asynchronously

  define([], function() {
    /* ... */
  });

• CommonJS

  • Used in Node.js
  • Server-first approach
  • Loads modules synchronously

  // module.js
  module.exports = {
    /* ... */
  };
  
  // app.js
  require('./module');

• ES6 Modules

  • Compact and declarative syntax, also asynchronous module loading
  • imports are live read-only views of the exports (with CommonJS imports are copies of exports, consequently not alive)

  // module.js
  export const HELLO_WORLD = 'Konnichiwa ES6';
  export default {
    /* ... */
  };
  
  // app.js
  import * as modules from './module';

• IIFE (Immediately-Invoked Function Expression)

  • Anonymous Closure
  • Global Import
  • Object Interface
  • Revealing Module Pattern

  (function() {
    /* ... */
  })();

• UMD (Universal Module Definition)

  • Supports both CommonJS and AMD features

---

2. Classes

Prior simulation of classes

• Object Literals

  var JSFramework = {
    bias: 'ReactJS'
  };

• Constructor Functions

  function JSFramework() {
    this.bias = 'ReactJS';
  }
  
  // Instantiation
  var frontend = new JSFramework();

The syntactic sugar over existing prototype-based inheritance

• Classes

  // CLASS DECLARATION
  class JSFramework {
    constructor() {}
    /* ... */
  }
  
  // CLASS EXPRESSION
  const JSFramework = class {
    constructor() {}
    /* ... */
  };
  
  // Instantiation
  var frontend = new JSFramework();

---

3. Built-in Objects

• Array
• Function
• JSON
• Object
• Set

---

4. Defer vs Async

Proper usage of these features can potentially improve the efficiency of loading the script as well as the loading performance of the page.

The common practice would be to inject the script to the bottom of the page (before the closing </body> tag), specially when you need to support older browsers (do not support async and defer).

Both are boolean attributes and usage is similar:

// Async
<script async src="script.js"></script>
// Defer
<script defer src="script.js"></script>

Make sure to inject the script in the head, otherwise putting them in the bottom will make these attributes useless

Async

Script is fetched asynchronously, once it's ready the HTML parsing is paused to execute the script, then it's resumed. Hence, aysnc blocks the parsing of the page.

Defer

Scripts is fetched asynchronously, executed only after the HTML parsing is done. Hence, defer does not block the parsing and it's overall execution may even finishes well before, because it has been downloaded in parallel with the HTML parsing.

Comparison

• defer is obviously the winning solution in terms of speed
• defer in the head triggers the faster domInteractive event

  domInteractive event happens after the HTML is loaded, parsed and the DOM is built. CSS and images at this point are still to be parsed and loaded. Once this is done, the browser will emit the domComplete event, and then onLoad.

• async is executed in casual order, when they become available. While defer is executed in the order it appears in the page
• async works best with independent script

5. Cookie vs Session Storage vs Local Storage

---

Some Key Points to Remember

• JavaScript is the third layer of the layer cake of standard web technologies (HTML & CSS)

• Its common use is to dynamically modify HTML and CSS

• JavaScript is case sensitive

• Ways to add JavaScript to a page:

  • Internal - added in the HTML markup via the <script> tag
  • External - script is an external file also added via the <script> tag where src contains the path to the file

---

Cool Articles

• JavaScript Clean Code - Best Practices
• ECMAScript Modules in Browsers

References

• MDN Web Docs
• Node environment with Webpack and Babel
• Function Declaration vs Function Expression
• Defer and Async