JavaScript Operators

What are operators in JavaScript?

Operators are the basic building blocks of any programming language. Like other programming languages, JavaScript also has built in operators which are used to make number calculations, assign values etc. These are the symbols which tell the JavaScript engine to perform calculations like addition, subtraction, division, multiplication, assigning vales to the variables.

There are different types of operators used in JavaScript which are explained below.

  • Arithmetic operators
  • Logical operators
  • Comparison operators
  • Assignment operators
  • Conditional or ternary operators

1. Arithmetic operators in JavaScript

The arithmetic operators in JavaScript are used to perform arithmetic operations like addition, subtraction, multiplication, division and modulus.

OperatorsDescriptionExampleResult
+Additionx+yAdds the values of x and y
Subtractionx-ySubtracts the value of y from x
*Multiplicationx*yMultiply the value of x with y
/Divisionx/yDivides the value of x by y
%Modulusx%yGives remainder when y divides x
Arithmetic operators

Where x and y are the operands. Let us take example of arithmetic operators.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Operators in JavaScript</title>
</head>
<body>
    <h3>Arithmetic operators in JavaScript</h3>
    <script>
        var x=8;
        var y=3;
        document.write("The sum of two numbers is ",x+y, "<br>");
        document.write("The subtraction of two numbers is ",x-y, "<br>");
        document.write("The multiplication of two numbers is ",x*y, "<br>");
        document.write("The division of two numbers is ",x/y, "<br>");
        document.write("The Modulus of given numbers is ",x%y, "<br>");
    </script>
</body>
</html>
Arithmetic operators in javascript, www.programmingtutorial.in

2. Logical operators in JavaScript

The logical operators are used to work with conditions. The answer will be true or false depending upon the values of operands.

Logical AND (&&) operator

In logical AND operator, the result will be true if both operands are true else it will result as false.

Logical OR (||) operator

In logical OR operator, the result will be true if any one of the operands is true.

Logical NOT (!) operator

It just changes the current state of operand into opposite of it. If the operand is true, then logical NOT will produce result as false and vice versa.

Logical operatorExampleResult
&&x && yIt results true if both x and y are true
||x || yTrue if either x or y is true
!!xTrue if x is false and vice-versa
Logical operators

Program showing the use of Logical AND operator

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Fiding percentage</title>
</head>
<body>
    <h3>Percentage program</h3>
    <script>
        var x1=50, x2=60, x3=90, x4=95, x5=80;
        var sum, per, max=500;
        sum=x1+x2+x3+x4+x5;
        per=(sum/max)*100;
        if (per>33 && per<=45)
        {
            document.write("Third Division");
        }
        else if (per>45 && per<=60)
        {
            document.write("Second Division");
        }
        else if (per>60 && per<=75)
        {
            document.write("First Division");
        }
        else
        {
            document.write("Distinction");
        }
    </script>
</body>
</html>

This program will produce output as

First Division

3. Comparison operator in JavaScript

JavaScript has operators which are used to compare operand values and after processing them produces the processed result.

OperatorNameExampleResult
==Equalx == yTrue if x is equal to y
===Identicalx === yTrue if x is equal to y, and they are of the same type
!=Not equalx!=yTrue if x is not equal to y
!==Not identicalx!==yTrue if x is not equal to y, or they are not of the same type
Less thanx < yTrue if x is less than y
Greater thanx > yTrue if x is greater than y
>=Greater than or equal tox >= yTrue if x is greater than or equal to y
<=Less than or equal tox <= yTrue if x is less than or equal to y
Comparison operators

4. Assignment operators in JavaScript

The following assignment operators are used in JavaScript language.

OperatorDescriptionExampleIs The Same As
=Assignx = yx = y
+=Add and assignx += yx = x + y
-=Subtract and assignx -= yx = x – y
*=Multiply and assignx *= yx = x * y
/=Divide and assign quotientx /= yx = x / y
%=Divide and assign modulusx %= yx = x % y
Assignment operators

String operators in JavaScript

When there is need to concatenate two strings, the string concatenation operator + is used. You can also use += operator to append one string with another string. Let us write a code to concatenate two string and append one string to another.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>String Concatenation</title>
</head>
<body>
    <h3>Joining two strings</h3>
    <script>
        var string1="Welcome to the ";
        var string2="world of programming";
        alert(string1+string2);     //Will concatenate string1 and string2
        var str1="Welcome to ";
        var str2="programming tutorial";
        str1+=str2;
        alert(str1);  //Will append str2 in str1
    </script>
</body>
</html>
Concatenation of two strings
Concatenation of two strings
appending of strings
Appending str2 with str1

Incrementing and Decrementing operator in JavaScript

When there is requirement of increasing and decreasing the value of operand, the incrementing or decrementing operators are used. There are post or pre increment or post or pre decrement in JavaScript.

OperatorNameHow it works
x++Post increment operatorReturn x then increment by one
++xPre increment operatorFirst increment by one then return x
x–Post decrement operatorReturns x then decrement by one
–xPre decrement operatorFirst decrement by one then returns x
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Increment/Decrement operators</title>
</head>
<body>
    <h3>Uses of Increment and Decrement operator</h3>
    <script>
        var x=20, y=30, z=40, w=50;
        document.write("<h4>Post increment</h4>");
        document.write(x++, "<br/>");
        document.write(x, "<br/><br/>");
        document.write("<h4>Pre increment</h4>");
        document.write(++y, "<br/>" );
        document.write(y, "<br/><br/>" );
        document.write("<h4>Post decrement</h4>");
        document.write(z--, "<br/>" );
        document.write(z, "<br/><br/>" );
        document.write("<h4>Pre decrement</h4>");
        document.write(--w, "<br/>" );
        document.write(w, "<br/><br/>" );
    </script>   
</body>
</html>
increment and decrement operators

Leave a Reply