JavaScript Course 2: Operators
References
- Code with Mosh: The Ultimate JavaScript Mastery Series – Part 1
- W3School: JavaScript Operators
- W3School: JavaScript Comparison and Logical Operators
- W3School: JavaScript Arithmetic
Operators in JavaScript
The different kinds of operators in JavaScript are as follow:
- Arithmetic operators
- Assignment operators
- Comparison operators
- Ternary (conditional) operators
- Logical operators
- Bitwise operators
Expression in JavaScript is something that produces a value, for example x + y is an expression.
let x = 10;
let y = 3;
console.log(x ** y); // Exponetiation: 'x' to the power of 'y'
1000
Arithmetic operators
Arithmetic operators are used for performing calculations just like we performing calculations in mathematics. The Arithmetic operators are:
+Addition operator−Subtraction operator*Multiplication operator/Division operator%Remainder of division operator (modulus)**Exponentiation operator++Increment operator--Decrement operator
console.log(x + y); // 13
console.log(x - y); // 7
console.log(x * y); // 30
console.log(x / y); // 3.3333333333333335
console.log(x % y); // 1
console.log(x ** y); // 1000
console.log(++x); // 11 (the value is incremented by 1 before the expression evaluation)
console.log(x++); // 10 (the value is incremented by 1 after the expression evaluation)
console.log(--x); // 9 (the value is decremented by 1 before the expression evaluation)
console.log(x--); // 10 (the value is decremented by 1 after the expression evaluation)
Assignment operators
Assignment operators are used to assign a value to a variable. Assignment operators are:
=Simple assignment operator+=Addition assignment operator−=Subtraction assignment operator*=Multiplication assignment operator/=Division assignment operator%=Remainder of division assignment operator**=Exponentiation assignment operator++Increment operator also assign a new value to the variable--Decrement operator also assign a new value to the variable
x++; // is equal to
x = x + 1; // is equal to
x += 1;
x = 10; console.log(x); // 10
x += 10; console.log(x); // 20
x -= 10; console.log(x); // 10
x *= 10; console.log(x); // 100
x /= 10; console.log(x); // 10
x **= 3; console.log(x); // 1000
x %= 3; console.log(x); // 1
Comparison operators
Comparison operators are used to compare the value of a variable with something else and return a Boolean true/false . Comparison operators are:
Relational operators
>Is greater than?>=Is greater than or equal to?<Is less than?<=Is less than or equal to?
x = 1;
console.log(x > 0 ); // true
console.log(x >= 1); // true
console.log(x < 1 ); // false
console.log(x <= 1); // true
Equality operators
===Is equal to? (strict equality operator: compare the Value and the Type of the variable)!==Is not equal to? (strict not equality operator: compare the Value and the Type of the variable)==Is equal to? (lose equality operator: compare only the Value the variable)!=Is not equal to? (lose not equality operator: compare only the Value of the variable)
let x = 1;
console.log(x === 1); // true
console.log(x !== 1); // false
console.log(x === '1'); // false (because '1' is a string not a number)
console.log(x == '1'); // true (because we compare only the values)
console.log(x == true ); // true (because 'x' will be converted to a bulean before the evaluation)
console.log(x == false); // false
console.log(x === true); // false (because 'x' is a number not a bulean)
Ternary (conditional) operators
Ternary (conditional) operators assigns a value to a variable based on some condition.
let variable = (condition) ? value_if_true : value_if_false;
let poinsts = 110;
let type = points > 100 ? 'good customer' : 'bad customer';
console.log('The customer is: ' + type);
The customer is: good customer
Logical operators
Logical operators are used to make decisions based at multiple conditions that return Boolean values – false or true. In JavaScript we have three types of logical operators.
&& Logical AND – returns TRUE if both operands are TRUE.
console.log(true && true ); // true
console.log(false && true ); // false
console.log(true && false); // false
|| Logical OR – returns TRUE if one operands are TRUE.
console.log(true || true ); // true
console.log(false || true ); // true
console.log(true || false); // true
console.log(false || false); // false
! Logical NOT – gives an opposite logic.
console.log(! true ); // false
console.log(! false); // true
Note the following construction could be useful in some cases but it is not substitution of if.. then.. else statement, and should be used carefully:
(true) && console.log('then do') || console.log('else do');
In this case (in a real world application) if the expressing 'then do' in someway returns true the expression 'else do' will be executed too.
Logical operators with Non-booleans – Truthy and Falsy
Within JavaScript we can use the logical operators with non boolean values. Here is how a logical expression works with boolean values:
console.log(false || true); // true (as it is in the examples above)
The result of a logical expression is not necessarily a true or false that depends on the values and the operands we have.
console.log(false || 'Spas'); // "Spas"
console.log(false || '1'); // 1
The JavaScript engine tries to evaluates the expressions, looks at each operand and if the operand is not a boolean true or false it will tried to interpreted as what we called truthy or falsy. Falsy is not exactly a boolean false and truthy is not a boolean true.
The JavaScript falsy values are:
undefinednull0false''(empty string)NaN(not a number)
Anything is not falsy is truthy!
Examples with short-circuiting where the evaluations stops at some truthy value, no matter how many other operands we have on the right side they will be ignored:
console.log(false || 1 || 2); // 1
console.log(false || 1 || 0 || 2); // 1
An example for providing default values by using this technique.
let userColor = 'red';
let defaultColor = 'blue';
let currentColor = userColor || defaultColor;
console.log(currentColor);
red
userColor = undefined;
console.log(currentColor);
blue
Bitwise operators
Bitwise operators are similar to Logical operators but they work wit the individual bits of a number. Bitwise operators are rarely used in the days practice, but they have their place.
| Numbers in Decimal system | Numbers in Binary system |
|---|---|
1
|
00000001
|
2
|
00000010
|
3
|
00000011
|
4
|
00000100
|
5
|
00000101
|
| Numbers in Decimal system | Numbers in Binary system |
|---|---|
6
|
00000110
|
7
|
00000111
|
8
|
00001000
|
9
|
00001001
|
0
|
00000000
|
- In the binary system each number is represented ot 8‑bits, that 1‑byte: wikipedia:Binary_number, https://decimaltobinary.pro/
| Bitwise OR (single pype/vertical line). It compares each bit of the binary numbers in the expression and if one of them is 1 it returns 1.
console.log(1 | 2); // 3
1 = 00000001
2 = 00000010
3 = 00000011 (this is the result)
& Bitwise AND (single ampersand). It compares each bit of the binary numbers in the expression and if one of them is 0 it returns 0.
console.log(1 & 2); // 0
1 = 00000001
2 = 00000010
0 = 00000000 (this is the result)
In JavaScript there are few more Bitwise operators, but in the real world these are not that common. For more details read the article: W3Schools: JavaScript Bitwise Operations. One real world example of Bitwise operators usage is Bitwise operators for permissions.
Operators Precedence
console.log(100 + 50 * 3); // 250
As in traditional school mathematics, the multiplication is done first. Multiplication (*) and division (/) have higher precedence than addition (+) and subtraction (-). And (as in school mathematics) the precedence can be changed by using parentheses:
console.log((100 + 50) * 3); // 450
More about the operators precedence could be found at the article W3School: JavaScript Arithmetic – JavaScript Operator Precedence Values.
String operators
The + operator can also be used to add (concatenate) strings.
let text1 = "John";
let text2 = "Doe";
let text3 = text1 + " " + text2;
console.log(text3);
John Doe
The += assignment operator can also be used to add (concatenate) strings:
let text1 = "What a very ";
text1 += "nice day!";
console.log(text1);
What a very nice day!
If you add a number and a string, the result will be a string!
Type operators
typeof– returns the type of a variable.instanceof– returns true if an object is an instance of an object type.
For more information read: 1) W3School: JavaScript Type Conversion, 2) W3School: Java instanceof Keyword, 3) W3School: JavaScript typeof.
