Web development basics (Part-4)
Download as PPT, PDF•0 likes•81 views
The document provides a comprehensive tutorial on JavaScript concepts, including control structures like if-else and switch-case, various types of loops, the significance of 'this', and the usage of JavaScript functions. It delves into topics such as local storage, execution context, hoisting, variable scoping, closures, and common programming patterns in JavaScript. Additionally, it addresses interview questions and best practices related to JavaScript function management and variable handling.
Web development basics (Part-4)
- 1. 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
- 2. Conditionals • There are 2 major types of conditionals ⚬ if-else ⚬ switch-case • if-else ⚬ syntax: if(condition){ ⚬ someting ⚬ }else{ ⚬ someting else ⚬ }
- 3. • 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
- 4. 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:
- 5. Loops in JS • We will look into following major kind of loops in JS: ⚬ for ⚬ for-in ⚬ forEach ⚬ while ⚬ do-while
- 6. For loop
- 7. for-in
- 9. "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
- 10. 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:
- 11. 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
- 12. 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>
- 13. local storage vs session storage vs cookies All 3 are nothing but mechanisms to sto store information as per requirement
- 14. • 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()
- 15. • SessionStorage functions are ⚬ sessionStorage.setItem("key", "value"); ⚬ sessionStorage.getItem("key"); ⚬ sessionStorage.removeItem("key"); ⚬ sessionStorage.clear();
- 16. 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
- 17. ￭ 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
- 18. 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
- 20. 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
- 21. • 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
- 22. • 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
- 23. How functions work in JS
- 24. • 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
- 25. 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
- 26. lexical-scope
- 27. var - let - const and Temporal Deadzone
- 28. 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.
- 29. • 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
- 30. 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
- 32. • 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
- 33. 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
- 34. 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
- 35. Parameters are received by called function & argument are the values which are passed to function
- 36. First class functions are the functions that is actually taking the function as parameter and it can also return a function too
- 37. 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 :
- 40. FAMOUS INTERVIEW QUESTION ON CLOSURE Basic introduction to setTimeout
- 41. 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....
- 42. Expected solution But output is wrong