JavaScript Operators

JavaScript uses a number of operators in various expressions, below is an overview of them.

Arithmetic operators

Arithmetic operators are used in mathematical operations:

+ (Addition)
The addition operator (+) adds numbers

var result = 1 + 2; // 3

– (Subtraction)
The subtraction operator (-) subtracts the right number from the left

var result = 3 - 2; // 1

* (Multiplication)
The multiplication operator (*) multiplies numbers

var result = 2 * 3; // 6

/ (Division)
The division operator (/) divides one number by another

var result = 8 / 4; // 2

% (Modulo)
The modulo operator (%) returns the remainder after division of one number by another

var result = 8 / 5; // 3

In addition to the operators listed above, there are unary operators which modify the value of one operand:

+ (Unary plus)
The unary plus operator (+) converts a value to a number. It works in the same way as the Number() casting function. If the value cannot be converted to a valid number, result of the conversion is NaN.

var result = +"3.4"; // 3.4

var result2 = +false; // 0

var result3 = +"abc"; // NaN

– (Unary negation)
The unary negation operator (-) negates the value of the operand. Used on non-numeric values it works like the unary plus.

var x = 6;

var result = -x; // -6

var result = -"def"; // NaN

++ (Increment)
The increment operator (++) adds 1 to its operand. Pre-increment version of operator (++x)  increments its operand by 1 and returns the new value  in the expression. Post-increment version of operator (x++) also increments its operand by 1, however returns its original value in the expression.

var x = 2;

var y = ++x; // y = 3, x = 3

var t = 2;

var u = t++; // u = 2, t = 3

— (Decrement)
The decrement operator(–) subtracts 1 from its operand. It works in an analogous manner like increment operator.

var x = 2;

var y = --x; // y = 1, x = 1

var t = 2;

var u = t--; // u = 2, t = 1

Assignment operators

= (Assignment operator)
The assignment (=) operator is used to assign a value to the variable or property.

x = 2

There are other assignment operators that combine an operation with assignment. Their brief overview is in the table below:

Destructing

Destructing is a convenient way of extracting multiple values from data stored in arrays and objects. Destructuring assignment syntax mirrors the construction of array and object literals.

Array destructuring

Assignment with variable declaration:

var container = [1, 'two', {x : 3}];
var [a, b, c] = container;
console.log(a); // 1
console.log(b); // two
console.log(c); // Object { x: 3 }

Alternatively, assignment with separate variable declaration:

var container = [1, 'two', {x : 3}];
var x, y, z;
[x, y, z] = container;
console.log(x); // 1
console.log(y); // two
console.log(z); // Object { n: 3 }

Object destructing

Assignment with variable declaration:

var obj = {alpha: 100, beta: 'dev'};
var {alpha, beta} = obj;
console.log(alpha); // 100
console.log(beta); // dev

Alternatively, assignment with separate variable declaration:

var obj2 = {delta: 1001, gamma: 'dev1'};
({delta, gamma} = obj2);
console.log(delta); // 1001
console.log(gamma); // dev1

Comparison operators

Comparison operators (also known as relational operators) compare two values and return true or false depending on the relationship between them. Results of comparison are often used to control the flow of program. If the two operands are different types, interpreter attempts to convert them to suitable type.

== (Equality)
The equality operator (==) checks if two values are the same. If the operands are of different types, it performs conversions, to determine equality. It returns true if both operands are equal.

var x = 3;

x == 3 // true

x == '3' // true, conversion was done

x == 3.1 // false

y = 0;

y == false // true, conversion was done

=== (Strict equality)
The strict equality operator (===) also checks if two values are the same. However it returns true if both operands are equal and of the same type.

var x = 3;

x === 3 // true

x === '3' // false

y = 0;

y === false // false

!= (Inequality operator)
The inequality operator (!=) is opposite to equality operator and returns true if operands are not equal.

var x = 4;

x != 4 // false

x != '4' // false

x != 5 // true

y = 0

y != false // false

y != true // true

!== (Strict inequality operator)
The strict inequality operator (!==) is opposite to strict equality operator and returns true if operands are not equal or are equal but of different type.

var x = 4;

x !== 4 // false

x !== '4' // true

x !== 5 // true

y = 0

y !== false // true

y !== true // true

Several next comparison operators check relative order of its operands. It can be numerical or alphabetical order. Operands that are different types than number or string are converted to one of them.

< (Less than)
The less than operator (<) returns true if the first operand is less than the second.

var x = 5;
x < 6 // true
x < '6' // true
x < 4 // false

> (Greater than)
The greater than operator (>) returns true if the first operand is greater than the second.

var x = 5;
x > 4 // true
x > '4' // true
x > 6 // false

<= (Less than or equal)
The less than or equal operator (<=) returns true if the first operand is less than or equal to the second.

var x = 5;
x <= 6 // true
x <= 5 // true
x <= 4 // false

<= (Greater than or equal)
The greater than operator or equal (<=) returns true if the first operand is greater than or equal to the second.

var x = 5;
x >= 4 // true
x >= 5 // true
x >= 6 // false

Logical operators

Logical operators return result of logical operation. They often occur in conjunction with relational operators.

&& (Logical AND)
The logical AND operator (&&) returns true if both its operands are true (or are converted to true). If one or both operands are false (are converted to false) it returns false.

var x = true, y = true, z = false;
x && y // true
x && 5 // true
x && z // false
z && 0 // false
x == true && z == false // true

|| (Logical OR)
The logical OR operator (||) returns true if one or both its operands are true. If both operands are false it returns false.

var x = true, y = true, z = false;
x || y // true
x || z // true
x == true || z == true // true
z && 0 // false

! (Logical NOT)
The logical NOT operator (!) is a unary operator placed before a single operand. It returns true if its operand can be converted to false. Otherwise it returns false

var x = 2, y = 0;
!x // false
!y // true

Bitwise operators

Bitwise operators operate on a low-level binary representation of numbers. They are rarely used in JavaScript.

& (Bitwise AND)
The bitwise AND operator (&) returns 1 in each bit position if the corresponding bits of both operands are 1.

| (Bitwise OR)
The bitwise OR operator (I) returns 1 in each bit position if the corresponding bits of one or both operands are 1.

^ (Bitwise XOR)
The bitwise XOR operator (^) returns 1 in each bit position if the corresponding bits of operands have unequal values (one of them is 1 but not both).

~ (Bitwise NOT)
The bitwise NOT operator (~) is a unary operator, reverse all bits in its operand, converts all 0 bits to 1 and 1 bits to 0.

Concatenation operator

The concatenation operator (+) concatenates string values and returns a new string which is combination of operands.
If only one operand is string value, type conversion is performed. String concatenation has priority over addition.

"xyz" + " " + "qwe"; // "xyz qwe"
2 + "3" // 23
"3" + 4 // 34
4 + 5 // 9

Conditional operator

The conditional (ternary) operator (?:) is operator that uses three operands. The first operand is condition and evaluates to boolean value. If condition is true, the value of second operand is returned, otherwise it is returned the value of third operand. It is a compact equivalent of if-else statement.
It is useful because it can be used in constructions in which the use of the normal if-else syntax is not possible.

var type = (x <= 90) ? 'light' : 'heavy';