JAVA SCRIPT

ES6
NEW
FEATURE
 INTRODUCTIO
N
Explain what is javascirpt
es6 new feature’s all
about?
New Features in ES6
The let keyword String.startsWith()
The const String.endsWith()
keyword Arrow Array.from()
Functions The ... Array keys()
Operator For/of
Array find()
Map Array findIndex()
Objects Set
New Math Methods
Objects
New Number
Classes
Properties New
Promises
Number Methods New
Symbol
Global Methods Object
Default Parameters
Function Rest entries JavaScript
Parameter Modules
String.includes()
 WHAT IS
JAVASCRIPT
ES6
ECMAScript 2015 (also known as ES6
and ECMAScript 6) is the second
major revision to JavaScript. It
introduced several new features that
make JavaScript programming more
efficient and expressive.
 let
keywords EXAMPLE
The let keyword is used to declare
VAR X =
variables in JavaScript. It was introduced
10;
in ECMAScript 6 (ES6) as an alternative
// HERE
to the var keyword, which had been
X IS 10
used to declare variables in previous {
versions of JavaScript. The main LET X =
difference between let and var is that let 2;
allows for block-scoping, while var // HERE
does not X IS 2
}
// HERE
EXAMPL
CONST
E
CONST PI =
3.141592653589793; PI =
KEYWORD
const is a keyword that was introduced in
ECMAScript 6 (ES6) and is used to declare
3.14; // THIS WILL GIVE a variable that cannot be reassigned1.
Variables declared with const have block
AN ERROR
scope, which means they are only
PI = PI + 10; // THIS accessible within the block they are defined
WILL ALSO in1.
GIVE AN ERROR When you declare a variable with const,
you must assign it a value at the same
time.
 Arrow
Functions
Arrow functions allows EXAMPLE
a short syntax for // ES5
VAR X = FUNCTION(X,
writing function
Y) { RETURN X * Y;
expressions. }
You don't need the
function keyword, the // ES6
return keyword, and CONST X = (X, Y) =>
the curly brackets. X * Y;
SPREAD (...) Example
OPSpread
ERATORoperator: The const q1 = ["Jan", "Feb", "Mar"];
const q2 = ["Apr", "May", "Jun"];
spread operator (...) const q3 = ["Jul", "Aug", "Sep"];
expands an iterable const q4 = ["Oct", "Nov",
(like an array) into "May"];
more elements .
For/of loop: The for/of const year =
statement loops through [...q1, ...q2, ...q3, ...q4];
the values of an iterable
object.
 For/of looP
The JavaScript for/of statement loops
through the values of an iterable
objects. for/of lets you loop over data
structures that are iterable such as
Arrays, Strings, Maps, NodeLists, and
more.
 LOOPING OVER AN ARRAY LOOPING OVER A
Example STRING
Example
const cars = ["BMW", "Volvo", let language =
"Mini"]; let text = ""; "JavaScript"; let text = "";

for (let x of cars) for (let x of language)

{ text += x + " "; { text += x + " ";
} }
 map
objects
Being able to use
an Object as a
key is an
important Map
feature.
Method Description
new Map() Creates a new Map object
set() Sets the value for a key in a Map
get() Gets the value for a key in a Map
clear() Removes all the elements from a Map Removes
delete() a Map element specified by a key Returns true if
has() a key exists in a Map Invokes a callback for
forEach() each key/value
pair in a Map
entries() Returns an iterator object with the
[key, value] pairs in a Map
keys() Returns an iterator object with the keys in a Map
values() Returns an iterator object of the values in a Map
JAVASCRIPT EXAMPLE
SETS
A JavaScript Set is
// CREATE A SET
CONST LETTERS = NEW SET();
a collection of
unique values. // ADD SOME VALUES TO THE
Each value can only SET LETTERS.ADD("A");
occur once in a Set. LETTERS.ADD("B");
A Set can hold any LETTERS.ADD("C");
value of any data type.
CLASS CAR
{ CONSTRUCTOR(NAME,
JavaScript
YEAR) { Classes
THIS.NAME = JavaScript Classes are
NAME; THIS.YEAR = templates for
YEAR; JavaScript Objects.
} Use the keyword class
} to create a class.
Always add a method
named constructor():
 JAVASCRIPT
