JavaScript/C3/Closure-in-JS/English - Revision history

Nancyvarkey at 05:39, 21 June 2021

2021-06-21T05:39:55Z

Pravin1389 at 13:59, 3 February 2021

2021-02-03T13:59:46Z

Nancyvarkey at 09:47, 19 January 2021

2021-01-19T09:47:01Z

Kr.jayesh: Created page with "Title of the script:Closure Author: Jayesh Katta Ramalingaiah Domain Reviewer: Novice Reviewer: Keywords: JavaScript, HTML, document, closure, function {| border =..."

2021-01-13T17:51:37Z

Created page with "Title of the script:Closure Author: Jayesh Katta Ramalingaiah Domain Reviewer: Novice Reviewer: Keywords: JavaScript, HTML, document, closure, function {| border =..."

New page

Title of the script:Closure

Author: Jayesh Katta Ramalingaiah

Domain Reviewer:

Novice Reviewer:

Keywords: JavaScript, HTML, document, closure, function

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

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

|-
|| <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] Type: </nowiki>

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

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

<nowiki><head></nowiki>

<nowiki><title>Closure</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] Type: </nowiki>

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.

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

const count = 1;
|| Here, I’m '''declaring''' a '''variable count '''and assigned it the value '''1''' which I’ll be using later.

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

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

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

function inner(y) {

return x + y;

};
|| The '''returned function '''is named as '''inner.'''

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

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

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

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

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.

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

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.

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

console.log(innerReturnedValue);
|| Here , I’m '''logging''' '''innerReturnedValue '''to check what is being '''returned'''.

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

const sum = count + innerReturnedValue;
|| Finally, add the '''count '''with the '''innerReturnedValue '''and store it in a '''sum variable'''.

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

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

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

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

|-
|| <nowiki>[Display Picture]</nowiki>

[https://drive.google.com/file/d/1P8i4CUYAjnDQw-nKhgTa60HERoBmUylm/view?usp=sharing 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'''.

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

9
|| So, here as we have access to '''x''' and '''y,''' the '''returned''' value is '''9'''.

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

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.

|}

@@ Line 121: / Line 121: @@
 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'''.
 |-

@@ Line 3: / Line 3: @@
 Author: Jayesh Katta Ramalingaiah
-Domain Reviewer:
+Domain Reviewer: Ankita Maske
-Novice Reviewer:
+Novice Reviewer: Praveeen S.
 Keywords: JavaScript, HTML, document, closure, function

@@ Line 24: / Line 24: @@
 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''')
@@ Line 45: / Line 39: @@
 || 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.
 |-
@@ Line 56: / Line 46: @@
 ||
 * The files used in this tutorial are available in the''' Code files''' link on this tutorial page.
-* Pls download and extract the file.
+* Pls download and extract the files.
 * Make a copy and then use them for practising.
 |-
@@ Line 76: / Line 64: @@
 || <nowiki>[Editor] </nowiki>Welcome Page -> Open Folder -> '''Practice-JS'''
 || In the '''editor, '''browse and open the folder “'''Practice-JS''' ”.
 |-
@@ Line 292: / Line 277: @@
 || Switch to '''Browser'''
 || Switch back to the '''browser.'''
 |-
@@ Line 304: / Line 291: @@
 This is because the '''Closure '''node is hidden in '''Firefox dev tools'''.
 |-
@@ Line 356: / Line 340: @@
 || Slide''': '''Summary''' '''
 || In this tutorial, we have learnt:
 * '''Closures '''in''' JS'''
 * And, their '''scope '''in''' function'''
 |-
@@ Line 372: / Line 352: @@
 * '''Declare''' a '''variable data '''using '''let keyword'''
 * '''Return''' a '''display function '''accepting a '''variable '''as '''parameter '''
-* Return the '''sum '''of '''data '''and '''variable'''
+* '''Return''' the '''sum '''of '''data '''and '''variable'''
 * '''Log''' the '''value '''in the '''console'''
-* Open the file '''MyPage.html '''in a '''web''' '''browser'''.
+* Open the file '''MyPage.html '''in a '''web browser'''.
 * Observe the output in the '''browser’s console'''
 |-
@@ Line 384: / Line 362: @@
 * The video at the following link summarises the Spoken Tutorial project.
 * Please download and watch it
 |-
@@ Line 392: / Line 368: @@
 * We conduct workshops using spoken tutorials and give certificates.
 * For more details, please write to us.
 |-