Advanced JavaScript - Internship Presentation - Week6

WEEKLY PRESENTATION
DURING TRAINING PROGRAM
- Devang Garach
devanggarach.rao@gmail.com
WEEK-6
Information Technology

AGENDA - Advanced JavaScript
Difference between let, var and const keyword
Destructuring array & objects
JavaScript Hoisting
JavaScript Arrow Function
JavaScript Async / Await
JavaScript Promises & Chaining
Callback Function
DURING TRAINING PROGRAM - WEEKLY PRESENTATION

Difference between let, var ,and constant keyword
var let const
It is available right from
the beginning when the
JavaScript was
introduced
It is a new way to declare
variables in JavaScript,
starting from ES6 or
ECMAScript 2015
const is used to store a
value that will not be
changed throughout the
execution of the script, it is
also introduced with ES6
It has a global/ function
scope
It has block scope It also has block scope
Can be updated or re-
declared in its scope
We can't re-declare them const represent a const
value, so it can't be
updated or re-declared

Destructuring array & objects
The destructuring assignment is a cool feature that came along with ES6.
Destructuring is a JavaScript expression that makes it possible to unpack
values from arrays, or properties from objects, into distinct variables. That
is, we can extract data from arrays and objects and assign them to variables.
Lets understand with example
Why it is important?
let introduction = ["Hello", "I" , "am", "Sarah"];
let greeting = introduction[0];
let name = introduction[3];
console.log(greeting); //"Hello"
console.log(name); //"Sarah"
(Source : freecodecamp.org)

Destructuring array & objects (Continue...)
example
let introduction = ["Hello", "I" , "am", "Sarah"];
let [greeting, pronoun] = introduction;
console.log(greeting);//"Hello"
console.log(pronoun); //"I"
let [greeting, pronoun] = ["Hello", "I" , "am", "Sarah"];
console.log(pronoun); //"I"

example
let [greeting,,,name] = ["Hello", "I" , "am", "Sarah"];
let [greeting,...intro] = ["Hello", "I" , "am", "Sarah"];
console.log(intro); //["I", "am", "Sarah"]

example
function getArray() {
return ["Hello", "I" , "am", "Sarah"];
}
let [greeting,pronoun] = getArray();
console.log(pronoun);//"I"
let a = 3;
let b = 6;
[a,b] = [b,a];
console.log(a);//6
console.log(b);//3

let person = {name: "Sarah", country: "Nigeria", job: "Developer"};
let name = person.name;
let country = person.country;
let job = person.job;
console.log(name);//"Sarah"
console.log(country);//"Nigeria"
console.log(job);//Developer"
let {name:foo = "myName", friend: bar = "Annie"} = person;
console.log(foo);//"Sarah"
console.log(bar);//"Annie"

example
let name, country, job; {name, country, job} = person;
console.log(name); // Error : "Unexpected token ="
let name, country, job;
({name, country, job} = person);
console.log(job); //"Developer"

JavaScript Hoisting
Hoisting is JavaScript's default behavior of moving declarations to the top
In JavaScript, a variable can be declared after it has been used. In other words; a variable
can be used before it has been declared
Not only variables but also function declarations are moved to the top of their scope
before code execution
JavaScript only hoists declarations, not initializations.
Example:
x = 5; // Assign 5 to x
elem = document.getElementById("demo"); // Find an element
elem.innerHTML = x; // Display x in the element
var x; // Declare x

JavaScript Arrow Function
Arrow functions were introduced in ES6.
Arrow functions allow us to write shorter function syntax:
Before Arrow function:
hello = function(){
return "Hello World!";
}
After Arrow function:
hello = () => {
return "Hello World!";
}
hello = () => "Hello World!"; hello = (val) => "Hello " + val;
Arrow Functions Return Value by Default: Arrow Functions with parameters
hello = val => "Hello " + val;
Arrow Functions without parentheses (Source : w3schools.com)

JavaScript Async / Await
JavaScript is asynchronous, it never wait for anyone.
Functions running in parallel with other functions are called asynchronous
JavaScript will move on without waiting some process to finish.
“async and await make promises easier to write"
async makes a function return a Promise,
await makes a function wait for a Promise
Example:
async function myFunction() {
return Promise.resolve("Hello");
}
The keyword async before a function makes the function return a promise: (Source : w3schools.com)

