If you are learning JavaScript, operator is neccessary for you because they help you to perform mathmatical or logical operations in the programs. In this guide we are learning about: expressions, operators, their types, and how to work with them with examples.
Content List
- What operators are
- Arithmetic operators (+, -, *, /, %)
- Comparison operators (==, ===, !=, >, <)
- Logical operators (&&, ||, !)
- Assignment operators (=, +=, -=)
What operators are
Operators are just a symbols or keyword those instruct compiler or interpreter to perform specific mathmatical, logical, and relational manipulation on data (also called operands).
In simple term you can say these are the things tell computer what to do with data.
For Example: in the expression 2+3, + is the operator and 2, and 3 are the oprators.
Note: Compilers and Interpreters are tools those converte programs (human readable) into machine-code (computer readable). Expressions are the combinations of constants, variables, operators that are prouced a single value.
Lets see some most important operators in JavaScript with examples:
Arithmetic operators
Arithmetics operators takes numerical values as operands and evaluated into a single numeric value. In JavaScript there are some operators with there uses:
| Operator Name | Operator Symbol | Description |
|---|---|---|
| Addition | + |
return result of arithmatic addition of given two numbers |
| Negation | - |
return result of artihmatic negation of given two numbers |
| Multiplication | * |
return multiplication of given two numbers |
| Division | / |
return result of arithmatic division of given two numbers |
| Remainder | % |
return a left over remainder result of given numbers division |
Remember number division by zero return a infinity. Lets see some examples:
/*-------------- Arithmatic Addition ---------------*/
const sum = 10 + 7
console.log(sum) // 17
/*-------------- Arithmatic Negation ---------------*/
const sub = 10 - 7
console.log(sub) // 3
/*-------------- Arithmatic Multiplication ---------------*/
const mul = 10 * 7
console.log(mul) // 70
/*-------------- Arithmatic Division ---------------*/
const div = 10 / 7
console.log(div) // 1.4285714285714286
/*-------------- Arithmatic Remainder ---------------*/
const rem = 10 % 7
console.log(rem) // 3
Do It Your Self: Open browser console tab. Copy paset each snippet one-by-one and ovserve its output.
Comparison operators
Comparison operators used to compare two operands and results logical values like true or false. Operands can be string, numbers or logical values.
String operands are compare each other based on standard lexicographical ordering, using unicode values.
When operands type differe to each other, than JavaScript try to convert them into appropriate type (generally result numerically). It also called implicit type conversion.
But with the === or !== operators, it firstly check those types if not match than no need to compare next. It also known as strict comparison. Most developers prefer to use them instead of normal comparison, which reduce the potential bugs in code.
| Operator Name | Operator Symbol | Description |
|---|---|---|
| Equal | == |
return true if operands are equal |
| Not Equal | != |
return true if operands are not equal |
| Strict Equal | === |
return true if operands are equal and have same type |
| Strict Not Equal | !== |
return true if operands are same type but are not equal or are of different type |
| Less Than | < |
return true if left side operand are lesser to right side |
| Greather Than | > |
return true if left side operand are greather to right side |
| Less Than or Equal | <= |
return true if left side operand are lesser or equal to right side |
| Greather Than or Equal | >= |
return true if left side operand are greather or equal to right side |
Lets see some examples:
const five = 5
const ten = "10"
/*----------------- Equal / Not Equal ------------------*/
console.log("5" == five)
console.log(10 != ten)
/*------------- Strict Equal / Not Equal ---------------*/
console.log("5" === five)
console.log(10 === ten)
/*------------- Less Than / Greater Than ---------------*/
console.log(3 < five)
console.log(100 > ten)
/*----- Less Than or Equal / Greater Than or Equal -----*/
console.log(5 <= five)
console.log(ten >= five)
Do It Your Self: Try to guess the output of each console.log of snippet than execution them on the console after that to check your understanding.
Logical operators
Logical operator are used work with boolean values. Using && and || return boolean value if the all operands are boolean else return on of them. These values also known as value selection operators. Lets see them:
| Operator Name | Description |
|---|---|
| Logical OR | If on of them are true it return true or return value on of them if operands are not boolean. |
| Logical AND | If on of them are false it return false or return first operand. |
| Logical Negation | If operand is boolean it invers it or if not boolean the it convert it type into boolean than invers it. |
Logic table for Logical OR || operator
| First Operand | Second Operand | Result |
|---|---|---|
| True | True | True |
| True | False | True |
| False | True | True |
| False | False | False |
Lets see some examples:
/*------ With Booelan Values -------*/
console.log(true || true) // true
console.log(true || false) // true
console.log(false || true) // true
console.log(false || false) // false
/*------ With Non-Booelan Values -------*/
console.log("dogs" || "cats") // true || true return "dogs"
console.log(null || "cats") // false || true return "cats"
console.log("dogs" || undefined) // true || false return "dogs"
Logic table for Logical AND && operator
| First Operand | Second Operand | Result |
|---|---|---|
| True | True | True |
| True | False | False |
| False | True | False |
| False | False | False |
Lets see some examples:
/*------ With Booelan Values -------*/
console.log(true || true) // true
console.log(true || false) // false
console.log(false || true) // false
console.log(false || false) // false
/*------ With Non-Booelan Values -------*/
console.log("dogs" || "cats") // true || true return "dogs"
console.log(null || "cats") // false || true return false
console.log("dogs" || undefined) // true || false return false
Logic table for Logical Nagetion ! operator
| Operand | Result |
|---|---|
| True | False |
| False | True |
Lets see some examples:
console.log(!true) // false
console.log(!false) // true
console.log(!"false") // false
Do It Your Self: Try to guess the output of each console.log of snippet than execution them on the console after that to check your understanding.
Assignment operators
Assignment operators used to assign right operands to its left operand. Assignment expression x = f() here value off() is assigned to x.
Lets see some common assignemts operators with examples:
| Operator Name | Operator Symbol | Description |
|---|---|---|
| Assignment | = |
assigne right operands to right operand |
| Addition Assignment | += |
its a assignemt with addition it's a shorthand of x = x + f()
|
| Subtraction Assignment | -= |
its a assignemt with subtraction it's a shorthand of x = x - f()
|
| Multiplicaiton Assignment | *= |
its a assignemt with multiplication it's a shorthand of x = x * f()
|
| Division Assignment | /= |
its a assignemt with division it's a shorthand of x = x / f()
|
| Remainder Assignment | %= |
its a assignemt with remainder it's a shorthand of x = x % f()
|
/*--------- Assignment ---------*/
const email = "something@gmail.com"
const age = 26
const salary = 26000
/*--------- Addition Assignment ---------*/
const age += 2
const salary += 50
/*--------- Subtraction Assignment ---------*/
const age -= 2
const salary -= 50
/*--------- Multiplication Assignment ---------*/
const age *= 2
const salary *= 50
/*--------- Division Assignment ---------*/
const salary /= 50
/*--------- Remainder Assignment ---------*/
const salary %= 50
Do It Your Self: Replicate those examples on you browser console and print them to see its output.
These operators are essential for building foundation of performing mathmatical or logical operaiton in javaScript. Here are more than those operators in JavaScript but those are essentials if you wan't to lean more about than visite MDN official Expression and Operators article.
Top comments (0)