PROMISES
A Promise is a JavaScript object
that links "Producing Code" and
"Consuming Code". "Producing
Code" can take some time and
"Consuming Code" must wait
for the result.
 JavaScript Promises

EXAMPLE USING A PROMISE PROMISE SYNTAX

CONST MYPROMISE = NEW PROMISE(FUNCTION(MYRESOLVE, CONST MYPROMISE = NEW PROMISE(FUNCTION(MYRESOLVE,

MYREJECT) { SETTIMEOUT(FUNCTION() { MYRESOLVE("I LOVE MYREJECT) {
YOU !!"); }, 3000); // "PRODUCING CODE" (MAY TAKE SOME TIME)
});
MYRESOLVE(); // WHEN
MYPROMISE.THEN(FUNCTION(VALUE) SUCCESSFUL MYREJECT(); //
{ DOCUMENT.GETELEMENTBYID("DEMO").INNERHTML = WHEN ERROR
});
VALUE;
});
// "CONSUMING CODE" (MUST WAIT FOR A FULFILLED
PROMISE). MYPROMISE.THEN(
FUNCTION(VALUE) { /* CODE IF SUCCESSFUL
*/ }, FUNCTION(ERROR) { /* CODE IF SOME
ERROR */ }
 The Symbol
TyP e
A JavaScript Symbol is a primitive
datatype just like Number, String, or
EXAMPLE
CONST PERSON = {
FIRSTNAME:
Boolean. It represents a unique "JOHN",
"hidden" identifier that no other code LASTNAME: "DOE",
can accidentally access. For instance, AGE: 50,
EYECOLOR: "BLUE"
if different coders want to add a };
person.id property to a person object
belonging to a third-party code, they LET ID =
SYMBOL('ID');
could mix each others values. Using PERSON[ID] =
Symbol() to create a unique 140353;
identifiers, solves this problem: // NOW
PERSON[ID] =
140353
DEFAULT PARAMETER
VALUES
ES6 allows EXAMPLE
FUNCTION MYFUNCTION(X, Y = 10)
function
{
parameters to // Y IS 10 IF NOT PASSED OR
have default UNDEFINED RETURN X + Y;
}
values. MYFUNCTION(5); // WILL RETURN
15
 FUNCTION
EXAMPLE REST
FUNCTION SUM(...ARGS) PARAMETER
{ LET SUM = 0; The rest parameter (...)
FOR (LET ARG OF allows a function to
ARGS) SUM += ARG;
RETURN SUM; treat an indefinite
} number of arguments
LET X = SUM(4, 9,
as an array:
16, 25, 29, 100, 66,
77);
STRING.INCLUDES( String.startsWith()
) The includes() The startsWith()
method returns method returns
true if a string true if a string
contains a begins with a
specified value, specified value,
otherwise false: otherwise false:
String.endsWith() ARRAY.FROM()

The Array.from()
The endsWith()
method returns an
method returns true Array object from
if a string ends with any object with a
a specified value, length property or
otherwise false: any iterable object.
ARRAY KEYS() ARRAY
The keys() method
FIND()
The find() method
returns the value of
returns an Array the first array element
Iterator object with that passes a test
the keys of an array. function.
This example finds
(returns the value of )
the first element that
is larger than 18:
 ARRAY NEW MATH
FINDINDEX() METHODS
The findIndex() method
returns the index of the ES6 added the
first array element that following methods to
passes a test function. the Math object:
This example finds the Math.trunc()
index of the first Math.sign()
element that is larger Math.cbrt()
than 18: Math.log2()
Math.log10()
 NEW NEW
NUMBER NUMBER
PROPERTIES
ES6 added the METHODS
following properties to
the Number object: ES6 added 2 new
EPSILON methods to the
MIN_SAFE_INTEGER Number object:
MAX_SAFE_INTEGER Number.isInteger()
Number.isSafeInteger()
NEW GLOBAL METHODS OBJECT
ENTRIES()
Example
ES6 added 2 new Create an Array Iterator, and then iterate over the key/value
global number pairs: const fruits = ["Banana", "Orange", "Apple", "Mango"];
const f = fruits.entries();
methods:
isFinite() for (let x of f)
isNaN() { document.getElementById("demo").innerHTML +=
x;
}
 Modules
Import from named exports
Import named exports from the
file
person.js:
import { name, age } from
"./person.js";
Thank
you