Web development basics (Part-4)

Tutorial-5
• if-else and switch case
• Loops - for , for-in, while, do while
• this in JS
• difference between JS this and other
langugage this
• consoles-log,error-warning
• local storage and session storage
• execution context
• Hoisting
• functions in JS
• How functions work in JS
• Scope chain & lexical scoping
• let vs const vs var
• block scope
• first class function
• closure
• settimeout with closure
• setimeInterval
• Interview Questions

Conditionals
• There are 2 major types of conditionals
⚬ if-else
⚬ switch-case
• if-else
⚬ syntax: if(condition){
⚬ someting
⚬ }else{
⚬ someting else
⚬ }

• if-else can be looped also
⚬ if-else-if
• else should always be with an if already
• ternary operator can be used for shorthand
notation:
• ternary operator is ?:
• else if can also be associated as one big
combination w.r.t. production developemn
• it's not good habbit to loop ternary operator -
coz it then compromise code readability

Swith-case
• its a single condition satisfactory conditional which helps in
satisfying any particular condition out of all
• if-else can be an alternate of switch-case but not vise-versa
• syntax:

Loops in JS
• We will look into following major kind of loops
in JS:
⚬ for
⚬ for-in
⚬ forEach
⚬ while
⚬ do-while

"this" in JavaScript
• this is more over like reference thing. Reference means -
reference to whatever data member i.e. either function or
variable in that scope
• We'll look following scenarios:
⚬ this inside object
⚬ this inside function
⚬ this inside function in presence of 'use strict' (use of call())
⚬ this inside of a function's function
⚬ this inside a function constructor
⚬ this inside a class constructor

web console
• It is the part of browser that helps the developer to interact
there website or web-app considering domains like network
requests, javascript, security errors, warnings, CSS etc.
console object
• It is majorly for printing any result in console environment of browser by usage of
some of following of its functions:

use strict
• Defines that JavaScript code should be executed
in "strict mode".
• With strict mode, you can not, for example, use
undeclared variables.
• All modern browsers support "use strict" except
Internet Explorer 9

alert (), prompt(), confirm()
• syntax:
⚬ alert("Hello! I am an alert box!!");
• syntax:
⚬ prompt("Please enter your name", "Harry Potter");
• synatx:
⚬ confirm("Press a button!");
• code:
⚬ <script>
⚬ const fn = window.prompt("message")
⚬ fn()
⚬ </script>

local storage vs session storage vs cookies
All 3 are nothing but mechanisms to sto store information as per requirement

• Now days only session storage & local storage are
used its bit rare and ONLY if needed then only
cookies are used on production development
• Fundtions used for
⚬ localstorage are:
￭ localStorage.setItem("lastname", "Smith")
￭ localStorage.getItem("lastname")
￭ localStorage.removeItem("key")
￭ localStorage.clear()

• SessionStorage functions are
⚬ sessionStorage.setItem("key", "value");
⚬ sessionStorage.getItem("key");
⚬ sessionStorage.removeItem("key");
⚬ sessionStorage.clear();

Execution Context
• Everything in JS executes inside execution
context
• it has two major parts
⚬ Memory component or variable
environment
￭ it hold the variables and there values
in the form of key and values
⚬ Code component or thread of execution

￭ it is where actually your code gets executed
• Hence,
⚬ NOTE:
￭ JavaScript is synchronous single threaded
language
￭ meaning: every code line is executed line by
line i.e. in the form of 1 thread or LOC at a
time

functions in JS
• we have learn that JS is nothing but the brain part
of website hence when we give any instruction to
JS that instruction is in the form of functions
• majorly we have 2 ways to write a function:
⚬ traditional way of writing a function i.e. ES-5
way to write a function using "function"
keyword
⚬ arrow function which came up in ES-6

Hoisting in JS
meaning in English
• It says raise or haul up or jack up, hence in JS when
hoisting comes into picture it also do the same thing via
compiler

• Where interpreter if it executes a LOC and if we are
trying to use a function even befor we have used
then interpreter searches for that function in outer
scope & when it finds it up, then it hoist or jack or
hook up that function exisiting in outer scope
• Here we will see in code the hoisting behaviour
for variables , ES-5 functions & arrow functions

• Hoisting in javascript is considered with
declaration not with with initialization
⚬ which leads to different behavior of hoisting
of hoisting by using let or const and var
⚬ please checkout :
￭ https://blog.bitsrc.io/hoisting-in-modern-
javascript-let-const-and-var-
b290405adfda

• Lets consider following code and match with our previous
Execution context diagram lets see how actually EC and CALL
STACK play there role in here
out-put

scope & scope -chain & lexical scope
• Scope- It is the are to which your declared
variable has access to or upto that scope you
can actually achieve that variable's value
• Scope chain- When we have more then one
lexical scopes assiciated to each other it leads to
form a scope chain
• Lexical scope - It is entire scope of itself + scope
of its lexical parent

var - let - const and Temporal Deadzone

Interview question : Can let and const be hoisted
Answer: Not really because of Temporal Deadzone
• What is temporal deadzone or TDZ
⚬ Ans: the term to describe the state where variables
are un-reachable. They are in scope, but they aren't
declared.
• Where can we see TDZ
⚬ The let and const variables exist in the TDZ from the
start of their enclosing scope until they are declared.

• Refference Error:
⚬ When interpreter is not able to find required data
member due to absenece of it or if it is present in TDZ
⚬ Still upper part of that LOC will be executed
• Syntax Error:
⚬ When we disobey the syntax guidelines of JS
⚬ It'll stop execution of entire program at once
• Type Error:
⚬ When we disobey the "type" related guidelines of JS
￭ e.g. reassigning a "const" variable
• const a = 10;
• a = 20

Block & Shadowing
• When we have to write a multiple LOC in
different lines then we make use of {} which is
termed as a block
• NOTE:
⚬ var is always global scoped
⚬ let and const are always block scoped

• Third snippet is significantly showing
"SHADOWING", where outer scoped variable value
is completely shadowed by inner one
• Shadowing is only leageal when shadowing and
shadowed variable has same type else it is called
as "Illegal shadowing"
• Possible shadowing scenarios are
⚬ var can be shadowed by any (var, let or const)
⚬ const and let cannot be shadowed by var

First class functions
• Before diving into the first class functions lets look into
followings :
⚬ What is function statement
⚬ What is function expression
⚬ What is the difference between function statement &
function expression
⚬ What is anonymous function
⚬ What is named expression
⚬ Difference between arguments & parameters
⚬ Now - What is first class function or first class citizens in JS

Function statement Function expression
Anonymous function
• You can see error in line 10 because
anonymous functions are only allowed to be
used when they are needed to be passed
Named expression

Parameters are received by called function &
argument are the values which are passed to
function

First class functions are the functions that is
actually taking the function as parameter and it
can also return a function too

Closures
• Closure in javascript is the power of a function when
accompanied with its lexical scope
• https://developer.mozilla.org/en-
US/docs/Web/JavaScript/Closures
• Some usecases of closures are :

FAMOUS INTERVIEW QUESTION ON CLOSURE
Basic introduction to setTimeout

Problem statement:
print 1 t0 5 after every 1-5 seconds i.e. 1 in 1 sec
and 2 in 2 sec and 3 in 3rd sec....

Expected solution
But output is wrong

Web development basics (Part-4)

Recommended

More Related Content

What's hot (20)

Similar to Web development basics (Part-4) (20)

Recently uploaded (20)

Web development basics (Part-4)