Scribd
Upload
9 views43 pages

Lecture 7.2 - Introduction to Modern Javascript (4)-p1i71n6qb0edn1jii190mnd4

The document provides an overview of ECMAScript, detailing its history, versions, and key features introduced in each version from ES6 to ES2021. It discusses important concepts such as classes, modules, destructuring, promises, and async/await, along with their syntax and usage. Additionally, it highlights new methods and operators added in recent ECMAScript versions, enhancing JavaScript functionality.

Uploaded by

nazeerahmed65110
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
9 views43 pages

Lecture 7.2 - Introduction to Modern Javascript (4)-p1i71n6qb0edn1jii190mnd4

The document provides an overview of ECMAScript, detailing its history, versions, and key features introduced in each version from ES6 to ES2021. It discusses important concepts such as classes, modules, destructuring, promises, and async/await, along with their syntax and usage. Additionally, it highlights new methods and operators added in recent ECMAScript versions, enhancing JavaScript functionality.

Uploaded by

nazeerahmed65110
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
You are on page 1/ 43

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

You might also like