JavaScript operators

Table of content:

What are JavaScript operators

A JavaScript operator is a symbol or a word that performs a calculation, comparison, or assignment on one or more values. JavaScript operators do much of the work in script. There are many types of JavaScript operators.

Operator Types in JavaScript

There are six types of operators:

  • Mathematical – Mathematical operators perform mathematical calculations on two values.
  • Assignment – Assignment operators assign new values to variables.
  • Comparison – Comparison operators are used to compare two values, two variable, etc.
  • Logical – Logical operators compare two conditional statements, determin if the result is true, and proceed accordingly.
  • Bitwise – Bitwise operators operate at the bit level.
  • Special – Special operators perform special functions.

Mathematical Operators

For a mathematical calculation you use a mathematical operator. You can use as value(s) one, two, or more numbers, variables, or numbers and variables.

As a quick example let’s use the mathematical operator + to add two values that are both variables.


var BeginText="I have a ";
var EndText="black Honda PCX.";
window.alert(BeginText + EndText);

Below is The Mathematical Operators table with their symbols and their functions.

Operator Symbol Function
Addition + Adds two values
Substraction Substract one value from another
Multiplication * Multiplies two values
Division / Divides one value by another
Modulus % Divides one value by another and returns the remainder
Increment ++ Shortcut to add 1 to a single number
Decrement – – Shortcut to substract 1 from a single number
Unary negation Makes a positive negative or a negative positive

The Addition Operator (+)

The Addition Operator in JavaScript is used to add numbers in mathematical calculations or to combine two strings.

For example you can add two numbers to get the result:


var number1=5;
var number2=3;
var TheSum = number1 + number2;
window.alert( TheSum);

The Subtraction Operator (-)

As you learn at Mathematics, the Subtraction Operator in JavaScript is used to subtract the value on its right side from the value on its left side.


var number1=5;
var number2=3;
var TheSum = number1 - number2;
window.alert( TheSum);

The Multiplication Operator (*)

The Multiplication Operator in JavaScript is used to multiply the value on its right side by the value on its left side.


var number1=5;
var number2=3;
var TheSum = number1 * number2;
window.alert( TheSum);

The Division Operator (/)

The Division Operator in JavaScript is used to divide the value on its left side by the value on its right side.


var number1=5;
var number2=3;
var TheSum =number1 / number2;
window.alert( TheSum);

The Modulus Operator (%)

The Modulus Operator in JavaScript is used to divide the value on its left side by the value on its right side then give a result that is the integer remainder of the division.


var number1=5;
var number2=3;
var TheSum = number1 % number2;
window.alert( TheSum);

In our example, 5 divided by 3 is 1 and a reminder of 2. The reminder 2 is the result given by the Modulus Operator. If the reminder is 0 then the result would be 0.

The Increment Operator (++)

The Increment Operator can be use on either side of the operand (the value on which it operates). All it does is to increase the value of the operand by 1.

When the Increment Operator is placed before the operand, the value of the operand is increased by 1 and the rest of the statement is executed.


var number1=5;
var TheResult = ++ number1;
window.alert( TheResult);

In this example the value of the variable number1 is increased by 1 so it is set to 6.

If the Increment Operator is used after the operand it changes the value of the operand after assignment.


var number1=5;
var TheResult = number1++;
window.alert( TheResult);
window.alert( number1 + TheResult);

The first alert window.alert(TheResult); will give you the result of 5 but the second alert window.alert(number1+TheResult); will give you the result of 11 which is 5+6.

The Decrement Operator (–)

The Decrement Operator works just like the Increment Operator but it subtract 1 from the operand rather than adding 1 to it.


var number1=5;
var TheResult = --number1;
window.alert( TheResult);

When the Decrement Operator is placed after the operand, the rest of the statement is executed and the operand is decremented afterward.


var number1=5;
var TheResult = number1--;
window.alert( TheResult);
window.alert( number1 + TheResult);

The first alert window.alert(TheResult); will give you the result of 5 but the second alert window.alert(number1+TheResult); will give you the result of 9 which is 5+4.

The Unary Negation Operator (-)

The Unary Negation Operator negates the current sign of a number (positive or negative).


var NegativeNumber=-3;

This defines a variable with the value of negative 3. The operator tells the browser that the value of 3 is not positive.

You can use the Unary Negation Operator as is shown below:


var NegativeNumber=4+(-3);


var Number1=5;
var Number2=3;
var Number3 =- Number2;
window.alert( Number1 + Number2 + Number3);

Assignment Operators

