Write in
NodeJS
Observation
4. Explore the features of ES6 like arrow functions, callbacks, promises,
async/await.
ES6 (ECMAScript 6), also known as ECMAScript 2015, is a significant
update to JavaScript that introduced new features and improvements.
ECMA stands for European Computer Manufacturers Association.
It is an international standards organization that develops and publishes
standards for information and communication systems.
ES6 made JavaScript more powerful, easier to use, and better suited for large-
scale applications.
Project Structure:
The inclusion of these libraries is crucial for your project.
1. [Link] - HTML file containing the Arrow Function JavaScript
logic.
2. [Link] - HTML file containing the callback function JavaScript logic.
3. [Link] - HTML file containing the Promises Object JavaScript logic.
4. [Link] - HTML file containing the Async/Await JavaScript logic.
1. [Link]
Arrow Functions
An Arrow function allows a short syntax for writing function expressions.
You don't need the function keyword, the return keyword, and the curly
brackets.
<html>
<head><title>Arrow Functions</title>
</head>
<body>
<script>
[Link]('Normal Function');
function add(a,b)
{
[Link](a+b)
}
add(5,5);
[Link]('Arrow Function');
let sum=(a,b)=> {
[Link](a+b);
}
sum(5,8);
</script>
</body>
</html>
Output:
Normal Function
10
Arrow Function
13
2. [Link]
Callbacks
A callback in JavaScript is a function that is passed as an argument to another
function and is executed after the completion of that function.
Callbacks are commonly used to handle asynchronous operations like reading
files, making HTTP requests, or responding to user events.
<html>
<head><title>Callback Functions</title>
</head>
<body>
<script>
function add(a,b)
{
return a+b;
}
function sub(a,b)
{
return a-b;
}
function calculate(x,y,operation)
{
return operation(x,y);
}
[Link](‘Addition of a,b:’);
[Link](calculate(10,5,add));
[Link](‘Subtraction of a,b:’);
[Link] (calculate(10,5,sub));
</script>
</body>
</html>
Output:
Addition of a,b:
15
Subtraction of a,b:
5
3. [Link]
Promises
The Promise Object represents the completion or failure of an asynchronous
operation and its results.
Enable a clearer and more manageable way to handle asynchronous
operations compared to traditional callbacks.
States of a Promise:
A Promise can be in one of three states:
i. Pending: The promise is waiting for something to finish. For example, waiting
for data to load from a website.
ii. Fulfilled: The promise has been completed successfully. The data you were
waiting for is now available.
iii. Rejected: The promise has failed. Maybe there was a problem, like the server
not responding.
iv.
<html>
<head><title>Promises in JavaScript</title>
</head>
<body>
<script>
// Creating a Promise
let myPromise = new Promise(function(resolve, reject)
{
let success = true; // change this to false to check error
if (success)
{
resolve("The data has loaded successfully!");
}
else
{
reject("There was an error loading the data.");
}
});
// Using the Promise
[Link](function(message)
{
[Link](message); // This runs if the promise is fulfilled
})
.catch(function(error)
{
[Link](error); // This runs if the promise is rejected
});
</script>
</body>
</html>
Output:
The data has loaded successfully!
4. [Link]
Async/Await
Async and Await in JavaScript is used to simplify handling asynchronous
operations using promises.
The async keyword is used to define an asynchronous function, and the await
keyword pauses the execution of the function until the promise is resolved.
Async Function
The async function allows us to write promise-based code as if it were
synchronous. This ensures that the execution thread is not blocked.
Promise Handling: Async functions always return a promise.
Async Syntax
async function myFunction() {
return "Message to be Print";
}
Await Keyword
The await keyword is used to wait for a promise to resolve. It can only be
used within an async block.
Execution Pause: Await makes the code wait until the promise returns a
result, allowing for cleaner and more manageable asynchronous code.
Syntax: let value = await promise;
The async keyword is used to mark a function as asynchronous, which means
it returns a promise.
The await keyword is used to wait for a promise to resolve before continuing
execution.
<html>
<head><title>Async/Await Keywords in JavaScript</title>
</head>
<body>
<script>
async function makeCoffee() {
[Link]("Starting to make coffee...");
let coffee = await brewCoffee();
[Link]("Coffee is ready!");
[Link](coffee);
}
function brewCoffee() {
return new Promise(resolve => {
setTimeout(() => {
resolve("Freshly brewed coffee!");
}, 5000);
});
}
makeCoffee();
</script>
</body>
</html>
Output:
Starting to make coffee...
Coffee is ready!
Freshly brewed coffee!