Difference between revisions of "JavaScript/C3/Variable-Keywords-and-Hoisting-in-JS/English"
Nancyvarkey (Talk | contribs) |
Pravin1389 (Talk | contribs) |
||
Line 86: | Line 86: | ||
|- | |- | ||
|| Only Narration | || Only Narration | ||
− | || | + | || Let us take an example and understand these better. |
|- | |- | ||
Line 349: | Line 349: | ||
const pi = 3.14; | const pi = 3.14; | ||
− | pi = 3. | + | pi = 3.141592; |
|| In the '''main.js '''file, replace the '''code''' as shown. | || In the '''main.js '''file, replace the '''code''' as shown. | ||
Line 366: | Line 366: | ||
− | pi = 3. | + | pi = 3.141592; |
− | || Here, I’m trying to reassign the '''variable pi''' to '''3. | + | || Here, I’m trying to reassign the '''variable pi''' to '''3.141592.''' |
|- | |- | ||
Line 624: | Line 624: | ||
− | This is because '''variables declared''' using '''var keyword''' | + | This is because '''variables declared''' using '''var keyword''' is '''hoisted'''. |
Revision as of 19:09, 3 February 2021
Title of the script: Variable Keywords and Hoisting
Author: Jayesh Katta Ramalingaiah
Domain Reviewer:
Novice Reviewer:
Keywords: JavaScript, HTML, hoisting, var, let
|
|
Slide: Title | Hello and Welcome to the spoken tutorial on “Variable Keywords, Scopes and Hoisting in JS”. |
Slide:
Learning Objectives |
In this tutorial, we will learn about:
|
Slide: System Specifications | This tutorial is recorded using:
However you may use any other browser of your choice. |
Slide : Pre-requisites | To practice this tutorial,
|
Slide: Code files |
|
Only Narration |
|
Slide: Variable Keywords |
(whose value would not change elsewhere in the program) |
Slide: Scope |
|
Slide: Scope |
|
Slide: Scope |
|
Only Narration | Let us take an example and understand these better. |
Show VS editor | Open Visual Studio Code editor |
[Editor]
Welcome Page -> Open Folder -> Practice-JS |
In the editor, browse and open the folder “Practice-JS ”. |
[Editor] Click on
Explorer pane -> Practice-JS -> index.html |
Under Practice-JS folder, open the file named index.html
|
[Editor] Type:
<html lang="en"> <head> <title> Variable Keywords and Hoisting </title> </head> <body> <script src = "main.js" > </script> </body> </html> |
In the index.html file, update the code as shown.
|
Press: Ctrl + S | Save the file. |
Press: Alt + L and Alt + O | Start the Live server. |
Show firefox | The default browser will open automatically and a new tab opens. |
[Firefox] Press Ctrl + Shift + I
|
Now open the Browser developer tools panel and go to the console tab |
Switch to Editor | Switch back to the editor. |
[Editor] Click on
|
Under Practice-JS folder, open the file named main.js |
[Editor] Type:
var a = 10; console.log("Inside Function: ", a); }
{ let b = 30; console.log("Inside block: ", b); }
|
In the main.js file, update the code as shown. |
[Editor] Highlight:
var a = 10; console.log("Inside Function: ", a); } |
Here, I have declared a function named display.
|
[Editor] Highlight:
|
Here, I’m making a function call to execute the declared function. |
[Editor] Highlight:
let b = 30; console.log("Inside block: ", b); } |
Here, I have created a block.
|
[Editor] Highlight:
|
Here, I’m using a log statement to display the value ‘a’ outside the function.
|
Press: Ctrl + S | Save the file. |
Switch to Browser | Switch back to the browser. |
[Browser] [Console Tab]:
Highlight:
|
As expected, when I make a function call, the value 10 gets logged. |
[Browser] [Console Tab]:
Highlight:
|
Similarly the block also gets executed after the function call.
|
[Browser] [Console Tab]:
Highlight:
|
Now, as we are trying to display the value of ‘a’ outside the function, we got an error.
|
Switch to Editor | Switch back to the editor. |
[Editor] Type:
|
In the main.js file, replace the last console log statement with the code as shown.
|
Press: Ctrl + S | Save the file. |
Switch to Browser | Switch back to the browser. |
[Browser] [Console Tab]:
Highlight:
|
Now, we get an error for the outside block log statement.
|
Only Narration | Now lets learn about the const keyword. |
Switch to Editor | Switch back to the editor. |
[Editor] Type:
pi = 3.141592; |
In the main.js file, replace the code as shown. |
[Editor] Highlight:
|
Here, I have declared a variable pi and assigned 3.14 to it.
|
[Editor] Highlight:
|
Here, I’m trying to reassign the variable pi to 3.141592. |
Press: Ctrl + S | Save the file. |
Switch to Browser | Switch back to the browser. |
[Browser] [Console Tab]:
Highlight:
|
Notice we get an error- “Uncaught TypeError: invalid assignment to const 'pi' “.
|
Only Narration | Note again, we have tested only for primitive data type.
|
Switch to Editor | Switch back to the editor. |
[Editor] Type:
name: "Jayesh", }; student.name = "Praveen";
|
In the main.js file, replace the code as shown. |
[Editor] Highlight:
name: "Jayesh", }; |
Here, I have declared a variable with the name student.
|
[Editor] Highlight:
|
Now here, I try to change the property value from jayesh to praveen. |
[Editor] Highlight:
console.log(student); |
To verify what happens, I’m logging the ‘student’ variable. |
Press: Ctrl + S | Save the file. |
Switch to Browser | Switch back to the browser. |
[Browser] [Console Tab]:
Highlight:
|
Notice here, we have the value of name property changed from jayesh to praveen. |
Only Narration | By this we conclude that for non-primitive data types const acts differently.
|
Slide: Lexical Scope | In JavaScript,
|
Only Narration | Now, let us take an example and understand this better. |
Switch to Editor | Switch back to the editor. |
[Editor] Type:
console.log("Value of a is ", a); }
|
In the main.js file, replace the code as shown. |
[Editor] Highlight: let a = 10; | Here, I have declared a variable ‘a’ with let keyword and assigned 10 to it. |
[Editor] Highlight:
console.log("Value of a is ", a); } |
Then, I have created a function display and I’m trying to log the value of a. |
[Editor] Highlight:
|
Here, I make a function call to execute the function. |
Press: Ctrl + S | Save the file. |
Switch to Browser | Switch back to the browser. |
[Browser] [Console Tab]:
Highlight:
|
The value a which is declared outside the function is available inside the function too.
|
Only Narration | Now, let’s go to the next topic. |
Slide: Hoisting | Hoisting is JavaScript’s default behavior of moving declarations to the top of the Scope before execution. |
Only Narration | Now, let us take an example and understand this better. |
Switch to Editor | Switch back to the editor. |
[Editor] Type:
console.log("The value of b is ", b);
let b = 20; |
In the main.js file, replace the code as shown. |
[Editor] Highlight:
console.log("The value of b is ", b); |
Here, I’m trying to log the a and b values which are not declared yet. |
[Editor] Highlight:
|
Below the log statements, I have declared a variable ‘a’ using the var keyword and assigned 10 to it. |
[Editor] Highlight:
let b = 20; |
Here, I have declared a variable ‘b’ using the let keyword and assigned 20 to it.
|
Press: Ctrl + S | Save the file. |
Switch to Browser | Switch back to the browser. |
[Browser] [Console Tab]: Highlight:
|
Notice here, we got the value of a as undefined.
|
[Browser] [Console Tab]:
Highlight:
|
Uncaught ReferenceError: can't access lexical declaration 'b' before initialization
|
Only Narration | So we conclude that hoisting happens for variables declared with var, and not for let and const.
That is the reason we can execute a function before declaration. |
Only Narration | With this we have come to the end of this tutorial.
|
Slide: Summary | In this tutorial, we have learnt:
|
Slide: Assignment | As an assignment,
|
Slide: About Spoken Tutorial Project |
|
Slide: Spoken tutorial workshops |
|
Slide: Forum questions | Pls post your timed queries in this forum. |
Slide: Acknowledgement | Spoken Tutorial Project is funded by Ministry of Education (MoE), Government of India |
Slide: Thanks | The script for this tutorial is contributed by Jayesh.
And this is Praveen from IIT Bombay signing off. Thank you for joining. |