Assignment operators assign a value to a variable.
There are six assignment operators in JavaScript that can be seen in the table below:

Operator Symbol Function
Assignment = Assigns the value on the right side of the operator to a variable.
Add and assign += Add the value on the right side of the operator to the variable on the left side then assigns the new value to the variable.
Subtract and assign -= Subtract the value on the right side of the operator from the variable on the left side then assigns the new value to the variable.
Multiply and assign *= Multiplies the value on the right side of the operator by the variable on the left side then assigns the new value to the variable.
Divide and assign /= Divides the variable on the left side of the operator by the value on the left side then assigns the new value to the variable.
Modulus and assign %= Takes the integer remainder of dividing the variable on the left side by the value on the right side and assigns the new value to the variable.

The Assignment Operator (=)

The assignment operator assigns the value on the right side of the operator to the variable on the left side.


var PriceHonda=2500;

The Add-and-Assign Operator (+=)

The Add-and-Assign Operator (+=) adds the value on the right side of the operator to the variable on the left side then assigns the new value to the variable.


var PriceHonda = 2500;
PriceHonda += 1;

The += operator in the above example adds 1, which is the value on the right side, to the variable on the left side, which in PriceHonda, and then assigns the new value (2501) to the variable PriceHonda.

Instead of adding 1 to the value of the variable PriceHonda you can add any other value.


var PriceHonda = 2500;
PriceHonda+=500;

In this situation the variable PriceHonda ends up with a value of 3000.

You can add the value of another variable instead of a number.


var PriceHonda = 2500;
var TaxValue=400;
PriceHonda+= TaxValue;

The variable PriceHonda ends up with a value of 2900 because the value of the variable TaxValue is added to the value of the variable PriceHonda then the new resulted value is assigned to the variable PriceHonda.

You can also use stings with += operator.


var MyName=" Dan ";
MyName+=" Dumitrache";

The value of the variable MyName will be Dan Dumitrache.

The Subtract-and-Assign Operator (-=)

The -= operator works just like += operator but instead of adding it subtract.


var PriceHonda = 2500;
var DiscountValue = 400;
PriceHonda-= DiscountValue;

The value of the variable DiscountValue is subtracted from the value of the variable PriceHonda then the result is assigned to the variable PriceHonda.

The Multiply-and-Assign Operator (*=)

The Multiply-and-Assign Operator (*=) multiplies the value on the right side of the operator by the variable on the left side then assigns the new value to the variable.


var PriceHonda=2500;
var TwoHondas=2;
PriceHonda*= TwoHondas;

The value of the variable PriceHonda (2500) is multiplied by the value of the variable TwoHondas (2). The result (5000) is then assigned to the variable PriceHonda.

The Divide-and-Assign Operator (/=)

The Divide-and-Assign Operator (/=) divides the value on the right side of the operator by the variable on the left side then assigns the new value to the variable.


var PriceHonda= 2500;
var FiftyOff=2;
PriceHonda /= FiftyOff;

The value of the variable PriceHonda (2500) is divided by the value of the variable FiftyOff (2). The result (1250) is then assigned to the variable PriceHonda.

The Modulus-and-Assign Operator (%=)

The Modulus-and-Assign Operator (%=) takes the integer remainder of dividing the variable on the left side by the value on the right side and assigns the new value to the variable.


var PriceHonda= 2500;
var FiftyOff=2;
PriceHonda %= FiftyOff;

This example is the same as the previous one (The Divide-and-Assign Operator example) with a single difference; instead of /+ operator the example uses %= operator). Both examples perform a division but unlike the first example, where the result of the division is assigned to the value, in the %= example the value of the variable PriceHonda ends up to be 0. That’s because the %= operator assigns the reminder of the division as the value of the variable. Since 2500 divided by 2 is 1250 with no reminder, means that the end result of the calculation is 0.

Comparison Operators

Comparison operators, as the name suggests, compare two values and return a value of either true or false. They are usually used with conditional statements and loops to perform actions only certain conditions are met.

Operator Symbol Function
Is equal to == Returns true if the values on both sides of the operator are equal to each other.
Is not equal to != Returns true if the values on both sides of the operator are not equal to each other.
Is greater than > Returns true if the value on the left side of the operator is greater than the value on the right side.
Is less than < Returns true if the value on the left side of the operator is less than the value on the right side.
Is greater than or equal to >= Returns true if the value on the left side of the operator is greater than or equal to the value on the right side.
Is less than or equal to <= Returns true if the value on the left side of the operator is less than or equal to the value on the right side.
Strict is equal to === Returns true if the values on both sides of the operator are equal and of the same type.
Strict is not equal to !== Returns true if the values on both sides of the operator are not equal and not of the same type.

