Table of content:

- What are JavaScript operators
- Operator Types in JavaScript
- Mathematical Operators
- Addition Operator (+)
- Subtraction Operator (-)
- Multiplication Operator (*)
- Division Operator (/)
- Modulus Operator (%)
- Increment Operator (++)
- Decrement Operator (–)
- Unary Negation Operator (-)
- Assignment Operators
- Assignment Operator (=)
- Add-and-Assign Operator (+=)
- Subtract-and-Assign Operator (-=)
- Multiply-and-Assign Operator (*=)
- Divide-and-Assign Operator (/=)
- Modulus-and-Assign Operator (%=)
- Comparison Operators
- Is-Equal-To Operator (==)
- Is-Not-Equal-To Operator (!=)
- Is-Greater-Than Operator (>)
- Is-Less-Than Operator (<)
- Is-Greater-Than-or-Equal-To Operator (>=)
- Is-Less-Than-or-Equal-To Operator (<=)
- Strict Is-Equal-To Operator (===)
- Strict Is-Not-Equal-To Operator (!==)
- Logical Operators
- AND Operator (&&)
- OR Operator (||)
- NOT Operator (!)
- Bitwise Operators
- Special Operators
- Order of Operations in JavaScript

## 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 | , |