JavaScript Operators-JavaScript tutorials for beginners


Posted on 28 March 2017

An operator is a symbol which performs some sort of mathematical, logical or assignment operations. In some cases operator helps in shorten the code(we will see it in this chapter).

Before going through this chapter please read the previous chapters

[Chapter -1]Introduction to JavaScript-JavaScript tutorials for beginners
[Chapter -2]Variables in JavaScript-JavaScript tutorials for beginnersVariables in JavaScript-JavaScript tutorials for beginners

Lets see a simple example based on operator

2 + 2 (here + is the addition operator and 2,2 are operands) the + operator will do the addition operation on two numbers.

Javascript uses several different types of operators

1.Arithematic operators

2.Assignment operators

3.Comparison operators

4.Logical operators

5.Bitwise operators

6.Special operators

Understanding Mathematical Operators

These operators are used to do mathematical operations such as addition, subtraction, multitplication, division etc.

let's quickly see a js code

var x = 23; //learn more about variables in the 2nd chapter of the series
var y = 12;
var z = x + y; //storing the sum of x and y in var z
document.write(z); //alerting var z

In the above code we declare three variables and in variable x and y we store two numbers and store the addition of the two numbers in variable z using the ‘+' operator.

Lets see another code

var x = "Hello"; //learn more about variables in the 2nd chapter of the series
var y = "world";
var z = x + y; //storing the sum of x and y in var z

The above code will produce the output as Helloworld, which means the ‘+' operator can also be used to concatenate two strings, now you must be thinking what will be the output if we add a number and string ? the answer is the ouput will be a string, javascript will concatenate the number and the string for example see the below code

var x = 2; //learn more about variables in the 2nd chapter of the series
var y = "world";
var z = x + y; //storing the sum of x and y in var z

The above code will produce the output as 2world, did you see how javascript convert one type of data into another in this case it converts number into a string, this is known as type conversion.

Now let's try some other arithematic operators,

var x = 6; //learn more about variables in the 2nd chapter of the series
var y = 5;
var sum = x + y; //storing the sum of x and y in var z
var difference = x – y;
var product = x * y;
var dividend = x / y //the ‘/' opertor returns the dividend
document.write(sum + " " + difference + " " + product + " " + dividend);

The above code will produce the output as : 11 1 30 1.2, in the document.write() we concatenate each variable with a <space> thats why we got space between each output.

Try Yourself : Modify the above code and directly use the + operator without any space strings in document .write function and examine the output hint: document.write(sum + difference + product + dividend);

uptil now we have discussed some of the basic arithematic operators, now let's see some more arithematic operators.

Modulus Operator (%)

This operator returns the remainder of two numbers for example

3 % 2 will return 1 as 1 is the remainder when we divide 3 / 2.

var a = 3; //assigning variable a equals to 3
var b = 4; //assigning variable b equals to 4

The above code will print the output as 1.

The increment operator(++)

The increment operator can be used on either side of the value on which it is going to be operated. It increases the value by 1 just like adding 1 to the value. The actual result depends on whether the operator is used before or after the value it works on. This operator often used with variables and within loops(we will study loops in the upcoming chapters of the series).

var x = 10;
document.write(x); //10
x++; //x++ is same as x = x+ 1
document.write(x); //11

in the above code x++ will update the value of x and increase it by 1. now lets try to find difference between (x++) and (++x)

var x = 10;
document.write(x); //output 10
var y = x++;
document.write(y); //output 10
document.write(x); //output 11

Now you must be thinking that the value stored in y should be 11, but it is not x++ means first use the value and then increment it by 1 thats why ++ comes after the operand.

var x = 10;
document.write(x); //output 10
var y = ++x;
document.write(y); //output 11
document.write(x); //output 11

Now you can observe the change, the value store in y is 11 now because ++x means first increment the value and then use it.

The Decrement Operator (--)

It is exactly opposite of (++) operator , in place of increment the value by 1 it decrements the value by 1 and is used either of the side of the operand.

Try yourself: Write the above (++) codes for the decrement operator

The Unary Negation(-) Operator

This operator is used to create negative numbers it is used before an operand. For example

var x = 3;
var y = -3;
document.write(x-y); //output 6