Is-Equal-To Operator (==)

If the values or statements on each side of the Is-Equal-To operator are equal then it returns true, otherwise it returns false.

Examples:

Comparison Return value Reason
5==5 true Two equal numbers.
(5+2)==(6+1) true The result on both sides is 7.
"My Honda"
==
"My Honda"
true Two identical strings.
("My "+"Honda")
==
("My "+"Honda")
true The result of the addition of the two strings is indentic on both sides.
5==6 false Not equal numbers.
(5+2)
==
(4+1)
false The result on left is 7 and the result on right is 5.
"My Honda"
==
"my honda"
false Strings are not the same (caps).
("My" + "Honda")
==
("My "+"Honda")
false No space character on the left after "My"; strings are unequal.

You can also use variables with comparison operators. The comparison returns true if the values of both variables are equal otherwise is returns false.


var NumberOne= 5;
var NumberTwo= 7;
var NumberThree= 7;
//The following comparison returns true
NumberTwo==NumberThree
//The following comparison return false
NumberOne == NumberThree

Is-Not-Equal-To Operator (!=)

The Is-Not-Equal-To operator (!=) is the opposite of Is-Equal-To operator (==). It returns true if the values on both sides of it are not equal and false if the values on its sides are equal.

Examples:

Comparison Return value Reason
5!=6 true Two unequal numbers.
"My Honda"!="my honda" true Unequal strings (caps).
5!=5 false Two identical numbers.
"My Honda"!="My Honda" false Two equal numbers.

Is-Greater-Than Operator (>)

The Is-Greater-Than operator returns true if the value on its left side is greater than the value on its right side. The compared values can be strings or numbers. When comparing strings the Is-Greater-Than operator first looks at the first letter of the string. A lowercase letter is greater than an uppercase later and an uppercase letter is greater than a number.

Examples:

Comparison Return value Reason
5>4 true 5 is greater than 4.
0>-1 true 0 is greater than a negative number.
"a">"A" true In strings, lowercase letters are greater than uppercase letters.
"A">"1" true Letters in strings are greater than numbers in strings.
5>6 false 5 is not greater than 6.
-1>0 false A negative number is less than 0, not greater.
"B">"b" false In strings, lowercase letters are greater than uppercase letters.
"3">"B" false Letters in strings are greater than numbers in strings.
5>5 false Two equal numbers.

Is-Less-Than Operator (<)

The Is-Less-Than operator returns true when the value on its side is less than the value on its right side. Of course, it returns false when the value on its left side is greater than the value on its right side.

Examples:

Comparison Return value Reason
4<5 true 4 is less than 5.
"A"<"a" true In strings uppercase letters are less than lowercase letters.
5<4 false 5 is greater than 4.
"a"<"A" false In strings lowercase letters are greater than uppercase letters.
5<5 false The values are equal.

Is-Greater-Than-or-Equal-To Operator (>=)

The Is-Greater-Than-Or-Equal-To operator functions as the Is-Greater-Than operator but it adds one more option for comparison to return true. It returns true if the value on the left side of the operator is greater or equal to the value on the right side of the operator. It returns false if the value on the left side of the operator is less than the value on the right side of the operator.

Examples:

Comparison Return value Reason
5>=4 true 5 is greater than 4.
5>=5 true 5 is equal to 5.
"a">="A" true In strings lowercase letters are greater than uppercase letters.
"A">="A" true The strings are equal.
4>=5 false 4 is less than 5.
"A">="a" false In strings uppercase letters are less than lowercase letters, not greater than or equal to.

Is-Less-Than-or-Equal-To Operator (<=)

The Is-Less-Than-Or-Equal-To operator returns true if the value on the left side of the operator is less than or equal to the value on the right side of the operator. It returns false if the value on the left side of the operator is greater than the value on the right side of the operator.

Examples:

Comparison Return value Reason
4<=5 true 4 is less than 5.
5<=5 true 5 is equal to 5.
"A"<="a" true In strings upper case letters are less than lowercase letters.
"A"<="A" true The strings are equal.
5<=4 false 5 is greater than 4, not less than or equal to.
"a"<="A" false In strings lowercase letters are greater than upper casecase letters, not less than or equal to.

The Strict Is-Equal-To Operator (===)

The Strict Is-Equal-To Operator returns true is the values on both sides of the operator are equal and of the same type. For example 5===”5″ will return false because on the left side the value is a number and on the right side the value is a string.

