ES-6 ADVANCED FEATURES

New Features Added In JS

ES6 FEATURES
The let, var & const keywords
Default parameters
Template Literals(Strings)
for/of & in loop
Spread & Rest(...) Operator
Arrow(=>) function
Destructuring
String.include()
String startsWith()/endsWith()
Array.from()
Array.keys()
Array.find()
Object Entries
ES 2022,23,24 Features
ES6 FEATURES
Difference between let, var & const
DEFAULT PARAMETERS
The default value for function parameters
is undefined. It may useful to set a different
value instead. Default parameters Help us to
do so.
function add(num1, num2=10)
{
return num1+num2;
}

Earlier function parameters are available for the

later default parameters as well
TEMPLATE LITERALS
Known as Template strings in the previous
editions of ES2015, Template literals allow
embedded expressions, multi-line strings and
string interpolation.

`Hi! I am new to Java Script(ES6)`

Template literals are the string literals enclosed

by the backtick “(grave accent) and can
contain placeholders indicated by dollar sign
curly braces.
TEMPLATE STRING(EXAMPLE)

let name = 'virat'

let role = ‘batsman'
console.log(`I am ${name} I am a ${role}
inTeam`)

Multi-line Template Strings

console.log(`Hi am ${name}
I play as a${role}
in this Team`)
TEMPLATE STRING(EXAMPLE)
Tagged Template
Are the more advanced form of template literals. With
tagged templates, we can parse template literals with a
function.

let name = ‘Rishabh’

let role = ‘Wicket Keeper‘
function myTag(array, name, role){
let str0 = array[0]
let str1 = array[1]
return `${str0}${name}${str1}${role}`
}
console.log(myTag`My name is ${myName} and I am $
{myRole}`)

The first argument to a tag function can only be an array of string

values
FOR/OF LOOP
ES6 for/of lets you loop over data structures that are
iterable such as Arrays, Strings, Maps and more.

Syntax
for (variable of iterable){
// code block to be executed
}

Example
const players = [“Rahul", “Kuldeep", “Surya“,”Rothit”];
let team = "";
for (let player of players) {
team += x + " ";
}
console.log(‘Today Team Is : ‘+team)
 SPREAD & REST SYNTAX
Rest and spread syntax use … (three dots) notation.
Spread syntax expands an array into separate
elements, while a rest syntax condenses array
elements into a single element.

Spread Syntax
function addnumbers(a,b,c){
return a+b+c
}
let numbers=[10,20,30]
let sum=addnumbers(...numbers)
console.log("Sum Of numbers : "+sum)

Here, the numbers array is expanded to elements a, b

and c
ARROW FUNCTIONS
Arrow functions allows a short syntax for
writing function expressions. You don't need
the function keyword, the return keyword,
and the curly brackets.

Old Syntax(ES-5)
var x = function(x, y) {
return x * y
}
New Syntax(ES-6)
const x = (x, y) => x * y
POINTS TO REMEMBER
 Arrow functions do not have their own this.

They are not well suited for defining object

methods.
 Arrow functions are not hoisted. They must

be defined before they are used.

 Using const is safer than using var, because

a function expression is always a constant

value.
 You can only omit the return keyword and the

curly brackets if the function is a single

statement. Because of this, it might be a
good habit to always keep them

const x = (x, y) => { return x * y };

 SPREAD & REST SYNTAX
Rest Syntax
let addNumbers = (...numbers) => {
let result =0;
numbers.forEach(num=> result
+=num);
return result
}
console.log(addNumbers(1,2,3));

Here, the array elements are condensed to single

element numbers in addNumbers’ parameters
Spread and Rest are basically opposites to each
other.
DESTRUCTRING IN JS
Destructuring in JavaScript is dissecting data
structures, arrays, and objects to easily access
the values inside them. Destructuring helps to
unpack values from arrays and objects into
distinct variables.

We can classify destructuring in to following

two categories

 Array Destructuring
 Object Destructuring
