Difference between revisions of "JavaScript/C3/Closure-in-JS/English"

From Script | Spoken-Tutorial
Jump to: navigation, search
 
(One intermediate revision by one other user not shown)
Line 3: Line 3:
 
Author: Jayesh Katta Ramalingaiah
 
Author: Jayesh Katta Ramalingaiah
  
−
Domain Reviewer:  
+
Domain Reviewer: Ankita Maske
  
−
Novice Reviewer:  
+
Novice Reviewer: Praveeen S.
  
 
Keywords: JavaScript, HTML, document, closure, function
 
Keywords: JavaScript, HTML, document, closure, function
Line 121: Line 121:
  
 
Click on the '''Console''' tab
 
Click on the '''Console''' tab
−
|| Now open the '''Browser developer tools''' panel and go to the '''console tab'''  
+
|| Now open the '''developer tools''' panel and go to the '''console tab'''  
  
 
|-
 
|-
Line 290: Line 290:
  
  
−
This is because the '''Closure '''node is hidden in '''Firefox dev tools'''.
+
This is because the '''Closure '''node is hidden in '''Firefox developer tools'''.
  
 
|-
 
|-

Latest revision as of 11:09, 21 June 2021

Title of the script:Closure

Author: Jayesh Katta Ramalingaiah

Domain Reviewer: Ankita Maske

Novice Reviewer: Praveeen S.

Keywords: JavaScript, HTML, document, closure, function


Visual Cue
Narration
Slide: Title Hello and Welcome to the spoken tutorial on “Closure in JS”.
Slide:

Learning Objectives

In this tutorial, we will learn about:
  • Closures in JS
  • And, their scope in function
Slide: System Specifications This tutorial is recorded using:
  • Ubuntu Linux OS version 18.04
  • Visual Studio Code version 1.51.1 (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 files.
  • Make a copy and then use them for practising.
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


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.

[Editor] Type:


<!DOCTYPE html>

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


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.
[Firefox] Press Ctrl + Shift + I


Point to the browser developer tools


Click on the Console tab

Now open the developer tools panel and go to the console tab
Switch to Editor Switch back to the editor.
[Editor] Click on


Explorer pane -> Practice-JS -> main.js

Under Practice-JS folder, open the file named main.js
[Editor] Type:


const count = 1;

function outer(x) {

return function inner(y) {

return x + y;

};

}


const outerReturnedValue = outer(4);

const innerReturnedValue = outerReturnedValue(5);


console.dir(outerReturnedValue);


console.log(innerReturnedValue);


const sum = count + innerReturnedValue;


console.log("Sum is ", sum);

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:


function outer(x) {

return function inner(y) {

return x + y;

};

}

Here, I have declared a function outer which takes a variable x as a parameter.


It returns a function on its execution.

[Editor] Highlight:


function inner(y) {

return x + y;

};

The returned function is named as inner.


It accepts y as parameter and returns, the value x + y

[Editor] Highlight:


const outerReturnedValue = outer(4);

Here, I try to execute the outer function by passing 4 to it.


And, catch the returned function inner in outerReturnedValue variable.

[Editor] Highlight:


const innerReturnedValue = outerReturnedValue(5);

Here, I execute the outer returned function stored in outerReturnedValue variable.


I pass 5 as a parameter to the outerReturnedValue.


On executing outerReturnedValue, technically the inner function will be executed.


This function returns a sum of x + y.

Only Narration The question here is what is the value of x?


As I’m passing only ‘y’ here.

[Editor] Highlight:


console.dir(outerReturnedValue);

Here, I’m logging outerReturnedValue to check if we have access to it.


console.dir is very similar to console.log, but gives extra information.

[Editor] Highlight:


console.log(innerReturnedValue);

Here , I’m logging innerReturnedValue to check what is being returned.
[Editor] Highlight:


const sum = count + innerReturnedValue;

Finally, add the count with the innerReturnedValue and store it in a sum variable.
[Editor] Highlight:


console.log("Sum is ", sum);

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:


▶ function inner(y)

Unfortunately, if you expand the right arrowhead symbol in Firefox, you cannot see the closure.


This is because the Closure node is hidden in Firefox developer tools.

[Display Picture]


https://drive.google.com/file/d/1P8i4CUYAjnDQw-nKhgTa60HERoBmUylm/view?usp=sharing


I have taken this screenshot from Chrome browser, where you can see the highlighted text.


We still have access to the outer function.


A closure is a function having access to the parent scope, even after the parent function has closed.


We still have access to the outer function, even though its execution was completed.


This is called closure scope.

[Browser] [Console Tab]:


9

So, here as we have access to x and y, the returned value is 9.
[Browser] [Console Tab]:

Highlight:


Sum is 10

So finally, adding the count variable, the sum is 10.
Only Narration With this we have come to the end of this tutorial.


Let’s summarize.

Slide: Summary In this tutorial, we have learnt:
  • Closures in JS
  • And, their scope in function
Slide: Assignment As an assignment,
  • Open the file assignment.js
  • Clear the existing code
  • Create a function getData
  • Declare a variable data using let keyword
  • Return a display function accepting a variable as parameter
  • Return the sum of data and variable
  • Log the value in the console
  • Open the file MyPage.html in a web browser.
  • Observe the output in the browser’s console
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.

Contributors and Content Editors

Kr.jayesh, Nancyvarkey, Pravin1389

Retrieved from "https://script.spoken-tutorial.org/index.php?title=JavaScript/C3/Closure-in-JS/English&oldid=55273"