Contents
WHAT ARE OPERATORS?
Operators are the signals that can calculate or chain any value and data.
JavaScript can do a math. For instance:
+ addition,
const addition = 1 + 2;
//This will return a value of 3.
const subtraction = 30 - 2;
//This will return a value of 28.
In this lesson, we are going to learn how to handle each operators with their examples.
Examples | Mathematical Assignment Operators
+ addition
+ can add numbers:
let subtract = 6 + 3;
// A result will be 9
it can be not only adding numbers but also chaining strings:
let fruit = "apple";
let add = " & "
let juice = "orange juice";
const stringChain = fruit + juice;
// A result will be "apple & orange juice"
– subtraction
– can subtract numbers:
let subtract = 6 - 3;
// A result will be 3
* multiplication
* can multiple numbers:
let multiple = 10 * 100;
// A result will be 1000
/ division
/ can divide numbers:
let divide = 100 / 10;
// A result will be 10
= assignment
= assignment operator will assign a values to a variable. You can combine assignment operator and other operators to clarify a code, like +=, -=.
let num = 1;
num += 10; // A result will be => 11
This code above is same as:
let num = 1;
num = num + 10; //A result will be => 11
++ Increment Operator
The increment operator, ++, will increase the value of the variable by 1.
let num = 1;
num++;
// // A result will be => 2
— Decrement Operator
The decrement operator, —, will decrease the value of the variable by 1.
let num = 1;
num--;
// // A result will be => 0
NOTICE:
++ and — are typically used in Loop statement to increase or decrease a value. You will see them by going to the lesson more further.
> Here is a post of a conditional statement
Examples | Comparison Operators
Comparison operators compare the value on the left with the value on the right.
=== Is equal to
=== operator compare each values whether they are same or not, and evaluate it to true or false.
1 === 1; // A result will be => true
1 === "1"; // => A result will be => false.
'apples' === 'oranges' // false
NOTICE:
In the second line, since either one is type of number and the other hand is type of string, the result will be false.
!== Is NOT equal to
=== operator compare each values whether they are different or not, and evaluate it to true or false.
3 === 3; // A result will be => false.
3 === "3"; // => A result will be => true.
'beer' === 'wine' // true
NOTICE:
> When both operators would be different values, !== operator will return true since it compare if they are different or not, and vise versa.
<:> Less than:Greater than
< will return true if a left value is less than a right one. While > will return true if a left value is greater than a right one.
120 < 300; // A result will be => true
100 > 100; // A result will be => false
<=:>= Less than or equal to:Greater than or equal to
< will return true if a left value is less than or equal to a right one. While > will return true if a left value is greater than or equal to a right one.
30 >= 30; // A result will be => true
150 >= 151; // A result will be => false
150 <= 151; // A result will be => true
Examples | Logical Operators
Logical operators will change a final result according to a evaluated result of value on the left.
&& AND Operator
&& AND Operator will return either true or false based on the evaluated result on the right only when the evaluated result on the left is true.
const x = true;
const y = false;
console.log(x && y); // => false
console.log(y && x); // => false
Break down
① – ③: evaluated in the order of x -> y
④: return false when the left side is falsy
④: x will not be evaluated
NOTICE:
> If the evaluation on the left is not true, the right is not evaluated. When such a value is determined, no further evaluation is called short-circuit evaluation (short circuit).
|| OR Operator
|| OR Operator will return either true or false based on the evaluated result on the right only when the evaluated result on the left is false.
const x = true;
const y = false;
console.log(x || y); // => true
console.log(y || x); // => true
Break down
① – ③: y is not evaluated because x is true
④: Returns the result of evaluating x because y is false
NOTICE:
> Contrary to the && operator, returns true without evaluating the right side if the left side is true.
! NOT Operator
! NOT Operator will return true when the evaluated result of values is false, and vise versa.
console.log(!false); // => true
console.log(!true); // => false
NOTICE:
In JavaScript, logical operators will work with boolean values. We can use logical operators to add more sophisticated logic to our conditionals.
> Here is a post of a conditional statement
EVALUATE OPERATORS
Let’s try the operators out with the web console like we have tried in previous post.
How to evaluate operators in the browser
Open up a Chrome browser and use a shortcut key CONTROL + SHIFT + I. (If your computer is Mac, the shortcut key will be COMMAND + OPTION + I)
Press a second button on the right and top, then you can try to operate any value.
Like this:
You can play how operators work on the web console a and would find several errors.
REVIEW OPERATORS
> Mathematical Assignment Operators can calculate the values or chain the strings.
> Comparison Operators compare the values to be used at conditional statements.
> Logical Operators anyway return Boolean values.
> Logical Operators will be active at conditional statements.
