The document summarizes a presentation on TypeScript and ES6 fundamentals. It introduces the speakers and their experience. The agenda covers an overview of JavaScript history, introductions to ES6, and new features in ES6 like assignment destructuring, default parameter values, rest parameters, arrow functions, block scoping, Sets, template literals, and object literals. It also discusses transpiling ES6 to ES5 and references additional ES6 resources.

1. JS
JSJavaScripters
JavaScripters community Initiative
http://www.javascripters.org
Saturday, 19 Dec 2015
TypeScript & ES6
Fundamentals

2. JS
JSJavaScripters
About Speakers
Imran Shaikh
Senior Front-end Engineer & HFI certified Usability Analyst
Around 11 years of experience
Author, Speaker & co-founder of JavaScripters community
Website: http://shaikh-imran.com
LinkedIn-profile: https://www.linkedin.com/in/shaikhimran786
Avinash Jha
Senior Front-end Engineer
Around 5 years of experience

3. JS
JSJavaScripters
Agenda
• TypeScript & ES6 Fundamentals
• Javascript History
• ES6 introduction
• Assignment De-structuring
• Set default parameter values
• Use variable args without the arguments object
• Define a function quicker than you can type “function () {}”
• Create variables with block scope
• Create and manipulate Sets
• Template Literals
• Object Literals

4. JS
JSJavaScripters
JavaScript History
• Invented at Netscape by Brendan Eich
• Mocha -> LiveScript -> JavaScript
•1996 -> Standardization taken by Ecma
• Renamed -> ECMAScript (trademark reasons)
•ECMAScript -> Spec
•JavaScript -> Implementation of ES
•ES6 -> Version of ES (old style)
•ES2015 -> Version of ES (new style)
•ES Harmony -> TC39’s wish list
•ES.Next -> Next version alias

5. JS
JSJavaScripters
ES6 Introduction
•ES6 – also known as Harmony, es-next, ES2015 – is the latest finalized specification of
the language
•The ES6 specification was finalized in June 2015, (hence ES2015)
•Future versions of the specification will follow the ES[YYYY] pattern, e.g ES2016 for ES7
•Yearly release schedule, features that don’t make the cut take the next train
•Since ES6 pre-dates that decision, most of us still call it ES6
•Starting with ES2016 (ES7), we should start using the ES[YYYY] pattern to refer to
newer versions
•Top reason for naming scheme is to pressure browser vendors into quickly implementing
newest features

6. JS
JSJavaScripters
ES6 isn’t fully in browser yet
…..right?

7. JS
JSJavaScripters
But
Transpilers to the rescue! 
What is Transpiler?
It simply take feature syntax and transpile it to today JS(ES5)
https://babeljs.io/

8. JS
JSJavaScripters
Assignment De-structuring
• Extract the weekday, month, date and year from Date() in one fell swoop:
var [day, month, date, year] = Date().split(' ');
•Using destructured assignment, you can extract multiple fields from an array and assign them to a
set of variables. It doesn’t quite work for objects yet, but arrays work fine.
var [ start, end ] = ["earth", "moon"] // initialize
console.log(start + " calling " + end); // earth calling moon
[start, end] = [end, start] // variable swapping
console.log(start + " calling " + end); // moon calling earth

9. JS
JSJavaScripters
Set default parameter values
Example :
let f = function(x, y=1) {console.log(x,y)};
f(22); // 22 1
•Finally, we can get rid of the various (sometimes dubious) default parameter patterns, with built-in
support for default parameters. Once destructured object assignments are complete, we’ll be able
to use those for setting defaults from named parameter objects as well.

10. JS
JSJavaScripters
Use variable args without the arguments object
Example:
let f = function(x,y,z, ...a) { console.log(a) }
f(1,2,3,7,8,9,'a','b','c'); // 7 8 9 'a' 'b' 'c’
•One word of wisdom I often see is that the arguments object is not an array, and you should not
treat it like one. With the rest operator, you don’t need the arguments object, and the rest of the
parameters really do end up in a real array.

11. JS
JSJavaScripters
Define a function quicker than you can type “function () {}”:
Example:
let f = (x) => x*x
•For a language that is arguably functional at heart, Javascript picked an unusually verbose
keyword to describe functions, especially given the prevalence of callback routines and object
methods which involve an awful lot of repetition of the word “function”. And while not everyone loves
CoffeeScript, I suspect even the haters are sometimes jealous of its arrow notation as a shortcut to
describe functions. The fat arrow knocks out two birds with one stone, as it also provides a
lexical this pointer, the lack of which confuses many a new Javascript programmer.

12. JS
JSJavaScripters
Create variables with block scope:
let f = function () {
let n=1;
for (let n=5,i=0; i<n; i++) {
console.log(i);
}
console.log(n);
};
f(); // 0 1 2 3 4 1
•Perhaps the most anticipated feature of Ecmascript 6 is the arrival of Block Scoping. One of the
single biggest drawbacks of Javascript is its scoping, especially the lack of block scoping, leading to
common anti-patterns like declaring every single local variable at the top of a function, regardless of
where it’s used. With the new let statement we finally have variables with lifetimes that last only until
the end of the block.

13. JS
JSJavaScripters
Create and manipulate Sets:
let s = new Set();
[2,3,5,4,5,2,2].map(x => s.add(x))
for (let i of s) {console.log(i)} // 2 3 4 5
•There’s a reason that mathematicians invented sets, and sometimes developers need them too.
Now instead of needing to implement them or rely on another JS library, they’re just there.

14. JS
JSJavaScripters
Template Literals
•You can declare strings with ` (backticks), in addition to " and '
•Strings wrapped in backticks are template literals
•Template literals can be multiline
•Template literals allow interpolation like `ponyfoo.com is ${rating}` where rating is a variable
•You can use any valid JavaScript expressions in the interpolation, such as `${2 * 3}` or `${foo()}`
•Add a fn prefix to fn`foo, ${bar} and ${baz}`
•fn is called once with template, ...expressions
•template is ['foo, ', ' and ', ''] and expressions is [bar, baz]

15. JS
JSJavaScripters
Object Literals
•Instead of { foo: foo }, you can just do { foo } – known as a property value shorthand
•Computed property names, { [prefix + 'Foo']: 'bar' }, where prefix: 'moz', yields { mozFoo: 'bar' }
•You can’t combine computed property names and property value shorthands, { [foo] } is invalid
•Method definitions in an object literal can be declared using an alternative,
more terse syntax, { foo () {}

16. JS
JSJavaScripters
Transpiler ES5 code into ES6
Good News Now we have ES5 to ES6
http://xto6.js.org/ 

17. JS
JSJavaScripters
References
• https://leanpub.com/understandinges6/
• http://es6-features.org/
• http://www.es6fiddle.com/
• https://ponyfoo.com/articles/es6
Breaking News
•http://microsoft-news.com/microsoft-and-google-collaborated-on-making-typescript-more-awesome/