JavaScript ES10 and React Js Introduction

ES10 NEW FEATURES
&
REACT INTRODUCTION
Amanpreet Singh

String.trimStart()04
Array.flatMap()03
Array.flat()02
BigInt01
ES10 Key Features
String.trimEnd()05

Function.toString()09
Object.fromEntries()08
Dynamic import07
Optional Catch Binding06
ES10 Key Features
string.prototype.matchAll()10

BigInt is the 7th primitive type.
With BigInteger, you don't have that problem, because once the
assigned bits are not enough to store the exact value, BigInteger
will just add some bits so it can handle the value again.
● const b = 1n
● typeof 10n == 'bigint'
● 10n === BigInt(10)
● 10n == 10
● 200n / 20
--Uncaught TypeError
Flattening of a multi-dimensional array:
The flat() method creates a new array with all sub-array elements
concatenated into it recursively up to the specified depth.
Array.flat()
let multi = [1,2,3,[4,5,6,[7,8,9,[10,11,12]]]];
multi.flat(); // [1,2,3,4,5,6,Array(4)]
multi.flat().flat(); // [1,2,3,4,5,6,7,8,9,Array(3)]
multi.flat().flat().flat(); // [1,2,3,4,5,6,7,8,9,10,11,12]
multi.flat(Infinity); // [1,2,3,4,5,6,7,8,9,10,11,12]
BigInt

The flatMap() method first maps each element using a
mapping function, then flattens the result into a new array.
var arr = [1,2,3,4,5]
arr.map(x => [x, x*2])
// [Array(2), Array(2), Array(2), Array(2), Array(2)]
// 0: (2) [1, 2]
// 1: (2) [2, 4]
// 2: (2) [3, 6]
// 3: (2) [4, 8]
// 4: (2) [5, 10]
arr.flatMap(x => [x,x*2])
// [1, 2, 2, 4, 3, 6, 4, 8, 5, 10]
The trimStart() method removes whitespace from the
beginning of a string.
String.trimStart()
var greeting = " Hello World! ";
console.log(greeting.trimStart());
// “Hello World! “
Array.flatMap()

The trimEnd() method removes whitespace from the end of
a string.
var greeting = " Hello World! ";
console.log(greeting.trimEnd());
// “ Hello World!“
Allow developers to use try/catch without creating an
unused binding..
Optional Catch Binding
try {
throw new Error(“some errors”);
} catch {
console.log(‘No params for catch’);
}
String.trimEnd()

The Object.fromEntries() method transforms a list of
key-value pairs into an object
.
Note: Object.fromEntries only accept iterable (i.e)
Object.fromEntries(iterable)
var entries = new Map([
[‘name’,’aman’],
[‘exp’,’3’]])
Object.fromEntries(entries)
The toString() method returns a string representing the
source code of the function.
Function.toString()
function sayHi(){
console.log(‘say Hi’);
}
console.log(sayHI.toString());
// function sayHI(){
// console.log(‘say Hi’);
// }
Object.fromEntries()

The import(module) expression loads the module and
returns a promise that resolves into a module object that
contains all its exports. It can be called from any place in the
code.
let modulePath = prompt("Which module to load?");
import(modulePath)
.then(obj => <module object>)
.catch(err => <loading error, e.g. if no such
module>)
It returns an iterator instead of array. Iterators on their own
are useful.
It avoids regular expressions with /g ﬂag
string.prototype.matchAll()
// Match all occurrences of the letters: "e" or "l"
let iterator = "hello".matchAll(/[el]/);
for (const match of iterator)
console.log(match);
Dynamic import

React is a declarative, eﬃcient, and
ﬂexible JavaScript library for building
user interfaces. It lets you compose
complex UIs from small and isolated
pieces of code called “components”.
● React is not a framework
● React is an open-source
project created by Facebook

COMPONENT
Components let you
split the UI into
independent, reusable
pieces, and think about
each piece in isolation.

JSX - JAVASCRIPT + HTML
JSX is an XML/HTML-like
syntax used by React that
extends ECMAScript so that
XML/HTML-like text can
co-exist with
JavaScript/React code.

Props are an effective way
to pass existing data to a
React component, however
the component cannot
change the props - they're
read-only.
Props

You should always use keys
when making lists in React,
as they help identify each
list item.

Vestibulum congue tempu
Lorem ipsum dolor sit amet,
consectetur adipiscing elit, sed do
eiusmod tempor.
STATE
State is similar to props, but
it is private and fully
controlled by the
component.

You can think of state as
any data that should be
saved and modiﬁed without
necessarily being added to
a database

Now we have delete
buttons, and we can
modify our state by
deleting a character.

React Compononent Life Cycle
Updating
Mounting
Unmounting

JavaScript ES10 and React Js Introduction

More Related Content

What's hot

Similar to JavaScript ES10 and React Js Introduction

Recently uploaded

JavaScript ES10 and React Js Introduction