1. Game-Changing Features in ES2015
Microsoft Virtual Academy
Header
Game-Changing Features in ES2015
Eric W. Greene
Produced by

2. Course Overview What is ES2015?
ES2015 Support in Web Browsers and Node.js
Block Scope
Template Strings
Arrow Functions
Classes
Generators

3. What is ES2015?
Formerly known as ES6, ES2015 is the newest version of ECMAScript, and was released in June 2015
Previous version of ECMAScript was ES5.1 released in June 2011
JavaScript is an implementation of the ECMAScript standard
For the full specs, visit the ECMA International web site
For this course, the name JavaScript and ES2015 will be used interchangeably

4. ES2015 Support in Web Browsers and Node.js
Over the history of JavaScript, there have been many engines, but only the latest engines support portions of ES20151
Microsoft's Chakra (powers Microsoft Edge and will be used to power Node.js)
Mozilla's SpiderMonkey
Google's V8 (powers both Chrome and Node.js)
Apple's JavaScriptCore
In addition to these engines, transpilers such as Babel ( Traceur ( and TypeScript ( support certain ES2015 features, and then transpile them to ES5.1 to run in older browsers 1.

5. Working with Block Scope
Before ES2015, JavaScript did not support block scope. Only functions created new scopes
This was confusing for C++, Java and C# developers, as those languages use block scope, not function scope (although functions are blocks so they do create new scopes)
To support block scope, the keywords let and const were added to the language
Unlike function scope, block scope variable declarations are not hoisted to the top of their scope
Function scope is still supported for variable declared with var, and function declarations

6. Working with Block Scope

7. Template Strings
Until ES2015, JavaScript did not possess a string interpolation capability
Template strings are initialized using backticks instead of the usual single and double quotes
Interpolated variables are wrapped in curly braces with a leading dollar sign
${someVariable}
Template strings can span multiple lines, similar to heredoc capabilities in other languages

8. Using Template Strings

9. Arrow Functions
Arrow functions (AKA lambdas) have been available in other languages for many years
In those other languages, arrow functions can easily be passed as parameters to functions
Unlike other languages, JavaScript has always possessed the ability to use functions as objects, nevertheless, arrow functions provide two important new features
Reduced syntax - typing function over and over, especially with the function source code nesting required for closures, arrow functions allow for more readable code
Retains the outside context of this, thereby avoiding the need to use closures or explicitly binding this to the outside context

10. Simplifying Code with Arrow Functions

11. Classes Better Syntax for Function Constructors
Classes are function constructors in disguise
Still the same prototype inheritance JavaScript has used since the beginning
Classes are not like C++, Java, or C# classes – even if the syntax appears similar
Classes support
Constructors & Inheritance
Accessor Properties & Prototype Functions
Static Functions defined on the Class (function object) itself
Can be used as declaration or expressions

12. Defining Objects with Classes

13. Generators
Borrowed from Python, and will seem familiar to C# developers
Generators provide a method of iterating over a data set, while yielding the result of each iteration before moving on to the next iteration
Allows the JavaScript program to consume the data as its produced, instead of waiting for an entire collection of data to be processed
Very useful in situations where data only needs to be processed until a certain condition is met, and/or allows asynchronous operations to be launched as data becomes available, instead of waiting until all data is available

14. Generating Data with Generators

15. Conclusion
ES2015 provides many new and useful features for the JavaScript language
While not fully supported by any of the JavaScript engines, most engines support a good portion of the ES2015 specification, with support getting better all of the time
When ES5.1 engines must be used, transpilers can transpile much of the ES2015 code to ES5.1 code
Game Changing features include Block Scope, Template Strings, Arrow Functions, Classes and Generators
All of these features are borrowed from other languages allowing for an easier transition of developers to JavaScript as it continues to expand its position in the marketplace