Getting started with all cool features of ECMAScript 6! A better version in following link: http://goo.gl/OuwX9t

1. ECMAScript 6
Getting Started with ES6
http://goo.gl/OuwX9t
Nitay Neeman

2. ⚬ What is ECMAScript 6?
⚬ Brief history
⚬ A lot of new features
⚬ Conclusions
We will talk about

3. ECMAScript 6 is new standard of ECMA International.
Scheduled to be released on June 2015.
The project name is Harmony.
What is ES6?

4. ECMAScript is a standard of scripting languages.
Actually, it is the syntax.
JavaScript is an implementation of standard by specific
browsers.
There are many others implementations:
JScript, ActionScript, Ejscript, Objective-J, Nashorn…
All those very similar and depend on the application
that executes them.
Differences between ES & JS

5. ⚬ 1995 - LiveScript was born by Brendan Eich of Netscape (in 10
days!).
In the end of year, the name changed to JavaScript in order to
attract Java developers.
⚬ 1996 - Microsoft came and copied JavaScript for supporting of IE.
It was called JScript. Meanwhile, JavaScript was delivered to ECMA
International in purpose to be a standard of scripting languages.
⚬ 1997 - JavaScript was adopted by ECMA as ECMA-262 standard.
⚬ 1999 - Main version was ECMAScript 3.
Until this version, everything was fine...
Brief History

6. ⚬ 2000 ~ 2007 - ECMAScript 4 planned to provide a lot of complex
features. Microsoft, Yahoo & Google refused and started to develop
ECMAScript 3.1.
⚬ 2008 - Brendan Eich was back and announced that Ecma TC39
would focus work on the ECMAScript 3.1.
It was decided:
1. ECMAScript 3.1 will rename to ECMAScript 5.
2. ECMAScript 4 will rename to ECMAScript 6.
⚬ 2009 - ECMAScript 5 was published.
⚬ 2015 - ECMAScript 6 will be published.
Brief History

7. Cool history, but.. I WANT CODE!

8. A new and short way to create an anonymous function.
Arrow function created to be more semantic and readable.
Example of using:
Important issues:
⚬ It is not newable (will throw an error when you try..)
⚬ It can be used in expressions and in statements.
⚬ Fixed ‘this’ issue!
Arrows
var square = x => x * x;

9. The following code will not work (‘this’ will be the Window object):
Arrows - The meaning of ‘this’ issue
var timer = function () {
this.seconds = 0;
this.printSeconds = function () {
console.log(this.seconds);
};
setInterval(function () {
this.seconds++; // We cannot call to seconds field here
this.printSeconds(); // We cannot call to printSeconds here
}, 1000);
};
var myTimerInstance = new timer();

10. The solution based on arrow function:
Arrows - The meaning of ‘this’ issue
var fixedTimer = function () {
this.seconds = 0;
this.printSeconds = () => console.log(this.seconds);
setInterval(() => {
this.seconds++;
this.printSeconds();
}, 1000);
};
var myFixedTimerInstance = new fixedTimer();

11. Block-level Scope
Until now, all the variables was global. Blame the hoisting.
function getMyValueByCondition(condition) {
// myValue will be declared here and will set to be undefined.
if (condition) {
var myValue = "My Value";
return myValue;
} else {
// myValue will be undefined here.
}
// myValue will be undefined here.
}

12. Block-level Scope - let
Now, we can create a local variable by ‘let’ keyword!
let enables to block scoping.
Important issues:
⚬ Only one declaration in each scope (or you will get a syntax error).
⚬ Therefore, It is unusual to use let in the global scope.
⚬ Very useful for loops!
Example of using:
let x = 100;
var x = 'String'; // A syntax error will appear

13. Block-level Scope - const
Similar to ‘let’ keyword, we can declare now on a constants!
The keyword is ‘const’.
Important to note that:
⚬ Constant must be initialized once, and it cannot be changed.
⚬ Constant is a valid only for the current scope! (just like ‘let’).
Example of using:
const PI = 3.1415926536;
PI = 0; // A syntax error will appear

14. Default parameters allow parameters to be initialized with default values.
That is - the value will be defaulted in a case of:
⚬ No value was passed.
⚬ Undefined was passed.
Default Parameters
function getRoot(number, root = 2) {
return Math.pow(number, 1 / root);
}
// getRoot(49) will be 7.
// getRoot(8,3) will be 2.

