Difference between revisions of "JavaScript/C2/Functions-in-JS/English"

From Script | Spoken-Tutorial
Jump to: navigation, search
(Created page with "Title of the script:Functions Author: Jayesh Katta Ramalingaiah Domain Reviewer: Novice Reviewer: Keywords: JavaScript, HTML, Function, value, arguments, parameters {...")
 
 
(2 intermediate revisions by 2 users 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, Function, value, arguments, parameters
 
Keywords: JavaScript, HTML, Function, value, arguments, parameters
Line 24: Line 24:
 
Learning Objectives
 
Learning Objectives
 
|| In this tutorial, we will learn about:
 
|| In this tutorial, we will learn about:
−
 
−
 
 
* '''Functions'''
 
* '''Functions'''
 
* Different '''types''' of '''functions''' and  
 
* Different '''types''' of '''functions''' and  
 
* '''Function declarations''' in '''JS'''
 
* '''Function declarations''' in '''JS'''
−
 
−
 
  
 
|-
 
|-
 
|| Slide: System Specifications
 
|| Slide: System Specifications
 
|| This tutorial is recorded using:
 
|| This tutorial is recorded using:
−
 
−
 
 
* '''Ubuntu Linux''' OS version 18.04
 
* '''Ubuntu Linux''' OS version 18.04
 
* '''Visual Studio Code''' version 1.51.1 ('''code editor''')
 
* '''Visual Studio Code''' version 1.51.1 ('''code editor''')
Line 46: Line 40:
 
|| Slide : Pre-requisites
 
|| Slide : Pre-requisites
 
|| To practice this tutorial,
 
|| To practice this tutorial,
−
 
−
 
 
* You should be familiar with writing and executing''' JS''' files'''.'''
 
* You should be familiar with writing and executing''' JS''' files'''.'''
 
* If not, please go through the prerequisite tutorials on this website.
 
* If not, please go through the prerequisite tutorials on this website.
−
 
−
 
  
 
|-
 
|-
Line 57: Line 47:
 
||  
 
||  
 
* The files used in this tutorial are available in the''' Code files''' link on this tutorial page.
 
* 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.
 
* Make a copy and then use them for practising.
−
 
−
 
  
 
|-
 
|-
Line 67: Line 55:
 
* A '''function '''is a '''block''' of '''code''' which is defined once and can be called multiple times.
 
* A '''function '''is a '''block''' of '''code''' which is defined once and can be called multiple times.
 
* The main advantage of a '''function''' is reusability.
 
* The main advantage of a '''function''' is reusability.
−
 
−
 
  
 
|-
 
|-
 
|| Slide: Types of Functions
 
|| Slide: Types of Functions
 
|| The different types of '''functions '''are,
 
|| The different types of '''functions '''are,
−
 
−
 
 
* '''Basic Function'''
 
* '''Basic Function'''
 
* '''Parameterized Function'''
 
* '''Parameterized Function'''
 
* '''Function as a value'''
 
* '''Function as a value'''
−
* '''Function as a Argument/Parameter'''
+
* '''Function as an Argument/Parameter'''
 
* '''Function as Property'''
 
* '''Function as Property'''
 
* '''Function Arguments'''
 
* '''Function Arguments'''
Line 86: Line 70:
  
 
|-
 
|-
−
|| Switch to '''Browser'''
+
|| Switch to '''Visual Studio code editor'''
−
|| Switch to the '''browser.'''
+
|| Switch to the '''Visual Studio code editor.'''
  
 
|-
 
|-
Line 168: Line 152:
 
|| <nowiki>[Firefox] Click on the </nowiki>'''Console''' tab
 
|| <nowiki>[Firefox] Click on the </nowiki>'''Console''' tab
 
|| Now click on the '''console tab''' in the '''developer tools.'''
 
|| Now click on the '''console tab''' in the '''developer tools.'''
−
 
−
 
−
 
  
 
|-
 
|-
Line 232: Line 213:
  
  
−
If you don’t use '''return keyword''' to return''' '''any value, by default '''undefined '''will be returned.
+
If you don’t use '''return keyword''' to '''return''' any value, by default '''undefined '''will be '''returned'''.
  
  
Line 242: Line 223:
  
 
add();
 
add();
−
|| '''add()''' is a '''function''' '''call'''.
+
||Only when the '''function '''is '''called''', the '''function block ''' will get '''executed.'''
−
 
+
−
 
+
−
Only when the '''function '''is '''called''', will the '''function block '''get '''executed.'''
+
  
  
Line 258: Line 236:
  
  
−
So, whatever is being returned by the '''add() function''', will get '''logged'''.
+
So, whatever is being '''returned''' by the '''add() function''', will get '''logged'''.
  
 
|-
 
|-
Line 265: Line 243:
  
 
|-
 
|-
−
|| Switch to '''Browser'''
+
|| Switch to '''browser'''
 
|| Switch back to the '''browser.'''
 
|| Switch back to the '''browser.'''
  
Line 314: Line 292:
  
 
'''console.log('''add()''');'''
 
'''console.log('''add()''');'''
−
|| And '''true '''is printed because '''add()''' '''function’s return value''' is '''logged.'''
+
|| And '''true '''is printed because '''add() function’s return value''' is '''logged.'''
  
 
|-
 
|-
Line 343: Line 321:
  
  
−
The only difference is we are passing a '''parameter a'''.
+
The only difference is we are '''passing''' a '''parameter a'''.
  
  
Line 353: Line 331:
  
 
return a - 1;
 
return a - 1;
−
|| Here, we are subtracting the value and returning the subtracted value.
+
|| Here, we are subtracting the value and '''returning''' the subtracted value.
  
 
|-
 
|-
Line 360: Line 338:
  
 
var result <nowiki>= sub(6);</nowiki>
 
var result <nowiki>= sub(6);</nowiki>
−
|| In this line, the '''function call''' is made passing '''6''' as the '''parameter'''.
+
|| In this line, the '''function call''' is made '''passing 6''' as the '''parameter'''.
  
  
−
The returned value is stored in the '''result variable'''.
+
The '''returned''' value is stored in the '''result variable'''.
  
 
|-
 
|-
Line 386: Line 364:
  
 
'''5'''
 
'''5'''
−
|| The output is '''5 '''because we have passed the number '''6''' as the '''parameter'''.  
+
|| The output is '''5 '''because we have '''passed''' the number '''6''' as the '''parameter'''.  
  
  
−
That value is being subtracted by 1 and returned.
+
That value is being subtracted by 1 and '''returned'''.
  
  
−
After returning, we are catching the value in a '''variable''' and '''logging''' it.
+
After '''returning''', we are catching the value in a '''variable''' and '''logging''' it.
  
 
|-
 
|-
Line 441: Line 419:
  
  
−
If we wish to, we can even pass some '''parameters '''to this.
+
If we wish to, we can even '''pass''' some '''parameters '''to this.
  
 
|-
 
|-
Line 447: Line 425:
  
 
return true;
 
return true;
−
|| This '''function '''just returns '''true'''.
+
|| This '''function '''just '''returns true'''.
  
 
|-
 
|-
Line 454: Line 432:
  
 
var result = mul();
 
var result = mul();
−
|| The '''function call '''is similar to the basic''' '''and''' parameterized '''ones'''.'''
+
|| The '''function call '''is similar to the basic and''' parameterized '''ones.
  
  
−
The returned value would be caught by the '''result variable.'''
+
The '''returned''' value would be caught by the '''result variable.'''
  
 
|-
 
|-
Line 481: Line 459:
  
 
'''true'''
 
'''true'''
−
|| Here, as the '''function''' returns '''true, True '''is printed on the '''console'''.
+
|| Here, as the '''function returns true, "True" '''is printed on the '''console'''.
  
 
|-
 
|-
Line 549: Line 527:
  
 
}
 
}
−
|| Here, we have declared three '''functions '''with names''' d1, d2 and d3''' respectively.
+
|| Here, we have '''declared''' three '''functions '''with names''' d1, d2 and d3''' respectively.
  
 
|-
 