DESTRUCTRING IN JS
Array Destructuring

The basic syntax for array destructuring uses

square brackets on the left-hand side of an
assignment statement and the array on the
right-hand side. For example, to extract the
first element of an array and assign it to a
variable

let numbers=[10,20,30,40,50]
let [firstnumber]=numbers
console.log(firstnumber) //returns 10
DESTRUCTRING IN JS
With Multiple Elements
You can also extract multiple elements from an
array and assign them to multiple variables

let numbers=[10,20,30,40,50]
let [first,second,third]=numbers
console.log(first,second,third) //returns
10 20 30

With Nested Arrays

let narray=[[1,2],[3,4],[5,6]]
let [first,second,third]=narray
console.log(first,second,third)
 DESTRUCTRING IN JS
The Rest Items
The rest operator (...) in JavaScript is a powerful
feature that allows developers to gather the
remaining items in an array or an object into a new
array or object. This can be useful in various
situations, such as when working with function
arguments or destructuring arrays and objects.
let
team=[‘Rohit’,’Shubman’,’Virat’,’Shreyas’,’Rahul’]
let [opener1,opener2,…remaining]=team
console.log(‘Today Opener ‘+opener1+’ and
’+opener2)
console.log(‘Rest Top Order Is : ‘+remaining)
 DESTRUCTRING IN JS
Object Destructuring

JavaScript allows you to extract properties from an

object and assign them to variables. This feature is
handy when working with large objects or extracting
specific properties from an object

The basic syntax for object destructuring uses curly

braces on the left-hand side of an assignment
statement and the object on the right-hand side

let
car={brand:”Honda”,color:”Red”,price:1240000}
let {brand}=car
console.log(brand)
 DESTRUCTRING IN JS
Nested Object Destructuring

let address={‘street’:’36 Chaurangi

Lanes’,city=‘Kolkata’}
let person={name:’Saurav’,role:’Batsman’,address}
let {name,role,address:{street}}=person
Console.log(name,role3,street)

The code above creates an address object and

a person object with the address nested inside it and
then extracts the name, and age properties from the
person object and city property from the address
object and assigns them to the variables name, age,
and city, respectively
STRING NEW FUNCTION
 String.includes()
