Slides
Slides
Slides
@coderdost
https://www.youtube.com/@coderdost
1. JavaScript Basics
https://www.youtube.com/@coderdost
Weakly Typed Language
https://www.youtube.com/@coderdost
Strongly Typed Language
Integer num = 1 ;
https://www.youtube.com/@coderdost
Attaching JS
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<script src="index.js"></script>
</head>
<body>
console.log(“hello”);
https://www.youtube.com/@coderdost
THIS PARA 1
THIS PARA 2
Not Printed in Main Page
THIS PARA 3
Printed in Console
DevTools > Console
THIS PARA 4
Elements Console Source Network
let name ;
variable declaration
https://www.youtube.com/@coderdost
SemiColon
let name ;
https://www.youtube.com/@coderdost
JavaScript Variables
assignment operator
https://www.youtube.com/@coderdost
JavaScript Variables
https://www.youtube.com/@coderdost
JavaScript Variables
https://www.youtube.com/@coderdost
Data Types : 1. Number
let name = 20 ;
Number
https://www.youtube.com/@coderdost
Data Types : 1. Number
https://www.youtube.com/@coderdost
Data Types : 2. String
https://www.youtube.com/@coderdost
Data Types : 3. Boolean
https://www.youtube.com/@coderdost
Data Types : 4. Object
https://www.youtube.com/@coderdost
Data Types : 5. Array*
= ;
let numbers [3,11,18,4,40,25] ;
Array
let name ;
https://www.youtube.com/@coderdost
fi
fi
7. Null Type
https://www.youtube.com/@coderdost
Printing in JS
console.log( name ) ;
console.log(“name”) ;
quotes = String
https://www.youtube.com/@coderdost
VAR vs LET vs CONST
https://www.youtube.com/@coderdost
Scope of VAR
Global Scope
var count = 1; COUNT
return a + b + c;
}
if(age>18){ IF block
var count = 2; COUNT
console.log(count)
}
https://www.youtube.com/@coderdost
Scope of VAR
var count = 1;
https://www.youtube.com/@coderdost
Scope of Variables ( let )
Global Scope
let count = 1; COUNT
return a + b + c;
}
if(age>18){ IF block
let count = 2; COUNT
console.log(count)
}
https://www.youtube.com/@coderdost
VAR v/s LET
VAR LET
No block { } All block { }
scope is have separate
created scope
https://www.youtube.com/@coderdost
Const
const count = 1;
count = 4; ERROR
person.name = “abhishek”;
cities.push(“mumbai”);
this works as “person” is not re-assigned
https://www.youtube.com/@coderdost
Some Instruction for Slides
https://www.youtube.com/@coderdost
String Literals : Style 1
https://www.youtube.com/@coderdost
String Literals : Style 2 (template)
https://www.youtube.com/@coderdost
String : Access Character by Index
let name = “raj”; ;
;
name[0] “r”
words.length 11
https://www.youtube.com/@coderdost
String Method* : upperCase / lowerCase
words.toUpperCase() “HELLO”
words.toLowerCase() “hello”
words.indexOf(‘e') 1
words.indexOf(‘z’) -1
https://www.youtube.com/@coderdost
Mutating vs Non-Mutating methods
Mutating Non-Mutating
changes doesn’t
variable which changes the
called it variable which
called it
example
array.push() example
.indexOf()
word[ 0 ] “H”
word[ 0 ] = “B”
word “Hello”
String can’t be modi ed once initialised. Only a new string can be made
https://www.youtube.com/@coderdost
fi
String Method : includes
words.includes(‘e’) true
words.includes(‘z’) false
not found
https://www.youtube.com/@coderdost
String Method : trim
words.trim() “Hello”
https://www.youtube.com/@coderdost
String Method : Slice
words.slice(1,3) “el”
words.slice(1) “ello”
words.slice(-1) “o”
go till end of string
negative means from end
https://www.youtube.com/@coderdost
String Method : Split
words.split(“”) [ “h”,”e”,”l”,”l”,”o”]
words.split(“l”) [ “he”,””,”o”]
words.split(“o”) [ “hell”, “”]
https://www.youtube.com/@coderdost
typeof
let age = 20; let name = “john”;
let a = 5 ; let b = 6 ;
Sum a + b 11
Diff a-b -1
Multiply a * b 30
Divide a / b 0.8333
Modulo a % b 5
https://www.youtube.com/@coderdost
Arithmetic Operations : Precedence
let a = 5 ;
Increment a++ 6
Increment a+=2 7
Decrement a-- 4
Decrement a-=2 3
All operation done to “a=5”
https://www.youtube.com/@coderdost
Logical Operations
Equality a == b false
Non-equality a != b true
logical operation always return Boolean
https://www.youtube.com/@coderdost
Logical Operations
let a = 5 ; let b = 6 ;
Greater than a>b false
let
var age = “20”;
20;
https://www.youtube.com/@coderdost
Strict Equality (===)
let
var age = “20”;
20;
https://www.youtube.com/@coderdost
Type Coercion
Multiply a*b 30
Subtract a-b -1
https://www.youtube.com/@coderdost
Type Coercion
https://www.youtube.com/@coderdost
Array
3 11 18 4 40 25
Index
0 1 2 3 4 5
https://www.youtube.com/@coderdost
Initialising Array in JS
numbers 3 11 18 4 40 25
Empty Array
let numbers = [ ] ;
let numbers = [3,11,18,4,40,25] ;
https://www.youtube.com/@coderdost
Reading Array
numbers 3 11 18 4 40 25
numbers[0] 3
numbers[4] 40
https://www.youtube.com/@coderdost
Writing Array
numbers 6
3 11 18 4 10
40 25
numbers[0] = 6
numbers[4] 10
=
https://www.youtube.com/@coderdost
Array : length property
numbers 6
3 11 18 4 10
40 25
numbers.length 6
https://www.youtube.com/@coderdost
Mutating vs Non-Mutating methods
Mutating Non-Mutating
changes doesn’t
variable which changes the
called it variable which
called it
example
array.push() example
array.indexOf()
https://www.youtube.com/@coderdost
PUSH function
numbers 36 11 18 10 12 16
numbers.push(10 ) 4
numbers.push(12 ) 5
numbers.push(16 ) 6
Mutating Method https://www.youtube.com/@coderdost array length after push
POP function
16
12
10
numbers 36 11 18
numbers.pop( ) 16
numbers.pop( ) 12
numbers.pop( ) 10
Mutating Method https://www.youtube.com/@coderdost
indexOf function
words.indexOf( “cat” ) 0
words.indexOf( “fox” ) -1
Non-Mutating Method
https://www.youtube.com/@coderdost
CONCAT function
animals.concat( birds )
cat dog horse hawk eagle
https://www.youtube.com/@coderdost
CONCAT function
birds.concat( animals )
hawk eagle cat dog horse
Non-Mutating Method
https://www.youtube.com/@coderdost
2. Flow control
https://www.youtube.com/@coderdost
FOR Loop
https://www.youtube.com/@coderdost
FOR Loop
ITERATION 2
https://www.youtube.com/@coderdost
FOR Loop
ITERATION 3
https://www.youtube.com/@coderdost
FOR Loop
ITERATION 4
console.log(element); > 1
> 2
} > 3
https://www.youtube.com/@coderdost
WHILE Loop
console.log(array[index]);
index++;
}
condition
iterator init
Step change
https://www.youtube.com/@coderdost
WHILE Loop
BEFORE LOOP
console.log(array[index]);
index++;
}
https://www.youtube.com/@coderdost
WHILE Loop
ITERATION 1
https://www.youtube.com/@coderdost
WHILE Loop
ITERATION 2
https://www.youtube.com/@coderdost
WHILE Loop
ITERATION 3
https://www.youtube.com/@coderdost
WHILE Loop
ITERATION 4
https://www.youtube.com/@coderdost
Break
let i = 0;
while (i < 6) {
Loop ends here
if (i === 3) {
break;
}
i = i + 1;
} prints 3
console.log(i);
https://www.youtube.com/@coderdost
Continue
let text = '';
console.log(text);
https://www.youtube.com/@coderdost
If/Else conditions
if(age>18){ false
true
console.log("adult")
}else{
console.log("kid")
}
https://www.youtube.com/@coderdost
If/Else conditions
if(age<10){ false
true
console.log(“kid")
}else if(age<18){ true
console.log(“teen")
}else{
console.log(“adult")
}
https://www.youtube.com/@coderdost
If/Else conditions
if(age<10){ false
console.log(“kid")
}else if(age<18){ false
console.log(“teen")
}else{
console.log(“adult")
}
https://www.youtube.com/@coderdost
Switch Statement
var code = “IN”;
switch(code){
case "IN":
console.log("India")
case "US" :
console.log("United States");
case "PK" :
console.log("Pakistan");
}
printshttps://www.youtube.com/@coderdost
all values
Switch Statement
var code = “IN”;
switch(code){ prints “India”
case "IN":
console.log(“India”);
break;
case "US" :
console.log("United States”);
break;
case "PK" :
console.log("Pakistan");
break;
}
https://www.youtube.com/@coderdost
Switch Statement
var code = “US”;
switch(code){
case "IN":
console.log(“India”);
break; prints “United States”
case "US" :
console.log("United States”);
break;
case "PK" :
console.log("Pakistan");
break;
}
https://www.youtube.com/@coderdost
Switch Statement
var code = “CN”;
switch(code){
case "IN":
console.log(“India”);
break;
case "US" :
console.log("United States”);
break;
case "PK" :
console.log("Pakistan");
break; prints “Not Matched”
default :
console.log(“Not Matched");
} https://www.youtube.com/@coderdost
Truthy / Falsy values
if(age>18){ true
console.log("adult")
}else{
console.log("kid")
}
https://www.youtube.com/@coderdost
Truthy / Falsy values
if(age){ true
console.log("adult")
}else{
console.log("kid")
}
https://www.youtube.com/@coderdost
Truthy / Falsy values
true false
10 0
“0” “”
“a”
“hello” unde ned
[] {} null
https://www.youtube.com/@coderdost
fi
Ternary Operators ( ? : )
https://www.youtube.com/@coderdost
Ternary Operators ( ? : )
“adult"
https://www.youtube.com/@coderdost
Functions
move(
move(“right”,10
“right” ) )
https://www.youtube.com/@coderdost
De ning Functions : Normal Style
move( “right”,10 )
function name
https://www.youtube.com/@coderdost
fi
De ning Functions
move( “right”,10 )
First Parameter
https://www.youtube.com/@coderdost
fi
De ning Functions
move( “right”,10 )
Second Parameter
https://www.youtube.com/@coderdost
fi
Calling Functions
move( “right”,10 )
First Argument
Second Argument
https://www.youtube.com/@coderdost
De ning Functions
sum( 2,3,4 ) 9
Output of Function
https://www.youtube.com/@coderdost
fi
De ning Functions
No return value
https://www.youtube.com/@coderdost
fi
fi
De ning Function : function expression
sum( 2,3,4 ) 9
https://www.youtube.com/@coderdost
fi
Both Type of de nition work Same
sum( 2,3,4 ) 9
https://www.youtube.com/@coderdost
fi
Normal function de nition can be called before
initialisation
sum( 2,3,4 ) 9
function sum(a, b, c){
return a + b + c;
}
Reason : Hoisting
https://www.youtube.com/@coderdost
fi
function expression Can’t be called before
initialisation
sum( 2,3,4 ) ERROR
https://www.youtube.com/@coderdost
Hoisting
sum( 2,3,4 ) 9
function sum(a, b, c){
return a + b + c;
}
https://www.youtube.com/@coderdost
fi
Default Parameters
weight(10,9) 90
weight(10) 98 10 *9.8
https://www.youtube.com/@coderdost
Arrow Functions
parameters Arrow
https://www.youtube.com/@coderdost
Arrow Functions
https://www.youtube.com/@coderdost
1. Callback Functions
https://www.youtube.com/@coderdost
1. Callback Functions
fx(sum)
Callback function
https://www.youtube.com/@coderdost
1. Callback Functions
talk(sayHi)
https://www.youtube.com/@coderdost
1. Callback Functions
calc(sum,4,5) 9
https://www.youtube.com/@coderdost
Callback Functions
calc(di ,4,5) -1
https://www.youtube.com/@coderdost
ff
2. Function returning function
function makeFunc() {
const name = "Mozilla";
function displayName() {
console.log(name);
}
return displayName;
same functionality as displayName,
}
but can access “name” variable
(function () {
// protect inner code from
access, protects global scope
})();
https://www.youtube.com/@coderdost
Timer Functions
setTimeout(fx,3000,arg1,…)
argument for fx
Callback function
Delay time (milli sec)
Executes after 3 secs
https://www.youtube.com/@coderdost
Timer Functions
setTimeout ( function( ) {
console.log(“hello”)
},
3000 )
https://www.youtube.com/@coderdost
Timer Functions
setInterval(fx,3000,arg1,..)
arguments for fx
Callback function
Delay time (milli sec)
Executes every 3 secs
https://www.youtube.com/@coderdost
Timer Functions
setInterval( function( ) {
console.log(“hello”)
}, Callback function
3000))
https://www.youtube.com/@coderdost
4. Objects
https://www.youtube.com/@coderdost
Objects
Name abhishek
Age 30
Mobile 888888888
person
https://www.youtube.com/@coderdost
Objects
var person = {
name : "abhishek",
age :30 ,
address : "street 10, Mumbai, India",
phone:8888888888
}
key value
person
https://www.youtube.com/@coderdost
Accessing Objects (dot)
var person = {
name : "abhishek",
age :30 ,
address : "street 10, Mumbai, India",
phone:8888888888
}
person.name “abhishek”
person.age 30
https://www.youtube.com/@coderdost
Accessing Objects (bracket style)
var person = {
name : "abhishek",
age :30 ,
address : "street 10, Mumbai, India",
phone:8888888888
}
person.[“name”] “abhishek”
person.[“age”] 30
https://www.youtube.com/@coderdost
Writing Objects (dot)
var person = {
"abhishek",
name : "ajay",
age :30
:40 ,
address : "street 10, Mumbai, India",
phone:8888888888
}
person.name = “ajay”
person.age = 40
https://www.youtube.com/@coderdost
Nested Objects
Name abhishek
Age 30
Mobile 888888888
person
https://www.youtube.com/@coderdost
Nested Objects
var person = {
name : "abhishek",
age :30 ,
address : {
street:“street 10”,
city:“mumbai”,
country:“india”
},
phone:8888888888
}
person.address.city “mumbai”
person.address.country “india”
https://www.youtube.com/@coderdost
Deleting Properties
var person = {
name : "abhishek",
age :30 ,
address : "street 10, Mumbai, India",
phone:8888888888
}
delete person.name
delete person.age
https://www.youtube.com/@coderdost
Function vs Methods
var person = {
name : "abhishek",
age :30 ,
address : "street 10, Mumbai, India",
phone:function(){ return this.age}
}
https://www.youtube.com/@coderdost
this
const person = {
name : “p1”,
getName: function(){
return this.name
}
}
person.getName() “p1”
lowerCased [“ny”,”la”,”tx”]
https://www.youtube.com/@coderdost
Math Library
Math.abs(-2) 2
Math.round(2.66) 3
Math. oor(3.55) 3
Math.ceil(3.45) 4
Math.pow(2,3) 8
https://www.youtube.com/@coderdost
fl
Math Library
Math.sqrt(4) 2
Math.max(4,5,100,0,1) 100
Math.min(4,5,100,0,1) 0
Math.random() 0.45537377
Math.trunc(-99.9) -99
https://www.youtube.com/@coderdost
Call
const person = {
name : “p1”, args
getName: function(){
return this.name
}
}
const p2 = { name : “p2” }
new value of ‘this’
person.getName.call(p2) “p2”
person.getName.call(p2, args)
https://www.youtube.com/@coderdost
Apply
const person = {
name : “p1”, args
getName: function(){
return this.name
}
}
const p2 = { name : “p2” }
new value of ‘this’
person.getName.apply(p2) “p2”
person.getName.apply(p2, [args])
https://www.youtube.com/@coderdost
Bind
const person = {
name : “p1”,
getName: function(){
return this.name
}
}
const p2 = { name : “p2” }
new value of ‘this’
const p2.getName = person.getName
p2.getName.bind(person) newGetNameFx
newGetNameFx() “p1”
https://www.youtube.com/@coderdost
Call by Reference
var person = {
name : "abhishek",
age :30 ,
address : "street 10",
phone:8888888888
}
person.name “jack”
https://www.youtube.com/@coderdost
?
Call by Reference
person OBJECT
anotherPerson
otherPerson
person OBJECT1
https://www.youtube.com/@coderdost
Reference Change
person OBJECT1
OBJECT
person OBJECT
https://www.youtube.com/@coderdost
Copying JS Objects : Wrong way
var person = {
name : "abhishek",
age :30 ,
address : "street 10",
phone:8888888888
}
person.name “jack”
https://www.youtube.com/@coderdost
Copying JS Objects : Right way
var person = {
name : "abhishek",
age :30 ,
address : "street 10",
phone:8888888888
}
person.name “abhishek”
Spread operator(…)
https://www.youtube.com/@coderdost
explained later
for-in loop
const object = { a: 1, b: 2, c: 3 };
https://www.youtube.com/@coderdost
5. DOM
https://www.youtube.com/@coderdost
HTML DOM HTML
<html>
<head>
<title>sitename<title> HEAD BODY
<body> attribute
</html> text
document = {
title : “sitename", document
location :"http://localhost" ,
getElementById : function(),
getElementsByClassName : function(),
getElementsByTagName : function(),
… … 100 more
}
Select Elements HTML
Hello </p>
Hello
</div>
</body>
</html> document
HTMLElement JS Object
Select Elements HTML
Hello </p>
Hello
</div>
</body>
</html> document
HTMLElement
Select Elements HTML
Hello </p>
Hello
</div>
</body>
</html> document
NodeList [ p ] [ HTMLelememt ]
Select Elements HTML
Hello </p>
Hello
</div>
</body>
</html> document
HTMLElement
Select Elements HTML
Hello </p>
Hello
</div>
</body>
</html> document
HTMLCollection [ p ] [ HTMLelememt ]
Select Elements HTML
Hello </p>
Hello
</div>
</body>
</html> document
HTMLCollection [ p ] [ HTMLelememt ]
HTMLElement HTML
(reading)
HEAD BODY
const el = document .querySelector ( “#myDiv” )
TITLE DIV ID
el.innerText “”
myDiv
el.id “myDiv”
Hello
<html>
const el = document .querySelector ( “.bold” ) <head>
<title>sitename<title>
</head>
e.className “bold”
<body>
<div id=“myDiv”>
e.innerText “Hello” <p class=“bold”>
Hello </p>
</div>
</body>
</html>
HTMLElement HTML
(writing)
HEAD BODY
const el = document .querySelector ( “#myDiv” )
TITLE DIV ID
sitename P CLASS
Hello
<html>
const el = document .querySelector ( “.bold” ) <head>
<title>sitename<title>
HEAD BODY
const el = document .querySelector ( “.bold” )
TITLE DIV ID
myDiv
el.getAttribute(“class”) “bold”
sitename P CLASS
bold
el.setAttribute(“class”, “bold dark”)
Hello
<html>
<head>
<title>sitename<title>
</head>
<body>
<div id=“myDiv”>
<p class=“bold”>
Hello </p>
</div>
</body>
</html>
CSS Styles HTML
HEAD BODY
const el = document .querySelector ( “.bold” )
TITLE DIV ID
el.style.color “black” myDiv
sitename P CLASS
Hello
el.style.backgroundColor = “yellow” <html>
<head>
<title>sitename<title>
el.style.border = “1px solid red” </head>
<body>
<div id=“myDiv”>
<p class=“bold”>
Hello </p>
</div>
</body>
</html>
ClassList HTML
HEAD BODY
const el = document .querySelector ( “.bold” )
TITLE DIV ID
el.classList.add(“dark”) myDiv
sitename P CLASS
bold
el.classList.remove(“dark”) Hello
<html>
<head>
el.classList.replace(“bold”, “dark”) <title>sitename<title>
</head>
<body>
<div id=“myDiv”>
<p class=“bold”>
Hello </p>
</div>
</body>
</html>
Children / Parent / Sibling HTML
HEAD BODY
const el = document .querySelector ( “#myDiv” )
TITLE DIV ID
el.children P myDiv
sitename P CLASS
Hello
el.previousSibling null <html>
<head>
el.nextSibling null <title>sitename<title>
</head>
<body>
<div id=“myDiv”>
<p class=“bold”>
Hello </p>
</div>
</body>
</html>
Events HTML
HEAD BODY
const el = document .querySelector ( “.bold” )
TITLE DIV ID
myDiv
el.addEventListener( “click”, function(){
sitename P CLASS
bold
})
Hello
<html>
runs on every click <head>
<title>sitename<title>
</head>
<body>
<div id=“myDiv”>
<p class=“bold”>
`
Hello </p>
</div>
</body>
</html>
Event Object HTML
HEAD BODY
const el = document .querySelector ( “.bold” )
TITLE DIV ID
myDiv
el.addEventListener( “click”, function(e){
sitename P CLASS
bold
})
Hello
<html>
<head>
event Object <title>sitename<title>
</head>
<body>
e.target.innerText <div id=“myDiv”>
<p class=“bold”>
Hello </p>
</div>
</body>
target = element </html>
Add Elements HTML
HEAD BODY
const el = document .querySelector ( “.bold” )
TITLE DIV ID
sitename P CLASS
bold
el.appendChild(child)
Hello
<html>
el.prependChild(child) <head>
<title>sitename<title>
add element after </head>
<body>
<div id=“myDiv”>
add element before <p class=“bold”>
Hello </p>
</div>
</body>
</html>
Event Bubbling HTML
HEAD BODY
const body = document .querySelector ( “body” )
TITLE DIV ID
myDiv
sitename P CLASS
bold
Hello
<html>
<head>
<title>sitename<title>
</head>
“click” started here, <body>
<div id=“myDiv”>
and it bubbles “up” <p class=“bold”>
P => Div => Body Hello </p>
</div>
</body>
</html>
Event Delegation HTML
HEAD BODY
const body = document .querySelector ( “body” )
TITLE DIV ID
body.addEventListener( “click”, function(e){ myDiv
sitename P CLASS
bold
})
Hello
“body” will also <html>
capture “click” / we can delegate <head>
<title>sitename<title>
“events” to body </head>
<body>
“click” started here, <div id=“myDiv”>
<p class=“bold”>
and it bubbles “up” Hello </p>
P => Div => Body </div>
</body>
</html>
Mouse Events
mousedown event
mouseenter event
mouseleave event
mousemove event
mouseout event
mouseover event
mouseup event
click event
dblclick event
Keyboard Events
keyup event
keydown event
keypress event
Document Events
scroll event
copy event
cut event
paste event
Promise : States
Promise
initial State
PENDING
RESOLVED REJECT
DATA ERROR
https://www.youtube.com/@coderdost
6. DOM forms
https://www.youtube.com/@coderdost
Forms
<form name="myForm" action="/serverAPI" method="post">
Name: <input type="text" name=“fname">
<input type="submit" value="Submit">
</form>
})
BOM- Browser Object Model
window = {
… … 100 more
}
7. Arrays
https://www.youtube.com/@coderdost
REVERSE method
numbers 6 11 15 10
numbers.reverse( ) [ 10,15,11,6 ]
numbers [ 10,15,11,6 ]
https://www.youtube.com/@coderdost
Mutating Method
JOIN function
words.join() cat,dog,horse
separator
Non-Mutating Method
https://www.youtube.com/@coderdost
JOIN function
words.join(“-”) cat-dog-horse
separator
https://www.youtube.com/@coderdost
SLICE function
numbers 36 11 18
15 10
30 12 16
numbers.slice(1, 3 ) [ 11,15 ]
EXCLUDED
Start index
https://www.youtube.com/@coderdost
End index
SPLICE function
numbers 36 11 18 10 12 16
numbers.splice( 1, 1 )
Start index
No. Of elements to be deleted
https://www.youtube.com/@coderdost
SPLICE function
numbers 36 11 18 10 12 16
numbers.splice( 1, 1 ) [ 11 ]
numbers [ 6,18,10,12,16 ]
https://www.youtube.com/@coderdost Mutating Method
SPLICE function (return value)
numbers 36 11 18 10 12 16
numbers.splice( 2, 2 ) [ 18,10 ]
https://www.youtube.com/@coderdost
SPLICE function
15 30
numbers 36 11 18 10 12 16
numbers 6 11 15 10
numbers.at(0) 6
numbers.at(-1) 10
https://www.youtube.com/@coderdost
Mixed Array
NO ERRORS
https://www.youtube.com/@coderdost
Nested Array
https://www.youtube.com/@coderdost
Accessing Nested Array
animals[2][1] “eagle”
animals[2][0] “hawk”
https://www.youtube.com/@coderdost
Higher order functions : map()
var numbers = [1,2,3];
iterator mapping
https://www.youtube.com/@coderdost
Higher order functions : map()
var numbers = [1,2,3];
ITERATION 1 1 2
ITERATION 2 2 4
ITERATION 3 3 6
[2, 4, 6]
https://www.youtube.com/@coderdost
Higher order functions : map()
var users = [{name:“adam”},{name:“bill”},{name:“eve”}];
ITERATION 1 adam 4
ITERATION 2 bill 4
ITERATION 3 eve 3
[4, 4, 3]
https://www.youtube.com/@coderdost
Higher order functions : map()
Input Collection Output Collection
toLowerCase()
“NY” “ny"
toLowerCase()
“LA” “la”
toLowerCase()
“AR” “ar”
toLowerCase()
“UK” “uk”
toLowerCase()
“TX” “tx”
https://www.youtube.com/@coderdost
map()
https://www.youtube.com/@coderdost
map()
low [“ny”,”la”,”tx”]
https://www.youtube.com/@coderdost
Higher order functions : lter()
Input Collection Output Collection
> 30
25
> 30
30
> 30
35 35
> 30
40 40
> 30
45 45
https://www.youtube.com/@coderdost
fi
lter()
ageGreat [35,40,45]
Iterator condition
https://www.youtube.com/@coderdost
fi
Higher order functions : reduce()
Input Collection Accumulator 0
+
25 25
+
30 55
+
35 90
+
40 130
+
45 175
https://www.youtube.com/@coderdost
Reduce
r 175
Accumulator Iterator
condition
https://www.youtube.com/@coderdost
fi
ndIndex rst index for which
“condition” returns true
1
const array1 = [5, 12, 8, 130, 44];
condition
https://www.youtube.com/@coderdost
fi
fi
some
even if 1 element satis ed
the condition we get true
condition
https://www.youtube.com/@coderdost
fi
every
even if 1 element don’t satis ed
the condition we get false
condition
https://www.youtube.com/@coderdost
fi
at
console.log(arr1.flat()); [0, 1, 2, 3, 4]
depth of attening
https://www.youtube.com/@coderdost
fl
fl
atMap at() + map()
[1, 2, 3, 4, 5, 6]
https://www.youtube.com/@coderdost
fl
fl
Sorting Array
const arr = ['March', 'Jan', 'Feb', 'Dec'];
arr.sort( compareFn )
function compareFn(a, b) {
if (a < b) {
return -1;
}
if (a > b) {
return 1;
}
// a must be equal to b
return 0;
}
https://www.youtube.com/@coderdost
Function chaining
word.split( “” ) [ “H”,”e”,”l”,”l”,”o”]
[word.split( “” ).reverse()
“H”,”e”,”l”,”l”,”o”] [ “o”,”l”,”l”,”e”,”H”]
word.split( “” ).reverse().join(“”)
[ “o”,”l”,”l”,”e”,”h”] “olleH”
https://www.youtube.com/@coderdost
Function chaining
return value
fx( ) compatible type with hx()
https://www.youtube.com/@coderdost
8. Date Library
https://www.youtube.com/@coderdost
Date Library
var d = new Date() Milisecs
d 2019-10-07T11:09:34.031Z
Month
Hour (24) Sec
Year
Day Mins
https://www.youtube.com/@coderdost
Date Library
var d = new Date( 2019 , 11 , 24 , 10 , 33 , 30 , 0)
Month Hour
Year Sec
Day Mins
https://www.youtube.com/@coderdost
Date Library
SUN = 0
JAN =0
d.getDay() 2
MON = 1
FEB =1
TUE = 2
MAR = 2 d.getDate() 24
WED = 3
…
THU = 4
FRI = 5
d.getMonth() 11
DEC = 11
SAT = 6
d.getFullYear() 2019
https://www.youtube.com/@coderdost
Date Library
var d = new Date(2019, 11, 24, 10, 33, 30, 0)
d.getTime() 1577163810000
d.toISOString() "2019-12-24T05:03:30.000Z"
https://www.youtube.com/@coderdost
9. LocalStorage
https://www.youtube.com/@coderdost
LocalStorage
window.localStorage
OR
localStorage
https://www.youtube.com/@coderdost
LocalStorage: Adding Data
localStorage.setItem(“name”,”abhishek”)
value
key ==String
Stringonly
only value = String only
https://www.youtube.com/@coderdost
LocalStorage: Adding Data
localStorage.getItem(“name”) “abhishek”
key value
localStorage.removeItem(“name”)
key
https://www.youtube.com/@coderdost
LocalStorage: Clear All Data
localStorage.clear()
https://www.youtube.com/@coderdost
JSON to String/ String to JSON
JSON.parse(STRING)
targetObject
https://www.youtube.com/@coderdost
https://www.youtube.com/@coderdost
10. Object Oriented JS
https://www.youtube.com/@coderdost
Constructor
const person = {
this is shortcut name : “p1”,
}
constructor function
https://www.youtube.com/@coderdost
Constructor
function Person(name){
this.name = name;
)
https://www.youtube.com/@coderdost
prototype - property
function Person(name){
this.name = name;
)
Person.prototype.printName = function(){
console.log(this.name)
}
person.printName()
https://www.youtube.com/@coderdost
prototype - property
function Person(name){
this.name = name;
)
person.__proto__ Person.prototype
Constructor
instance uses __proto__
uses .prototype
https://www.youtube.com/@coderdost
prototype
Array.prototype.push = function(){
Array.prototype.pop = function(){
Object
age
person age
name
__proto__
__proto__ property tells about the
searching for ‘age’ in ProtoType of this instance. You can
“person” start searching from there
https://www.youtube.com/@coderdost
Prototype Inheritance
Object
age found here
Object
subject
__proto__
Object.prototype
Array.prototype
Function.prototype
https://www.youtube.com/@coderdost
ES6 - Class
Name abhishek
Age 30
Mobile 888888888
we want to store all this info
person of person
https://www.youtube.com/@coderdost
Objects
var person = {
name : "abhishek",
age :30 ,
address : "street 10, Mumbai, India",
phone:8888888888
}
var person1 = {
fullname : "ajay",
age :30 ,
address : "street 10, Mumbai, India",
mobile:8888888888
}
person But issue can be there if do it manually
- mismatching keys
https://www.youtube.com/@coderdost
Class
class Person {
Name
p2 constructor( name ) {
p1
this.name = name;
}
}
let p1 = new Person(“jay”);
Constructor Call
https://www.youtube.com/@coderdost
Class Properties
Name
let p1 = new Person(
Age “ajay”,30,”street 10”,88888
);
Address
Mobile
Person
https://www.youtube.com/@coderdost
Class Methods
class Person {
Name
constructor( name ) {
this.name = name;
}
getName() {
CLASS
return this.name;
METHODS }
setName(name) {
Person this.name = name;
}
}
https://www.youtube.com/@coderdost
Accessor Properties
const person = {
firstName : “john”,
lastName : “smith”,
get fullName(){
return this.firstName +” ”+ this.lastName
}
}
https://www.youtube.com/@coderdost
Accessor Properties
const person = {
firstName : “john”,
lastName : “smith”,
get fullName(){
return this.firstName +” ”+ this.lastName
}
set fullName(name){
this.firstName = name.split(‘’)[0]
this.lastName = name.split(‘’)[1]
}
}
Class.staticMethod()
https://www.youtube.com/@coderdost
Static Methods
class Class {
static staticMethod() {
// …
}
can be declared in Class
} also with “static”
Class.staticMethod()
https://www.youtube.com/@coderdost
Inheritance
class ParentClass {
constructor(name) {
this.name = name
}
}
class ChildClass extends ParentClass {
}
const child = new ChildClass(“john”)
https://www.youtube.com/@coderdost
Async JavaScript
function double(x){ return x*2};
setTimeout(()=>{
double(4);
},4000)
Callbacks ?
https://www.youtube.com/@coderdost
Async JavaScript
function double(x){ return x*2};
setTimeout((cb)=>{
cb(double(4));
3rd argument },
4000, callback function
print)
function print(result){
console.log(result)
}
https://www.youtube.com/@coderdost
Async JavaScript
Console.log (1)
AsyncFx ( function(){
Console.log (3)
})
Console.log (2) Callback function
https://www.youtube.com/@coderdost
Async JavaScript
AsyncFx ( function(){
AsyncFx ( function(){
AsyncFx ( function(){
})
})
}) Callback Hell
https://www.youtube.com/@coderdost
Promise
function delayedFx(){
setTimeout(function(){
someAction();
}, 3000);
}
delayedFx() undefined
delayedFx() promise
PENDING
Promise Listeners
RESOLVED REJECT
DATA ERROR
https://www.youtube.com/@coderdost
Promise : States
PENDING })
RESOLVED
DATA
https://www.youtube.com/@coderdost
Promise : States
PENDING })
REJECTED
ERROR
https://www.youtube.com/@coderdost
Promise
function delayedFx(){
let promise = new Promise((resolve, reject)=>{
setTimeout(function(){
resolve(someAction());
}, 3000);
resolve will send data to
} Promise listeners (.then)
return promise;
}
delayedFx() promise
})
then will run but
p.then(function(data){
Callback waits
}).catch(function(data){
catch will run but
Callback waits
})
https://www.youtube.com/@coderdost
Promise : Resolved
const p = new Promise(function(resolve,reject){
resolve(data);
})
}).catch(function(data){
})
https://www.youtube.com/@coderdost
Promise : Rejected
const p = new Promise(function(resolve,reject){
reject(data);
})
p.then(function(data){
}).catch(function(data){
callback runs after
reject()
})
https://www.youtube.com/@coderdost
Fetch
fetch(URL, optionsObject)
fetch(“http://google.com/)
fetch(“http://cricket.com/, {
“method” : “POST”,
“body” : “match score”
promise
})
https://www.youtube.com/@coderdost
Fetch
fetch(“http://cricket.com/, {
“method” : “POST”,
“body” : “match score”
})
.then(function(HTTPResponse){
}).catch(function(ErrorResponse){
})
https://www.youtube.com/@coderdost
Await
const P = new Promise(function(resolve,reject){
resolve(data);
})
https://www.youtube.com/@coderdost
Async
const P = new Promise(function(resolve,reject){
resolve(data);
})
async function(){
const data = await P
console.log(data)
}
We always use “async” for await based functions
https://www.youtube.com/@coderdost
JSON (JavaScript Object Notation)
{
“name” : "abhishek",
“age” : ”30” ,
“address” : "street 10, Mumbai, India",
“phone”: “888888888”
}
quotes on properties
HashMaps Dictionary
https://www.youtube.com/@coderdost
Universal Data Transfer
{
“name” : "abhishek",
“age” : ”30” ,
“course” : "nodejs",
}
https://www.youtube.com/@coderdost
Universal Data Transfer format (JSON)
name age course
abhishek 30 nodejs
abhishek
30
nodejs
???
CLIENT
{ WEB SERVER
“name” : "abhishek",
“age” : ”30” ,
“course” : "nodejs",
}
https://www.youtube.com/@coderdost
12. ES 6 JavaScript
https://www.youtube.com/@coderdost
De-structuring Assignment Array
https://www.youtube.com/@coderdost
De-structuring Assignment Objects
var person = {
name : "abhishek",
age :30 ,
phone:8888888888
}
Math.max(numbers)
https://www.youtube.com/@coderdost
Spread Operator
…numbers 4, 5, 100, 0, 1
Math.max(…numbers)
Math.max(4, 5, 100, 0, 1)
https://www.youtube.com/@coderdost
Rest Parameters
max(1,2,4,5)
max(1,2) max(1,2,3)
nums = [1, 2]; nums = [1, 2, 3];
https://www.youtube.com/@coderdost
Short Circuiting
var person = {
name: 'Jack',
age: 34
}
console.log(person.job || 'unemployed');
https://www.youtube.com/@coderdost
FOR OF Loop
console.log(number);
}
collection
iterator
https://www.youtube.com/@coderdost
FOR OF Loop
ITERATION 1
https://www.youtube.com/@coderdost
FOR OF Loop
ITERATION 2
https://www.youtube.com/@coderdost
FOR OF Loop
ITERATION 3
https://www.youtube.com/@coderdost
FOR V/S FOR OF Loop
FOR FOR OF
Dif cult to Write Easy to Write
https://www.youtube.com/@coderdost
fi
fl
Object Literals: properties
var person = {
name : "abhishek",
age :30 ,
phone:8888888888
}
https://www.youtube.com/@coderdost
Object Literals: properties
var person = {
Shorthand
name ,
age , Object
phone Literals
}
https://www.youtube.com/@coderdost
Object Literals : methods
let shape = {
name: 'rectangle',
height: 100,
width:100,
area() {
return this.height * this.width;
}
}
function not required
https://www.youtube.com/@coderdost
Object Literals : Computed keys
let keyName = “nameofShape"
let shape = {
[keyName]: 'rectangle',
height: 100, key is variable here
width:100,
}
shape.nameofShape “rectangle”
https://www.youtube.com/@coderdost
Optional Chaining (?.)
let person = {
username: 'Jack',
age: 34
}
unde ned
But we generally
Object Constructor use { } for easier
writing
https://www.youtube.com/@coderdost
var person = {
name : "abhishek",
age :30 ,
address : "street 10",
phone:8888888888
}
Object.keys(person) [“name”,”age”,”address”,”phone”]
Set(4) {1, 2, 3, 4}
set.size 4
https://www.youtube.com/@coderdost
Set : Delete
Set(4) {1, 2, 3, 4}
https://www.youtube.com/@coderdost
Set : has & clear
Set(4) {1, 2, 3, 4}
set.has(3) true
set.has(5) false
set.clear() Set(0) { }
https://www.youtube.com/@coderdost
Map Data Type
MAP
“name” “abhishek"
“cities” [“delhi”,”mumbai”]
0 5
[1,2] [1,4]
{ name:”abhishek” } { age:30 }
https://www.youtube.com/@coderdost
Map : Write and Read
map.set(“name”,”abhishek”)
map.get(“name”) ”abhishek”
https://www.youtube.com/@coderdost
Map : Check Exists
map.set(“name”,”abhishek”)
map.has(“age”) false
https://www.youtube.com/@coderdost
Map : Delete
map.set(“name”,”abhishek”)
map.delete(“name”)
https://www.youtube.com/@coderdost
Map : Clear all
map.set(“name”,”abhishek”)
map.clear()
map.set(“name”,”abhishek”)
map.size 2
https://www.youtube.com/@coderdost
13. Misc Tools
https://www.youtube.com/@coderdost
Import in JS
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<script src=“index.js" type=“module”>
</script>
</head>
<body>
ES module enable
</body>
index.html
https://www.youtube.com/@coderdost
Named Export / Import
const a = 5;
const b = 6;
function sum(a,b){
return a+b;
} import {a,b,sum} from "./app.js"
console.log(sum(a,b))
export {a,b,sum}; index.js
app.js
named exports
https://www.youtube.com/@coderdost
Default Export / Import
const a = 5;
const b = 6;
function sum(a,b){
return a+b;
} import sum from "./app.js";
console.log(sum(4,5))
export default sum; index.js
app.js
default export
https://www.youtube.com/@coderdost
Alias
function sum(a,b){
return a+b;
} import {sum as add} from "./app.js
console.log(add(a,b))
export {sum};
index.js
app.js
named exports
https://www.youtube.com/@coderdost
Top Level Await
Now its allowed to use Await without Async at top-
level of le/module
https://www.youtube.com/@coderdost
fi
Modular code - IIFE
})();
https://www.youtube.com/@coderdost
14. Advanced Concepts
https://www.youtube.com/@coderdost
Closure
function makeAdder(x) {
return function (y) {
return x + y;
};
this “x” is accessible
}
to inner function
const add5 = makeAdder(5);
x=10 console.log(add5(2)); // 7
console.log(add10(2)); // 12
https://www.youtube.com/@coderdost
THANKS
https://www.youtube.com/@coderdost