View source for JavaScript/C3/Variable-Keywords-and-Hoisting-in-JS/English

Title of the script: Variable Keywords and Hoisting

Author: Jayesh Katta Ramalingaiah

Domain Reviewer: 

Novice Reviewer: 

Keywords: JavaScript, HTML, hoisting, var, let



{| border = “1”
|| <center>'''Visual Cue'''</center>
|| <center>'''Narration'''</center>

|-
|| 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:


* '''Variable Keywords '''
* '''Scopes''' and
* '''Hoisting'''



|-
|| Slide: System Specifications
|| This tutorial is recorded using:


* '''Ubuntu Linux''' OS version 18.04
* '''Visual Studio Code''' version 1.51.0 ('''code editor''')
* '''Firefox''' web browser

However you may use any other '''browser''' of your choice.

|-
|| Slide : Pre-requisites
|| To practice this tutorial,


* You should be familiar with writing and executing''' JS''' files'''.'''
* If not, please go through the prerequisite tutorials on this website.



|-
|| Slide: Code files
|| 
* The files used in this tutorial are available in the''' Code files''' link on this tutorial page.
* Pls download and extract the file.
* Make a copy and then use them for practising.



|-
|| Only Narration
|| 
* So, far we have learnt about '''keyword var '''and used it to declare variables.
* Now, we will learn 2 more '''keywords '''to declare '''variables '''and the advantages of using them.



|-
|| Slide: Variable Keywords
|| 
* '''let keyword''' is used for smaller '''scopes''' technically called '''block scope'''
* '''const keyword '''is used for declaring '''constants''' like '''Pi value'''

(whose value would not change elsewhere in the program)

|-
|| Slide: Scope
|| 
* The '''scope '''of '''var keyword''' is '''functional scope''', that means,
* The '''variable declared''' inside a '''function '''using '''var''', cannot be accessed outside the '''function'''.



|-
|| Slide: Scope
|| 
* To '''declare variables, ES6 '''has introduced two new '''keywords''':
** '''let''' and
** '''const''' 
* They both have '''block scope'''



|-
|| Slide: Scope
|| 
* A '''variable declared''' with '''let '''or '''const''' inside a '''loop''', '''if/else condition''' or '''switch case'''
* Cannot be accessed outside the '''block scope'''.



|-
|| Only Narration
|| Now, let us take an example and understand these better.

|-
|| Show VS editor
|| Open '''Visual Studio Code editor'''

|-
|| <nowiki>[Editor] </nowiki>


Welcome Page -> Open Folder -> '''Practice-JS'''
|| In the '''editor, '''browse and open the folder “'''Practice-JS''' ”.




|-
|| <nowiki>[Editor] </nowiki>Click on 


'''Explorer '''pane -> '''Practice-JS''' -> '''index.html'''
|| Under '''Practice-JS''' folder, open the file named '''index.html'''


The same is available in the '''Code files''' link for practice.

|-
|| <nowiki>[Editor] </nowiki>Type: 


<nowiki><!DOCTYPE html></nowiki>

<nowiki><html lang="en"></nowiki>

<nowiki><head></nowiki>

<nowiki><title> Variable Keywords and Hoisting </title></nowiki>

<nowiki></head></nowiki>

<nowiki><body></nowiki>

<nowiki><script src = "main.js" > </script></nowiki>

<nowiki></body></nowiki>

<nowiki></html></nowiki>
|| In the '''index.html '''file, update the '''code''' as shown.


In this code we have written a small '''HTML''' code and linked the''' JS file'''.

|-
|| 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.

|-
|| <nowiki>[Firefox] Press</nowiki>''' Ctrl + Shift + I'''


Point to the browser '''developer tools'''


Click on the '''Console''' tab
|| Now open the '''Browser developer tools''' panel and go to the '''console tab''' 

|-
|| Switch to Editor
|| Switch back to the '''editor.'''

|-
|| <nowiki>[Editor] </nowiki>Click on 


'''Explorer '''pane -> '''Practice-JS''' -> '''main.js'''
|| Under '''Practice-JS''' folder, open the file named '''main.js'''

|-
|| <nowiki>[Editor] </nowiki>Type: 


function display() {

var a = 10;

console.log("Inside Function: ", a);

}


display();

{

let b = 30;

console.log("Inside block: ", b);

}


console.log("Outside Function: ", a);
|| In the '''main.js '''file, update the '''code''' as shown.

|-
|| <nowiki>[Editor] Highlight:</nowiki>


function display() {

var a = 10;

console.log("Inside Function: ", a);

}
|| Here, I have '''declared''' a '''function '''named '''display.'''


Inside the '''function''', I have '''declared''' a '''variable '''using '''var keyword''' and assigned 10 as a value to it.


To verify this, I’m using a '''log statement''' to display the text value - ‘'''Inside Function’.'''

|-
|| <nowiki>[Editor] Highlight:</nowiki>


display();
|| Here, I’m making a '''function call '''to '''execute '''the '''declared function.'''

|-
|| <nowiki>[Editor] Highlight:</nowiki>


{

let b = 30;

console.log("Inside block: ", b);

}
|| Here, I have created a '''block.'''


Anything you write between,''' {}''' technically is a '''block.'''


Here, I have declared '''variable b '''using '''let keyword.'''


To verify this, I’m using a '''log statement''' to display the text value''' '''- '''‘Inside block’.'''

|-
|| <nowiki>[Editor] Highlight:</nowiki>


console.log("Outside Function: ", a);
|| Here, I’m using a '''log statement''' to display the value '''‘a’''' outside the '''function'''.


This is to verify whether we can access the value outside the '''function '''or not.

|-
|| Press: Ctrl + S
|| Save the file.

|-
|| Switch to '''Browser'''
|| Switch back to the '''browser.'''

|-
|| <nowiki>[Browser] [Console Tab]:</nowiki>

Highlight:


'''Inside Function: 10'''
|| As expected, when I make a '''function call '''the value 10 gets '''logged'''.

|-
|| <nowiki>[Browser] [Console Tab]:</nowiki>

Highlight:


'''Inside block: 30'''
|| Similarly the '''block '''also gets '''executed''' after the''' function call.'''


It displays 30, because of the '''log statement''' written inside the '''block'''.




|-
|| <nowiki>[Browser] [Console Tab]:</nowiki>

Highlight:


'''Uncaught ReferenceError: a is not defined'''
|| Now, as we are trying to display the value of ‘'''a’''' outside the '''function, '''we got an '''error'''.


The console displays, '''Uncaught ReferenceError: a is not defined'''


By this we conclude that the '''variable '''which is '''declared''' using '''var '''has a '''functional scope.'''

|-
|| Switch to Editor
|| Switch back to the '''editor.'''

|-
|| <nowiki>[Editor] </nowiki>Type: 


console.log("Outside block: ", b);
|| In the '''main.js '''file, replace the last '''console log statement''' with the '''code''' as shown.


Here, we’ll test whether the '''variable declared''' inside the '''block '''is available outside or not.

|-
|| Press: Ctrl + S
|| Save the file.

|-
|| Switch to '''Browser'''
|| Switch back to the '''browser.'''

|-
|| <nowiki>[Browser] [Console Tab]:</nowiki>

Highlight:


'''Uncaught ReferenceError: b is not defined'''
|| Now, we get an '''error '''for the '''outside block log statement'''.


'''Uncaught ReferenceError: b is not defined'''


By this we conclude that the '''variable declared''' inside the '''block '''is not accessible outside.


Hence the '''keyword let '''has '''block''' '''scope'''.

|-
|| Only Narration
|| Now lets learn about the '''const keyword'''.

|-
|| Switch to Editor
|| Switch back to the '''editor.'''

|-
|| <nowiki>[Editor] </nowiki>Type: 


const pi = 3.14;

pi = 3.142857;
|| In the '''main.js '''file, replace the '''code''' as shown.

|-
|| <nowiki>[Editor] Highlight:</nowiki>


const pi = 3.14;
|| Here, I have '''declared''' a '''variable pi '''and assigned '''3.14''' to it.


Note that the '''data type''' here is '''primitive '''('''number''').

|-
|| <nowiki>[Editor] Highlight:</nowiki>


pi = 3.142857;
|| 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.'''

|-
|| <nowiki>[Browser] [Console Tab]:</nowiki>

Highlight:


'''Uncaught TypeError: invalid assignment to const 'pi''''
|| Notice we get an error- '''“Uncaught TypeError: invalid assignment to const 'pi' “.'''


Hence, we conclude that the value for a '''const variable''' cannot be changed.

|-
|| Only Narration
|| Note again, we have tested only for '''primitive data type.'''


Now, let's check for '''non-primitive data types.'''

|-
|| Switch to Editor
|| Switch back to the '''editor.'''

|-
|| <nowiki>[Editor] </nowiki>Type: 


const student = {

name: "Jayesh",

};

student.name = "Praveen";


console.log(student);
|| In the '''main.js '''file, replace the '''code''' as shown.

|-
|| <nowiki>[Editor] Highlight:</nowiki>


const student = {

name: "Jayesh",

};
|| Here, I have declared a '''variable '''with the name '''student.'''


Then I have assigned an '''object '''('''non -primitive data type''') to it.


The '''object '''contains a '''property name '''with the value '''jayesh.'''

|-
|| <nowiki>[Editor] Highlight:</nowiki>


student.name = "Praveen";
|| Now here, I try to change the '''property '''value from '''jayesh '''to '''praveen'''.

|-
|| <nowiki>[Editor] Highlight:</nowiki>

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.'''

|-
|| <nowiki>[Browser] [Console Tab]:</nowiki>

Highlight:


'''Object { name: "Praveen" }'''
|| 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.


It does not modify the '''object data type. '''


We can add '''properties '''and change the '''property '''values.


Similarly for '''arrays''', we can add and remove values in an '''array'''.

|-
|| Slide: Lexical Scope
|| In '''JavaScript''', 

* '''Variables '''which are '''declared''' outside the '''function '''or a '''block '''
* are available inside the '''function '''or a '''block'''.



|-
|| Only Narration
|| Now, let us take an example and understand this better.

|-
|| Switch to Editor
|| Switch back to the '''editor.'''

|-
|| <nowiki>[Editor] </nowiki>Type: 


let a = 10;


function display() {

console.log("Value of a is ", a);

}


display();
|| In the '''main.js '''file, replace the '''code''' as shown.

|-
|| <nowiki>[Editor] Highlight: let a = 10;</nowiki>
|| Here, I have '''declared''' a '''variable ‘a’''' with '''let keyword''' and assigned 10 to it.

|-
|| <nowiki>[Editor] Highlight:</nowiki>


function display() {

console.log("Value of a is ", a);

}
|| Then, I have created a '''function '''display and I’m trying to '''log''' the value of '''a.'''

|-
|| <nowiki>[Editor] Highlight:</nowiki>


display();
|| Here, I make a '''function call '''to '''execute''' the '''function'''.

|-
|| Press: Ctrl + S
|| Save the file.

|-
|| Switch to '''Browser'''
|| Switch back to the '''browser.'''

|-
|| <nowiki>[Browser] [Console Tab]:</nowiki>

Highlight:


'''Value of a is 10'''
|| The value '''a''' which is declared outside the '''function '''is available inside the '''function '''too. 


That's the reason '''10''' is displayed.


This mechanism is called the '''lexical scope '''in''' JS.'''

|-
|| 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.'''

|-
|| <nowiki>[Editor] </nowiki>Type: 


console.log("The value of a is ", a);

console.log("The value of b is ", b);


var a = 10;

let b = 20;
|| In the '''main.js '''file, replace the '''code''' as shown.

|-
|| <nowiki>[Editor] Highlight:</nowiki>


console.log("The value of a is ", a);

console.log("The value of b is ", b);
|| Here, I’m trying to '''log '''the '''a''' and''' b''' values which are not '''declared''' yet.

|-
|| <nowiki>[Editor] Highlight:</nowiki>


var a = 10;
|| Below the '''log statements''', I have declared a '''variable''' ‘'''a’ '''using the '''var keyword''' and assigned '''10''' to it.

|-
|| <nowiki>[Editor] Highlight:</nowiki>

let b = 20;
|| Here, I have '''declared''' a '''variable ‘b’''' using the '''let keyword '''and assigned '''20''' to it.


Now, let’s see what happens.

|-
|| Press: Ctrl + S
|| Save the file.

|-
|| Switch to '''Browser'''
|| Switch back to the '''browser.'''

|-
|| <nowiki>[Browser] [Console Tab]: Highlight:</nowiki>


'''The value of a is undefined'''
|| Notice here, we got the value of '''a''' as '''undefined'''.


This is because '''variables declared''' using '''var keyword''' are '''hoisted'''.


The '''declarations''' will be pushed to the top of the '''scope'''.


And, the value is '''undefined '''because it’s a default value.

|-
|| <nowiki>[Browser] [Console Tab]:</nowiki>

Highlight:


'''Uncaught ReferenceError: can't access lexical declaration 'b' before initialization'''
|| '''Uncaught ReferenceError: can't access lexical declaration 'b' before initialization'''


This happens for '''b '''because '''hoisting '''does not happen for '''let '''and '''const.'''


Only after '''declaration''', the values can be used. 

|-
|| Only Narration
|| So we conclude that '''hoisting''' happens for '''variables declared''' with '''var''', and not for''' let''' and''' const.'''


Even '''functions '''can be '''hoisted'''.

That is the reason we can '''execute''' a '''function '''before '''declaration'''.

|-
|| Only Narration
|| With this we have come to the end of this tutorial. 


Let’s summarize.

|-
|| Slide''': '''Summary''' '''
|| In this tutorial, we have learnt:


* '''Variable Keywords'''
* '''Scopes '''and
* '''Hoisting'''



|-
|| Slide: Assignment
|| As an assignment,

* Open the file '''assignment.js'''
* 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'''
* Open the file '''MyPage.html '''in a '''web''' '''browser'''.
* Observe the output in the '''browser’s console'''
* An '''error '''is observed
* Reason: Recall that the '''variables declared''' with '''const '''will not be '''hoisted'''



|-
|| '''Slide: '''About Spoken Tutorial Project
|| 
* The video at the following link summarises the Spoken Tutorial project.
* Please download and watch it



|-
|| '''Slide:''' Spoken tutorial workshops
|| 
* We conduct workshops using spoken tutorials and give certificates.
* For more details, please write to us.



|-
|| 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.

|}