View source for JavaScript/C2/Operators-in-JS/English

Title of the script:Operators in JS

Author: Jayesh Katta Ramalingaiah

Domain Reviewer: 

Novice Reviewer: 

Keywords: JavaScript, HTML, Operators, Arithmetic, Logical, Assignment, Comparison, Ternary


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

|-
|| Slide: Title
|| Hello and Welcome to the spoken tutorial on “'''Operators in JS'''”.

|-
|| Slide: 

Learning Objectives
|| In this tutorial, we will learn about:
* Different '''types''' of '''Operators''' in '''JS'''
* And their usage

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

|-
|| Slide: Types of Operators
|| The different '''types''' of '''operators''' used in '''JS''' are:
* '''Assignment operator'''
* '''Arithmetic operators'''
* '''Comparison operators'''
* '''Logical operators'''
* '''Ternary operator'''

|-
|| Slide: Assignment Operator
|| '''<nowiki>= (Equal to) </nowiki>'''is an '''assignment''' '''operator''' in '''JS.'''

|-
|| Slide: Arithmetic Operators
|| '''Arithmetic operators''' in '''JS''' are 
* '''+ '''(Addition)
* '''- '''(Subtraction)
* '''<nowiki>* </nowiki>'''(Multiplication)
* '''/ '''(Division)
* '''% '''(Modulo)

Let us take an example and understand this better.

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


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.

|-
|| <nowiki>[Editor] </nowiki>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'''


We had created this file earlier. 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> Operators</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. 


In this code we have written a sample '''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.

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


Point to the '''Browser developer tools'''
|| Now press '''Ctrl + Shift + I''' keys together.


The '''Browser developer tools''' panel opens.

|-
|| <nowiki>[Firefox] Click on the </nowiki>'''Console''' tab
|| Now click on the '''console tab''' in the '''developer tools.'''

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

