Transcript
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
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
top related