JavaScript Arithmetic Operators

In this tutorial:

The Addition operator ( + )
The rules for addition operator ( + )
The Subtraction operator ( - )
The Multiplication operator ( * )
The Division operator ( / )
The Modulus operator ( % )
The Exponentiation operator ( ** )
The Unary Negation operator ( - )
The Unary Plus operator ( + )
The Increment operator ( ++ )
The Decrement operator ( -- )

The arithmetic operators perform mathematical operations on numbers. Following is a list of arithmetic operators available in Javascript.

The Addition Operator ( + )

The addition operator ( + ) is used to add two operands or concatenate strings.

Numbers Arithmetic Addition

When both operands are numbers the result is also a number.

You are already familiar with:

var x = 4;

You can also write,

var x = 2 + 2;  

You can use variables as operands.

var x = 2;
var y = 3;
var z= x + y;

You can mix variables and numbers as operands.

var x = 2;
var y = x + 2;

The + Addition operator to concatenate strings

The + addition operator is also used to concatenate strings. 

// string + string -> string (concatenation)
var str1 = “Hello “;
var str2 = “World”;
console.log(str1 + str2);  // “Hello World”

If you put numbers in quotes, JavaScript will treat those numbers as strings. In this case, JavaScript will concatenate those strings instead of adding them as numbers.

var x = “2” + “3”;  // “23"

The important rules for + addition operator in JavaScript

1. If both operands are numbers then arithmetic addition is performed.
2. If both operands are string then string concatenation is performed.
3. If at least one operand is string, the other operand is converted to string and concatenation is performed.
4. In case, at least one of the operands is an Object, it is converted to primitive value (number, string or boolean).
5. After object to primitive conversion, if at least one operand is string then the other operand is converted to string and concatenation is performed.
6. Otherwise both operands are converted to numbers or to NaN and addition is performed.
7. Date objects are converted by their toString() method.
8. All other objects are converted by valueOf(), if it returns a primitive value.
9. If an Object does not have a valueOf() method, it is converted to string by toString().
10. When an array is converted to a primitive, JavaScript uses its join(',') method. For example, the primitive form of array [1, 2, 3] is "1,2,3", a string. The primitive value of a simple JavaScript object {} is "[object Object]".

Lets see some examples:

Example 1: number +  number

// number + number -> addition
var x = 2 + 3 //  5

Example 2: string + string

// string + string -> concatenation
var x = “2” + “3” //  “23”

// string + string -> concatenation
Var x = “Hello “ + “World”  // “Hello World”

Example 3: number + string

// number + string -> concatenation after number-to-string
var x = 2 + “3” // “23”

// number + string -> concatenation after number-to-string
var x = 2 + “shoes” // “2shoes” 

// string + number + number -> concatenation after number-to-string
var x = “1” + 2 + 3;  // “123”

Another example:

// number + number + string -> concatenation after number-to-string
var x = 1 + 2 +” 3”;  // “33”

The expression is evaluated from left-to-right. First 1+2 is evaluated, as both 1 and 2 are numbers the addition is performed, which results as 3. Then 3+”3” is concatenated after number-to-string conversion.

Example 4: boolean + boolean

// boolean + boolean -> addition after boolean-to-number, boolean true is converted to 1
var x = true + true  // 2 

// boolean + boolean -> addition after boolean-to-number, boolean false is converted to 0
var x = false + false  // 0

Example 5: number + boolean

// number + boolean -> addition after boolean-to-number
var x = 4 + true  // 5

Example 6: string + boolean

// String + boolean -> Concatenation
var x = “1” + true  // “1true”

Example 7: number + null

// number + null -> addition after null converts to 0
var x = 4 + null  // 4 

Example 8: number + undefined

// number + undefined -> addition after undefined converts to NaN
var x = 4 + undefined  // NaN 

Example 9: string + null

// string + null -> concatenation after null converts to string
var x = “Hello” + null  // “Hellonull”

Example 10: number + object

// number + object -> concatenation after object-to-string
4 + {} // "4[object Object]" 

Example 11: Addition with arrays

In the case of arrays, the valueOf() method returns the array itself, which is a non-primitive value. On invoking its toString() function, the output is the array's contents concatenated by commas.

// An empty array is equivalent to an empty string. Concatenation is performed.
var arr = [] + 1;  // “1”

// Arrays are converted to comma separated strings & then both strings are concatenated
var x = [1,2,3] + [4,5,6];  // 1,2,34,5,6

The addition + in JavaScript is not straight forward, but you can master these skills by practicing and remembering above mentioned conversion rules.

The Subtraction Operator ( - )

The subtraction operator subtract right operand from the left operand.

Example:

var x = 10;
var y = 5;
var z = x - y;  // 5

The Multiplication Operator ( * )

The multiplication operator multiply two operands.

Example:

var x = 2;
var y = 5;
var z = x * y;  // 10

The Division Operator ( / )

The division operator divide left operand by right operand.

Example:

var x = 6;
var y = 2;
var z = x / y;  // 3

The Modulus Operator ( % )

The modulus operator divide left operand by right operand and get remainder.

var x = 17;
var y = 5;
var z = x / y;  // 2

The Exponentiation Operator ( ** )

The exponentiation operator raise the left operand to the power of right operand.

Example:

var x = 2 ** 2;  // 4
var y = 2 ** 3;  // 8
var z = 8 ** 2; // 64

Let's see another example, where -2 ** 3. This will give error. "Uncaught SyntaxError: Unary operator used immediately before exponentiation expression. Parenthesis must be used to disambiguate operator precedence".  To remove this precedence ambiguity between unary minus and exponentiation you can use ( ).  So you can re-write it as (-2) ** 3 or -(2 ** 3) both will work and in both cases result will be -8.

The Unary Negation Oprator ( - )

The unary negation operator simply return negation of its operand.

Example:

var x = 5;
console.log(-x);  // -5

The Unary Plus Operator ( + )

The unary plus operator converts its operand to a number or to NaN,

Example:

var x = "2";
var y = 2;
console.log(+x + y);  // 4

Few more examples of unary plus operator.

console.log(+"3" +3 + 3);  // 9
console.log(+"3" +3 + "3");  // "63"
console.log(+"3" +3 + +"3");  // 9
console.log(+"Hi" +3); // NaN

The Pre or Post-Increment Operator ( ++ )

The increment operator adds 1 to its operand. It could be pre increment or post increment.

• The pre-increment means. First increment then return the value.
• The post increment means. First return the value then increment.

Example: Pre-Increment

var x = 5;

//First value of x will be incremented by 1. 
//The x will become 6, then value of x, 6 will be assigned to variable y.
var y = ++x;

console.log(x);  //6
console.log(y);  //6

Example: Post-Increment

var x = 5;

//First value of x, 5 will be assigned to y. Then x will be incremented by 1.
var y = x++;

console.log(x);  //6
console.log(y);  //5

The Pre or Post-Decrement Operator ( -- )

The decrement operator subtract 1 from its operand. It could be pre decrement or post decrement.

• The pre-decrement means. First decrement then return the value.
• The post decrement means. First return the value then decrement.

Example: Pre-Decrement

var x = 5;

//First value of x will be decremented by 1. 
//The x will become 4, then value of x, 4 will be assigned to variable y.
var y = --x

console.log(x);  //4
console.log(y);  //4

Example: Post-Decrement

var x = 5;

//First value of x, 5 will be assigned to y. Then x will be decremented by 1.
var y = x--;

console.log(x);  //4
console.log(y);  //5