JavaScript/C4/Arrow-function-in-JS/English - Revision history

Nancyvarkey at 05:36, 21 June 2021

2021-06-21T05:36:06Z

Nancyvarkey at 05:33, 21 June 2021

2021-06-21T05:33:46Z

Pravin1389 at 14:29, 8 June 2021

2021-06-08T14:29:44Z

Nancyvarkey at 03:37, 28 May 2021

2021-05-28T03:37:37Z

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

2021-05-22T18:21:22Z

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

New page

Title of the script: Arrow Functions

Author: Jayesh Katta Ramalingaiah

Domain Reviewer:

Novice Reviewer:

Keywords: JavaScript, HTML, this, Arrow, function

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

|-
|| Slide: Title
|| Hello and welcome to the spoken tutorial on “'''Arrow Function in JS'''”.

|-
|| Slide:

Learning Objectives
|| In this tutorial, we will learn about:

* '''setInterval'''
* '''clearInterval'''
* '''setTimeout '''and
* '''Arrow Functions '''in''' JS'''

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

* '''Ubuntu Linux''' OS version 18.04
* '''Visual Studio Code''' version 1.45.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 files.
* Make a copy and then use them for practising.

|-
|| Slide: Arrow Function
||
* '''Arrow Functions '''are introduced in '''ES6'''
* This is also called as '''Fat Arrow Function '''because we use a '''fat arrow '''as '''syntax'''
* Doesn’t have '''‘this’ context '''- Does not have it’s own '''binding '''
* whereas the normal '''function '''has '''‘this’ context'''.
* The best part of '''arrow functions''' is, it avoids confusion of ‘'''this’ context '''in '''callbacks'''.

