KEMBAR78
ECMA Script | PDF
ECMAScript
7,8,9,10
ECMAScript ?
● ECMA - European Computer Manufacturer’s
Association
● ECMAScript is a Standard for a scripting languages.
● Languages such as ActionScript, JavaScript, JScript
all use ECMAScript as its core.
ES - 7 ( 2016 )
array.includes()
const array = [1,2,3,4,5,6]
if( array.includes (4) ){
console.log(“Found 4”);
} // Found 4
Why not indexOf() ?
if(indexOf(4) > -1){
console.log(“Found 4”)
} //Found 4
indexOf() can’t find ‘NaN’ and ‘undefined’
If (array.indexOf( NaN ) === -1) {
console.log("Not Found NaN")
} // Not Found NaN
const array = [ , , , , , ]
if( array.indexOf(undefined) === -1 ){
console.log( “undefined Not Found !” )
} // undefined Not Found !
ES - 8 ( 2017 )
Object.values()
The Object.values() method
returns an array of a given
object's own enumerable
property values.
Why use Object.values() ?let simpleColors = {
colorA: 'white',
colorB: 'black'
};
let natureColors = {
colorC: 'green',
colorD: 'yellow'
};
Object.setPrototypeOf(natureColors, simpleColors);
Object.values(natureColors);
// ['green’, 'yellow' ]
● accesses only object’s own properties.
for (let key in natureColors) {
console.log(natureColors[key]);
}
Object.entries()
he Object.entries() method
returns an array of a given
object's own enumerable
string-keyed property [key,
value]
Async Functions
● Always returns a promise (
Even If a function actually returns a
non-promise value )
async function f() { return 1; }
f().then( console.log(“ Promise ”) )
● Without await
async function d() {
console.log(" first ");
setTimeout( () => { console.log(" second ") }, 1000
);
console.log(" . third . ");
}
● With await
async function d() {
console.log(" first ");
await new Promise( (resolve, reject) => {
setTimeout( () => { console.log(" second ");
resolve() }, 1000 ) } );
console.log(" . third . ");
}
ES - 9 ( 2018 )
Rest / Spread Properties
● Rest( … )
const values = {a: 1, b: 2, c: 3, d: 4};
const {a, ...n} = values;
console.log( n );
// {b: 2, c: 3, d: 4}
const {...rest, foo} = obj; // SyntaxError
const {foo, ...rest1, ...rest2} = obj; // SyntaxError
copies all enumerable
own properties of the
destructuring source into
its operand, except those
that were already
mentioned in the object
literal.
But
you can use the rest
operator at most once and
it must appear at the end
● Spread(...)
const obj = {foo: 1, bar: 2, baz: 3};
{ ...obj , qux: 4}
{ foo: 1, bar: 2, baz: 3, qux: 4 }inserts all enumerable own
properties of its operand
into the object created via
the literal
Promise.finally()
The for-await-of creates a
loop iteration over async
iterable objects as well as on
sync iterables,
Asynchronous
Iteration
● for-await-of loop
The for-await-of creates a loop iteration
over async iterables .
ES - 10 ( 2019 )
Array.flat()
creates a new array with all
sub-array elements concatenated
into it recursively up to the specified
depth.
Array.flatMap()
irst maps each element using a
mapping function, then flattens the
result into a new array.
Object.fromEntries(
)
transforms a list of key-value
pairs into an object.
String.trimStart() & String.trimEnd()
transforms a list of key-value pairs
into an object.
Optional catch binding
You are free to go ahead make use
of catch block without a param
try {
throw new Error( “ Error ” )
}
catch ( e ) {
console.log( e );
}
// Error : Error
Stable array.sort()
Previously, V8 used an
unstable QuickSort for arrays
Now it uses the stable
TimSort algorithm.
What’s stable ?
A sorting algorithm is said to be stable if two
objects with equal keys appear in the same order in
sorted output as they appear in the input array to
be sorted.
Consider the following
dataset.
[
{ Alice, B},
{ Carol , A},
{ Dave, A },
{ Eric, B },
{ Ken, A}
]
[
{ Carol, A },
{ Dave, A },
{ Ken, A }
{Alice, B },
{Eric,, B }
]
[
{ Carol, A },
{ Dave, A },
{ Ken, A }
{ Eric, B },
{ Alice,, B }
]
Unstable Stable
References
https://dev.to/adroitcoder/includes-vs-indexof-in-javascript,
https://dmitripavlutin.com/how-to-iterate-easily-over-object-properties-in-javascript/
https://www.freecodecamp.org/news/es9-javascripts-state-of-art-in-2018-9a350643f2
9c/
https://medium.com/@madasamy/javascript-brief-history-and-ecmascript-es6-es7-es
8-features-673973394df4
https://medium.com/@selvaganesh93/javascript-whats-new-in-ecmascript-2019-es20
19-es10-35210c6e7f4b

ECMA Script