Operators and Operations

Operators in JavaScript are symbols that can perform operations on certain values and data types. The most basic example are the arithmetic operators: +, -, * and /. Operators each have a corresponding operation, can be binary or unary, and can accept a fixed set of values

A binary operator is one that can operate on two values, and a unary operator can operate only on one value

A value that an operator performs an operation on is called an operand

The following section has a few tables of operators, their corresponding operations and their accepted operand(s).

Arithmetic operators

These are the classic addition, subtraction, multiplication and division operators that are nearly standard across languages:

• + for addition

• - for subtraction

• * for multiplication

• and / for division

These are all binary operators that take two numbers in as operands.

As an aside, the + operator also allows for string concatenation and array concatenation:

let str1 = "hello";
let str2 = "world";
str1 + str2; // evaluates to "helloworld"

let arr1 = [1, 2];
let arr2 = [3, 4];
arr1 + arr2; // evaluates to [1, 2, 3, 4]

Other math operators

• The ** operator allows for exponents:

let x = 2;
let y = 3;
x ** y; // 8

• The % operator gets the remainder after division

let x = 5;
let y = 3;
x % y; // 2

Comparison operators

These operators allow for, as you can guess, comparing two values. They are binary operators that return a boolean value. The symbols are as follows, with their usage with numbers being as expected:

• a > b returns true if a is greater than b

• a >= b returns true if a is greater than or equal to b

• a < b returns true if a is lesser than b

• a <= b returns true if a is lesser than or equal to b

• a !== b returns true if a is not equal to b

The comparison operators can also be used to compare two strings; they return true or false based on a character-by-character comparison of the two strings. An example is below:

let str1 = "abcd";
let str2 = "abdc";
str1 > str2; // returns false

The way the above works is that the first character in each string are compared. If they are equal, then the next character in each string are compared. Eventually, when two characters in a string are unequal, then they are compared according to the operator (after internally converting the characters to their numeric ASCII values) and a boolean value returned accordingly.

If one string ends before the other and all characters up till that point are the same, the longer string is deemed the "greater" value:

"abcd" > "abc"; // returns true

Equality operators

The equality operation has two possible operators, each of which function slightly differently.

The first is the "triple-equals" or the "type-strict equals" operator: ===. This operator works as you would expect:

2 === 2; // returns true
2 === 3; // returns false
2 === "abcd"; // returns false
2 === "2"; // returns false
2 === [2]; // returns false

The second is the "double-equals" or the "type-lax equals" operator: ==. This operator works similar to the type-strict equals operator, except that it implicity converts the two operands to the same datatype:

2 == 2; // returns true
2 == 3; // returns false
2 == "abcd"; // returns false
2 == "2"; // returns true, because "2" is converted to 2
2 == [2]; // returns true, because [2] is converted to 2
2 == [2, 2]; // returns false, because there is more than one value in the array now

It is good practice to stick to more strict typing in your program, to prevent the chance of errors propagating. On the other hand, sometimes it may be prefered to use the type-lax equals, such as in cases where a value has to store the number 2 but it is irrelevant whether it is in a string, array, or as a primitive number. But such cases are rare.

Logical operators

These operators can take one or two boolean expressions and returns a boolean value. They are often combined with comparison operators.

AND

The AND operator, && (double ampersand symbol), is a binary operator that compares two boolean values expressions and returns true only if both the expressions evaluate to true. If either one of the expressions evaluate to false, then && returns false.

2 === 2 && 3 < 4; // true because 2 is equal to 2 AND 3 is less than 4
2 === 2 && 3 > 4; // false because 3 is not greater than 4
2 === 3 && 3 > 4; // false

OR

The OR operator, || (double bars), is a binary operator that compares two boolean expressions and returns true if either one of them evaluates to true. If both the expressions evaluate to false, then the operator returns false.

2 === 2 || 3 < 4; // true
2 === 2 || 3 > 4; // true because 2 is equal to 2
2 === 3 || 3 > 4; // false because 2 is not equal to 3 and 3 is not greater than 4

NOT

The NOT operator, !, is a unary operator that reverses a boolean expression's value. If the expression evaluates to true, it returns false; if the expression evalutes to false then it returns true. It does not change the original expression's value

let value = 2 === 2 || 3 < 4; // true
!value; // false
value; // still true

Assignment operators

Value assignment operator

As seen before, this operator has the symbol = and allows you to assign a value to a variable or constant. Example:

let x = 10; // assigning 10 to x

Operation assignment operators

This class of operators are formed by combining a binary logical or mathematical operator with the value assignment operator: op=. They can then be used as an assignment operator, assigning a value to a variable while performing the binary operation on both. Essentially: a op= b is the same as a = a op b. Some examples are below:

let x = 10;
x += 5; // same as x = x + 5; x is now 15
x -= 2; // same as x = x - 2; x is now 13
x *= 10; // same as x = x * 10; x is now 130
x **= 2; // same as x = x ** 2; x is now 16900
x; // 16900

let y = x > 1000; // 16900 is greater than 1000, so y is true
y &&= (x !== 4); // same as y = y && (x !== 4)
// x is not equal to 4, so the expression in brackets evaluates to true
y; // true && true gives true

Increment and decrement operators

These two unary operators allow to increment and decrement numeric variable values by 1. The increment operator is a double plus (++) and the decrement operator is a double minus (--). They can be placed either behind or in front of a variable name, and are accordingly called pre- or post-increment or decrement.

let m = 4;
m++; // post-increment, m is now 5
m--; // post-decrement, m is back to 4
--m; // pre-decrement, m is now 3
++m; // pre-increment, m is back to 4 again

The difference between the pre- and post- version of these operators is to do with their return values:

let x = 10;
let y;
y = ++x; // x is 11, and y is also 11
y = x++; // x is 12, but y remains 11 because the increment happens after assignment

Bitwise operators

These operators allow you to perform bitwise operations like bitwise AND, OR and NOT on values. To see how they work in detail, visit this site.

Type conversion

Recall that JavaScript is a weakly-typed language. This means that you can end up with situations like this:

"10" + 1; // "101" because 1 gets converted to a string and JS performs string concatenation
"10" - 1; // 9 because "10" gets converted to a number and JS performs subtraction
4 / "2"; // 2 because "2" gets converted to a number
"3" * "2"; // 6 because JS converts both operands to numbers
[3] / "10"; // 0.3, same reason

This is one of the reasons it is important to maintain type consistency and stronger typing in your code. It is also wacky issues like this that contributed to the popularity of languages like TypeScript, a strongly-typed version of JavaScript.

Next steps

Now that we have covered data types and operations concerning these datatypes, the next section will cover a few more coding constructs of JavaScript.