JavaScript/C4/Arrow-function-in-JS/English
Title of the script: Arrow Functions
Author: Jayesh Katta Ramalingaiah
Domain Reviewer: Ankita Maske
Novice Reviewer: Praveeen S.
Keywords: JavaScript, HTML, this, Arrow, function
|
|
Slide: Title | Hello and welcome to the spoken tutorial on “Arrow Function 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: Arrow Function |
|
Only Narration | Now, let us take an example and understand this better. |
Show VS editor | Open Visual Studio Code editor |
[Editor] 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.
|
[Editor] Type:
<html lang="en"> <head> <title>Arrow Functions</title> </head> <body> <script src="main.js"></script> </body> </html> |
In the index.html file, replace the code as shown.
|
Press: Ctrl + S
|
Save the file and start the Live server. |
[Firefox] Press Ctrl + Shift + I
|
In the web browser, open the Browser developer tools panel and go to the console tab. |
Switch to Editor | Switch back to the editor. |
[Editor] Type:
this.speed = 0; var self = this; var stop = setInterval(function () { self.speed++; console.log(self.speed); }, 300);
clearInterval(stop); }, 5000); } var d1 = new Display(); |
In the main.js file, replace the code as shown. |
[Editor] Highlight:
|
Here, I’m making a function call with new binding. |
[Editor] Highlight:
this.speed = 0; var self = this; var stop = setInterval(function () { self.speed++; console.log(self.speed); }, 300);
clearInterval(stop); }, 5000); } |
Here, I’m declaring a display function,
|
[Editor] Highlight:
|
In the functional scope, I have declared speed property and assigned it to 0. |
[Editor] Highlight:
|
Here, I’m creating a variable self and assigning ‘this’ context to it.
|
[Editor] Highlight:
self.speed++; console.log(self.speed); }, 300); |
In JS we have an inbuilt method setInterval and it accepts two parameters.
|
[Editor] Highlight:
self.speed++; console.log(self.speed); } |
This is a callback function or you can even call it as an anonymous function.
|
[Editor] Highlight:
|
Here, I’m increasing the value of speed, which is declared in the display function.
|
[Editor] Highlight:
|
In the console, I will log the value of speed. |
[Editor] Highlight:
|
Here, I have kept 300 milliseconds as the time interval.
|
[Editor] Highlight:
clearInterval(stop); }, 5000); |
In JS, setTimeout is also an inbuilt function.
|
[Editor] Highlight:
|
Let’s go inside the callback function.
|
[Editor] Highlight:
|
5000 milliseconds is equivalent to 5 seconds.
|
Only Narration | Now , let’s see the output.
|
Press: Ctrl + S
Switch to Browser |
Save the file and switch to the browser. |
[Browser] [Console Tab]:
Highlight:
2 3 4 . . . . . . . . . . . . . 16 |
Observe here, we can see numbers from 1 to 16.
|
Only Narration | So far, we just learnt about setInterval, setTimeout and clearInterval
|
Switch to Editor | Switch back to the editor. |
[Editor] Type:
this.speed = 0; var stop = setInterval(() => { this.speed++; console.log(this.speed); }, 300); setTimeout(() => clearInterval(stop), 5000); }
|
In the main.js file, replace the code as shown. |
[Editor] Highlight:
|
Here, I do a similar function call like done in the previous example. |
[Editor] Highlight:
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.
|
[Editor] Highlight:
this.speed++; console.log(this.speed); } |
Here, the callback function is an arrow function.
|
[Editor] Highlight:
|
So, I’m able to access this.speed using the this keyword itself.
|
[Editor] Highlight:
|
In the console, I will log the value of speed. |
[Editor] Highlight:
|
Here, notice setTimeout.
|
Only Narration | Now, let's see the output.
|
Press: Ctrl + S
Switch to Browser |
Save the file and switch back to the browser. |
[Browser] [Console Tab]:
Highlight:
2 3 4 . . . . . . . 16 |
We get the same output here with the use of the arrow function.
|
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 signing off. Thank you for joining |