Web Technologies (9FC06) - UNIT

II

JavaScript -
Advanced

JavaScript - 1/
Web Technologies (9FC06) - UNIT
II

JavaScript - Advanced :
Content
Types of Variables
Arrow Function
Prototypal
Inheritance
Destructuring
Rest
Sprea
d
Closur
e
Understanding Call
Back Promise
Async/ JavaScript - 2/
Web Technologies (9FC06) - UNIT
II

Types of Variables
Variable:
Variables are containers for storing information.
Creating a variable in JavaScript is called ”declaring” a
variable JavaScript Variables can be declared in 4 ways:
1 Automati

2 c Using

3 var Using

4 let Using

const
Automatic:
Example:
x = 5;
y = 6;
z = x + y;
c o n s o l e . l o g ( " Sum i s " + z ) ;

Note: Automati c i s by defa ul t i s ’ v a r ’ type o f v a r i a b l e

JavaScript - 3/
Web Technologies (9FC06) - UNIT
II

Types of Variables
Using var:
Variables declared by ’var’ are available throughout the
function in which they’re declared.
These variables are also called as global variables.
Example:
<script >
f u n c ti o n v a r S c o p i n g ( ) {
var x = 1;

if ( true )
{ var x =
2;
console .
log( x ) ; //
will
print 2
}

console . JavaScript - 4/
Web Technologies (9FC06) - UNIT
II

Types of Variables
Using let:
Variables declared by ’let’ are only available inside the
block where they’re defined.
These variables are also called as local variables.
Example:
<script >
f u n c ti o n l e t S c o p i n g ( )
{ l e t x = 1;

if ( true )
{ let x =
2;
console .
log( x ) ; //
will
print 2
}

console . JavaScript - 5 / 36
Web Technologies (9FC06) - UNIT
II

Types of Variables
One more Example combining let and
var:
<script >
f u n c ti o n V a r i a b l e S co p e ( ) {
if ( true ) {
v a r f u n c ti o n V a r i a b l e = 1 ; / / ( V a r i a b l e )
Global l e t b l o c k Va r i a b l e = 2;
c o n s o l e . l o g ( f u n c ti o n V a r i a b l e ) ; / / w i l l p r i n t 1
co nso le . l o g ( b l o c k Va r i a b l e ) ; / / w i l l p r i n t 2
i f ( true ) {
c o n s o l e . l o g ( f u n c ti o n V a r i a b l e ) ; / / w i l l p r i n t 1
co nso le . l o g ( b l o c k Va r i a b l e ) ; / / w i l l p r i n t 2
}
}
c o n s o l e . l o g ( f u n c ti o n V a r i a b l e ) ; / / w i l l p r i n t 1
c o n s o l e . l o g ( b l o c k V a r i a b l e ) ; / / w i l l throw an e r r o r
}
V a r i a b l e S co p e ( ) ;
</ s c r i p t >

JavaScript - 6 / 36
Web Technologies (9FC06) - UNIT
II

Types of Variables

Using const:
The const declaration declares block-scoped local variables.
The value of a constant can’t be changed through
reassignment using the assignment operator.
Example:
const n = 42;
console . l o g ( n ) ;
n = 4 5 ; / / T hrows an e r r o r , Invalid Assignment
console . l o g ( n ) ;

JavaScript - 7 / 36
Web Technologies (9FC06) - UNIT
II

Types of Variables

Using const continued...:

I f a constant i s an o b j e c t , i t s pro perti es can be added,
updated, or removed.
Example:
/ / You can c r e a t e a c o n s t a n t a r r a y :
c o n s t employee = [ " V i j a y " , " A j a y " , " S h i v a " ] ;
/ / You can c h a n g e an e l e m e n t :
employee [ 0 ] = " Ramu " ;
/ / You can add an e l e m e n t :
employee . push ( " R a j u " ) ;
c o n s o l e . l o g ( employee ) ;

Output:

JavaScript - 8 / 36
Web Technologies (9FC06) - UNIT
II

Arrow Function
An Arrow Function in JavaScript, introduced
in ES6 An arrow function is defined using
expressions =>
Arrow functions are anonymous functions i.e. functions
without a name but they are often assigned to any variable.
They are also called Lambda Functions.
c o n s t With
Example: g r e e tout
= (parameters
) => {
console . l o g ( " Hello V i j a y " ) ;
}
greet ( ) ;

Example: With parameters

c o n s t g r e e t = ( name ) =>
{ console . l o g ( " Hello " +
name ) ;
}
greet(’ vijay ’ ) ;
JavaScript - 9 / 36
Web Technologies (9FC06) - UNIT
II

Prototypal Inheritance

Prototype
JavaScript prototype is one of the core concepts of the
language.
It is used to create objects from classes and to extend
existing objects. Every Object in JavaScript has a prototype.
The default prototype of any Object is ’Object’ class
(Super class of all classes)
L et us
l e t Understand:
names = [ " v i j a y " , " a j a y " ]
c o n s o l e . l o g ( n a m es . proto );

Here names i s an Object and prototype o f Array i s a an

Object c o n s i s t s predefi ned pro perti es l i k e length and
methods o f l i k e push,pop e t c . . ,

JavaScript - 10 /
Web Technologies (9FC06) - UNIT
II

Prototypal Inheritance
Let us take one more
Example:
l e t employee = {
name : " v i j a y " ,
c i t y : " Hyd "
}
console .
l o g ( employee .
Here
p r o t o employee
i s an Object and prototype o f Object i s a an
Object which i s the Super o f a l l c l a s s e s
I) f; we Observe c a r e f u l l y every Object has a prototype
l e t employee = {
name : " v i j a y " ,
c i t y : " Hyd "
}
console .
l o g ( employee .
Here
p r o t o employee i san Object and prototype o f Object i s a an
Object which i s the Super o f a l l c l a s s e s and i f we t r y to
access
. p r o t othe prototype o f t hat Object i s n u l l .
JavaScript - 11 /
Web Technologies (9FC06) - UNIT
II

Prototypal Inheritance
Prototypal Chaining: I t i s the concept o f adding or att aching
One Object as a prototype to another Object.
Example:
l e t employee = {
name : " V i j a y " ,
c i t y : " Hyd "
}
l e t Manager
={ D e s i g n a ti o n : "
Tr a i n e r " , Department:"
CSE "
}
M a n a g e r. proto = employee ;
c o n s o l e . l o g ( M a n a g e r. name ) ; / / V i j a y
c o n s o l e . l o g ( M a n a g e r. c i t y ) ; / / Hyd
c o n s o l e . l o g ( M a n a g e r. D e s i g n a ti o n ) ; / / T r a i n e r
c o n s o l e . l o g ( M a n a g e r. D e p a r t m e n t ) ; / / CSE
Here employee i s att ached as prototype o f Manager, Through
which we can access a l l the pro perti es o f Employee
JavaScript - 12 /
Web Technologies (9FC06) - UNIT
II

Prototypal Inheritance
Prototypal Chaining Continued..:
Not only P ro pe rti e s we can a l s o access methods o f employee
Here is the Example:
l e t employee
= { name : "
Vijay",
c i t y : " Hyd " ,
greet ( ) { to SNIST " ) ;
console . l o g ( "
Hi " + t h i s .
name + "
l e tWelcome
Manager
} ={ D e s i g n a ti o n : "
} Tr a i n e r " , Department:"
CSE "
}
M a n a g e r. proto = employee ;
c o n s o l e . l o g ( M a n a g e r. name ) ; / / V i j a y SNIST
c o n s o l e . l o g ( M a n a g e r. g r e e t ( ) ) ; / / H i V i j a y Welcome to
JavaScript - 13 /
Web Technologies (9FC06) - UNIT
II

Prototypal Inheritance
Prototypal Chaining Continued..:
The beauty o f prototype i n J a va S c r i p t i s we can add
pro pe rti e s and methods to another o bject using prototype.
Here is the Example:
l e t employee
= { name : "
Vijay",
c i t y : " Hyd "
}
l e t Manager
={ D e s i g n a ti o n : "
Tr a i n e r " , Department:"
CSE "
}
M a n a g e r. proto = employee ; to SNIST " ) ;
M a n a g e r. proto . g r e e t = f u n c ti o n ( ) {
c o n s o l e . l o g ( " H i " + t h i s . name + "
Welcome Welcome t o SNIST
}
JavaScript - 14 /
Web Technologies (9FC06) - UNIT
II

Prototypal Inheritance
Prototypal Chaining Continued..:
In the above example greet is a function added to the
prototype of Manager i.e., to Employee Object.
This concept is called as Prototypal Chaining also known
Prototypal Inheritance.
In a Summary Prototypal Inheritance is a concept of an
object using the properties or methods of another object
via the prototype linkage.
A Major distinction between Classical and Prototypal Inheritance
is:

In classical inheritance models inheritance occurs when an

object instance inherits from a class and a subclass can
inherit from a parent class.
Prototypal inheritance on the other hand supports an object
JavaScript - 15 /
Web Technologies (9FC06) - UNIT
II

Destructuring

Destructuring is a JavaScript expression that makes it

possible to unpack values from arrays, or properties from
objects, into distinct variables.
Example: Using Arrays
c o n s t e m p l oyee s = [ " V i j a y " , " A j a y " , " S h i v a " ] ; / / Array
c o n s t [ name1 , name2 , name3 ] = e m p l o y e e s ;
c o n s o l e . l o g ( name1 , name2 , name3 ) ;

Example: Using Object:

const obj = { a : 1 , b : 2 } ; / / O b j e c t ( D i c ti o n a r y )
const { a , b } = o b j ;
console . l o g ( a , b ) ;

JavaScript - 16 /
Web Technologies (9FC06) - UNIT
II

Res
t
In functions when we require to pass arguments but were
not sure how many we have to pass, the rest parameter
makes it easier.
In JavaScript Rest is an Operator used to
compress/condenses multiple elements into a single
element even when different numbers of parameters are
passed into the function.
f u n c ti o n f u n c ti o n _ n a m e ( . . . a r g u m e n t s ) {
Syntax:
statements;
}

Note: There must be only one r e s t parameter i n J ava S c r i p t

f unc ti o n s .

JavaScript - 17 /
Web Technologies (9FC06) - UNIT
II

Res
t
Example:
f u n c ti o n p r i n t e v e n ( . . . a r g s ) {
f o r ( l e t x of a r g s ) {
i f ( x% 2 = = 0 )
console . l o g ( x ) ;
}
}
printeven (1 ,2 ,3 ,4 , 5 ) ;

In the above code args is compressed with all the

inputs/elements that are passed.
The function printeven will print all the even elements
passed as arguments.

JavaScript - 18 /
Web Technologies (9FC06) - UNIT
II

Res
t
One More
Example:
f u n c ti o n a v e r a g e ( . . . a r g s ) {
console . l o g ( a r g s ) ;
v a r avg =
a r g s . r e d u c e ( f u n c ti o n ( a , b ) {
return a + b;
} , 0) / a r g s . length ;
return avg;
}
c o n s o l e . l o g ( " a v e r a g e o f numbers i s : " + a v e r a g e ( 1 , 2 ,
3 , 4 , 5 ) ) ; / / a v e r a g e o f numbers i s : 3
c o n s o l e . l o g ( " a v e r a g e o f numbers i s : " + a v e r a g e ( 1 , 2 , 3 )
) ; / / a v e r a g e o f numbers i s : 2

JavaScript - 19 /
Web Technologies (9FC06) - UNIT
II

Res
t

In the above code args is compressed with all the

inputs/elements that are passed.
reduce is function that takes two parameters, a callback
function and an initial value.
The callback function takes two parameters a and b. a is
the accumulator that stores the sum, and b is the current
element being processed.
return a + b;: The callback function adds the current
element b to the accumulator a.
0 is the initial value for the accumulator.

JavaScript - 20 /
Web Technologies (9FC06) - UNIT
II

Sprea
d In JavaScript The spread is an operator helps us expand an
iterable such as an array where multiple arguments are
needed.
It also helps to expand the object expressions.
Syntax:
v a r var_name = [ . . . i t e r a b l e ] ;
v a r var_name = [ . . . i t e r a b l e 1 , . . . iterable 2];

Note: There can be more than one spread operator i n

J a va S c r i p t f u n c ti o n s .
Example:
v a r a r r a y 1 = [ 1 0 , 20 , 30 , 40 , 5 0 ] ;
v a r a r r a y 2 = [ 6 0 , 70 , 80 , 90 , 1 0 0 ] ;
var array3 = [ . . . array1 , . . . array2 ] ;
console . l o g ( array3 ) ;

Output: [ 1 0 , 20, 30, 40, 50, 60, 70, 80, 90, 100]
JavaScript - 21 /
Web Technologies (9FC06) - UNIT
II

Sprea
dWe cana l s o add elements while expanding an Array
Example:
v a r a r r a y 1 = [ 1 0 , 20 , 30 , 40 , 50];
var array2 = [ . . . array1 , 60];
console . l o g ( array2 ) ;

Output: [ 1 0 , 20, 30, 40, 50, 60]

We can copy o b j e c t s using the spread operator
Example:
const obj = {
fi r s t n a m e : " V i j a y " ,
lastname : " Kumar",
};
const obj2 = { . . . obj } ;
console . l o g ( obj2 ) ;

Output: fi rstname: ’ V i j a y ’, lastname: ’Kumar’

JavaScript - 22 /
Web Technologies (9FC06) - UNIT
II

Closure
Closures in JavaScript are functions that retain access to
variables from their containing scope even after the
parent function has finished executing.
A closure is the combination of a function bundled together
(enclosed) with references to its surrounding state (the
lexical environment).
When you create a closure, you gain access to an outer
function’s scope from an inner function.
Example:
f u n c ti o n o u t e r ( o u t e r _ a r g ) {
f u n c ti o n i n n e r ( i n n e r _ a r g )
{ return outer_arg +
inner_arg ;
}
return inner;
}
l e t newfunc = o u t e r ( 5 ) ;
c o n s o l e . l o g ( newfunc ( 4 ) ) ; / /
9 JavaScript - 23 /
Web Technologies (9FC06) - UNIT
II

Closure
Here newfunc i s a functi o n returned by outer functi o n also
preserves outer arg value as 5 .
One More Example:
/ / O u te r f u n c ti o n
f u n c ti o n o u t e r ( ) {
f u n c ti o n c r e a t e _ C l o s u r e ( v a l ) {
r e t u r n f u n c ti o n ( ) {
return v a l ;
}
}
let arr = [ ] ; let
i;
for ( i = 0; i < 4; i + + )
{ arr[ i ] =
create_Closure ( i ) ;
}
return a r r ;
}
l e t g e ta r r = outer ( ) ;
c o n s o l e . l o g ( g e t a r r [ 0 ] ( ) ) ; JavaScript
//0 - 24 /
Web Technologies (9FC06) - UNIT
II

Closure

console . l o g ( getarr [ 1 ] ( ) ) ; / / 1
console . l o g ( getarr [ 2 ] ( ) ) ; / / 2
console . l o g ( getarr [ 3 ] ( ) ) ; / / 3

I n the above Example g eta r r i s an Array o f functi ons

returned by o u t e r ( ) f u n c ti o n , I n which an array i s
generated by appending a functi o n f o r each i t e r a ti o n .

JavaScript - 25 /
Web Technologies (9FC06) - UNIT
II

Call Back

What are Callbacks?

A callback is a function passed as an argument to another
function, which gets invoked after the main function
completes its execution.
Callbacks enable you to handle the outcomes of
asynchronous operations in a non-blocking way. This
means your program can keep running while the operation
is ongoing.
Why use Callbacks?
Callbacks are essential for managing the outcomes of
asynchronous tasks without blocking the program’s
execution.
With callbacks, We can keep the program running while
these tasks happen in the background.
JavaScript - 26 /
Web Technologies (9FC06) - UNIT
II

Call Back
Key Concepts:
Asynchronous
programming Higher-
order functions.
Anonymous
functions(Arrow
Functions)
Closure
f u n c ti o n A c t u a l F u n c ti o n ( c a l l b a c k )
{ co nso le . l o g ( " Performing
o p e r a ti o n . . . " ) ;
/ / Use s e t T i m e o u t t o s i m u l a t e an a s y n c h r o n o u s o p e r a ti o n
s e t T i m e o u t ( f u n c ti o n ( ) {
c a l l b a c k ( " O p e r a ti o n c o m p l e t e " ) ;
} , 1000);
}
/ / D e fi n e t h e c a l l b a c k f u n c ti o n
f u n c ti o n c a l l b a c k F u n c ti o n ( r e s u l t ) {
JavaScript - 27 /
Web Technologies (9FC06) - UNIT
II

Call Back
Explanation: I n the above example a c t u a l i s invoked by the
u s e r, i n which setti meout i s invoked , which i nt e r n invokes
callbac kFuncti o n with the ti meout 1000 milliseconds
One more Example:
v a r numbers = [ 1 , 2 , 3 ] ;
f u n c ti o n main F u n c ti o n ( c a l l b a c k )
{ co nso le . l o g ( " Performing
o p e r a ti o n . . . " ) ; n u m b e r s . f o r E a c h ( c a l l b a c k
);
}
f u n c ti o n c a l l b a c k F u n c ti o n ( number) {
co n s o l e . l o g ( " R e s u l t : " + number);
}
main F u n c ti o n ( c a l l b a c k F u n c ti o n ) ;
Output:
Result: 1
Result: 2
Result: 3
JavaScript - 28 /
Web Technologies (9FC06) - UNIT
II

Promis
e
JavaScript Promises are used to simplify managing
multiple asynchronous operations, preventing callback hell
and unmanageable code.
They represent future values, associating handlers with
eventual resolve or reject.
Syntax:
l e t p r o m i s e = new P r o m i s e ( f u n c ti o n ( r e s o l v e , reject){
/ / do s o m e t h i n g
});

Parameters
The promise constructor takes only one argument which is
a callback function.

JavaScript - 29 /
Web Technologies (9FC06) - UNIT
II

Promis
e
The callback function takes two arguments, resolve and
reject.
Perform operations inside the callback function and if
everything went well then call resolve.
If desired operations do not go well then call reject.
Note: Here re so lve and r e j e c t are the naming given by the
u s e r, t hat can be anything l i k e success and f a i l u r e e t c . ,
Example:
l e t p r o m i s e = new P r o m i s e ( f u n c ti o n ( r e s o l v e , r e j e c t ) {
c o n s t name1 = " V i j a y " ;
c o n s t name2 = " V i j a y " ;
i f ( name1 === name2 ) {
resolve ( ) ;
} else
{ reject
();
}
});
JavaScript - 30 /
Web Technologies (9FC06) - UNIT
II

Promis
e
Example Continued...
promise .
t h e n ( f u n c ti o n ( ) {
c o n s o l e . l o g ( " S u c c e s s , You a r e a R a m e s h " ) ;
}).
c a t c h ( f u n c ti o n ( ) {
c o n s o l e . l o g ( " Some e r r o r h a s o c c u r r e d " ) ;
});

Promise then() Method: Promise method i s invoked when a

promise i s e i t h e r re so lve or r e j e c t .
Parameters: It takes two functions as parameters
The first function is executed if the promise is resolve and
a result is received.
The second function is executed if the promise is reject and
an error is received. (It is optional and there is a better way
to handle error using .catch() method
JavaScript - 31 /
Web Technologies (9FC06) - UNIT
II

Async and Await

Async and Await in JavaScript are very important

to handle asynchronous operations.
Async functions implicitly return promises.
Lets take an example to understand:
f u n c ti o n f e t c h D ata ( ) {
r e t u r n new P r o m i s e ( ( r e s o l v e , r e j e c t ) =>
{ s e t T i m e o u t ( ( ) => {
r e s o l v e ( " D ata r e c e i v e d " ) ;
} , 2000);
});
}

JavaScript - 32 /
Web Technologies (9FC06) - UNIT
II

Async and Await

Example Continued...:
a s y n c f u n c ti o n g e t D a t a ( ) {
co nso l e . l o g ( " Fe t c h i n g data . . . " ) ;
c o n st r e s u l t = awa i t f e t c h Data ( ) ;
c o n s o l e . l o g ( r e s u l t ) ; / / " D ata
received "
}
getData ( ) ;
Explanation:
A Promise object is created and it gets resolved
after 2000 milliseconds.
getData() function is written using the async
function.
The await keyword waits for the promise to be complete
(resolve or reject).
JavaScript - 33 /
Web Technologies (9FC06) - UNIT
II

Questionnaire

Short Answer
Questions
1 What are the three ways to declare variables in JavaScript,

and how do they differ?

2 What is an arrow function in JavaScript and how does it

differ from a regular function?

3 What is prototypal inheritance in JavaScript?

4 What is destructuring in JavaScript and provide an

5 example? What is the rest parameter in JavaScript

and how is it used?

JavaScript - 34 /
Web Technologies (9FC06) - UNIT
II

Long Answer Questions

1 Describe the rest parameter syntax in JavaScript. How

does it differ from the arguments object? Provide

examples of how to use the rest parameter in functions.
2 What is the spread operator in JavaScript? Provide

examples of how it can be used with arrays and objects.

Explain how the spread operator can be useful in various
3 scenarios.

Define what a closure is in JavaScript and explain its

4 typical use cases. Provide an example to illustrate how
closures work.
What is a callback function in JavaScript? Explain how
5 callbacks can be used to handle asynchronous operations.
Provide an example with asynchronous code.
Explain how async and await work in JavaScript. Compare
their use with traditional Promise handling. Provide an
example that demonstrates fetching data using async and35 /
JavaScript -
Web Technologies (9FC06) - UNIT
II

Thank you

JavaScript - 36 /