|-
Line 559: Line 537:
  
  
−
To this, we are passing 3 '''parameters '''named '''fn, fn1 '''and''' fn2.'''
+
To this, we are '''passing''' 3 '''parameters '''named '''fn, fn1 '''and''' fn2.'''
−
 
+
−
 
+
−
 
+
  
 
|-
 
|-
Line 573: Line 548:
  
 
fn2();
 
fn2();
−
|| Inside, the '''display function''',we’re making '''function''' '''calls''' for the '''parameters'''.  
+
|| Inside, the '''display function''',we’re making '''function calls''' for the '''parameters'''.  
  
  
Line 583: Line 558:
  
 
display(d1, d2, d3);
 
display(d1, d2, d3);
−
|| While making the '''display function call, '''we’re passing 3 '''functions d1, d2 '''and '''d3''' respectively.
+
|| While making the '''display function call, '''we’re '''passing''' 3 '''functions d1, d2 '''and '''d3''' respectively.
  
  
−
Here, as we’re passing '''d1,d2 '''and '''d3''', these '''functions''' would be called '''callback functions.'''
+
Here, as we’re '''passing d1,d2 '''and '''d3''', these '''functions''' would be called '''callback functions.'''
  
 
|-
 
|-
Line 600: Line 575:
  
  
−
On making the '''function call''' for '''fn,fn1''' and''' fn2, '''
+
On making the '''function call''' for '''fn, fn1''' and''' fn2, '''
  
  
−
'''d1,d2 '''and''' d3 functions '''will be executed.''' '''
+
'''d1, d2 '''and''' d3 functions '''will be executed.
  
 
|-
 
