Understanding ECMA Script 6 Javascript by Gaurav Khurana

ECMA Script Javascript 6
By
Gaurav Khurana

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

• 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
3

– 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
4

– 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
5

• Various Other Features
6

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)
7

Lets get started
8

Background
9

Background continue. . .
10

Technical Committee
11

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)
12

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
13

Variable and scoping
• Typical problem with ES5
14

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.
15

var vs let
16

const
17

Question
• How will you create const in ECMA 5 ?
18

Block Scope
• Solution to this problem in ES5
19

Block Scope
• Solution to this problem in ES6
20

Block Scope
21

Block Function
22

Object Destructuring
23

Destructuring Array
24

Extraction from Objects and Swap
Variables
25

Destructuring Multiple Return Values
26

Destructuring refutable by default
27

Destructuring nested Objects
28

Destructuring nested Objects
29

Default Parameters
30

Arity
• Arity means number for parameters a function
can take.
31

Rest Parameters
32

Rest Restriction
33

Arity
• Arity means number for parameters a function
can take
34

Spread Operators
35

Named Parameters
36

Arrow Function
• Sugar Syntax
• Lexical this
• No Constructor
37

Arrow Function elaborated
38

Understanding lexical this
39

Understanding lexical this . . .
40

How Bind Would be working
41

Understanding lexical this . . .
42

Answer to Const in ECMA5
43

Object Orientation and modularity
44

Object Orientation and modularity . . .
45

Class old School way
46

Class ECMA5 way
47

Class ECMA 6 way
48

Module
• import
• export
49

Module . . .
50

Template String
51

Template String use case
52

Template String for Dynamic RegExp
53

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()
54

Map vs ECMA5 way
55

Map
56

Setting Map Different Ways
57

Object can be a Map
58

Iterating over Map
59

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.
60

Filtering and Mapping . . .
61

Set
• Set of Values (No Duplicates).
• Different Types of Values.
• add(key)/ has(key) / delete(key).
• entries() -> Iterator
62

Set . . .
Chrome
63

Question
Why I am not able to see methods of set2 or countries
object?
Chrome
64

Answer
• We are not able to see methods of set2 or
countries objects because they were made
enumerable : false
65

Answer . . .
66

WeakMap
• Avoid memory leak
• Reference to the key object held weakly
• Key must be an object
• No iterator methods
• No clear
67

WeakMap not working in Traceur
68

WeakMap in Chrome harmony
69

Object Methods
• Object.setPrototypeOf(obj, proto)
• Object.assign(obj, mixin)
• Object.is(value1, value2)
70

Object property Assignment
ES 5 vs ES6
71

Object.setPrototypeOf
Fix this problem
72

Object.setPrototypeOf fixing problem
Now there will be another
problem .. Any guess?Prepared By Gaurav Khurana
73

Object.is
74

String Methods
• startsWith
• endsWith
• Includes
• repeat
75

Number Methods
• .isNAN() better than isNAN()
• .isFinite()
• .isInteger()
76

Number Methods . . .
77

Number Methods . . .
78

Math methods
79

Math Methods . . .
80

Other Math methods
• log10, log2, log1p, expm1, cosh, sinh, tanh,
• acosh, asinh, atanh, hypot, trunc, sign
81

Array methods
• To be continued
82

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).
83

Proxy . . .
• Let’s use JavaScript as both meta programming
language and base programming language.
• Classic example is eval in javascript
84

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.
85

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.
86

Proxy . . .
• Self Modification Example
• It performs self-modification via the bracket operator
for property access, the assignment operator and
the delete operator
87

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)).
88

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.
89

Proxy . . .
• Firefox support proxy there by following is the
example of proxy
90

Proxy . . .
• As I said if handler doesn’t intercept the
operation the operation is performed on
target.
91

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.
92
Result

Proxy . . .
93
• Few more traps

For of loop
94

Generators
• Simple Example
95

Generators
• Passing Value Back to Generator
96

Generators
function* helloWorld(){
var next = yield "hello";
yield next;
}
var hw = helloWorld();
console.log(hw.next());
console.log(hw.next('world'));
97

Generators
yield next;
}
98

Generators
yield next;
}
99

Generators
yield next;
}
100

Generators
yield next;
}
101

Generators
var next = yield ;
yield next;
}
102

Generators
var next = yield
yield next;
}
103

Generators
var next = yield
yield next;
}
104

Generators
105

Promise
• Before we jump into promise let me create a
scenario to explain the actual need of
promise.
106

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
107

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
108

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
109

Promise
110

Promise
• What if the events happened before we
started listening for them
111

Promise
112

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
113

Promise
• Additionally I have created on promisify-xml-
httpRequest.html
114

115

Understanding ECMA Script 6 Javascript by Gaurav Khurana

Recommended

Recommended

More Related Content

Viewers also liked

Viewers also liked (17)

Recently uploaded

Recently uploaded (20)

Understanding ECMA Script 6 Javascript by Gaurav Khurana