understanding ecma script 6 javascript by gaurav khurana

ECMA Script Javascript 6By

Gaurav Khurana

Prepared By Gaurav Khurana (khurana.g@hotmail.com)

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.

• 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

– 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

– 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

• Various Other Features

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)

Lets get started

Background

Background continue. . .

Technical Committee

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)

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

Variable and scoping

• Typical problem with ES5

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.

var vs let

Question

• How will you create const in ECMA 5 ?

Block Scope

• Solution to this problem in ES5

Block Scope

• Solution to this problem in ES6

Block Scope

Block Function

Object Destructuring

Destructuring Array

Extraction from Objects and Swap Variables

Destructuring Multiple Return Values

Destructuring refutable by default

Destructuring nested Objects

Default Parameters

• Arity means number for parameters a function can take.

Rest Parameters

Rest Restriction

• Arity means number for parameters a function can take

Spread Operators

Named Parameters

Arrow Function

• Sugar Syntax• Lexical this• No Constructor

Arrow Function elaborated

Understanding lexical this

Understanding lexical this . . .

How Bind Would be working

Understanding lexical this . . .

Answer to Const in ECMA5

Object Orientation and modularity

Object Orientation and modularity . . .

Class old School way

Class ECMA5 way

Class ECMA 6 way

Module

• import

• export

Module . . .

Template String

Template String use case

Template String for Dynamic RegExp

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

Map vs ECMA5 way

Setting Map Different Ways

Object can be a Map

Iterating over Map

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.

Filtering and Mapping . . .

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

Set . . .

Chrome

Question

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

Chrome

Answer

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

Answer . . .

WeakMap

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

WeakMap not working in Traceur

WeakMap in Chrome harmony

Object Methods

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

Object property Assignment ES 5 vs ES6

Object.setPrototypeOf

Fix this problem

Object.setPrototypeOf fixing problem

Now there will be another problem .. Any guess?

Object.is

String Methods

• startsWith• endsWith• Includes• repeat

Number Methods

• .isNAN() better than isNAN()• .isFinite()• .isInteger()

Number Methods . . .

Math methods

Math Methods . . .

Other Math methods

• log10, log2, log1p, expm1, cosh, sinh, tanh,• acosh, asinh, atanh, hypot, trunc, sign

Array methods

• To be continued

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

Proxy . . .

• Let’s use JavaScript as both meta programming language and base programming language.

• Classic example is eval in javascript

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.

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.

Proxy . . .• Self Modification Example

• It performs self-modification via the bracket operator for property access, the assignment operator and the delete operator

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

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.

Proxy . . .

• Firefox support proxy there by following is the example of proxy

Proxy . . .

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

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

Proxy . . .

• Few more traps

For of loop

Generators

• Simple Example

Generators

• Passing Value Back to Generator

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

Generators

function* helloWorld(){ var next = yield ; yield next;}

Generators

function* helloWorld(){ var next = yield yield next;}

Generators

function* helloWorld(){ var next = yield yield next;}

Generators

Promise

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

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

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

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

Promise

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

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

Promise

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

understanding ecma script 6 javascript by gaurav khurana

Technology

mac-phy interface for...

final draft ecma-337 4th edition - ecma international

application session services - ecma...

ecma tc43: universal 3d · 1 ecma/tc43/2004/18...

standard libraries for ecma - fabrika lazer b2111 ecma b2150...

nursery admission point wise list · 81 96payam khurana...

mehar khurana

performance - sahil khurana

ecma fefco pos

prateek khurana bsc-id

information interchange on read-only memory holographic...

private integrated services network (pisn) - inter...

pro carton/ecma carton award pro carton/ecma...pro...

presenting ecma - ecma international

rekha khurana

hxrefactored - aarp - sanjay khurana

khurana - schema und bild -...

ecma standard catalog - easypackmaker · ecma folding...

ecma-international.orgecma-international.org/publications/files/ecma-st/ecma-364.pdf ·...

private integrated services network (pisn) - circuit...