15. Template Strings is a new syntax for the old strings.
It deals with the following problems:
⚬ Supporting in multiline strings has never been before.
⚬ Ability to separate parts of the string for values in variables.
⚬ Transformation of a string into html is not really safe.
Template Strings solve all those issues.
The syntax is very simple, and marked by backticks ( ` ).
Template Strings
let templateString = `Hello
World!`;

16. We can use substitutions on Template Strings:
Also, we can use tags on Template Strings:
Template Strings - Substitutions & Tags
let degrees = 90;
let templateString = `Conversion of 90 degrees into radians is: ${(degrees * Math.PI) / 180}`;
let printOfResultOnly = function (str, degrees, result) {
// str will be ["Conversion of ", " degrees into radians is:", ""]
return result;
};
templateString = printOfResultOnly`Conversion: ${degrees} degrees into radians is: ${(degrees
* Math.PI) / 180}`;

17. Classes are a better syntax over the prototype object.
What we will get in the bundle?
⚬ Creation of instances via ‘new’ keyword.
⚬ Encapsulating fields and functions that relevant the class.
⚬ Intuitive constructor is exist.
⚬ Even extend and override a methods!
⚬ Defining of static members.
⚬ Note that we cannot define private members.
Classes
class Animal {
constructor(age = 0) {
this.age = age;
}
eat() {}
}

18. Example of inheritance:
Classes
class Cat extends Animal {
constructor(age, name) {
super(age);
this.name = name;
}
eat() {
return `I am ${this.name}, and i love milk!`;
}
}
let kitty = new Cat(5, 'Kitty');

19. Until now, were two main approaches for modules:
⚬ CommonJS - Compact API that designed for synchronized loading.
It focuses in the server side.
Motivation: Simple and clear syntax.
Main Implementations: Node.js, RingoJS.
⚬ Asynchronous Module Definition - More complex API that designed for
asynchronous loading.
It focuses in the client side.
Motivation: Dependency management.
Main Implementation: RequireJS.
Modules

20. Modules are even more simple than CommonJS together with the
supporting in asynchronous loading of AMD!
There are two new keywords: export and import.
Example of using:
Modules
// math.js
export const PI = Math.PI;
export function square(x) {
return x*x;
}
// app.js
import {PI, square} from 'math'; // Alternatively, could be: import * as math from ‘math’
console.log(square(PI)); // Will be PI^2

21. Rest parameters is a better alternative to arguments.
The rest parameter is an array that marked by ‘...’ (three points).
All parameters that will be delivered from this location, will be in this array.
Example of using:
Rest Parameters
let myFunction = function(x, ...parametersThatIDontCare) {
// parametersThatIDontCare = [true, 'Cool String']
return x * parametersThatIDontCare.length;
};
myFunction(10, true, 'Cool String'); // Will be 20

22. Spread operator allows to deliver an array, and separate it to multiple
parameters in the declaration of function.
It should be inverse of rest parameters.
Example of using:
Spread Operator
let myFunction = function(str, x, y, z) {
return str + (x+y+z);
};
myFunction('The sum is:', ...[1, 10, 100]);

23. Destructuring is way to select a specific arguments from array or object
into variables. Actually, destructuring is matching between two collections
by different patterns.
Example of using:
Destructuring
let [a, , , b] = [1, 3, 5, 9];
console.log('a + b is: ' + (a + b)); // Will be 10
let { one, two, three: [, threeValue] } = {
one: 1,
two: 2,
three: [4, 3]
};
console.log('one + two + three is: ' + (one + two + threeValue)); // Will be 6
let [d, c] = [c, d]; // Swap the values without temp!

24. Symbol is new primitive type that used as private reference to property.
Symbols are unique!
The file must hold this symbol to access the property of object.
Example of using:
Symbols
var privateProperty = Symbol('Description: Private property');
var object = {};
object[privateProperty] = 'My Private';
console.log(privateProperty); // Is a symbol
console.log(object[privateProperty]); // Will print 'My Private'

25. Map is dictionary data structure that stores pairs of key and value.
Difference from object, now the key can be an object!
Map provides an API with: set, get, clear, forEach, size, and more!
Example of using:
Maps
let objectKey = {value: 100};
let map = new Map();
map.set('stringKey', 'The value is ');
map.set(objectKey, objectKey.value);
console.log(map.get('stringKey') + map.get(objectKey)); // Will be 'The value is 100'
console.log('Map size: ' + map.size); // Will be 2

26. Set is data structure of collection of values.
It wraps the old object with better API.
It provides an API with: add, has, clear, forEach, size, and more!
Example of using:
Sets
let mySetList = new Set();
mySetList.add('First').add('Second');
mySetList.add(true);
console.log(mySetList); // Will be {"First", "Second", true}
console.log(mySetList.has('Second')); // Will be true

27. Along all main features, little changes in numbers were made.
Until now, the methods isFinite and isNaN could get numbers as string:
Now, we have those methods in part of Number,
which will accept only numbers values:
Little changes of Numbers
console.log(isFinite("1")); // Will be true
console.log(isNaN("NaN")); // Will be true
console.log(Number.isFinite("1")); // Will be false
console.log(Number.isNaN("NaN")); // Will be false

28. Added function to identify if it is an integer!
Added a lot of new Math methods!
For example:
⚬ Math.acosh(x), Math.asinh(x), Math.atanh(x)
⚬ Math.log1p(x), Math.log10(x), Math.log2(x)
⚬ Math.trunc(x)
Little changes of Numbers
console.log(Number.isInteger(25.5)); // Will be false

29. ⚬ Object.observe - Allows to register to changes of data model by
callback (Feature of ES7).
⚬ Promises - Asynchronous operations.
⚬ Generators - Special functions that creates a type of iterators.
⚬ Proxies - Creating a proxy on a particular object allows a predefined
handler to get notified when something happens.
⚬ Array comprehensions - Syntax that allows you to quickly assemble a
new array based on an existing one (Feature of ES7).
⚬ Tail call optimization - Instead of create new stack frames, It reuses old
stack frames.
Unspoken features

30. ⚬ ECMAScript 6 standard of scripting languages.
⚬ ECMAScript 6 will be published on June 2015.
⚬ ECMAScript 6 will bring a lot of changes:
○ Arrows
○ let & const
○ Default parameters, Rest Parameters
○ Spread Operator
○ Template Strings
○ Classes & Modules
○ Destructuring
○ Symbols
○ Maps & Sets
○ Minor changes of Numbers
Conclusions

31. Questions
?