Credit : Tanmay Sankalp
Operators: Operators are basic mathematical symbols that perform some sort of operation/function on operands.
3 + 5 = 8
3,5 is Operand
+,= is Operator
Topics
Basic Operators
+, -, *, /, %Comparison Operators
>, <, >=, ==,===Ternary Operator
?Logical Operators
||, &&, !, ??
Basic Operators
Addition +, Multiplication *, Subtraction -, Division (quotient) /
let a = 10;
let b = 5;
console.log(a+b); // Output : 15
console.log(a*b); // Output : 50
console.log(a-b); // Output : 5
console.log(a/b); // Output : 2
Remainder %, Exponentiation **
let a = 4;
let b = 2;
console.log(a%b); // Output : 0
console.log(a**b); // Output : 16
Special use of + operator. It is also used for string concatenation. After the introduction of Backticks (``) in the ES6 version.It is not used that frequently.
NOTE:
+has a special feature to convert operand to string other operators works only with number
console.log("Vansh " + " Sharma") // Output "Vansh Sharma"
console.log('5' + 1) // Output "51"
console.log(2+'2'+'1') //Output "221"
Comparison Operators
These are operators are used to compare two values. Comparison operators always returns result in Boolean form true( means 'Yes','Correct'), false(means 'No','Wrong'). JavaScript converts the value to numbers so always use strict comparison.
Greater than >, Less than <, Greater than and equal >=, Less than and equal <
console.log(5 > 4); // Output true
console.log(5 < 4); // Output false
console.log(5 >= 4); // Output true
console.log(5 <= 5); // Output true
Double Equals == only compares the value, Triple Equals === compares the value and datatype both, Not Equal !=/!== It is always preferred to use the latter.
console.log(5 == "5") // Output true because it compared 5 with 5
console.log(5 === "5") // Output false because it compared number(5) with string(5)
console.log(5 !== "5") // Output true because it compared number(5) with string(5)
String Comparison
Sting comparison follows the English dictionary order (Unicode).
While comparing the small letter with a capital letter. Small letters are always considered greater because of the greater index.
console.log('Z' > 'A') // true
console.log('l' > 'm') // false
console.log('k' > 'Z') // true
Point to remember
>,<,>=,<=convertsnull,undefinedto 0 and NaN respectively.nullandundefinedare only equal (==) to each other.
console.log(null == undefined) // true
console.log(null === undefined) // false
console.log(null == 0) // false
console.log(null <= 0) // true becasue null gets converted into 0
Ternary Operator
It is used as an alternative to small if code.
NOTE: Do not use as a complete alternative to
ifoperator, use this only with smallifcode expressions.
Syntax:
let result = condition ? value1(if condition is true) : value2(if condition is not true
let a, b;
a = 5;
b = 7;
let finalAnswer =
a > b ?'a is greater than b' : ' a is less than b';
console.log(finalAnswer) // a is less than b
Logical Operators
|| (OR)
It always returns the first truthy value. Don't check after that.
Converts the operand to boolean to evaluate the result.
If all operands return the
false, returns the last operand.
console.log(5 || 0); // 5 ( only truthy value)
console.log(0 || null || undefined || 3); // 3 ( only truthy value)
console.log(undefined || 0 || null); // null ( if all are false return the last value)
&& (AND)
It always returns the first falsy value. Don't check after that.
Converts the operand to boolean to evaluate the result.
If all operands return the
true, returns the last operand.
console.log(5 && 0); // 0 (only falsy value)
console.log(1 && null && 5); // null (only falsy value)
console.log(5 && true && 3); // 3 (if all are true returns the last value)
! (NOT)
Converts the operand to boolean type to evaluate the result.
Returns the inverse value.
console.log(!0) // true (because inverse of 0( false) is true)
console.log(!5) // false (because inverse of 5( true) is false)
console.log(!" ") // false (because " " is not empty string so inverse is false)
?? Nullish coalescing operator
It returns the first defined value whereas
||returns the first truthy value.0 for || is falsy on the other hand 0 for the ?? is defined value.
console.log(null ?? undefined ?? 1) // 1 returns the defined value
console.log(0 ?? 1) // 0 because ?? consider 0 as defined value
console.log(0 || 1) // 1 because || consider 0 as falsy value
Points to remember
console.log("" || 5) // 5 (because empty string is 0 (falsy))
console.log(" " || 5) // " " here output is blank space even space is consider as non-empty
console.log( null || 2 && 3 || 4 ) // 3 because precedence of && is higher than that of || )
References
Basic Operators
Comparison Operators
Ternary Operators
Logical Operators
Nullish coalescing operator