let string = ”my cat cries after drinking milk”;
string.includes(“cat")

 String.startsWith()
let string = “Welcome to Full Stack";
string.startsWith("Hello")

 String.endsWith()
let string = “Full Stack Is Powerful Tool";
string.startsWith(“Full")
ARRAY NEW FUNCTIONS
Array.from()
method returns an Array object from any
object with a length property or any iterable
object.
Array.from("ABCDEFG") // Returns [A,B,C,D,E,F,G]

Array.keys()
method returns an Array Iterator object with
the keys of an array.
const fruits =["Banana", "Orange", "Apple"];
const keys = fruits.keys();
let text = "";
for (let x of keys) {
text += x + "<br>";
}
ARRAY NEW FUNCTIONS
Array.find()
method returns the value of the first array
element that passes a test function
const numbers = [4, 9, 16, 25, 29];
let first = numbers.find(myFunction);
function myFunction(value, index, array) {
return value > 18;
}

Array.findIndex()
method returns the index of the first array
element that passes a test function.
const numbers = [4, 9, 16, 25, 29];
let first = numbers.findIndex(myFunction);
function myFunction(value, index, array) {
return value === 18;
}
ES 2021 FEATURES
String.replaceAll()
text=“all the Cats beign Cats afterall”;
text = text.replaceAll("Cats","Dogs");
text = text.replaceAll("cats","dogs");

The replaceAll() method allows you to specify a

regular expression instead of a string to be
replaced. If the parameter is a regular
expression, the global flag (g) must be set,
otherwise a TypeError is thrown

text=text.replaceAll(/Cats/g,”Dogs”)
ES 2021 FEATURES
JS Numeric_Seperator
ES2021 intoduced the numeric separator (_) to
make numbers more readable
const num=31_12_223
The numeric separator is only for visual use
const num1 = 1_000_000_000;
const num2 = 1000000000;
Console.log(num1 === num2);

The numeric separator is not allowed at the beginning or at

the end of a number.
In JavaScript only variables can start with _
ES 2022 FEATURES
Array.at() method
const fruits = ["Banana", "Orange", "Apple", "Mango"];
let fruit = fruits.at(2);
Will get 3rd element of furits Apple which is same as
let fruit = furits[2]

Many languages allows negative bracket indexing like [-1]

to access elements from the end of an object / array /
string. This is not possible in JavaScript, because [] is
used for accessing both arrays and objects. obj[-1]
refers to the value of key -1, not to the last property of
the object.

The at() method was introduced in ES2022 to solve this

problem.
ES 2023 FEATURES
Array.findLast() method
ES2023 added the findLast() method that will start
from the end of an array and return the value of
the first element that satisfies a condition

<p id="demo"></p>
<script>
const temp = [27, 28, 30, 40, 42, 35, 30];
let high = temp.findLast(x => x > 40);

document.getElementById("demo").innerHTML
= "The last temperature over 40 was " + high;
</script>
ES 2023 FEATURES
Array.findLastIndex() method
The findLastIndex() method finds the index of the
last element that satisfies a condition

<p id="demo"></p>
<script>
const temp = [27, 28, 30, 40, 42, 35,52,
30];
let pos = temp.findLastIndex(x => x > 40);

document.getElementById("demo").innerHTML
= "The last temperature over 40 was in position
" + pos;
</script>
ES 2023 FEATURES
Array.toReversed() method
ES2023 added the Array toReversed() method as a safe
way to reverse an array without altering the original array.
The difference between the new toReversed() method
and the old reverse() method is that the new method
creates a new array, keeping the original array
unchanged, while the old method altered the original array
<p id="demo"></p>
<script>
const months = ["Jan", "Feb", "Mar", "Apr"];
const reversed = months.toReversed();

document.getElementById("demo").innerHTML
= reversed;
</script>
ES 2023 FEATURES
Array.toSorted() method
ES2023 added the Array toSorted() method as a safe
way to sort an array without altering the original array.
The difference between the new toSorted() method
and the old sort() method is that the new method
creates a new array, keeping the original array
unchanged, while the old method altered the original
array
<p id="demo"></p>
<script>
const months = ["Jan", "Feb", "Mar", "Apr"];
const sorted = months.toSorted();

document.getElementById("demo").innerHTML = sorted;
</script>
ES 2023 FEATURES
Array.toSpliced() method
ES2023 added the Array toSpliced() method as a safe
way to splice an array without altering the original array.
The difference between the new toSpliced() method and
the old splice() method is that the new method creates a
new array, keeping the original array unchanged, while
the old method altered the original array.

<p id="demo"></p>
<script>
const months = ["Jan", "Feb", "Mar", "Apr"];
const spliced = months.toSpliced(0, 1);
document.getElementById("demo").innerHTML
= spliced;
</script>
 ES 2024 FEATURES
Object.groupBy() method
<p id="demo"></p>
<script>
const fruits = [
{name:"apples", quantity:300},
{name:"bananas", quantity:500},
{name:"oranges", quantity:200},
{name:"kiwi", quantity:150} ];
function myCallback({ quantity }) {
return quantity > 200 ? "ok" : "low";
}
const result = Object.groupBy(fruits, myCallback);
let text ="These fruits are Ok: <br>";
for (let [x,y] of result.ok.entries()) {
text += y.name + " " + y.quantity + "<br>";
}
text += "<br>These fruits are low: <br>";
for (let [x,y] of result.low.entries()) {
text += y.name + " " + y.quantity + "<br>";
}
document.getElementById("demo").innerHTML = text;
The</script>
Object.groupBy() method groups elements of an object according to
string values returned from a callback function. The Object.groupBy()
method does not change the original object