Modern JS

What is JavaScript ? What is modern JavaScript ?

Web page events & DHTML AJAX & DOM jQuery JavaScript components JavaScript MVC JavaScript outside of a browser Languages that produce JavaScript: JSX and Typescript So what is modern JavaScript ?

Modern JavaScript essentials: Concepts and tools

ECMAScript: ES5, ES5.1, ES6 (or ECMAScript 2015), ES7 (or ECMAScript 2016), ES8 (or ECMAScript 2017) ES.Next - The 'catch-all' ECMAScript future Shims and Polyfills Minifiers-Obfuscators-Compressors and Source Maps Package managers Transpiling and transpilers Modules, namespaces & module types Module loaders and bundlers

JavaScript key concepts & syntax

ES5 - ECMAScript 5 & ECMAScript 5.1

ES5: Understanding scope and functions in JavaScript ECMASCript 5/ECMAScript 5.1 are functionally equivalent ES5: 'use strict' ES5: var, scope, hoisting and undefined ES5 strict mode prevents access to undeclared variables ES5: Equality symbols ==, !=, === and !== ES5: Function declarations, function expressions, and immediately-invoked function expressions (IIFE) Multiple ways to create JavaScript namespaces Why are JavaScript namespaces so convoluted in ES5 ? ES5: Lexical scope, the this execution context and closures The JavaScript global object and the this, global and window keywords What is the difference between the apply(), call() and bind() functions that alter the this context ? Careful reassigning this to potentially conflicting keywords

ES6 - ECMAScript 6 / ECMAScript 2015

ES6: Scoping and namespaces from ES5 resolved, modules, functions get new syntax and behaviors, plus additional "syntactic sugar" ES6: Block scope, let and const Use let and const over var ES6: Modules, namespaces, export and import ES6: Files, modules, scripts, <script> tag, <script type="module"> tag and <module> tag Pre-ES6 modules detour: CommonJS, AMD and UMD; plus a first look at transpiling and bundlers You should avoid transpilation and any other heavyweight operation -- like loading SystemJS -- on browsers ES6: Arrow functions with => and default function values ES6: Generators - Functions with * and yield ES6: Spread/rest ... operator, template literals and tagged templates with backquotes ` `

ES7 & ES8 - ECMAScript 2016 & ECMAScript 2017

ES2016 (ES7): A little "syntactic sugar", nothing more ES2017 (ES8): Asynchronous functions with async and await