MCS First Year JavaScript ES6 Features.pdf

@coder_aishya
Save it Like it
Quick
Es6 Guide

Variables were previously declared using
"var" which had function scope and
were hoisted to the top within its scope. It
means that a variable can be used before
declaration.
But, the "let" variables and constants
have block scope which is surrounded by
curly-braces "{}" , they are not hoisted &
cannot be used before declaration.
The new const keyword makes it
possible to define constants. Constants
are read-only, you cannot reassign new
values to them.
@coder_aishya
Let & const Keywords

@coder_aishya
Let example:
const example:

Arrow Functions
It provides a more concise syntax for
writing function expressions by removing
the "function" and "return" keywords.
Arrow functions are defined using the fat
arrow (=>) notation.
Unlike ordinary functions, arrow functions
do not have their own this keyword.
The value of this inside an arrow function
is always bound to the value of this in the
closest non-arrow function.
Arrow functions are not hoisted. They
must be defined before they are used.
@coder_aishya

Arrow function Example :
@coder_aishya

Multi-line Strings
Users can create multi-line strings by using
back-ticks(`). In ES5 we needed to use 'n'
for multi line statements
@coder_aishya

Template Literals
ES6 introduces very simple string templates
along with placeholders for the variables.
The syntax for using the string template is
${PARAMETER} and is used inside of the
back-ticked string.
@coder_aishya

Default Parameters
ES6 allows function parameters to have
default values.But, in ES5, OR operator had
to be used.
@coder_aishya

The destructuring assignment is an
expression that makes it easy to extract
values from arrays, or properties from
objects, into distinct variables.
There are two types of destructuring
assignment expressions, namely, Array
Destructuring and Object Destructuring.
Destructuring Assignment
@coder_aishya

ES6 provides enhanced object literals
which make it easy to quickly create
objects with properties inside the curly
braces.
Enhanced Object Literals
@coder_aishya

Promises
Promises are used for asynchronous
execution. We can use promise with the
arrow function
I have already made a
detailed post on Promises.
Do check that out on my
page
@coder_aishya

Classes
Classes are introduced in ES6 which
looks similar to classes in other object-
oriented languages, such as C++, Java,
PHP, etc. But, they do not work exactly
the same way.
We can create class in ES6 using “class”
keyword.
ES6 classes make it simpler to create
objects, implement inheritance by using
the "extends" keyword and also reuse
the code efficiently.
@coder_aishya

Function Rest Parameter
The rest parameter (...) allows a function
to treat an indefinite number of
arguments as an array
@coder_aishya

Modules
ES6 introduced a new feature called
modules, in which each module is
represented by a separate ".js" file.
We can use the "import" or "export"
statement in a module to import or
export variables, functions, classes or
any other component from/to different
files and modules.
@coder_aishya

Map
Before ES6, JavaScript had only arrays &
Objects as Data structures
Objects are used for storing keyed
collections.
Arrays are used for storing ordered
collections.
ES6 Data Structures
Map
Set
WeakMap
WeakSet
@coder_aishya

Map Overview
Map is a collection of keyed data items,
just like an Object. But the main
difference is that Map allows keys of
any type.
A Map remembers the original insertion
order of the keys.
A Map has a property that represents
the size of the map.
@coder_aishya

new Map() – creates the map.
map.set(key, value) – stores the value
by the key.
map.get(key) – returns the value by
the key, undefined if key doesn’t exist in
map.
map.has(key) – returns true if the key
exists, false otherwise.
map.delete(key) – removes the value
by the key.
map.clear() – removes everything from
the map.
map.size – returns the current element
count.
Methods and properties
@coder_aishya

Map creation
You can create a JavaScript Map by:
Passing an Array to new Map()
Create a Map and use Map.set()
new Map()
@coder_aishya

Map.set()
The set() method can also be used to
change existing Map values.
@coder_aishya

Create a map from an object
Map.get()
gets the value of a key in a Map
@coder_aishya

Map Iteration
map.keys() – returns an iterable for
keys,
map.values() – returns an iterable for
values,
map.entries() – returns an iterable for
entries [key, value], it’s used by default
in for..of.
For looping over a map, there are 3
methods:
@coder_aishya

Set
A Set is a special type collection –
ordered “list of values” (without keys),
where each value may occur only once
The Set is well optimized in
performance to create a unique arrays
One difference between ES6 Sets and
those in other languages is that the
order matters in ES6
@coder_aishya

new Set(iterable) : creates the set, and
if an iterable object is provided (usually
an array), copies values from it into the
set.
set.add(value) : adds a value, returns
the set itself.
set.delete(value) : removes the value,
returns true if value existed at the
moment of the call, otherwise false.
set.has(value) : returns true if the value
exists in the set, otherwise false.
set.clear() : removes everything from
the set.
set.size : is the elements count.
Methods
@coder_aishya

Set creation
You can create a JavaScript Set by
Passing an Array to new Set()
The new Set() Method
Pass an Array to the new Set()
constructor:
@coder_aishya

Adding elements to a Set
@coder_aishya

Set Iteration
set.keys() – A Set has no keys. keys()
returns the same as values().This makes
Sets compatible with Maps
set.values() – returns an Iterator object
containing all the values in a Set
set.entries() – A Set has no keys.
entries() returns [value,value] pairs
instead of [key,value] pairs.This makes
Sets compatible with Maps
The same methods Map has for iterators
are also supported in Set:
@coder_aishya

Set Iteration Example
@coder_aishya

When to use What?
Use a Set when your dataset needs to
be composed of unique values
Use a Map when you have pairs of
associated data. You map the keys to
the values
@coder_aishya

What is Garbage Collection ?
JavaScript Garbage Collection is a form of
memory management whereby objects
that are no longer referenced are
automatically deleted and their resources
are reclaimed.
Weak Collections
Map and Set‘s references to objects are
strongly held and will not allow for
garbage collection.
WeakMap and WeakSet ES6 collections
are ‘weak’ because they allow for
objects which are no longer needed to
be cleared from memory.
@coder_aishya

WeakMap
A WeakMap is a collection of key/value
pairs whose keys must be objects only.
Primitive data types as keys are not
allowed
WeakMap does not support iteration
and methods keys(), values(), entries(),
so there’s no way to get all keys or
values from it.
weakMap.get(key)
weakMap.set(key, value)
weakMap.delete(key)
weakMap.has(key)
Methods
@coder_aishya

UseCases of WeakMap
To keep an object’s private data
private
@coder_aishya

To keep track of DOM node edits,
removals, and changes
@coder_aishya

Caching
cache.js
main.js
@coder_aishya

WeakSet
WeakSet behaves similarly to WeakMap
Similar to Set, but we can only add
objects (not primitive types).
*An object exists in the set as long as it
can be accessed from elsewhere.
*Like set, it supports add, has, and
delete, but not size, keys(), and
iterations.
weakSet.add(key)
weakSet.delete(key)
weakSet.has(key)
Methods
@coder_aishya

Example : we are on a page where we are showing
Messages and we are showing unread messages as
notifications. When a message is deleted, it will
automatically be deleted from unread messages.
@coder_aishya

The spread operator
The rest operator
In ES6, The three dots operator (…)
means two things:
Spread Operator
When used as a spread operator, the
three dots operator spreads the
elements of an array where zero or
more arguments are expected.
When dealing with objects, you can
use the spread operator to spread
key-value pairs where expected.
@coder_aishya

Spread Syntax
let numbers = [3,6,2,4 ]
operate(...numbers)
operate(3,6,2,4)
Spread Syntax in function calls
@coder_aishya

Spread Syntax with array literals
Spread Syntax with object literals
@coder_aishya

Examples
with a Function
with an Array Literal
@coder_aishya

with Object Literal
@coder_aishya

Spread syntax “expands” an array into
its elements, while rest syntax collects
multiple elements and “condenses”
them into a single element
The rest syntax makes it possible to
create a function that accepts any
number of arguments.
It is used for destructuring arrays and
objects.
Rest Operator
@coder_aishya

Restrictions with the Rest
Parameter
There can be only one rest parameter.
The rest parameter has to be the last
parameter in the function.
Rest Syntax
Here you can input any number of arguments
after the first and the second one.
@coder_aishya

Example
if we want a function to add a list of
numbers, that had no definite size of
the list,this would work
@coder_aishya

In the example below, de-structuring of
elements happened for the first two
elements and the leftover elements are
collected into a new sub-array.
@coder_aishya

aishwarya-dhuri
coder_aishya
Follow me for more

MCS First Year JavaScript ES6 Features.pdf

More Related Content

Similar to MCS First Year JavaScript ES6 Features.pdf

Recently uploaded

MCS First Year JavaScript ES6 Features.pdf