JavaScript Async / Await (Continue...)
Await Syntax:
The keyword await before a function makes the function wait for a promise:
let value = await promise
The await keyword can only be used inside an async function.
Example:
async function myDisplay() {
let myPromise = new Promise(function(myResolve, myReject) {
myResolve("I love JavaScript!!");
});
document.getElementById("demo").innerHTML = await myPromise;
}
myDisplay();
(Source : w3schools.com)

JavaScript Promises
As we all know that JavaScript is an asynchronous scripting language.
Promises are used to handle asynchronous operations in JavaScript. They
are easy to manage when dealing with multiple asynchronous operations
where callbacks can create callback hell leading to unmanageable code.
Benefits of Promises
● Improves Code Readability
● Better handling of asynchronous operations
● Better flow of control definition in asynchronous logic
● Better Error Handling

JavaScript Promises (Continue...)
A Promise has four states:
● fulfilled: Action related to the promise succeeded
● rejected: Action related to the promise failed
● pending: Promise is still pending i.e not fulfilled or rejected yet
● settled: Promise has fulfilled or rejected
A promise can be created using Promise constructor.
Syntax:
var promise = new Promise(function(resolve, reject){
//do something
}
);

Promise Consumers:
Promises can be consumed by registering functions using .then and .catch methods.
then() is invoked when a promise is either resolved or rejected.
Parameters: then() method takes two functions as parameters. Success or Error.
Example:
var promise = new Promise(function(resolve, reject) {
resolve('Hi its Resolved, Success');
})
promise.then(
function(successMessage) {
//success handler function is invoked
console.log(successMessage);
}, function(errorMessage) {
console.log(errorMessage);
});
(Source : geeksforgeeks.org)

Promises Methods:
Promise.all([array])
If the returned promise resolves, it is resolved with an aggregating array of
the values from the resolved promises, in the same order as defined in the
iterable of multiple promises. If it rejects, it is rejected with the reason from
the first promise in the iterable that was rejected.
Promise.allSettled()
Wait until all promises have settled (each may resolve or reject). Returns a
Promise that resolves after all of the given promises have either resolved or
rejected, with an array of objects that each describe the outcome of each
promise.

Promises Methods:
Promise.any():
Takes an iterable of Promise objects and, as soon as one of the promises in
the iterable fulfills, returns a single promise that resolves with the value
from that promise.
Promise.finally() - finally is an instance method like then() , catch()
Appends a handler to the promise, and returns a new promise that is
resolved when the original promise is resolved. The handler is called when
the promise is settled, whether fulfilled or rejected.

JavaScript Callback Function
Why do we need Callback Functions?
JavaScript runs code sequentially in top-down order. However, there are some cases that
code runs (or must run) after something else happens and also not sequentially. This is
called asynchronous programming.
Callbacks make sure that a function is not going to run before a task is completed but will
run right after the task has completed. It helps us develop asynchronous JavaScript code
and keeps us safe from problems and errors.
In JavaScript, the way to create a callback function is to pass it as a parameter to another
function, and then to call it back right after something has happened or some task is
completed. Let's check an example.

JavaScript Callback Function (Continue...)
Callbacks are functions that we passed as an arguments to be invoked when
the callee has finished its job
Example:
function myDisplayer(some) {
document.getElementById("demo").innerHTML = some;
}
function myCalculator(num1, num2, myCallback) {
let sum = num1 + num2;
myCallback(sum);
}
myCalculator(5, 5, myDisplayer); (Source : w3schools.com)

Thank You.
- Devang Garach
devanggarach.rao@gmail.com

Advanced JavaScript - Internship Presentation - Week6

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

Similaire à Advanced JavaScript - Internship Presentation - Week6

Similaire à Advanced JavaScript - Internship Presentation - Week6 (20)

Plus de Devang Garach

Plus de Devang Garach (8)

Dernier

Dernier (20)

Advanced JavaScript - Internship Presentation - Week6