Understanding the Assignment Operators

we have already studied the (=) operator in chapter-2, it is used to assign a value to a variable. For example

var x = 3.14; //here = is assigning x the value 3.14

Similarly we have following assignment operators, list is shown below.


Add and assign(+=)

Subtract and assign(-=)

Multiply and assign(*=)

Divide and assign(/=)

Modulus and assign(%=)

Lets see how these operators work

Add and Assign operator

Let's see a simple expression

var x += 5;

It may be a little bit confusing for you but let me simplify it and write and equivalent expression for the above code

var x = x + 5

Now it may look familiar to you ,actually both (x = x+ 5) and (x += 5) are same, the (+=) operator adds the value on the right side to the variable on the left side and then assign the new value to the variable.

All the other assignment opertors work in the same manner as add and assign operator so..

Try yourself: Implement all the remaining assignment operators using JavaScript

Understanding the Comparison Operators

The comparison operators are mostly used when we have to make a judgement by comparing two or more values, some comparison operators are (> , < , ==, !=, >=, <=, === , !==) maybe you have seen most of them in your maths notebook and actually the meant the same in Javascript too. Comparison operator returns boolean value either true or false. Lets take a simple example

var x = 20;
var y = 10;
var z = x > y;
document.write(z); //output will be true

The above code will print output as true, for getting false just change the expression as (x < y).

Lets try to implement some comparison operators in our JavaScript code

var x = 20;
var y = 20;
document.write(x > y); //false
document.write(x < y); //false
document.write(x >= y); //greater then or equals to, true
document.write(x <= y); //smaller then or equals to, true

we still have some few comparison operators left such as (==,===,!= and !==)

lets see what they means,

is Equal to operator(==)

This operator is used to check whether two values are equal or not, it neglects the datatype of the variable for example

2 == 2 //true

2 == "2" //true, neglacting the datatype

2 == 3 //false

Notice: Be careful not to use (=) operator in place of (==) operator as (=) operator is used for assigning purpose.

Strict is Equal to Operator (===)

The (===) operator also checks for quality but the difference is that it does not neglect the datatype for example

2 === "2" //this will return false

This is the main difference between (==) and (===) operator.

Not equal to (!=) and Strict Not Equal to Operator (!==)

These operators are totally opposite of (==) and (===) operator, both these operator checks for inequality of two values for example

var x = 10;
var y = "20";
document.write(x!=y); //output true

The Strict not Equal to operator checks for inequality and do not neglect the datatype.

Understanding Logical Operators

The three logical operators allow you to compare two conditional statements to see if one or both of the statements is true and to proceed accordingly. The logical operators can be useful if you want to check on more than one condition at a time and use the results. Like the comparison operators logical operators also return either true or false, depending on the values on either side of the operator.

The AND(&&) Operator

The logical AND operator returns true if and only if both sides of the && operator are true. If one or both comparisons on either side of the operator is false, a value of false is returned, some expressions

(23 > 20) && (10 == 10) //return true as both sides are true

(20 > 10) && (10 == 10) //return false as left hand side is false

The OR( || ) Operator

The logical OR operator returns true if either of the side of expression is true, if both the sides are false then only it will retrun false. Examples:

(20 > 10) || (10 == 10) //return true as right hand side is true

(10 != 10) || (10>18) //retrun false as both the sides are false

The NOT(!) Operator

This operator basically converts an expression which is returning true to false and vice versa, for example:

!(10 == 10) //return false as it converts true to false

!(20 > 18) //return true as it converts false to true

Bitwise Operators

Bitwise operators are operators which deals with bits(1's and 0's), we will cover these type of operators later in the series.

That's it for now, if you have any queries then feel free to comment down below or you can contact us on any of our social media page.

Thank you for reading.

Tweet your queries and feedback to @PsychoCodes or leave a message on our Facebook page. You can also comment your questions below.

Also, don't forget to subscribe to our Newsletter.

If you like this article, then please share it and help us grow.

If You Love this article, You Should Consider:

  • Like us on Facebook
  • Follow us on Instagram
  • Follow us on Twitter
  • Subscribe to our Newsletter.
  • Let us know your suggestions and queries in the comments below.

Thank you for your Love and Support

Share your thoughts