|-
|| Only Narration
|| Now, 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 '''->''' index.html & main.js'''

|| Then open the files '''index.html''' and '''main.js''' as explained in the earlier tutorials.

For this demonstration, I have already opened the same.

These files are 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>Arrow Functions</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, replace the '''code''' as shown.

|-
|| Press: Ctrl + S

Press: Alt + L and Alt + O
|| Save the file and Start the '''Live server'''.

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

Point to the browser '''Console''' tab
|| In the web browser, open the '''Browser developer tools''' panel and go to the '''console tab'''.

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

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

function Display() {

this.speed = 0;

var self = this;

var stop = setInterval(function () {

self.speed++;

console.log(self.speed);

}, 300);

setTimeout(function () {

clearInterval(stop);

}, 5000);

}

var d1 = new Display();
|| In the '''main.js '''file, replace the '''code''' as shown.

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

var d1 = new Display();
|| Here, I’m making a '''function call''' with '''new binding.'''

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

function Display() {

this.speed = 0;

var self = this;

var stop = setInterval(function () {

self.speed++;

console.log(self.speed);

}, 300);

setTimeout(function () {

clearInterval(stop);

}, 5000);

}
|| Here, I’m '''declaring''' a '''display function''',

You are already aware that the normal '''function '''has its own '''scope'''.

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

this.speed = 0;
|| In the '''functional scope, '''I have '''declared speed property '''and assigned it to''' 0'''.

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

var self = this;
|| Here, I’m creating a '''variable self''' and assigning ‘'''this’ context '''to it.

Here, ‘'''this’ '''refers to the '''scope '''of the '''display function''' which can be used when necessary.

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

setInterval(function () {

self.speed++;

console.log(self.speed);

}, 300);
|| In '''JS '''we have an '''inbuilt method setInterval '''and it accepts two '''parameters.'''

One a '''callback function '''and the other is the '''time interval''' in '''milliseconds'''.

After the specified '''time interval''', the '''callback function '''gets '''executed'''.

Until we '''clear '''the '''interval''', the '''execution''' of '''setInterval '''won’t stop.

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

function () {

self.speed++;

console.log(self.speed);

}
|| This is a '''callback function '''or you can even call it as an '''anonymous function.'''

You are already aware that '''function''' has its own '''scope''' and the new '''scope''' starts here.

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

self.speed++;
|| Here, I’m increasing the value of '''speed''', which is '''declared''' in the '''display function. '''

So as to access '''display function scope''', I’m using the '''self keyword'''.

By now, you should have understood the reason.

That is why I have '''declared '''the '''variable self '''and assigned the '''context'''.

If I use '''this.speed''', I will have access to the '''scope''' of the '''callback function''', which is not needed.

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

console.log(self.speed);
|| In the '''console''', I will '''log''' the value of '''speed.'''

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

300
|| Here, I have kept '''300 milliseconds '''as the time '''interval.'''

So, the '''function''' executes after '''300 milliseconds'''.

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

setTimeout(function () {

clearInterval(stop);

}, 5000);
|| In '''JS''', '''setTimeout '''is also an '''inbuilt function.'''

It takes a '''callback function''' and time in '''milliseconds '''as '''parameters'''.

It is unlike the '''setInterval method.'''

'''setTimeout method '''will execute the '''callback function '''once after the specified time.

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

clearInterval(stop);
|| Let’s go inside the '''callback function'''.

I’m clearing the '''interval '''by '''passing''' the '''stop variable''', which was assigned to '''setInterval method'''.

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

5000
|| '''5000 milliseconds''' is equivalent to''' 5 seconds'''.

So, the '''setTimeout callback function '''will be executed after '''5 seconds. '''

|-
|| Only Narration
|| Now , let’s see the output.

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

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

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

Highlight:

'''1'''

'''2'''

'''3'''

'''4 . . . . . . . . . . . . . 16'''
|| Observe here, we can see numbers from 1 to 16.

The value of '''speed''' will not be incremented after that because the '''interval '''is cleared after 5 seconds.

It’s a simple math calculation: 5000/300 = 16 point something.

The next execution will happen at 5100 milliseconds.

This is because we cleared the '''interval''' at 5000 milliseconds.

We don’t see the next number printed in the '''console'''.

|-
|| Only Narration
|| So far, we just learnt about '''setInterval, setTimeout '''and '''clearInterval'''

Next let’s learn the '''display method '''using '''arrow function''' and understand the difference.

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

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

function Display() {

this.speed = 0;

var stop = setInterval(() => {

this.speed++;

console.log(this.speed);

}, 300);

setTimeout(() => clearInterval(stop), 5000);

}

var d1 = new Display();
|| In the '''main.js '''file, replace the '''code''' as shown.

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

var d1 = new Display();
|| Here, I do a similar '''function call''' like done in the previous example.

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

function Display() {

this.speed = 0;

var stop = setInterval(() => {

this.speed++;

console.log(this.speed);

}, 300);

setTimeout(() => clearInterval(stop), 5000);

}
|| In this '''function '''declaration, I have created a '''speed property '''in the '''display function context'''.

This is similar to the one shown in the previous example.

'''setInterval function '''has some minor changes, which I’ll be explaining to you.

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

() => {

this.speed++;

console.log(this.speed);

}
|| Here, the '''callback function '''is an '''arrow function'''.

Notice the '''fat arrow '''in the code as '''syntax '''for the '''arrow function.'''

The''' brackets''' are used for '''pass'''ing the''' parameters'''.

I told you in the beginning that for '''arrow functions''' we don't have a new '''scope.'''

The '''scope '''of the '''display function''' is the same as the '''scope '''of the '''arrow function.'''

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

this.speed++;
|| So, I’m able to access '''this.speed''' using the '''this keyword''' itself.

Unlike the previous example, I did not store the '''context '''in a '''variable '''to use it elsewhere.

Assigning a '''context '''to a '''variable '''and then using it, will create a lot of confusion in huge programs.

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

console.log(this.speed);
|| In the '''console''', I will '''log''' the value of '''speed'''.

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

setTimeout(() => clearInterval(stop), 5000);
|| Here, notice '''setTimeout.'''

I have used the '''arrow function''' for the '''callback function.'''

And I haven’t used open and close curly braces here.

If I have a single '''statement, '''I can directly write the instruction within brackets.

This is the advantage of the '''arrow function.'''

|-
|| Only Narration
|| Now, let's see the output.

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

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

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

Highlight:

'''1'''

'''2'''

'''3'''

'''4 . . . . . . . 16'''
|| We get the same output here with the use of the '''arrow function.'''

The advantage is that we removed unnecessary '''self-declarations''' of the '''variable '''for '''context.'''

Plus we avoided a lot of confusion and wrote a cleaner code.

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

Let’s summarize.

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

* '''setInterval'''
* '''clearInterval'''
* '''setTimeout '''and
* '''Arrow Function '''in''' JS'''

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

* Open the file '''assignment.js''' which you have created earlier.
* Clear the existing code.
* Display ‘'''Welcome to Spoken Tutorials'''’ message in the '''console '''after''' 5 seconds'''
* Use '''setTimeout '''and '''arrow function''' as '''callback function'''
* 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 signing off. Thank you for joining

|}

@@ Line 3: / Line 3: @@
 Author: Jayesh Katta Ramalingaiah
-Domain Reviewer: Vigneshwer Dhinakaran
+Domain Reviewer: Ankita Maske
 Novice Reviewer: Praveeen S.

@@ Line 327: / Line 327: @@
 || Only Narration
 || Now , let’s see the output.
 |-
 || Press: Ctrl + S
-|-
+Switch to '''Browser'''
-|| Switch to '''Browser'''
+|| Save the file and switch to the '''browser.'''
-|| Switch back to the '''browser.'''
 |-
@@ Line 433: / Line 432: @@
-'''setInterval function '''has some minor changes, which I’ll be explaining to you.
+'''setInterval function '''has some major changes, which I’ll be explaining to you.
 |-
@@ Line 502: / Line 501: @@
 || Only Narration
 || Now, let's see the output.
 |-
 || Press: Ctrl + S
-|-
+Switch to '''Browser'''
-|| Switch to '''Browser'''
+|| Save the file and switch back to the '''browser.'''
-|| Switch back to the '''browser.'''
 |-

@@ Line 24: / Line 24: @@
 Learning Objectives
 || In this tutorial, we will learn about:
 * '''setInterval'''
 * '''clearInterval'''
 * '''setTimeout '''and
 * '''Arrow Functions '''in''' JS'''
 |-
 || Slide: System Specifications
 || This tutorial is recorded using:
 * '''Ubuntu Linux''' OS version 18.04
 * '''Visual Studio Code''' version 1.45.0 ('''code editor''')
@@ Line 47: / Line 41: @@
 || 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 60: / Line 50: @@
 * Pls download and extract the files.
 * Make a copy and then use them for practising.
 |-
@@ Line 71: / Line 59: @@
 * whereas the normal '''function '''has '''‘this’ context'''.
 * The best part of '''arrow functions''' is, it avoids confusion of ‘'''this’ context '''in '''callbacks'''.
 |-
@@ Line 126: / Line 112: @@
 Press: Alt + L and Alt + O
-|| Save the file and Start the '''Live server'''.
+|| Save the file and start the '''Live server'''.
 |-
@@ Line 133: / Line 119: @@
 Point to the browser '''Console''' tab
-|| In the web browser, open the '''Browser developer tools''' panel and go to the '''console tab'''.
+|| In the '''web browser''', open the '''Browser developer tools''' panel and go to the '''console tab'''.
 |-
@@ Line 222: / Line 208: @@
-Here, ‘'''this’ '''refers to the '''scope '''of the '''display function''' which can be used when necessary.
+Here, ‘'''this’ '''refers to the '''scope '''of the '''display function''' which can be used whenever necessary.
 |-
@@ Line 556: / Line 542: @@
 || Slide''': '''Summary''' '''
 || In this tutorial, we have learnt:
 * '''setInterval'''
 * '''clearInterval'''
 * '''setTimeout '''and
 * '''Arrow Function '''in''' JS'''
 |-
 || Slide: Assignment
 || As an assignment:
 * Open the file '''assignment.js''' which you have created earlier.
 * Clear the existing code.
@@ Line 576: / Line 556: @@
 * Open the file '''MyPage.html''' in a web browser.
 * Observe the output in the browser’s '''console'''
 |-
@@ Line 584: / Line 562: @@
 * The video at the following link summarises the Spoken Tutorial project.
 * Please download and watch it
 |-
@@ Line 592: / Line 568: @@
 * We conduct workshops using spoken tutorials and give certificates.
 * For more details, please write to us.
 |-