2. Table of content
• History
• Goals of ECMAScript 6.
• What changes are incorporated in Javascript?
• Variables and Scoping.
– Block-Scoped Variables.
– Destructuring Objects.
• Extraction from Objects and Swap Variables
– Objects Literals.
– Multiple return Values.
– Destructuring Arrays.
– Destructuring Refutable by default.
Prepared By Gaurav Khurana
(khurana.g@hotmail.com)
2
3. • Parameter Handling
– Parameter default Values.
– Rest parameters.
– Spread Operators.
– Named parameters.
• Arrow Functions
– Less to type.
– Lexical this no more that/self=this.
• Object Orientation and Modularity
– Object Literals
– Classes
Prepared By Gaurav Khurana
(khurana.g@hotmail.com)
3
4. – Subclass
– Modules :- named exports.
– Modules :- default export.
– Modules other features.
• Template String
– String interpolation
– Interpolation , raw string
– Regular Expression
– Other use cases
• Standard Library
– Map
– Sets
Prepared By Gaurav Khurana
(khurana.g@hotmail.com)
4
5. – Object.assign
– New String Methods
– New Array Methods
• Loops and Iteration
– Iterables and Iterators
– For of loop
• Generators
– Implementing an Iterator
– Asynchronous programming
• Symbols
– Enum -style value
– Property keys
Prepared By Gaurav Khurana
(khurana.g@hotmail.com)
5
6. • Various Other Features
Prepared By Gaurav Khurana
(khurana.g@hotmail.com)
6
7. Prerequisite
• Knowledge of ECMAScript 3 javascript is must
• ECMAScript 5 is a plus.
• Object Oriented Javascript advance
understanding.
• Understanding of nodejs would be plus (not
mandatory)
Prepared By Gaurav Khurana
(khurana.g@hotmail.com)
7
12. Important ES6 Terms
• TC39 (Ecma Technical Committee 39): the committee
evolving
JavaScript.
– Members: companies (all major browser vendors etc.).
– Meetings attended by employees and invited experts.
• ECMAScript: the official name of the language
– Versions: ECMAScript 5 is short for “ECMAScript Language
Specification, Edition 5”
• JavaScript:
– colloquially: the language
– formally: one implementation of ECMAScript
• ECMAScript Harmony: improvements after ECMAScript 5
(ECMAScript 6 and 7)
Prepared By Gaurav Khurana
(khurana.g@hotmail.com)
12
13. What changes are incorporated in
Javascript
• Variable and Scoping.
• Parameter Handling
• Arrow Functions
• Object Orientation and Modularity
• Template String
• Standard Library
• Loops and Iteration
• Symbols
Prepared By Gaurav Khurana
(khurana.g@hotmail.com)
13
14. Variable and scoping
• Typical problem with ES5
Prepared By Gaurav Khurana
(khurana.g@hotmail.com)
14
15. Block Scope
• Each Block has its own Lexical Enviorment.
• Let/const bind variables to the lexical
Enviorment.
• Variables declared with let/const are NOT
hoisted.
Prepared By Gaurav Khurana
(khurana.g@hotmail.com)
15
52. Template String use case
Prepared By Gaurav Khurana
(khurana.g@hotmail.com)
52
53. Template String for Dynamic RegExp
Prepared By Gaurav Khurana
(khurana.g@hotmail.com)
53
54. Map
• Key Value
• Maps can have non-string keys (Object can be
key)
• Maps don't have prototype leakage issues, i.e. no
need to
• use hasOwnProperty()
• Different Types of Values
• get(key)/ has(key) / set(key,val)
• clear()
• entries()
Prepared By Gaurav Khurana
(khurana.g@hotmail.com)
54
55. Map vs ECMA5 way
Prepared By Gaurav Khurana
(khurana.g@hotmail.com)
55
60. Filtering and Mapping
• You can map() and filter() arrays, but there are
no such operations for maps. The solution
1. Convert the map into an array of [key,value]
pairs.
2. Map or filter the array.
3. Convert the result back to a map.
Prepared By Gaurav Khurana
(khurana.g@hotmail.com)
60
62. Set
• Set of Values (No Duplicates).
• Different Types of Values.
• add(key)/ has(key) / delete(key).
• entries() -> Iterator
Prepared By Gaurav Khurana
(khurana.g@hotmail.com)
62
63. Set . . .
Chrome
Prepared By Gaurav Khurana
(khurana.g@hotmail.com)
63
64. Question
Why I am not able to see methods of set2 or countries
object?
Chrome
Prepared By Gaurav Khurana
(khurana.g@hotmail.com)
64
65. Answer
• We are not able to see methods of set2 or
countries objects because they were made
enumerable : false
Prepared By Gaurav Khurana
(khurana.g@hotmail.com)
65
67. WeakMap
• Avoid memory leak
• Reference to the key object held weakly
• Key must be an object
• No iterator methods
• No clear
Prepared By Gaurav Khurana
(khurana.g@hotmail.com)
67
68. WeakMap not working in Traceur
Prepared By Gaurav Khurana
(khurana.g@hotmail.com)
68
69. WeakMap in Chrome harmony
Prepared By Gaurav Khurana
(khurana.g@hotmail.com)
69
80. Math Methods . . .
Prepared By Gaurav Khurana
(khurana.g@hotmail.com)
80
81. Other Math methods
• log10, log2, log1p, expm1, cosh, sinh, tanh,
• acosh, asinh, atanh, hypot, trunc, sign
Prepared By Gaurav Khurana
(khurana.g@hotmail.com)
81
82. Array methods
• To be continued
Prepared By Gaurav Khurana
(khurana.g@hotmail.com)
82
83. Proxy
• Before we can get into what proxies are and
why they are useful, we first need to
understand what meta programming is.
• In programming we have two levels
– Base Level/application level (Code process user
input)
– Meta level(code process base level code).
Prepared By Gaurav Khurana
(khurana.g@hotmail.com)
83
84. Proxy . . .
• Let’s use JavaScript as both meta programming
language and base programming language.
• Classic example is eval in javascript
Prepared By Gaurav Khurana
(khurana.g@hotmail.com)
84
85. Proxy . . .
• Lets look at another example in pure javascript
• The program is examining its own structure while running. This doesn’t
look like meta programming, because the separation between
programming constructs and data structures is vague in JavaScript. All of
the Object.* methods can be considered meta programming functionality.
Prepared By Gaurav Khurana
(khurana.g@hotmail.com)
85
86. Proxy . . .
• Different Types of Meta Programming
– Introspection:- You have read only access to the
structure of a program. Example (Object.keys())
– Self-Modification:- You can change that
structure.(Will show you example of this)
– Intercession:- You can redefine the semantics of
some language operations.
Prepared By Gaurav Khurana
(khurana.g@hotmail.com)
86
87. Proxy . . .
• Self Modification Example
• It performs self-modification via the bracket operator
for property access, the assignment operator and
the delete operator
Prepared By Gaurav Khurana
(khurana.g@hotmail.com)
87
88. Proxy . . .
• JavaScript doesn’t currently support
intercession, proxies were created to fill that
gap.
• Operations we perform on Javascript objects
can be say
– Getting a property prop (obj.prop)
– Listing enumerable own properties (via
Object.keys(obj)).
Prepared By Gaurav Khurana
(khurana.g@hotmail.com)
88
89. Proxy . . .
• Proxies are special objects that allow you to
provide custom implementations for some of
these operations.
• A Proxy is created with two parameters
– Handler
• For each operation, there is a corresponding handler
method that – if present performs that operation.
• Such a method intercepts the operation (on its way to the
target) and is called a trap
– Target
• If the handler doesn’t intercept an operation then it is
performed on the target i.e. it acts as a fallback for handler.
Prepared By Gaurav Khurana
(khurana.g@hotmail.com)
89
90. Proxy . . .
• Firefox support proxy there by following is the
example of proxy
Prepared By Gaurav Khurana
(khurana.g@hotmail.com)
90
91. Proxy . . .
• As I said if handler doesn’t intercept the
operation the operation is performed on
target.
Prepared By Gaurav Khurana
(khurana.g@hotmail.com)
91
92. Proxy . . .
• As a matter of fact we made get request for
name in pervious example and for the same
we doesn’t have trap(or handler) assigned.
• Lets assign the same.
Prepared By Gaurav Khurana
(khurana.g@hotmail.com)
92
Result
93. Proxy . . .
Prepared By Gaurav Khurana
(khurana.g@hotmail.com)
93
• Few more traps
106. Promise
• Before we jump into promise let me create a
scenario to explain the actual need of
promise.
Prepared By Gaurav Khurana
(khurana.g@hotmail.com)
106
107. Promise
• As we are familiar with the fact that java script
is single threaded.
• In browsers, JavaScript shares a thread with a
load of other stuff.
• What that stuff is differs from browser to
browser, but typically JavaScript is in the same
queue as painting, updating styles, and
handling user actions
Prepared By Gaurav Khurana
(khurana.g@hotmail.com)
107
108. Promise
• As a human being, you're multithreaded. You can
type with multiple fingers, you can drive and hold
a conversation at the same time.
• The only blocking function we have to deal with is
sneezing, where all current activity must be
suspended for the duration of the sneeze.
• That's pretty annoying, especially when you're
driving and trying to hold a conversation. You
don't want to write code that's sneezy
Prepared By Gaurav Khurana
(khurana.g@hotmail.com)
108
109. Promise
• You've probably used events and callbacks to get around
this. Here are events:
• Lets assume we need a intimation from browser when our
image is loaded.
• Lets Run this on browser
Prepared By Gaurav Khurana
(khurana.g@hotmail.com)
109
113. Promise
• Lets implement a Promise on Ajax call.
• I have created small http server using nodejs
which is listening to port 8888 and will return
text of file test.txt if requested url is /getData
Prepared By Gaurav Khurana
(khurana.g@hotmail.com)
113
114. Promise
• Additionally I have created on promisify-xml-
httpRequest.html
Prepared By Gaurav Khurana
(khurana.g@hotmail.com)
114