Javascript operators: compare, modify and see your data type

/
javascriptfundamentals

This tutorial is a part of the Learn everything about Javascript in one course.

Arithmetic Operators: + - * / ** % ++ --

Arithmetic Operators allows us to do simple Arithmetic on our data. If we need more on Math, check out Javascript built-in Math.

Operator Description Example Result
+ Addition let x = 1 + 2 x: 3
- Subtraction let y = 3 - 1 y: 2
* Multiplication let z = 2 * 2 z: 4
/ Division let w = 6 / 2 w: 3
** Exponentiation let t = 3 ** 2 t: 9
% Modulus (Division Remainder) let a = 3 % 2 a: 1
++ Increment by 1 let b = 1
b++ or --b		 b: 2
-- Decrement by 1 let c = 1
c-- or --c		 c: 0

While using Increment and Decrement operators with a function, pre-fix or post-fix makes a huge difference.

post/pre fix Description in function itself
myfunc(d++) d is passed into myfunc before incremented d: d d: d + 1
myfunc(++d) d is incremented before passed into myfunc d: d + 1 d: d + 1
myfunc(e--) e is passed into myfunc before decremented e: e e: e - 1
myfunc(--e) e is decremented before passed into myfunc e: e - 1 e: e - 1
arithmetic_operators.js
// Arithmetic Operators: + - * / ** % ++ --

// + Addition
let x = 1 + 2
console.log(x) // 3

// - Subtraction
let y = 3 - 1
console.log(y) // 2

//* Multiplication
let z = 2 * 2
console.log(z) // 4

// / Division
let w = 6 / 2
console.log(w) // 3

// ** Exponentiation
let t = 3 ** 2
console.log(t) // 9

// % Modulus (Division Remainder)
let a = 3 % 2
console.log(a) // 1

// ++ Increment
let b = 1
b++
console.log(b) // 2

// -- Decrement
let c = 1
c--
console.log(c) // 0

// Difference on using Increment and Decrement operators with
// pre-fix and post-fix on function
const print = x => console.log(x)
let d = 2
let e = 2

// d is passed into function BEFORE incremented
print(d++) // 2
console.log(d) // 3

// d is incremented BEFORE passed into function 
print(++d) // 4
console.log(d) // 4

// e is passed into function BEFORE decremented
print(e--) // 2
console.log(e) // 1

// e is decremented BEFORE passed into function 
print(--e) // 0
console.log(e) // 0

Assignment Operators: = += -= *= /= %= **=

Assignment Operators are used to assign a value to a variable. Assignment combined with arithmetic operator are shorthands frequently used.

Operator Description Example Same as
= Assign x = y x = y
+= Addition then assign x += y x = x + y
-= Subtraction then assign x -= y x = x - y
*= Multiplication then assign x *= y x = x * y
/= Division then assign x /= y x = x / y
%= Modulus then assign x %= y x = x % y
**= Exponentiation then assign x **= y x = x ** y
const/let/var ... = ... Declare then assign const x = 1 Declare variable x
then assign 1 to x

String Operators: + +=

String Operators are shorthand to do string concatenation.

Operator Description Example Result
+ Concatenation x = 'abc' + 'd' x: 'abcd'
+= Concatenation then assign let x = 'abc'
x += 'd'		 x: 'abcd'

Comparison Operators: == === != !== > < >= <=

Comparison Operators are to do logical comparison, the result of this comparision is a Boolean value: either true or false.

Operator Description Example Result
== "loose" equal
(only value)		 2 == 2
'2' == 2		 true
true
=== "strict" equal
(value and type)		 2 == 2
'2' == 2		 true
false
!= "loose" not equal
(only value)		 1 != 2
'2' != 2		 true
false
!== "strict" not equal
(value and type)		 1 !== 2
'2' !== 2		 true
true
> Greater than 2 > 1 true
< Less than 1 < 2 true
>= Greater than or equal to 1 > 1
1 >= 1		 false
true
<= Less than or equal to 1 < 1
1 <= 1		 false
true
comparison_operators.js
// Comparison Operators: == === != !== > < >= <=

// == "loose" equal (only value)
console.log(2 == 2) // true
console.log('2' == 2) // true

// === "strict" equal (value and type)
console.log(2 === 2) // true
console.log('2' === 2) // false

// != "loose" not equal (only value)
console.log(1 != 2) // true
console.log('2' != 2) // false

