JavaScript Operators: The Basics You Need to Know
What will we study?
In this blog, we will study some topics related to JavaScript Operators. These are:
What Operators are?
Types of Operators
The blog would be in chill language and tone so that beginners feel good. Examples would be chiller so sit back relaxed and have a tea.
What are Operators?
In JavaScript or any other programming language, Operators are specific symbols or keywords that are used to tell the language's engine to perform a specific function on values or variables.
Today we'll discuss about the following types of Operators:
Arithmetic Operators
Comparison Operators
Logical Operators
Assignment Operators
So, along with some really cool examples let's jump into it
Arithmetic Operators
These operators are used to perform Maths on values or variables.
Addition (+) Operator
Used for performing addition
console.log(4 + 7) // output: 11
console.log("5" + "5") // output: 55 (+ operators adds two strings)
Subtraction (-) Operator
Used for performing subtraction
console.log(19 - 4) // output: 15
Multiplication (*) Operator
Used for performing multiplication
console.log(4 * 7) // output: 28
Division (/) Operator
Used for performing division
console.log(12 / 3) // output: 4
Remainder (%) Operator
Used for finding the remainder of division of 2 values or variables
console.log(8 % 2) // output: 0
console.log(5 % 3) // output: 2
// Keep in mind that this tells you about the remainder don't link it with percentage
Exponential (**) Operator
Used to get exponential value
console.log(4 ** 3) // output: 64
Comparison Operators
This operator is used to compare two values or variables.
They return a boolean as a result.
Loose Equality Checker (==)
This operator checks whether two values are equal or not.
It doesn't care about type.
console.log(3 == 1) // false
console.log(2 == 2) // true
console.log(2 == "2") // true (because values are same)
Strict Equality Checker (===)
This operator checks whether two values are equal or not.
It cares about type.
console.log(3 === 1) // false
console.log(2 === 2) // true
console.log(2 === "2") // false (because type is different)
Loose Unequality Checker (!=)
This operator checks whether two values are unequal or not.
It doesn't cares about type.
console.log(3 != 1) // true
console.log(2 != 2) // false
console.log(2 != "2") // false (because the values are same)
Strict Unequality Checker (!==)
This operator checks whether two values are unequal or not.
It cares about type.
console.log(3 !== 1) // true
console.log(2 !== 2) // false
console.log(2 !== "2") // ture (because it type is different)
Greater Than Checker (>)
- Checks whether first value is greater than second one.
console.log(3 > 1) // true
console.log(2 > 2) // false
console.log(1 > 3) // false
Less Than Checker (<)
- Checks whether first value is less than second one.
console.log(3 < 1) // false
console.log(2 < 2) // false
console.log(1 < 3) // true
Greater Than or Equal to Checker (>=)
- Checks whether first value is greater than or equal to second one.
console.log(3 >= 1) // true
console.log(2 >= 2) // true
console.log(1 >= 3) // false
Less Than or Equal to Checker (<=)
- Checks whether first value is less than or equal to than second one.
console.log(3 < 1) // false
console.log(2 < 2) // true
console.log(1 < 3) // true
Logical Operators
These operators are a mixture of boolean results combined together to give a single result.
Mostly used in Conditionals (if, else if, else)
And (&&) Checker
- Checks whether both are true
console.log(5 > 7 && 2 < 4) // false because 1st condition is false
console.log(2 === 2 && 3 >= 1) // true
Or (||) Checker
- Checks whether any one is true
console.log(5 > 7 || 2 < 4) // true because 2nd condition is true
console.log(2 !== 2 || 3 < 1) // false because both are false
Not (!) Checker
- Negates the resulting boolean
console.log(!(5 > 7 || 2 < 4)) // false because the whole condition is true but ! negates it
console.log(!(2 !== 2 || 3 < 1)) // true because the whole condition is false but ! negates it
Assignment Operators
These operators are used to assign values to the variables or change values in the variables
Basic Assignment (=) operator
This operator just simply assigns a value to a variable
let number = 6
console.log(number) // output: 6
Assign and Add (+=)
This operator adds some value to a variable
let number = 6
number += 4
console.log(number) // output: 10
// number += 4 can easily mean number = number + 4
Assign and Subtract -=)
This operator subtracts some value to a variable
let number = 6
number -= 4
console.log(number) // output: 2
// number -= 4 can easily mean number = number - 4
Assign and Multiply (*=)
This operator multiplies some value to a variable
let number = 6
number *= 4
console.log(number) // output: 24
// number *= 4 can easily mean number = number * 4
Assign and Divide (/=)
This operator divides some value to a variable
let number = 6
number /= 3
console.log(number) // output: 2
// number /= 3 can easily mean number = number / 3
Assign the remainder (%=)
This operator assigns the remainder to the variables.
let number = 6
number %= 4
console.log(number) // output: 2
// number %= 4 can easily mean number = number % 4
Assign the exponential (**=)
This operator assigns the exponential value to the variables.
let number = 6
number **= 4
console.log(number) // output: 1296
// number **= 4 can easily mean number = number ** 4
Use Case?
Let's write a simple if-else if-else to see the use of these operators:
// Age checker for driving
let age = 18
if (age > 120 || age < 0) {
console.log("Age must be a valid number")
} else if (age < 18) {
console.log("You can't drive")
} else {
console.log("You can drive")
}
See how we took these operators in handy
We assigned a value to the age variable using = operator.
We checked whether age is greater than 120 using > operator.
We checked whether age is less than 0 using < operator.
We compared both of the results using || operator for having a vaild age.
We used < operator again to check whether the age is under 18.
Conclusion
So, today we learned about the basic operators and made a simple age checker for understanding that more deeply.
That's it for this blog i'll catch you up in the next one.
Hope it helped :)