|-
Line 624: Line 599:
  
 
'''on JS'''
 
'''on JS'''
−
|| Here, if we see the output '''Spoken Tutorials on JS '''is being logged from the '''d1''', '''d2''' and '''d3''' '''functions'''.  
+
|| Here, if we see the output '''Spoken Tutorials on JS '''is being '''logged''' from the '''d1, d2''' and '''d3 functions'''.  
  
 
|-
 
|-
Line 668: Line 643:
  
 
},
 
},
−
|| Here, '''marks '''is a '''property''' in the '''student''' '''object''', which holds an '''anonymous function.'''
+
|| Here, '''marks '''is a '''property''' in the '''student object''', which holds an '''anonymous function.'''
  
 
|-
 
|-
Line 675: Line 650:
  
 
return 100;
 
return 100;
−
|| This '''function''' returns 100.
+
|| This '''function returns''' 100.
  
 
|-
 
|-
Line 682: Line 657:
  
 
var result = student.marks();
 
var result = student.marks();
−
|| To make a '''function call''', we need to call the '''property '''inside the '''student object'''.
+
|| To make a '''function call''', we need to '''call''' the '''property '''inside the '''student object'''.
  
  
Line 688: Line 663:
  
  
−
To make a '''function''' '''call''' we add '''brackets '''similar to a '''function''' as a''' value.'''
+
To make a '''function call''' we add '''brackets '''similar to a '''function''' as a value
  
  
Line 694: Line 669:
  
  
−
The returned value is stored in '''variable result. '''
+
The '''returned''' value is stored in '''variable result. '''
  
 
|-
 
|-
Line 715: Line 690:
  
 
'''100'''
 
'''100'''
−
|| Here, the output is 100 as the '''function returns''' 100
+
|| Here, the output is 100 as the '''function returns''' 100.
  
 
|-
 
|-
Line 747: Line 722:
  
 
marks(87, 78, 90, 81);
 
marks(87, 78, 90, 81);
−
|| So far, when we passed '''parameters '''to a '''function''', we declared a '''parameter variable '''while creating the '''function'''.
+
|| So far, when we '''passed parameters '''to a '''function''', we '''declared''' a '''parameter variable '''while creating the '''function'''.
  
  
Line 760: Line 735:
  
 
function marks() {}
 
function marks() {}
−
|| And, we have not '''declared''' any '''variables '''to '''catch''' the values '''passed''' in the '''marks function'''.
+
|| And we have not '''declared''' any '''variables '''to '''catch''' the values '''passed''' in the '''marks function'''.
  
 
|-
 
|-
Line 807: Line 782:
  
 
'''81'''
 
'''81'''
−
|| As we are '''passing''' '''87, 78, 90, 81''' as '''parameters, '''the output we get is '''87, 78, 90, 81.'''
+
|| As we are '''passing 87, 78, 90, 81''' as '''parameters, '''the output we get is '''87, 78, 90, 81.'''
  
 
|-
 
|-
Line 833: Line 808:
  
 
console.log(s2);
 
console.log(s2);
−
|| Next, let us understand the '''constructor''' '''function'''.
+
|| Next, let us understand the '''constructor function'''.
  
  
Line 921: Line 896:
 
|-
 
|-
 
|| Only narration
 
|| Only narration
−
|| Hence, we conclude that the '''constructor function''' returns an '''object.'''
+
|| Hence, we conclude that the '''constructor function returns''' an '''object.'''
  
  
Line 936: Line 911:
 
