JavaScript/C3/Closure-in-JS/English
Title of the script:Closure
Author: Jayesh Katta Ramalingaiah
Domain Reviewer:
Novice Reviewer:
Keywords: JavaScript, HTML, document, closure, function
|
|
Slide: Title | Hello and Welcome to the spoken tutorial on “Closure 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 |
|
Slide: Closure | A closure is a function having access to the parent scope, even after the parent function has closed. |
Only Narration | Let us take an example and understand this 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
|
Under Practice-JS folder, open the file named index.html
|
[Editor] Type:
<html lang="en"> <head> <title>Closure</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 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:
function outer(x) { return function inner(y) { return x + y; }; }
const innerReturnedValue = outerReturnedValue(5);
|
In the main.js file, update the code as shown. |
[Editor] Highlight:
const count = 1; |
Here, I’m declaring a variable count and assigned it the value 1 which I’ll be using later. |
[Editor] Highlight:
return function inner(y) { return x + y; }; } |
Here, I have declared a function outer which takes a variable x as a parameter.
|
[Editor] Highlight:
return x + y; }; |
The returned function is named as inner.
|
[Editor] Highlight:
|
Here, I try to execute the outer function by passing 4 to it.
|
[Editor] Highlight:
|
Here, I execute the outer returned function stored in outerReturnedValue variable.
|
Only Narration | The question here is what is the value of x?
|
[Editor] Highlight:
|
Here, I’m logging outerReturnedValue to check if we have access to it.
|
[Editor] Highlight:
|
Here , I’m logging innerReturnedValue to check what is being returned. |
[Editor] Highlight:
|
Finally, add the count with the innerReturnedValue and store it in a sum variable. |
[Editor] Highlight:
|
And here we are logging sum. |
Press: Ctrl + S | Save the file. |
Switch to Browser | Switch back to the browser.
Observe the output. |
[Browser] [Console Tab]:
Highlight:
|
Unfortunately, if you expand the right arrowhead symbol in Firefox, you cannot see the closure.
|
[Display Picture]
|
I have taken this screenshot from Chrome browser, where you can see the highlighted text.
|
[Browser] [Console Tab]:
|
So, here as we have access to x and y, the returned value is 9. |
[Browser] [Console Tab]:
Highlight:
|
So finally, adding the count variable, the sum is 10. |
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. |