Javascript Operators and Expressions
📣 Sponsor
When we do if statements, or a for loop, we make use of Javascript expressions. They let us compare variables, numbers, and other types of data to check if they are true or not. In this tutorial, we'll be looking at how we construct expressions, and the operators we can use in them.
Javascript Comparison Operators
Previously, we have used the below code to check if something is less than something else, in an if
block:
let i = 0;
if(i < 5) {
// Run this code
} else {
// This code will not be run, since i is less than 5.
}
Above, i < 5
is our expression. The less than sign (<) is known as a comparison operator. A whole list of comparison operators can be found below:
Comparison Operator | Definition |
< | Less than, i.e. 1 is less than 5 |
<= | Less than or equal to, i.e. 5 is less than or equal to 5 |
>= | More than or equal to, i.e. 5 is more than or equal to 5 |
> | More than, i.e. 5 is more than 1 |
== | Equal to, i.e. 5 is equal to 5, and "5" is not equal to 5, even though in quotes it is a string |
!= | Not equal to, i.e. 5 is not equal to 4, and 5 is not equal to "4" |
=== | Strict equals to, which considers type, i.e. 5 is equal to 5, but not equal to "5" |
!== | Strict not equals to, which considers type, i.e. 5 is not equal to 4, and 5 is not equal to "5" |
Note, we can also put this information in variables, as shown below:
let i = 10;
let j = i < 20; // returns true
Combining Conditional Operators
We can combine conditional operators with logical operators. There are 3 main types of logical operator. These are &&, || and !.
- || - this means or, so we can chain together two or more expressions to check if one or the other is true.
- && - this means and, so we can chain together two or more expressions to check if all of them are true.
- ! - this means not, so if we put it in front of an expression, we expect the expression to be false.
Examples
let x = 5;
if(x < 10 && x > 1) {
// If x is less than 10 AND x is more than 1, then run this.
}
if(x < 6 || x > 9) {
// If x is less than 6 OR x is more than 9, then run this.
}
if(!(x < 10))) {
// if x is NOT less than 10, then run this.
}
Assigment Operators
Similarly, we have used the following code elsewhere, to set variables:
let i = 1;
But we can also assign using other operators, and these are known as assignment operators. For example, the below code adds 1 to j
permanently:
let j = 1;
// Add 1 to j with an assignment operator..
j += 1;
// j is now 2!
Similarly, we have a number of other assignment operators, which are shown below.
Example of Assignment Operator | What it does |
j += 1 |
Adds 1 to j |
j -= 1 |
Subtracts 1 to j |
j /= 1 |
Divides j by 1 |
j *= 1 |
Multiplies j by 1 |
j %= 1 |
Divides j by 1, and then changes j to the remainder of that calculation |
j **= 1 |
Raises j to the power of 1 |
Conditional Operators
A conditional operator is a single line expression which questions if something is true, returns the first value if it is, and then another if it is not. A typical implementation of it might look like this:
let j = 5;
// Check if j is less than 10, if it is, then set i to "hello", otherwise, set it to "goodbye"
let i = (j < 10) ? "hello" : "goodbye";
Strings
Finally, it is also possible to add two strings together, as shown below:
let j = 'hello';
let k = ' ';
let l = 'world';
// Returns "hello world"
let finalStatement = j + k + l;
More Tips and Tricks for Javascript
- Creating and Generating UUIDs with Javascript
- Making a Morphing 3D Sphere in Javascript with Three.js
- Javascript Dates and How they Work
- Import, Export and Require in Javascript
- Deleting an Item in an Array at a Specific Index
- The Complete Guide to JavaScript Set Type
- How to validate an email with Javascript
- An Introduction to Javascript
- How to fix 'Uncaught SyntaxError: Cannot use import statement outside a module'
- Creating 3d Animated Gradient Effects with Javascript and WebGL