WHAT ARE OPERATORS?
Operators are the signals that can calculate or chain any value and data.
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
+ 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"
– can subtract numbers:
let subtract = 6 - 3; // A result will be 3
* can multiple numbers:
let multiple = 10 * 100; // A result will be 1000
/ can divide numbers:
let divide = 100 / 10; // A result will be 10
= 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
++ 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
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
> 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
① – ③: evaluated in the order of x -> y
④: return false when the left side is falsy
④: x will not be evaluated
> 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
① – ③: y is not evaluated because x is true
④: Returns the result of evaluating x because y is false
> 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
> Here is a post of a conditional statement
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.
You can play how operators work on the web console a and would find several errors.
> 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.