|| Slide''': '''Summary''' '''
 
|| Slide''': '''Summary''' '''
 
|| In this tutorial, we have learnt about:
 
|| In this tutorial, we have learnt about:
−
 
−
 
 
* '''Functions'''
 
* '''Functions'''
 
* Different types of '''functions''' and  
 
* Different types of '''functions''' and  
 
* '''Function declarations''' in '''JS'''
 
* '''Function declarations''' in '''JS'''
−
 
−
 
  
 
|-
 
|-
 
|| Slide: Assignment
 
|| Slide: Assignment
 
|| As an assignment:
 
|| As an assignment:
−
 
−
 
 
* Open the file '''assignment.js''' which you have created earlier
 
* Open the file '''assignment.js''' which you have created earlier
 
* Clear the existing code
 
* Clear the existing code
Line 958: Line 927:
 
* 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'''
 
* Observe the output in the '''browser’s console'''
−
 
−
 
  
 
|-
 
|-
Line 966: Line 933:
 
* The video at the following link summarises the Spoken Tutorial project.
 
* The video at the following link summarises the Spoken Tutorial project.
 
* Please download and watch it
 
* Please download and watch it
−
 
−
 
  
 
|-
 
|-
Line 974: Line 939:
 
* We conduct workshops using spoken tutorials and give certificates.
 
* We conduct workshops using spoken tutorials and give certificates.
 
* For more details, please write to us.
 
* For more details, please write to us.
−
 
−
 
  
 
|-
 
|-

Latest revision as of 11:17, 21 June 2021

Title of the script:Functions

Author: Jayesh Katta Ramalingaiah

Domain Reviewer: Ankita Maske

Novice Reviewer: Praveeen S.

Keywords: JavaScript, HTML, Function, value, arguments, parameters


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

Learning Objectives

In this tutorial, we will learn about:
  • Functions
  • Different types of functions and
  • Function declarations in JS
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: Functions
  • A function is a block of code which is defined once and can be called multiple times.
  • The main advantage of a function is reusability.
Slide: Types of Functions The different types of functions are,
  • Basic Function
  • Parameterized Function
  • Function as a value
  • Function as an Argument/Parameter
  • Function as Property
  • Function Arguments
  • Constructor Function

Let us take an example and understand this better.

Switch to Visual Studio code editor Switch to the Visual Studio code editor.
[Editor]


Welcome Page ->

Open Folder ->

Practice-JS

In the Welcome page, click on the Open folder link at the top left corner.


Browse and locate the folder “Practice-JS ”.


Then click on the OK button at the top right corner.

[Editor] Click on


Explorer panel -> Practice-JS -> index.html

In the Explorer panel on the left, under Practice-JS click on the file named index.html
[Editor] Type:


<html lang="en">

<head>

<title>Functions</title>

</head>

<body>

<script src="main.js"></script>

</body>

</html>

In the index.html file, type 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


Now press the key combinations Alt + L and Alt + O.


The Live server gets started.

Show firefox The default browser will open automatically and a new tab opens.
[Firefox] Press Ctrl + Shift + I


Point to the Browser developer tools

Now press Ctrl + Shift + I keys together.


The Browser developer tools panel opens.

[Firefox] Click on the Console tab Now click on the console tab in the developer tools.
Switch to Editor Switch back to the editor.
[Editor] Click on


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

In the Explorer panel on the left, under Practice-JS click on the file named main.js
[Editor] Type:


function add() {

console.log(1+2);

return true;

}


add();

console.log(add());

In the main.js file, replace the code as shown.
[Editor] Highlight:


function add()

In JS, to create a basic function, we use the function keyword.


This is followed by the name of the function and brackets.

[Editor] Highlight:


console.log(1+2);

Inside the function block, we can have multiple instructions.


Here we just logged 1 + 2

[Editor] Highlight:


return true;

Functions always return some value.


return is an optional keyword


If you don’t use return keyword to return any value, by default undefined will be returned.


Here, this function is returning true.

[Editor] Highlight:


add();

Only when the function is called, the function block will get executed.


A function call can be made any number of times.

[Editor] Highlight:


console.log(add());

Here, I have written the add() function inside the console log statement.


So, whatever is being returned by the add() function, will get logged.

Press: Ctrl + S Save the file.
Switch to browser Switch back to the browser.
[Browser] [Console Tab]:

Highlight:


3

true

Here in the output, we observe:


3


true


In the console, at the right end of the 3, we see (2).


This means 3 is printed twice.

Switch to Editor Switch back to the editor.
[Editor] Highlight:


add();

The first 3 is printed for the first function call.
[Editor] Highlight:


console.log(add());

The second 3 is printed for the second function call.
[Editor] Highlight:


console.log(add());

And true is printed because add() function’s return value is logged.
[Editor] Type:


function sub(a) {

return a - 1;

}


var result = sub(6);

console.log(result);

Next, let us learn about parameterized function.


In the main.js file, replace the code as shown.

[Editor] Highlight:


function sub(a) {

Here, we have created a function similar to the basic function.


The only difference is we are passing a parameter a.


The parameter can be used for a purpose in the function.

[Editor] Highlight:


return a - 1;

Here, we are subtracting the value and returning the subtracted value.
[Editor] Highlight:


var result = sub(6);

In this line, the function call is made passing 6 as the parameter.


The returned value is stored in the result variable.

[Editor] Highlight:

console.log(result);

Here, we are logging the value on the console.
Press: Ctrl + S Save the file.
Switch to Browser Switch back to the browser.
[Browser] [Console Tab]:

Highlight:


5

The output is 5 because we have passed the number 6 as the parameter.


That value is being subtracted by 1 and returned.


After returning, we are catching the value in a variable and logging it.

Switch to Editor Switch back to the editor.
[Editor] Type:


var mul = function () {

return true;

};


var result = mul();

console.log(result);

Next, let us learn about the function as a value.


In the main.js file, replace the code as shown.

[Editor] Highlight:


var mul = function ()

Here, we have declared a variable with the name mul.


The variable mul is assigned to a function using the function keyword.


We don’t have to give the name of the function again, followed by the function keyword.


The name of the function becomes mul here.

[Editor] Highlight:


function ()

We call function () as an anonymous function.


If we wish to, we can even pass some parameters to this.

[Editor] Highlight:

return true;

This function just returns true.
[Editor] Highlight:


var result = mul();

The function call is similar to the basic and parameterized ones.


The returned value would be caught by the result variable.

[Editor] Highlight:


console.log(result);

Here, we are logging the result variable.
Press: Ctrl + S Save the file.
Switch to Browser Switch back to the browser.
[Browser] [Console Tab]:

Highlight:


true

Here, as the function returns true, "True" is printed on the console.
Switch to Editor Switch back to the editor.
[Editor] Type:


function d1() {

console.log('Spoken');

}

function d2() {

console.log('Tutorials');

}

function d3() {

console.log('on JS');

}

function display(fn, fn1, fn2) {

fn();

fn1();

fn2();

}


display(d1, d2, d3);

Next, let us learn about function as a parameter.


In the main.js file, replace the code as shown.

[Editor] Highlight:


function d1() {

console.log('Spoken');

}


function d2() {

console.log('Tutorials');

}


function d3() {

console.log('on JS');

}

Here, we have declared three functions with names d1, d2 and d3 respectively.
[Editor] Highlight:


function display(fn, fn1, fn2)

Here, I have created another function named display.


To this, we are passing 3 parameters named fn, fn1 and fn2.

[Editor] Highlight:


fn();

fn1();

fn2();

Inside, the display function,we’re making function calls for the parameters.


This is because the parameters are functions.

[Editor] Highlight:


display(d1, d2, d3);

While making the display function call, we’re passing 3 functions d1, d2 and d3 respectively.


Here, as we’re passing d1,d2 and d3, these functions would be called callback functions.

Slide: callback function Callback function is defined as a function which is passed as a parameter to another function.
[Editor] Highlight:


display(d1, d2, d3);

d1, d2 and d3 will be taken as fn, fn1, fn2 in display function as the parameters.


On making the function call for fn, fn1 and fn2,


d1, d2 and d3 functions will be executed.

Press: Ctrl + S Save the file.
Switch to Browser Switch back to the browser.
[Browser] [Console Tab]:

Highlight:


Spoken

Tutorials

on JS

Here, if we see the output Spoken Tutorials on JS is being logged from the d1, d2 and d3 functions.
Switch to Editor Switch back to the editor.
[Editor] Type:


var student = {

marks: function () {

return 100;

},

};


var result = student.marks();

console.log(result);

Next, let us learn about function as a property.


In the main.js file, replace the code as shown.

[Editor] Highlight:

var student = {};

Here, student is the object.
[Editor] Highlight:


marks: function () {

return 100;

},

Here, marks is a property in the student object, which holds an anonymous function.
[Editor] Highlight:


return 100;

This function returns 100.
[Editor] Highlight:


var result = student.marks();

To make a function call, we need to call the property inside the student object.


Here, we access the marks as student.marks


To make a function call we add brackets similar to a function as a value


Here, we have named the function as marks.


The returned value is stored in variable result.

console.log(result); Here, we are logging the result.
Press: Ctrl + S Save the file.
Switch to Browser Switch back to the browser.
[Browser] [Console Tab]:

Highlight:


100

Here, the output is 100 as the function returns 100.
Switch to Editor Switch back to the editor.
[Editor] Type:


function marks() {

for (var i = 0; i < arguments.length; i++) {

console.log(arguments[i]);

}

}


marks(87, 78, 90, 81);

Next, let us understand about function arguments.


In the main.js file, replace the code as shown.

[Editor] Highlight:


marks(87, 78, 90, 81);

So far, when we passed parameters to a function, we declared a parameter variable while creating the function.


This example helps us in a situation where we are not sure of the number of parameters to be passed.


In this case, we are passing 4 parameters.

[Editor] Highlight:


function marks() {}

And we have not declared any variables to catch the values passed in the marks function.
[Editor] Highlight:


for (var i = 0; i < arguments.length; i++) {

}

Using the keyword arguments, we can access the parameters being passed.


arguments.length, will give the number of the arguments being passed.


Here, we can loop over and get the values.


Please note here that the prototype of the arguments is array but the data structure is object.

[Editor] Highlight:


console.log(arguments[i]);

Here, we are just logging the value in the arguments.
Press: Ctrl + S Save the file.
Switch to Browser Switch back to the browser.
[Browser] [Console Tab]:

Highlight:

87

78

90

81

As we are passing 87, 78, 90, 81 as parameters, the output we get is 87, 78, 90, 81.
Switch to Editor Switch back to the editor.
[Editor] Type:


function Student(stuName, stuAge) {

this.name = stuName;

this.age = stuAge;

}


var s1 = new Student("S1", 10);

var s2 = new Student("S2", 11);

console.log(s1);

console.log(s2);

Next, let us understand the constructor function.


In the main.js file, replace the code as shown.

[Editor] Highlight:


function Student(stuName, stuAge)

Here, we have created a function named Student and passing the parameters stuName and stuAge.


Only in the constructor function, the name of the function starts with an uppercase letter.

[Editor] Highlight:


this.name = stuName;

this.age = stuAge;

Inside the function block we have assigned, this.name as stuName and this.age as stuAge.


Here, this refers to the variable name, where the function call is made.

[Editor] Highlight:


var s1 = new Student("S1", 10);

var s2 = new Student("S2", 11);

Here, we have made the function calls,


For the constructor function, new keyword has to be used while making the function call.


For the first function call, the variable name is s1, so this refers to s1.


For the second function call, the variable name is s2, so this refers to s2.

Only narration The constructor function creates a new object with help of parameters and returns the object.


The returned object will be stored in the respective variable.

[Editor] Highlight:


console.log(s1);

console.log(s2);

Here, we are logging s1 and s2
Press: Ctrl + S Save the file.
Switch to Browser Switch back to the browser.
[Browser] [Console Tab]:

Highlight:


Object { name: "S1", age: 10 }

Object { name: "S2", age: 11 }

Here, we see we have 2 objects printed.


One for s1 and other for s2, with the property names as name and age as mentioned in function block.


And the values are stuName and stuAge which are passed as parameters.

Only narration Hence, we conclude that the constructor function returns an object.


While making a function call, new keyword would be responsible for creating the new object.

With this we have come to the end of this tutorial.


Let’s summarize.

Slide: Summary In this tutorial, we have learnt about:
  • Functions
  • Different types of functions and
  • Function declarations in JS
Slide: Assignment As an assignment:
  • Open the file assignment.js which you have created earlier
  • Clear the existing code
  • Create an Employee function
  • Employee function accepts name and id as parameters
  • Create Object references to name and id parameter
  • Create two objects using the Employee function
  • Log the created objects 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/C2/Functions-in-JS/English&oldid=55278"