<---- ES7 Features :---->
1. Array.prototype.includes
2. Exponentiation Operator
<---- ES8 Features :---->
1. String padding
2. Object.values()
3. Object.entries()
<---- ES18 ---->
const person = {name : "fred" , age : 19};
const sPerson = {...person};
console.log(person);
console.log(sPerson);
<---- ES20 ---->
BIG INT
<--- ES2014 --->
use strict mode
<---- Advance JavaScript ---->
What we will see
Event Propagation (Event bubbling and Event Capturing)
Higher Order Function
Callback Function
Function Currying (we will see after Async JS section)
CallBack Hell
AJAX call using XMLHttprequest
BONUS Section JSON
Fetch API
Promise
Async-Await
Error Handling in jS
1️⃣ What is Event Propagation ?
The Event Propagation mode determines in which order the elements
receive the event
Event bubbling and capuring are two ways of event propagation in the
HTML DOM API, when an event occurs in an element, and both elements
have registered a handle for that event.
The Event propagation mide determines in which order the elements recieve
the event.
🟢 What is Event Bubbling?
With Event Bubbling, the event is first captured and handel by the
innermost element and then propagated to outer elements.
🟢 What is Event Caputing?
With event capturing, the event first captured by the outermost
element and propagated to the inner elements.
Capturing is also called 'trickling', which helps remember the
propagation order.
2️⃣ What is higher order function?
Function which takes another function as an arguments is called HOF
Wo function jo dusre functions ko as an arguments accept karta hai use HOF
3️⃣ Callback Function
Function which get passed as an argument to another function is called CBF
A callback function is a function that is passed as an arguments to
another function, to be "called back" at a later time.
Jis bhi function ko hum kisi or function ke under as an arguments passed
karte hai then usko hum callback function bolte hai !
we need to create a calculator
const add = (a,b) => {
return a+b;
}
const sub = (a,b) => {
return a-b;
}
const mul = (a,b) => {
return a*b;
}
const calculator = (num1,num2,operator) => {
return operator(num1,num2);
}
console.log(calculator(2,4,add));
Asynchronus Javascript program :-
const fun2 = () => {
setTimeout(()=>{
console.log("function2 is calling");
},2000);
}
const fun1 = () => {
console.log("function 1 is calling");
fun2();
console.log("function 1 is calling");
}
fun1();
4️⃣ event loop
<---- HOW JAVASCRIPT WORKS AND ASYNCHRONOUS JAVASCRIPT ---->
Hoisting in JavaScript
Scope Chain
Lexical Scoping in JavaScript
Use Strict Mode
This Keyword
Closures in JavaScript
What is Asynchronous JavaScript Programming?
What is Event Loop?
5️⃣5 Hoisting in javascript :-
we have creation phase and ececution phase.
Hoisting in javascript is a mechanism where variables and
functions declearation are moved to the top of their scope
before the code executed.
for ex.
console.log(myName);
var myName;
myName = "Himanshu";
How it will output during creation phase.
1: var myName;
2: console.log(myName);
3: myName = "Himanshu";
In ES2015 (aka ES6), hoisting is avoided by using the let keyword
instead of var. (The other difference is that variables declared
with let are local to the surrounding block, not the entire function)
6️⃣ What is Scope chain and Lexical Scoping in JavaScript :-
The scope chain is used to resolve the value of variables names in JS
Scope chain in js is lexically defined, which means that we can see
what the scope chain will be by looking at the code.
At the top, we have the Global Scope, which is the window object in
the browser.
Lexical Scoping means now,the inner function can get access to their
parent function variables But the vice-versa is not true
for ex.
let a = "hello guys "; // global scope
const first = () => {
let b = "How are you all? "
const second = () => {
let c = "i am fine thank u ";
console.log(a+b+c);
}
second();
// console.log(a+b+c); // It can't use c
}
first();
7️⃣ What is Closures in JavaScript ;-
A closure is the combination of a function bundled together (elclosed)
with references to its surrounfing state (the lexical environment).
In other words, a closure gives you access to an
outer function's scope from an inner function.
In JavaScript, closure are created every time a function is created,
at function creation time.
for example
back to advance js ;-
curring
sum(5)(3)(8)
function sum (num1,num2,num3){
// console.log(num1);
return function (num2){
// console.log(num1,num2);
return function (num3){
console.log(num1+num2+num3);
}
}
}
OR
const sum = (num1) => (num2) => (num3) => console.log(num1+num2+num3);
sum(5)(3)(8);
8️⃣ CallBack Hell :-
setTimeout(() => {
console.log("Work 1 is done");
setTimeout(() => {
console.log("work 2 is done");
setTimeout(() => {
console.log("work 3 is done");
setTimeout(() => {
console.log("work 4 is done");
setTimeout(() => {
console.log("work 5 is done");
setTimeout(() => {
console.log("work 6 is done");
setTimeout(() => {
console.log("work 7 is done");
setTimeout(() => {
console.log("work 8 is done");
setTimeout(() => {
console.log("work 9 is done");
setTimeout(() => {
console.log("work 10 is done");
}, 1000);
}, 1000);
}, 1000);
}, 1000);
}, 1000);
}, 1000);
}, 1000);
}, 1000);
}, 1000);
}, 1000);
9️⃣ AJAX call using XMLHttprequest :-
1️⃣0️⃣ Bonus JSON :-
jSON.stringify turns a javascript object into json text and
stores that json in a string , eg:
var my_obj = {key_1 : "some Text" , key_2 : true , key_3 : 5};
var object_as_string = JSON.stringify(my_obj);
console.log(object_as_string);
typeof(object_as_string);
JSON.parse turns a string of JSON text into a javascript object, eg :
var object_as_string = JSON.parse(object_as_string);
typeof(object_as_string);