|-
|| <nowiki>[Editor] </nowiki>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'''

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


var m = 20;

var n = 10;


console.log('m + n', m + n);

console.log('m - n', m - n);

console.log('m * n', m * n);

console.log('m / n', m / n);

console.log('m % n', m % n);
|| In the '''main.js '''file, replace the '''code''' as shown.


This code will execute all 5 '''arithmetic operators'''. 


Let me explain in detail.

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


var m = 20;

var n = 10;
|| Here we have created two '''variables''' '''m''' and '''n''' and assigned values to them.


Here, '''equal to '''is the '''assignment operator'''. 


That is the reason we are able to assign a '''value''' to '''m''' and''' n '''respectively.


We would then be using these assigned values with the '''arithmetic operators.'''

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


console.log('m + n', m + n);

console.log('m - n', m - n);

console.log('m * n', m * n);

console.log('m / n', m / n);

console.log('m % n', m % n);
|| As seen in the slide, these are five '''arithmetic operators'''.


We are calculating the resultant '''values.'''

For example: '''m plus n, m minus n''' and so on and displaying the results.

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


console.log(''''m + n'''',''' '''m + n);
|| Here, '''m+n''' is within quotes, so that it gets printed on the '''console''' for understanding purposes.


Likewise, we are printing all the values one after another.

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


console.log('m + n',''' m + n''');
|| Here, '''m''' and '''n''' are the '''variables''' which are first initialized.


Then the values are computed and the results are displayed.


Like in other programming languages, in '''JS '''also it is not necessary to have any '''format specifiers''' for '''values'''.

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

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

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

Highlight:


'''m + n 30'''

'''m - n 10'''

'''m * n 200'''

'''m / n 2'''

'''m % n 0'''
|| We can see the output displayed


* '''m + n is 30'''
* '''m - n is 10'''
* '''m * n is 200'''
* '''m / n is 2'''
* '''m % n is 0'''

|-
|| Slide: Comparison Operators
|| Next let us learn about '''Comparison operators'''.


These are
* '''> '''(Greater than)
* '''<nowiki>< </nowiki>'''(Less than)
* '''>= '''(Greater than or equal to)
* '''<nowiki><= </nowiki>'''(Less than or equal to)
* '''<nowiki>== </nowiki>'''(Equal to)
* '''<nowiki>=== </nowiki>'''(Equal value and Equal type)
* '''!= '''(Not equal to)

Let us take an example and understand this better.

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

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


var m = 20;

var n = 10;

var z = "20";


console.log('m > n', m > n);

<nowiki>console.log('m < n', m < n);</nowiki>

console.log('m >= n', m >= n);

<nowiki>console.log('m <= n', m <= n);</nowiki>

console.log('m == z', m == z);

console.log('m === z', m === z);

console.log('m != z', m != n);
|| In the '''main.js '''file, replace the '''code''' as shown.


This code will execute all the '''comparison operators''' one after another. 

Let me explain the code in detail.




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


var m = 20;

var n = 10;

var z = "20";
|| Here we have created three '''variables''' '''m''', '''n''' and '''z''' and assigned '''values '''to them.


We would be using these '''values''' with the '''comparison operators.'''

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


console.log('m > n', m > n);

<nowiki>console.log('m < n', m < n);</nowiki>

console.log('m >= n', m >= n);

<nowiki>console.log('m <= n', m <= n);</nowiki>

console.log('m != z', m != n);
|| Here we are comparing '''m, n''' and '''z''' with all the possible '''operators'''.


When comparing the '''values''' using these '''comparison operators''', the '''compiler''' only returns '''true''' or '''false.'''




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


console.log('m > n', m > n);
|| For example- how do we answer the question, “Is '''m > n'''?”''' '''


We know that '''m '''is '''20''' and '''n '''is '''10'''. So we say, '''YES'''.


Similarly '''JS''' returns '''boolean value true'''.


Please note. '''Comparison operators '''compare only the '''value '''not the '''type'''. 

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


console.log('m == z', '''m == z''');
|| In '''m == z, '''we are comparing whether '''m''' is equal to '''z''' or not.


Though the '''values''' are the same that is '''20''', '''m '''is of '''type number '''and '''z '''is of '''type string.'''


The '''comparison operator '''compares''' '''only the '''values''' and this returns '''true '''in the '''console'''.

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


console.log('m === z', '''m === z''');
|| '''Equal value and equal type''' is a special case in '''JS'''.


So if we compare '''m (===) equal value and equal type z, JS compiler''' does not check '''values''' alone, it even checks the '''type'''.


Only if the '''values''' and '''types''' are both the same, the '''compiler '''returns '''true'''.


This is the major difference between '''<nowiki>(==) equal to </nowiki>'''and '''<nowiki>(===) equal value and equal type operators</nowiki>'''

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

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

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

Highlight:


'''m > n true'''

'''<nowiki>m < n false</nowiki>'''

'''m >= n true'''

'''<nowiki>m <= n false</nowiki>'''

'''m == z true'''

'''m === z false'''

'''m != z true'''
|| We can see the output on the '''console.'''


* '''m > n is true'''
* '''<nowiki>m < n is false</nowiki>'''
* '''m >= n is true'''
* '''<nowiki>m <= n is false</nowiki>'''
* '''m == z is true'''
* '''m === z is false'''
* '''m != z is true'''

|-
|| Slide: Logical Operators
|| Next let us learn about '''Logical operators'''. These are 
* '''&& (Logical AND)'''
* '''|| (Logical OR)''' and 
* '''! (Logical NOT)'''

Let us take an example and understand this better.

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

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


var a = true;

var m = 20;

var n = 10;


console.log('m > n && a', m > n && a);

console.log('m > n || a', m > n || a);

console.log('!a', !a);
|| In the '''main.js '''file, replace the '''code''' as shown.


In this code, we will use the '''logical operators''' in different combinations and see the results. 

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


var a = true;

var m = 20;

var n = 10;
|| Here, we take three '''variables a''', '''m '''and '''n '''and initialize each of them with some values'''.'''


We will be using these '''variable '''values''' '''with the '''logical operators'''.

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


console.log('m > n && a', m > n && a);
|| '''Logical AND''' is used between two or more '''conditions'''.


Only if all the '''conditions''' are satisfied, the '''JS compiler '''will return '''true.'''


In our example '''m>n '''is''' true '''and '''a''' is '''true. '''


So since both are '''true, JS compiler''' concludes the result as '''true.'''

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


console.log('m > n || a', m > n || a);
|| '''Logical OR, '''is also used between two or more '''conditions'''.


If any one '''condition''' is satisfied, the '''JS compiler '''will return '''true.'''


In our example '''<nowiki>m<n </nowiki>'''is''' false '''and '''a''' is '''true. '''


So since we have one '''true,''' '''JS compiler''' concludes the result as '''true.'''

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


console.log('!a', !a);
|| '''Logical NOT''' is always used to return the opposite '''boolean.'''


Since we have declared '''a''' is '''true, '''adding''' (!) exclamation '''would become !'''true'''.

And so the result will be '''false.'''

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

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

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

Highlight:


'''m > n && a true'''

'''m > n || a true'''

'''!a false'''
|| This is the output we see.


* '''m > n && a '''is''' true'''
* '''m > n || a '''is''' true'''
* '''!a '''is''' false'''



|-
|| Slide: '''Ternary Operator'''
|| Next, let’s learn about the '''Ternary operator.'''


'''Ternary operator''' takes three '''operands''' - 

* A '''condition''' followed by a '''question mark'''
* '''Expression 1''' to be executed if the '''condition''' is satisfied followed by a '''colon'''
* '''Expression 2''' to be executed if the '''condition''' is satisfied

The '''syntax''' is as shown. 


This '''operator''' can also be used as a shortcut for the '''if statement'''.


Let us take an example and understand this better.

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

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


var m = 20;

var n = 10;


m > n ? console.log("m is greater than n") : console.log("m is less than n");
|| In the '''main.js '''file, replace the '''code''' as shown.




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


var m = 20;

var n = 10;
|| Here we have '''declared''' two '''variables''' and initialized them with some values.

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


m > n 
|| Here we are checking whether the '''condition m > n''' is '''true.'''


As per the values, it will return '''true.'''

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


? '''console.log("m is greater than n")''' 
|| So, the code after the '''question mark,''' '''console.log("m is greater than n") '''gets '''executed'''.

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


: '''console.log("m is less than n")'''<nowiki>;</nowiki>
|| If the '''condition''' were to '''return false''', the code after the '''colon '''would be '''executed'''.

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

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

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

Highlight:


'''m is greater than n'''
|| Here, we can see the output '''m is greater than n''' because the '''condition''' is '''true.'''

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

|-
|| var m = 20;

var n = 100;
|| Change the value of '''n''' as shown.

|-
|| Press: Ctrl + S
|| Save the file and observe the change in the '''console'''.

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

Highlight:


'''m is less than n'''
|| We can see the output '''m is less than n''' because the '''condition''' is '''false.'''

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


Let’s summarize.

|-
|| Slide''': '''Summary''' '''
|| In this tutorial, we have learnt about:
* '''Assignment Operator'''
* '''Arithmetic Operators'''
* '''Comparison Operators'''
* '''Logical Operators'''
* '''Ternary Operator''' in '''JS'''

|-
|| Slide: Assignment
|| As an assignment:
* Open the file '''assignment.js''' which you have created earlier
* Clear the existing code
* Create three '''variables a, b '''and '''c'''
* Assign two random numbers to '''a''' and '''b'''
* Assign a '''boolean''' value to '''c'''
* Only if the sum of '''a '''and '''b''' is more than 20 and, '''c''' is '''true''', '''log''' the sum of '''a''' and '''b'''
* Else '''log''' “'''unable to display result'''”
* 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.

|}