Lecture 7
ECMA Script
Nisar Ahmed Siddiqui
ECMA Script
• JavaScript was invented by Brendan Eich in 1995, and became an
ECMA standard in 1997.
• ECMAScript is the official name of the language.
• ECMAScript versions have been abbreviated to ES1, ES2, ES3, ES5, and
ES6.
• Since 2016, versions are named by year (ECMAScript 2016, 2017,
2018, 2019, 2020).
New features in ES6
• The let keyword • Promises
• The const keyword • Function Rest Parameter
• Arrow Functions • New Math Methods
• The ... Operator • New Number Properties
• For/of • New Number Methods
• Map Objects • New Global Methods
• Set Objects • Object entries
• Classes • JavaScript Modules
ECMAScript 2016
New Features in ECMAScript 2016
• JavaScript Exponentiation (**)
• JavaScript Exponentiation assignment (**=)
• JavaScript Array includes()
ECMAScript 2017
New Features in ECMAScript 2017
• JavaScript String padding
• JavaScript Object entries()
• JavaScript Object values()
• JavaScript async and await
• JavaScript Object.getOwnPropertyDescriptors
ECMAScript 2018
New Features in ECMAScript 2018
• Asynchronous Iteration
• Promise Finally
• Object Rest Properties
• New RegExp Features
• JavaScript Shared Memory
ECMAScript 2019
New Features in ES2019
• String.trimStart()
• String.trimEnd()
• Object.fromEntries
• Optional catch binding
• Array.flat()
• Array.flatMap()
• Revised Array.Sort()
• Revised JSON.stringify()
• Separator symbols allowed in string litterals
• Revised Function.toString()
ECMAScript 2020
New Features in ES2020
• BigInt
• String matchAll()
• The Nullish Coalescing Operator (??)
• The Optional Chaining Operator (?.)
• Logical AND Assignment Operator (&&=)
• Logical OR Assignment (||=)
• Nullish Coalescing Assignment (??=)
• Dynamic Import
ECMAScript 2021
New Features in ES2021
• Promise any():
const first = await Promise.any([prom1,prom2,prom3]);
• String replaceAll()
• Numeric Separators (_)
ES 6 - Features
JavaScript Template Literals
• Back-Tics Syntax
• Template Literals use back-ticks (``) rather than the quotes ("") to
define a string:
• With template literals, you can use both single and double quotes
inside a string:
Interpolation
• Template literals provide an easy way to interpolate variables and
expressions into strings.
• The method is called string interpolation.
• The syntax is:
• Template literals allow variables in strings:
Arrow functions
• Already explained in previous lectures
Classes
• ECMAScript 2015, also known as ES6, introduced JavaScript Classes.
• JavaScript Classes are templates for JavaScript Objects.
JavaScript Class Syntax
• Use the keyword class to create a class.
• Always add a method named constructor():
Using a Class
• When you have a class, you can use the class to create objects:
Modules
• JavaScript modules allow you to break up your code into separate
files.
• This makes it easier to maintain a code-base.
• Modules are imported from external files with the import statement.
• Modules also rely on type="module" in the <script> tag.
Export
• Modules with functions or variables can be stored in any external file.
• There are two types of exports: Named Exports and Default Exports.
1.Named Exports
• Let us create a file named person.js, and fill it with the things we want to export.
• You can create named exports two ways. In-line individually, or all at once at the bottom.
Export (cont…)
2. Default Exports
• Let us create another file, named message.js, and use it for
demonstrating default export.
• You can only have one default export in a file.
Import
• You can import modules into a file in two ways, based on if they are
named exports or default exports.
• Named exports are constructed using curly braces. Default exports
are not.
• Import named exports from the file person.js:
• Import a default export from the file message.js:
Object Literal Enhancement
• Object literal enhancement is used to group variables from the global
scope and form them into javascript objects. It is the process of
restructuring or putting back together.
Destructuring
• Destructuring is a convenient way to extract values from data stored in
Objects and Arrays (also nested). This is an opposite operation to
structuring (constructing data).
• There is a nice syntax for constructing data in JavaScript – an object literal:
• Destructuring in ECMAScript 6 enables the same syntax for extracting
data.
Destructuring (Object Destructuring)
Object destructuring, shorthand
notation.
• Only for object literals: If the value of a property is provided via a
variable whose name is the same as the property name, you can omit
the property name.
Array Destructuring
• Destructuring works for arrays as well. How? By using square brackets
in the destructuring side of the declaration.
OR
Default + Rest + Spread
• We can pass the default value to a parameter.
Default + Rest + Spread
• The rest operator is used to condense a group of elements down into
a single array.
• Let’s create a function that adds three numbers together using the
reduce array helper function.
Default + Rest + Spread
• The spread is closely related to rest parameters, because of … (three
dots) notation. It allows to split an array to single arguments which
are passed to the function as separate arguments.
Iterators & For…Of
• Already explained in detail in last classes
Generators
• Regular functions return only one, single value (or nothing).
• Generators can return (“yield”) multiple values, one after another, on-
demand. They work great with iterables, allowing to create data
streams with ease.
• To create a generator, we need a special syntax construct: function*,
so-called “generator function”.
Working of generators
Using a generator,
• We can stop the execution of a function from anywhere inside the
function and continue executing code from a halted position
Passing Arguments to Generator
Functions
Promises
"I Promise a Result!"
• "Producing code" is code that can take some time
• "Consuming code" is code that must wait for the result
• A Promise is a JavaScript object that links producing code and
consuming code
JavaScript Promise Object
• A JavaScript Promise object contains both the producing code and
calls to the consuming code:
• When the producing code obtains the result, it should call one of the two callbacks:
Promise Object Properties
• A JavaScript Promise object can be:
• Pending
• Fulfilled
• Rejected
Promise Object Properties (cont…)
• The Promise object supports two properties: state and result.
• While a Promise object is "pending" (working), the result is undefined.
• When a Promise object is "fulfilled", the result is a value.
• When a Promise object is "rejected", the result is an error object.
Promise How To
• Promise.then() takes two arguments, a callback for success and
another for failure.
• Both are optional, so you can add a callback for success or failure
only.
Example
JavaScript Promise Examples
(settimeout)
• To demonstrate the use of promises, we will use the callback
• Waiting for a Timeout
JavaScript Async
"async and await make promises easier to write“
• async makes a function return a Promise
• await makes a function wait for a Promise
Async Syntax
• The keyword async before a function makes the function return a
promise:
Await Syntax
• The await keyword can only be used inside an async function.
• The await keyword makes the function pause the execution and wait
for a resolved promise before it continues:
How to use async & await with
promises
Without reject
function
Async and await with timeouts
