Understanding ECMA Script 6 Javascript by Gaurav Khurana
115
ECMA Script Javascript 6 By Gaurav Khurana
-
Upload
gaurav-khurana -
Category
Technology
-
view
923 -
download
1
Transcript of Understanding ECMA Script 6 Javascript by Gaurav Khurana
ECMA Script Javascript 6By
Gaurav Khurana
Prepared By Gaurav Khurana ([email protected])
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 ([email protected])
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 ([email protected])
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 ([email protected])
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 ([email protected])
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 ([email protected])
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 ([email protected])
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 ([email protected])
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 ([email protected])
31
Arity
• Arity means number for parameters a function can take.
Prepared By Gaurav Khurana ([email protected])
34
Arity
• Arity means number for parameters a function can take
Prepared By Gaurav Khurana ([email protected])
37
Arrow Function
• Sugar Syntax• Lexical this• No Constructor
Prepared By Gaurav Khurana ([email protected])
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 ([email protected])
60
Filtering and Mapping
• You can map() and filter() arrays, but there are no such operations for maps. The solution1. 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 ([email protected])
62
Set
• Set of Values (No Duplicates).• Different Types of Values.• add(key)/ has(key) / delete(key).• entries() -> Iterator
Prepared By Gaurav Khurana ([email protected])
64
Question
Why I am not able to see methods of set2 or countries object?
Chrome
Prepared By Gaurav Khurana ([email protected])
65
Answer
• We are not able to see methods of set2 or countries objects because they were made enumerable : false
Prepared By Gaurav Khurana ([email protected])
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 ([email protected])
70
Object Methods
• Object.setPrototypeOf(obj, proto)• Object.assign(obj, mixin)• Object.is(value1, value2)
Prepared By Gaurav Khurana ([email protected])
73
Object.setPrototypeOf fixing problem
Now there will be another problem .. Any guess?
Prepared By Gaurav Khurana ([email protected])
75
String Methods
• startsWith• endsWith• Includes• repeat
Prepared By Gaurav Khurana ([email protected])
76
Number Methods
• .isNAN() better than isNAN()• .isFinite()• .isInteger()
Prepared By Gaurav Khurana ([email protected])
81
Other Math methods
• log10, log2, log1p, expm1, cosh, sinh, tanh,• acosh, asinh, atanh, hypot, trunc, sign
Prepared By Gaurav Khurana ([email protected])
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 ([email protected])
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 ([email protected])
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 ([email protected])
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 ([email protected])
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 ([email protected])
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 ([email protected])
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 ([email protected])
90
Proxy . . .
• Firefox support proxy there by following is the example of proxy
Prepared By Gaurav Khurana ([email protected])
91
Proxy . . .
• As I said if handler doesn’t intercept the operation the operation is performed on target.
Prepared By Gaurav Khurana ([email protected])
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.
Result
Prepared By Gaurav Khurana ([email protected])
97
Generators
function* helloWorld(){ var next = yield "hello"; yield next;}
var hw = helloWorld();console.log(hw.next());console.log(hw.next('world'));console.log(hw.next());
Prepared By Gaurav Khurana ([email protected])
98
Generators
function* helloWorld(){ var next = yield "hello"; yield next;}
var hw = helloWorld();console.log(hw.next());console.log(hw.next('world'));console.log(hw.next());
Prepared By Gaurav Khurana ([email protected])
99
Generators
function* helloWorld(){ var next = yield "hello"; yield next;}
var hw = helloWorld();console.log(hw.next());console.log(hw.next('world'));console.log(hw.next());
Prepared By Gaurav Khurana ([email protected])
100
Generators
function* helloWorld(){ var next = yield "hello"; yield next;}
var hw = helloWorld();console.log(hw.next());console.log(hw.next('world'));console.log(hw.next());
Prepared By Gaurav Khurana ([email protected])
101
Generators
function* helloWorld(){ var next = yield "hello"; yield next;}
var hw = helloWorld();console.log(hw.next());console.log(hw.next('world'));console.log(hw.next());
Prepared By Gaurav Khurana ([email protected])
102
Generators
function* helloWorld(){ var next = yield ; yield next;}
var hw = helloWorld();console.log(hw.next());console.log(hw.next('world'));console.log(hw.next());
Prepared By Gaurav Khurana ([email protected])
103
Generators
function* helloWorld(){ var next = yield yield next;}
var hw = helloWorld();console.log(hw.next());console.log(hw.next('world'));console.log(hw.next());
Prepared By Gaurav Khurana ([email protected])
104
Generators
function* helloWorld(){ var next = yield yield next;}
var hw = helloWorld();console.log(hw.next());console.log(hw.next('world'));console.log(hw.next());
Prepared By Gaurav Khurana ([email protected])
106
Promise
• Before we jump into promise let me create a scenario to explain the actual need of promise.
Prepared By Gaurav Khurana ([email protected])
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 ([email protected])
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 ([email protected])
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 ([email protected])
111
Promise
• What if the events happened before we started listening for them
Prepared By Gaurav Khurana ([email protected])
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 ([email protected])
114
Promise
• Additionally I have created on promisify-xml-httpRequest.html
