Introduction to es6

Index

What is ES6

Why should you care to read ES6

Improved Scoping with let and const

Template String

Arrows

Classes

Collections

What is ECMAScript?

ECMAScript is the name of the international standard that defines JavaScript.

ES6 → ECMAScript 2015.

Latest ECMAScript version is ES7 which is ECMAScript 2016.

Basically it is a superset of es5

Why should you even care

Makes javascript a less confusing language as it is especially for a java

developer who deals with classes

Industry is moving towards a “Full Stack developer” than only a “Java developer”

Has a lot of goodies like collections , nice scoping constructs and advance

concepts like proxies and metaprogramming

Javascript is no longer just a client side language

Many new library additions, including core Math libraries, Array conversion

helpers, String helpers, and Object.assign for copying.

Improved Scoping with let and const

Var which is used is function scoping and pollutes the variable with concepts

like hoisting

Hoisting is a JavaScript mechanism where variables and function declarations

are moved to the top of their scope before code execution.

Block scoping is provided via let and const .

const helps enforce immutable variable references which means you cannot

change the value of a const-declared variable after you create it. If you try,

you'll get a TypeError

You must assign a value to a const-declared variable when you create it. You

can't create it first and assign it later.

Template String

Template strings provide syntactic sugar for constructing strings. This is similar

to string interpolation features in Perl, Python and more.

var name = "Bob", time = "today";

console.log(`Hello ${name}, how are you ${time}?`)

Similarly multiline strings can be written

Arrows like Lambda in C# or Java8

Arrows are a function shorthand using the => syntax. They are syntactically

similar to the related feature in C#, Java 8 and CoffeeScript.

They support both statement block bodies as well as expression bodies which

return the value of the expression. Unlike functions, arrows share the same

lexical this as their surrounding code.

Basic Usage:-

var odds = evens.map(v => v + 1);//single argument

(() => alert("Hello!"))(); // if your function takes no arguments, you must include

empty parentheses before the arrow.

Classes and OOPs in ES6

JavaScript's class is (mostly) just syntactical sugar for prototypes, which are

very different from traditional classes.

"Instantiating" a class in JavaScript does create a new object, but not one that is

independent of its parent class. The object is linked to a prototype

Classes are basically base and derived classes . Class declarations that don't

use the extends keyword are called base classes:

You don't have to define a constructor function. If you choose not to, the engine

will insert an empty one for you

n ES6, built-ins like Array, Date and DOM Elements can be subclassed.

Subclasses and extends

If your derived class needs to refer to the class it extends, it can do so with the

super keyword.

A derived class can't contain an empty constructor. Even if all the constructor

does is call super(), you'll still have to do so explicitly. It can, however, contain

no constructor.

You must call super in the constructor of a derived class before you use this.

Uses of Super

In JavaScript, there are precisely two use cases for the super keyword.

Within subclass constructor calls. If initializing your derived class requires you

to use the parent class's constructor, you can call

super(parentConstructorParams[ ) within the subclass constructor, passing

along any necessary parameters.

To refer to methods in the superclass. Within normal method definitions,

derived classes can refer to methods on the parent class with dot notation:

super.methodName.

Faking Encapsulation

Private object properties don’t exist in JavaScript. We have to fake them. The

most common way to do that is to adhere to a simple convention: If a

property name is prefixed with an underscore (or, less commonly, suffixed

with an underscore), then it should be treated as non-public.

The most common way to fake private object properties is to use ordinary

variables in the constructor, and capture them in closures and our class’s

methods would themselves need to be defined in the constructor and

attached to the instance.

There are techniques such as using weakMap and Symbols

Getters and setters

Getters and setters in ES6 serve the same purpose that they do in other

languages... including ES5. ES5 already allows getters and setters via

Object.defineProperty, though they're less clean and more cumbersome to

use.

Effectively, getters and setters allow you to use standard property access

notation for reads and writes while still having the ability to customize how

the property is retrieved and mutated without needed explicit getter and setter

methods.

Shorthand & Computed Properties

If the name of your object's keys are identical to the variables naming their values,

you can initialize your object literal with just the variable names, rather than

defining it as a redundant key-value pair.

const foo = 'foo';

const bar = 'bar';

const myObject = {foo : foo, bar : bar};//Old Syntax

const myObject = { foo, bar }//New syntax

Collections in ES6

ES2015 brings us four new collection types:

Map and WeakMap

Set, and WeakSet.

The new Map type is conceptually similar, but lets you use arbitrary datatypes for

keys -- not just strings and symbols -- and eliminates some of the many pitfalls

associated with trying to use an object as a map.

WeakMap

A WeakMap is a map that doesn't prevent its keys from being garbage-collected.

That means that you can associate data with objects without having to worry

about memory leaks.

if your program loses all external references to the keys of a WeakMap, it can

garbage-collect their values.

WeakMap

The API for WeakMap is similar to that of Map, with a few key differences:

1. You can only use Object keys in a WeakMap. That means no Strings, and no Symbols.

2. WeakMaps only have set, get, has, and delete methods -- that means you can't iterate over weak

maps.

3. WeakMaps don't have a size property.

The reason you can't iterate a WeakMap, or check its length, is because the garbage collector

could run in the middle of your iteration: One moment, it'd be full. The next, empty.

Set

A Set is a collection that contains only unique values. In other words, each

element of a set can appear only once.

This is a useful data type if you need to keep track of objects that are inherently

unique, such as the current users in a chat room.

Set and Map have almost identical APIs. The main difference is that Set doesn't

have a set method, since it doesn't store key-value pairs. Everything is just about

the same.

WeakSet is to Set as WeakMap is to Map

Default parameters and Rest parameters

Default function parameters allow formal parameters to be initialized with

default values if no value or undefined is passed.

function f(x, y=12) {return x + y;}

f(3) == 15

The rest parameter syntax allows us to represent an indefinite number of

arguments as an array. Quite like varags in java

function f(x, ...y) { return x * y.length;}

f(3, "hello", true) == 6

Important topics not covered

Reflection API

Proxies : enable creation of objects with the full range of behaviors available to

host objects. Can be used for interception, object virtualization,

logging/profiling, etc.

Generators : used for Async Flow Control

Modules : for component definition.

Promises in Es6

Spread Operator

Online Console

https://es6console.com/

Appendix

http://2ality.com/2016/01/private-data-classes.html

https://stackoverflow.com/questions/22156326/private-properties-in-javascript-

es6-classes

https://www.sitepoint.com/object-oriented-javascript-deep-dive-es6-classes/

https://scotch.io/tutorials/better-node-with-es6-pt-i

https://github.com/lukehoban/es6features