Difference between revisions of "JavaScript/C3/Variable-Keywords-and-Hoisting-in-JS/English"
(Created page with "Title of the script: Variable Keywords and Hoisting Author: Jayesh Katta Ramalingaiah Domain Reviewer: Novice Reviewer: Keywords: JavaScript, HTML, hoisting, var, let...") |
Nancyvarkey (Talk | contribs) |
||
Line 24: | Line 24: | ||
Learning Objectives | Learning Objectives | ||
|| In this tutorial, we will learn about: | || In this tutorial, we will learn about: | ||
− | |||
− | |||
* '''Variable Keywords ''' | * '''Variable Keywords ''' | ||
* '''Scopes''' and | * '''Scopes''' and | ||
* '''Hoisting''' | * '''Hoisting''' | ||
− | |||
− | |||
|- | |- | ||
|| Slide: System Specifications | || Slide: System Specifications | ||
|| This tutorial is recorded using: | || This tutorial is recorded using: | ||
− | |||
− | |||
* '''Ubuntu Linux''' OS version 18.04 | * '''Ubuntu Linux''' OS version 18.04 | ||
* '''Visual Studio Code''' version 1.51.0 ('''code editor''') | * '''Visual Studio Code''' version 1.51.0 ('''code editor''') | ||
Line 46: | Line 40: | ||
|| Slide : Pre-requisites | || Slide : Pre-requisites | ||
|| To practice this tutorial, | || To practice this tutorial, | ||
− | |||
− | |||
* You should be familiar with writing and executing''' JS''' files'''.''' | * You should be familiar with writing and executing''' JS''' files'''.''' | ||
* If not, please go through the prerequisite tutorials on this website. | * If not, please go through the prerequisite tutorials on this website. | ||
− | |||
− | |||
|- | |- | ||
Line 57: | Line 47: | ||
|| | || | ||
* The files used in this tutorial are available in the''' Code files''' link on this tutorial page. | * The files used in this tutorial are available in the''' Code files''' link on this tutorial page. | ||
− | * Pls download and extract the | + | * Pls download and extract the files. |
* Make a copy and then use them for practising. | * Make a copy and then use them for practising. | ||
− | |||
− | |||
|- | |- | ||
|| Only Narration | || Only Narration | ||
|| | || | ||
− | * So, far we have learnt about '''keyword var '''and used it to declare variables. | + | * So, far we have learnt about '''keyword var '''and used it to '''declare variables'''. |
− | * Now, we will learn 2 more '''keywords '''to | + | * Now, we will learn 2 more '''keywords '''to '''declare variables '''and the advantages of using them. |
− | + | ||
− | + | ||
|- | |- | ||
Line 74: | Line 60: | ||
|| | || | ||
* '''let keyword''' is used for smaller '''scopes''' technically called '''block scope''' | * '''let keyword''' is used for smaller '''scopes''' technically called '''block scope''' | ||
− | * '''const keyword '''is used for | + | * '''const keyword '''is used for '''declaring constants''' like '''Pi value''' |
(whose value would not change elsewhere in the program) | (whose value would not change elsewhere in the program) | ||
Line 83: | Line 69: | ||
* The '''scope '''of '''var keyword''' is '''functional scope''', that means, | * The '''scope '''of '''var keyword''' is '''functional scope''', that means, | ||
* The '''variable declared''' inside a '''function '''using '''var''', cannot be accessed outside the '''function'''. | * The '''variable declared''' inside a '''function '''using '''var''', cannot be accessed outside the '''function'''. | ||
− | |||
− | |||
|- | |- | ||
Line 93: | Line 77: | ||
** '''const''' | ** '''const''' | ||
* They both have '''block scope''' | * They both have '''block scope''' | ||
− | |||
− | |||
|- | |- | ||
Line 101: | Line 83: | ||
* A '''variable declared''' with '''let '''or '''const''' inside a '''loop''', '''if/else condition''' or '''switch case''' | * A '''variable declared''' with '''let '''or '''const''' inside a '''loop''', '''if/else condition''' or '''switch case''' | ||
* Cannot be accessed outside the '''block scope'''. | * Cannot be accessed outside the '''block scope'''. | ||
− | |||
− | |||
|- | |- | ||
Line 114: | Line 94: | ||
|- | |- | ||
|| <nowiki>[Editor] </nowiki> | || <nowiki>[Editor] </nowiki> | ||
− | |||
Welcome Page -> Open Folder -> '''Practice-JS''' | Welcome Page -> Open Folder -> '''Practice-JS''' | ||
|| In the '''editor, '''browse and open the folder “'''Practice-JS''' ”. | || In the '''editor, '''browse and open the folder “'''Practice-JS''' ”. | ||
− | |||
− | |||
− | |||
|- | |- | ||
|| <nowiki>[Editor] </nowiki>Click on | || <nowiki>[Editor] </nowiki>Click on | ||
− | |||
'''Explorer '''pane -> '''Practice-JS''' -> '''index.html''' | '''Explorer '''pane -> '''Practice-JS''' -> '''index.html''' | ||
Line 258: | Line 233: | ||
− | Anything you write between, | + | Anything you write between braces, technically, is a '''block.''' |
− | Here, I have | + | Here, I have '''declared variable b '''using '''let keyword.''' |
− | To verify this, I’m using a '''log statement''' to display the text value | + | To verify this, I’m using a '''log statement''' to display the text value - '''‘Inside block’.''' |
|- | |- | ||
Line 291: | Line 266: | ||
'''Inside Function: 10''' | '''Inside Function: 10''' | ||
− | || As expected, when I make a '''function call '''the value 10 gets '''logged'''. | + | || As expected, when I make a '''function call, '''the value 10 gets '''logged'''. |
|- | |- | ||
Line 304: | Line 279: | ||
It displays 30, because of the '''log statement''' written inside the '''block'''. | It displays 30, because of the '''log statement''' written inside the '''block'''. | ||
− | |||
− | |||
− | |||
|- | |- | ||
Line 318: | Line 290: | ||
− | The console displays, '''Uncaught ReferenceError: a is not defined''' | + | The '''console''' displays, '''Uncaught ReferenceError: a is not defined''' |
Line 361: | Line 333: | ||
− | Hence the '''keyword let '''has '''block | + | Hence the '''keyword let '''has '''block scope'''. |
|- | |- | ||
Line 453: | Line 425: | ||
}; | }; | ||
− | || Here, I have declared a '''variable '''with the name '''student.''' | + | || Here, I have '''declared''' a '''variable '''with the name '''student.''' |
Line 459: | Line 431: | ||
− | The '''object '''contains a '''property name '''with the value '''jayesh.''' | + | The '''object '''contains a '''property name''' with the value '''jayesh.''' |
|- | |- | ||
Line 472: | Line 444: | ||
console.log(student); | console.log(student); | ||
− | || To verify what happens, I’m logging the ‘'''student’ variable'''. | + | || To verify what happens, I’m '''logging''' the ‘'''student’ variable'''. |
|- | |- | ||
Line 489: | Line 461: | ||
'''Object { name: "Praveen" }''' | '''Object { name: "Praveen" }''' | ||
− | || Notice here, we have the value of '''name | + | || Notice here, we have the value of '''name property '''changed from '''jayesh '''to '''praveen'''. |
|- | |- | ||
|| Only Narration | || Only Narration | ||
− | || By this we conclude that for '''non-primitive data types | + | || By this we conclude that for '''non-primitive data types const '''acts differently. |
Line 510: | Line 482: | ||
* '''Variables '''which are '''declared''' outside the '''function '''or a '''block ''' | * '''Variables '''which are '''declared''' outside the '''function '''or a '''block ''' | ||
* are available inside the '''function '''or a '''block'''. | * are available inside the '''function '''or a '''block'''. | ||
− | |||
− | |||
|- | |- | ||
Line 696: | Line 666: | ||
|| Slide''': '''Summary''' ''' | || Slide''': '''Summary''' ''' | ||
|| In this tutorial, we have learnt: | || In this tutorial, we have learnt: | ||
− | |||
− | |||
* '''Variable Keywords''' | * '''Variable Keywords''' | ||
* '''Scopes '''and | * '''Scopes '''and | ||
− | * '''Hoisting''' | + | * '''Hoisting''' in '''JS''' |
− | + | ||
− | + | ||
|- | |- | ||
Line 710: | Line 676: | ||
* Open the file '''assignment.js''' | * Open the file '''assignment.js''' | ||
* Clear the existing code | * Clear the existing code | ||
− | * | + | * '''Log''' the value '''x''' in '''console''' first before '''declaring x''' value |
− | * Declare a '''variable x''' using '''const below '''the '''log statement''' | + | * '''Declare''' a '''variable x''' using '''const below '''the '''log statement''' |
− | * Open the file '''MyPage.html '''in a '''web | + | * Open the file '''MyPage.html '''in a '''web browser'''. |
* Observe the output in the '''browser’s console''' | * Observe the output in the '''browser’s console''' | ||
* An '''error '''is observed | * An '''error '''is observed | ||
* Reason: Recall that the '''variables declared''' with '''const '''will not be '''hoisted''' | * Reason: Recall that the '''variables declared''' with '''const '''will not be '''hoisted''' | ||
− | |||
− | |||
|- | |- | ||
Line 724: | Line 688: | ||
* The video at the following link summarises the Spoken Tutorial project. | * The video at the following link summarises the Spoken Tutorial project. | ||
* Please download and watch it | * Please download and watch it | ||
− | |||
− | |||
|- | |- | ||
Line 732: | Line 694: | ||
* We conduct workshops using spoken tutorials and give certificates. | * We conduct workshops using spoken tutorials and give certificates. | ||
* For more details, please write to us. | * For more details, please write to us. | ||
− | |||
− | |||
|- | |- |
Revision as of 15:04, 19 January 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 | Now, 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.142857; |
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.142857. |
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. |