Modules

• Code Organization
• Eliminate Global Namespace Conflicts
• Promotes Code Reuse

Global

A common practice is to create a global namespace reference in order to organize and share code while keeping a decent separation of concerns. ( Angular, React, jQuery etc. all do this. )

Require JS

One of the first mainstream module systems for Javascript that includes asynchronous loading and a build system.

 

Uses the asynchronous module definition specification ( AMD ).

Angular

Has it's own module system like require, but doesn't have a lazy/async loading system. Also known as Direct Injection or DI.  

 

Angular also defines different types of modules trying to add an opinionated design pattern to your application.

CommonJS

Another module standard.

ES6 Module

The ES6 standard.  Most flexible.

const

• prevent reassignment ( immutable )
• great for class or method references

Example

let

• block scope
• good for iteration
• doesn't "hoist"

Example

We see in the second example that the variable 'i' does not get hoisted and is not accessible to the rest of the function.

Promise

• Asynchronous Process Handling
• Kind of like a Callback ( but way better )
• Native Support
• Flat Code Structure
• Chaining
• Distributed

Callback Hell

Ultimately does the job, but can become a nightmare to maintain and test.

Reject / Resolve

A promise can be invoked and our code can respond once it is resolved or rejected.  

 

A promise that never resolves will never finish code execution.

Distributed

As long as we have a reference to the promise, different sections of our code can respond to the resolution.

WeakMap

• New Data Structure
• Maps an object -> object 
• Garbage Collected
• Is not enumerable

Example

WeakMaps have the following methods... set, get, delete and has.

class

• reminiscent of coffescript
• constructor()
• shortened function syntax

Example

=>

Javascript is functionally scoped, so the reference keyword `this` changes with it's context.  Fat arrow cleans this up a bit.

Template Strings

• String interpolation has always been a pain

Example

Conclusion

• Take a look at new ES6 language features
• Quickly gaining adoption in modern browsers
• Can use transpilers to get support today
• Promotes more modular vanilla JS 
• Will be harnessed more in Angular 1 & 2, React, Ember, etc.
• Take advantage of the open source community