// !== "strict" not equal (value and type)
console.log(1 !== 2) // true
console.log('2' !== 2) // true

// > Greater than
console.log(2 > 1) // true

// < Less than
console.log(1 < 2) // true

// >= Greater than or equal to
console.log(1 > 1) // false
console.log(1 >= 1) // true

// <= Less than or equal to
console.log(1 < 1) // false
console.log(1 <= 1) // true

Conditional Operators: ternary and if shorthand

Ternary Operators and && are shorhand to do quick conditional logic check and follow-up expression.

Operator Description Example Result
... ? ... : ... Ternary operator
var1 = (condition) ? value1 : value2 Ternery assignment:
If condition is true,
assgin value1 to var1,
else assign value2 to var1		 x = (1 > 2) ? 3 : 4 x: 4
(condition) ? expression1 : expression2 Ternery expression:
If condition is true,
run expression1,
else run expression2		 (1 > 2) ? y = 3 : y = 4 y: 4
(condition) && expression And operator && used as if shorthand:
If condition is true,
run expression		 1 < 2 && (y = 5) y: 5
ternery_operator.js
// ? Ternery operator
// Ternery operator with assignment usage
let x
x = (1 > 2) ? 3 : 4
console.log(x) // 4

// Ternery  operator with expression usage
let y
(1 > 2) ? y = 3 : y = 4
console.log(y) // 4


// If shorthand with "&&" operator
true && console.log('hello') // hello
1 < 2 && (y = 5)
1 > 2 && (y = 6)
console.log(y) // 5

Logical Operators: and &&, or ||, not !

Logical Operators output a Boolean value by comparing input of Boolean values.

Operator Description Example Result
&& And: output true if both comparing values are true true && true
true && false
false && true
false && false		 true
false
false
false
|| Or: output true if either comparing values is true true && true
true && false
false && true
false && false		 true
true
true
false
! Not: reverse Boolean value of input !true
!false		 false
true
logical_operators.js
// Logical Operators: and &&, or ||, not !

// "&&" And 
console.log(true && true) // true
console.log(true && false) // false
console.log(false && true) // false
console.log(false && false) // false

// "||" Or 
console.log(true || true) // true
console.log(true || false) // true
console.log(false || true) // true
console.log(false || false) // false

// "!" Not
console.log(!true) // false
console.log(!false) // true

Bitwise Operators

Bitwise operators are not frequently used so it's omitted here. Although some job interviews do have questions on it. You can learn it from MDN.

Get to know the type of your variable: operator typeof, instanceof

Operator typeof will output one of the following string of variable type: number, string, boolean, undefined, function, object.

typeof_operator.js
// Get to know the type of your variable: operator `typeof`

const myFunc = () => {}

console.log(typeof 123) // number
console.log(typeof 'abc') // string
console.log(typeof true) // boolean
console.log(typeof undefined) // undefined
console.log(typeof myFunc) // function
console.log(typeof {}) // object
console.log(typeof []) // object, wrong, DO NOT use
console.log(Array.isArray([])) // true, correct
console.log(typeof null) // object, wrong DO NOT use

Operator instanceof will output true or false if a variable is an instance of a constructor. Syntax object instanceof constructor.

instanceof_operator.js
// Check if a variable is an instance of a class or object function

class Car {}
function Supercar() {}

const car1 = new Car()
const car2 = new Supercar()
console.log(car1 instanceof Car) // true
console.log(car1 instanceof Supercar) // false
console.log(car2 instanceof Supercar) // true

Delete an object property: operator delete

Will output true if deletion successful. Syntax delete object.property.

delete_operator.js
// Delete an object property: operator delete

const obj = {
  a: 'b',
  c: 1
}
console.log(delete obj.a) // true
console.log(obj) // { c: 1 }

Check if a property exists in an object: operator in

Will output true if object has the property. Syntax 'property' in object.

in_operator.js
// Check if a property exists in an object: operator "in"

const obj = {
  a: 'b',
  c: 1
}
console.log('a' in obj) // true
console.log('d' in obj) // false

Summary

  • List of operators: arithmetic, assignment, comparison, conditional (ternary and if shorthand), logical, bitwise, get variable type, delete an object property, check if a object property exists.
  • Don't try to memorize all these operators at once. The key point is to know that they exists. As you code more (either for practice or work), you will remember them.