Examples:

Comparison Return value Reason
5===5 true Two equal numbers.
(5+2)
===
(6+1)
true The same result on both sides.
"My Honda"
===
"My Honda"
true The strings on both sides are the same.
("My " + "Honda")
===
("My"+" Honda")
true The result of strings addition is the same.
4===5 false 4 and 5 are not equal numbers.
(5+2)==="7" false The 7 on the right is a string value while the 7 on the left is a numeric value.
"My Honda"
===
"my honda"
false The strings are not the same (caps).

The Strict Is-Not-Equal-To Operator (!==)

The Strict Is-Not-Equal-To Operator returns true is the values on both sides of the operator are not equal or are not of the same type otherwise it will return false.

Comparison Return value Reason
5!==4 true Two unequal numbers.
5!=="5" true Different types of values.
5!==5 false Two equal numbers
"My Honda"!==
"My Honda"
false The strings are the same.

Logical Operators

Logical operators are used to compare two conditional statements to see if they are true or false and proceed accordingly. Logical operators can return true or false depending on the values on either side of the operator.

Operator Symbol Function
AND && Returns true if the statements on both sides of the operator are true.
OR || Returns true if a statement on either side of the operator is true.
NOT ! Returns true is the statement on the right side of the operator is not true.

AND Operator (&&)

The AND operator returns true if the comparison on its both sides are true. It returns false if one or both comparisons on either side are false.

Examples:

Statement Return value Reason
(5==5)&&(4==4) true Comparisons on both sides are true. 5 is equal to 5 and 4 is equal to 4.
(5>4)&&(5<=6) true Comparisons on both sides are true. 5 is greater than 4 and 5 is less than 6.
("A"<="A")&&
("B"!="C")
true Comparisons on both sides are true. "A" is equal to "A" and "B" is not equal to "C".
(5==5)&&(4==5) false Comparison on the right is false.
("a"!="a")&&
("b"!="c")
false Comparison on the left is false.
(5>6)&&(5>=7) false Comparison on both sides are false.

OR Operator (||)

The OR operator returns true if one comparison on either side of the operator returns true. To return false the comparisons on both sides of the operator must return false.

Examples:

Statement Return value Reason
(5==5)||(4>5) true Comparisons on the left is true.
(5>6)||(5!=6) true Comparisons on the right is true.
(5==5)||(5<6) true Comparisons on both sides are true.
(5!=5)||(4==5) false Both comparisons are false.

NOT Operator (!)

The NOT operator can be used on a single comparison. It makes an expression than would normally return true to return false and one that would normally return false to return true.

Examples:

Statement Return value Reason
!(5==5) false 5 is equal to 5 is true but NOT operator makes the statement false.
!(4>5) true 4 is greater than 5 is false but NOT operator makes the statement true.

Bitwise Operators

Bitwise operators are logical operators that operates at bit level. The table below presents a few of the most important bitwise operators.

Operator Symbol
AND &
XOR ^
OR |
NOT ~
Left Shift <<
Right Shift >>
Right Shift (Zero-Fill) >>>

Special Operators

Special operators in JavaScript are used to perform specific tasks. The table below presents the special operators and the tasks they perform.

Operator Symbol Purpose
Conditional ?: Often used as a short if/else type of statement. A condition is placed before the ? and a value is placed on each side of the colon.
Comma , Evaluates the statement on both sides of the operator and returns the value of the second statement.
Delete delete Used to delete and object, a property, or an element is an array.
In in Returns true if a property is in a specific object.
Instanceof instanceof Returns true if an object is of a specified object type.
New new Creates an instance of an object.
This this Refers to the curent object.
Typeof typeof Returns a string that tells you the type of the value being evaluated.
Void void Allows an expression to be evaluated without returning a value.

Order of Operations in JavaScript

As in Mathematics, in JavaScript, the operators have a certain order of precedence. The table below presents the precedence of operators from highest to lowest.

Type of Operator Example of Operators
Parentheses (overides others) ( )
Unary (mathematical, logical, or bitwise) – ++ — ! ~ typeof void delete
Multiplication, Division, Modulus * / %
Addition, Subtraction + –
Shifts (bitwise) >>> >> <<
Relational comparison > >= < <= in instanceof
Equality comparison == != === !==
AND (bitwise) &
XOR (bitwise) ^
OR (bitwise) |
AND (logical) &&
OR (logical) ||
Conditional ?:
Assignment = += -= *= /= %= <<= >>= >>>= &= ^= |=
Comma ,

Leave a Reply