🎉 Everything is free here. Read more →
Tutorial
JavaScript Tutorial
Operators & Expressions

Operator and Expression in Javascript

🎉

Read This on Github

This article is available on Github. You can read it there and contribute to it.
Github Link
Any Issue ?

➡️ Operators & Expressions

Operators & Expressions explained

Operators are special symbols in JavaScript that perform specific operations on one, two, or three operands, and then return a result.

⭐ Arithmetic Operators

OperatorDescriptionExample
+ Addition( Adds two operands )5 + 4 = 9
-Subtraction( Subtracts the second operand from the first )5 - 4 = 1
*Multiplication( Multiplies both operands )5 * 4 = 20
/Division( Divides the first operand by the second )5 / 4 = 1.25
%Modulus( Divides the first operand by the second and returns the remainder )5 % 4 = 1
++Increment( Increases the operand by 1 )5++ = 6
--Decrement( Decreases the operand by 1 )5-- = 4

⚡ Example

let x = 5;// x = 5
let y = 4;// y = 4
let z = x + y;// output: 9 (addition)
 
let x1 = 5;// x1 = 5
let y1 = 4;// y1 = 4
let z1 = x1 - y1;// output: 1 (subtraction)
 
let x2 = 5;// x2 = 5
let y2 = 4;// y2 = 4
let z2 = x2 * y2;// output: 20 (multiplication)
 
let x3 = 5;// x3 = 5
let y3 = 4;// y3 = 4
let z3 = x3 / y3;// output: 1.25 (division)
 
let x4 = 5;// x4 = 5
let y4 = 4;// y4 = 4
let z4 = x4 % y4;// output: 1 (modulus)
 
let x5 = 5;// x5 = 5
let y5 = 4;// y5 = 4
let z5 = x5++;// output: 6 (increment)
 
let x6 = 5;// x6 = 5
let y6 = 4;// y6 = 4
let z6 = x6--;// output: 4 (decrement)

⚡ Playgrounds

⚡ Extra Doubts

💥 What is the difference between ++x and x++?

In JavaScript, the "++" operator is used to increment a value by 1. This operator can be used in either a "pre" or "post" form.

Pre-Increment

The pre-increment operator (++x) increments the value of the operand before the expression is evaluated.

        let x = 10;
        console.log(++x); // Output: 11
        console.log(x); // Output: 11

In this example, the value of "x" is incremented from 10 to 11 before it is logged to the console. The value of "x" is then logged to the console, which outputs 11.

Post-Increment

The post-increment operator (x++) increments the value of the operand after the expression is evaluated.

        let x = 10;
        console.log(x++); // Output: 10
        console.log(x); // Output: 11

In this example, the value of "x" is logged to the console (which outputs 10), and then the value of "x" is incremented to 11.

The main difference between pre-increment and post-increment is the order in which the operand is incremented and the expression is evaluated. In the case of pre-increment, the value is incremented before the expression is evaluated, while in the case of post-increment, the value is incremented after the expression is evaluated.

💥 What is the difference between --x and x--?

In JavaScript, the "--" operator is used to decrement a value by 1. This operator can be used in either a "pre" or "post" form.

Pre-Decrement

The pre-decrement operator (--x) decrements the value of the operand before the expression is evaluated.

        let x = 10;
        console.log(--x); // Output: 9
        console.log(x); // Output: 9

In this example, the value of "x" is decremented from 10 to 9 before it is logged to the console. The value of "x" is then logged to the console, which outputs 9.

Post-Decrement

The post-decrement operator (x--) decrements the value of the operand after the expression is evaluated.

        let x = 10;
        console.log(x--); // Output: 10
        console.log(x); // Output: 9

In this example, the value of "x" is logged to the console (which outputs 10), and then the value of "x" is decremented to 9.

The main difference between pre-decrement and post-decrement is the order in which the operand is decremented and the expression is evaluated. In the case of pre-decrement, the value is decremented before the expression is evaluated, while in the case of post-decrement, the value is decremented after the expression is evaluated.

⭐ Assignment Operators

OperatorDescriptionExample
=Assigns values from the right side operands to left side operandC = A + B will assign the value of A + B into C
+=Add AND assignment operatorC += A is equivalent to C = C + A
-=Subtract AND assignment operatorC -= A is equivalent to C = C - A
*=Multiply AND assignment operatorC *= A is equivalent to C = C * A
/=Divide AND assignment operatorC /= A is equivalent to C = C / A
%=Modulus AND assignment operatorC %= A is equivalent to C = C % A

⚡ Example

 
let x = 5;// x = 5
let y = 4;// y = 4
let z = x + y;// output: 9 (assignment operator)
 
let x1 = 5;// x1 = 5
let y1 = 4;// y1 = 4
let z1 += x1 + y1;// output: 14 (add and assignment operator)
 
let x2 = 5;// x2 = 5
let y2 = 4;// y2 = 4
let z2 -= x2 + y2;// output: 0 (subtract and assignment operator)
 
let x3 = 5;// x3 = 5
let y3 = 4;// y3 = 4
let z3 *= x3 + y3;// output: 45 (multiply and assignment operator)
 
let x4 = 5;// x4 = 5
let y4 = 4;// y4 = 4
let z4 /= x4 + y4;// output: 1.25 (divide and assignment operator)
 
let x5 = 5;// x5 = 5
let y5 = 4;// y5 = 4
let z5 %= x5 + y5;// output: 1 (modulus and assignment operator)

⚡ Playgrounds

⭐ Comparison Operators

OperatorDescriptionExample
==Checks if the value of two operands are equal or not, if yes then condition becomes true.(A == B) is not true.
!=Checks if the value of two operands are equal or not, if values are not equal then condition becomes true.(A != B) is true.
>Checks if the value of left operand is greater than the value of right operand, if yes then condition becomes true.(A > B) is not true.
<Checks if the value of left operand is less than the value of right operand, if yes then condition becomes true.(A < B) is true.
>=Checks if the value of left operand is greater than or equal to the value of right operand, if yes then condition becomes true.(A >= B) is not true.
<=Checks if the value of left operand is less than or equal to the value of right operand, if yes then condition becomes true.(A <= B) is true.
===Checks if the value of two operands are equal or not, if values are not equal then condition becomes true.(A === B) is not true.
!==Checks if the value of two operands are equal or not, if values are not equal then condition becomes true.(A !== B) is true.

⚡ Example

 
let x = 5;// x = 5
let y = 4;// y = 4
let z = x == y;// output: false (equal to operator)
 
let x1 = 5;// x1 = 5
let y1 = 4;// y1 = 4
let z1 = x1 != y1;// output: true (not equal to operator)
 
let x2 = 5;// x2 = 5
let y2 = 4;// y2 = 4
let z2 = x2 > y2;// output: true (greater than operator)
 
let x3 = 5;// x3 = 5
let y3 = 4;// y3 = 4
let z3 = x3 < y3;// output: false (less than operator)
 
let x4 = 5;// x4 = 5
let y4 = 4;// y4 = 4
let z4 = x4 >= y4;// output: true (greater than or equal to operator)
 
let x5 = 5;// x5 = 5
let y5 = 4;// y5 = 4
let z5 = x5 <= y5;// output: false (less than or equal to operator)
 
let x6 = 5;// x6 = 5
let y6 = 4;// y6 = 4
let z6 = x6 === y6;// output: false (strict equal to operator)
 
let x7 = 5;// x7 = 5
let y7 = 4;// y7 = 4
let z7 = x7 !== y7;// output: true (strict not equal to operator)

⚡ Playgrounds

⚡ Extra Doubts

💥 What is the difference between == and ===?

In JavaScript, the "==" operator is used to perform a loose comparison, which means that it compares the values of the operands without considering their types. The "===" operator, on the other hand, is used to perform a strict comparison, which means that it compares the values and the types of the operands.

Here are a few examples to illustrate the difference between "==" and "===":

        console.log(10 == '10'); // Output: true
        console.log(10 === '10'); // Output: false
 
        console.log(null == undefined); // Output: true
        console.log(null === undefined); // Output: false
 
        console.log(true == 1); // Output: true
        console.log(true === 1); // Output: false
 
        let x = {};
        let y = {};
        console.log(x == y); // Output: false
        console.log(x === y); // Output: false

In the first example, the "==" operator returns true because the values of the operands are equal, even though their types are different (one is a number and the other is a string). The "===" operator returns false because it also checks the types of the operands, and the types are not equal.

In the second example, the "==" operator returns true because both operands are considered "falsy" values (null and undefined are considered falsy). The "===" operator returns false because it also checks the types of the operands, and the types are not equal.

In the third example, the "==" operator returns true because the value of the "true" operand is coerced to 1, which is equal to the value of the "1" operand. The "===" operator returns false because it also checks the types of the operands, and the types are not equal.

In the fourth example, the "==" operator returns false because the operands are references to two different objects, which are not considered equal. The "===" operator also returns false because it checks the types of the operands, which are both objects.

ℹ️

if the data types are different, the "==" operator will try to convert the values to the same data type before comparing them. if the data types are different, the "===" operator will not perform a conversion.

⭐ Logical Operators

OperatorDescriptionExample
&&Called Logical AND operator. If both the operands are non-zero, then the condition becomes true.(A && B) is true.
IICalled Logical OR Operator. If any of the two operands are non-zero, then the condition becomes true.(A II B) is true.
!Called Logical NOT Operator. Use to reverses the logical state of its operand. If a condition is true, then Logical NOT operator will make false.!(A && B) is false.

⚡ Example

let x = 5;// x = 5
let y = 4;// y = 4
let z = x && y;// output: 4 (logical and operator)
 
let x1 = 5;// x1 = 5
let y1 = 4;// y1 = 4
let z1 = x1 || y1;// output: 5 (logical or operator)
 
let x2 = 5;// x2 = 5
let y2 = 4;// y2 = 4
let z2 = !x2;// output: false (logical not operator)

⚡ Playgrounds

⭐ Bitwise Operators

OperatorDescriptionExample
&Binary AND Operator copies a bit to the result if it exists in both operands.(A & B) (means 0000 1100)
IIBinary OR Operator copies a bit if it exists in either operand.(A II B) = 61 (means 0011 1101)
^Binary XOR Operator copies the bit if it is set in one operand but not both.(A ^ B) = 49 (means 0011 0001)
~Binary Ones Complement Operator is unary and has the effect of 'flipping' bits.(~A ) = -61 (means 1100 0011 in 2's complement form due to a signed binary number.
<<Binary Left Shift Operator. The left operands value is moved left by the number of bits specified by the right operand.A << 2 = 240 (means 1111 0000)
>>Binary Right Shift Operator. The left operands value is moved right by the number of bits specified by the right operand.A >> 2 = 15 (means 0000 1111)

⚡ Example

 
let a = 5; // 0000 0101
let b = 1; // 0000 0001
 
let c = a & b; // 0000 0001
let d = a || b; // 0000 0101
let e = a ^ b; // 0000 0100
let f = ~a; // 1111 1010
let g = a << 2; // 0001 0100
let h = a >> 2; // 0000 0001

⚡ Playgrounds

⭐ String Operators

OperatorDescriptionExample
+Concatenates two or more strings and returns a new string."Hello " + "world!" is "Hello world!"
+=Appends the string on the right side of the operator to the string on the left side and assigns the result to the left operand."Hello " += "world!" is "Hello world!"

⚡ Example

 
let firstName = "John";
let lastName = "Doe";
let fullName = firstName + " " + lastName; // John Doe
 
let x = "Hello ";
x += "world!"; // Hello world!

⚡ Playgrounds

⭐ Conditional (Ternary) Operator

OperatorDescriptionExample
? :If the condition is true, the operator returns the value of the first operand; otherwise, it returns the value of the second operand.condition ? value1 : value2

⚡ Example

 
let age = 18;
let voteable = (age < 18) ? "Too young" : "Old enough";
console.log(voteable); // Old enough

⚡ Playgrounds

⭐ Comma Operator

OperatorDescriptionExample
,The comma operator evaluates each of its operands (from left to right) and returns the value of the last operand.var a = (3, 4); // a is 4

⚡ Example

 
let a = (1 + 2, 3 + 4);
console.log(a); // 7

⚡ Playgrounds

⭐ typeof Operator

OperatorDescriptionExample
typeofReturns a string indicating the type of the unevaluated operand.typeof 37 === 'number'

⚡ Example

 
typeof 37 === 'number'; // true
typeof 3.14 === 'number'; // true
typeof Math.LN2 === 'number'; // true
typeof Infinity === 'number'; // true
typeof NaN === 'number'; // true
typeof Number(1) === 'number'; // true
typeof new Number(1) === 'object'; // true
typeof 'foo' === 'string'; // true
typeof 'bar' === 'string'; // true
typeof String('bar') === 'string'; // true
typeof new String('bar') === 'object'; // true
typeof true === 'boolean'; // true
typeof false === 'boolean'; // true
typeof new Boolean(true) === 'object'; // true
typeof undefined === 'undefined'; // true
typeof null === 'object'; // true
typeof Symbol() === 'symbol'; // true
typeof [] === 'object'; // true
typeof Array(5) === 'object'; // true
typeof function(){} === 'function'; // true
typeof new Function() === 'function'; // true
typeof new Date() === 'object'; // true
typeof /^(.+)$/ === 'object'; // true
typeof new RegExp('^(.+)$') === 'object'; // true
typeof {} === 'object'; // true
typeof new Object() === 'object'; // true
typeof new Set() === 'object'; // true
typeof new Map() === 'object'; // true
typeof new WeakSet() === 'object'; // true
typeof new WeakMap() === 'object'; // true
typeof new ArrayBuffer() === 'object'; // true

⚡ Playgrounds

⭐ instanceof Operator

OperatorDescriptionExample
instanceofReturns true if the specified object is of the specified object type.objectName instanceof objectType

⚡ Example

let today = new Date();
let answer = today instanceof Date;
 
console.log(answer); // true

⚡ Playgrounds

⭐ in Operator

OperatorDescriptionExample
inReturns true if the specified property is in the specified object or its prototype chain.propertyName in objectName

⚡ Example

let tree = { height: 10, color: 'green', grow() { this.height += 2; } };
'height' in tree; // true
'color' in tree; // true
'species' in tree; // false
'grow' in tree; // true

⚡ Playgrounds

⭐ delete Operator

OperatorDescriptionExample
deleteRemoves the specified property from the specified object.delete objectName.property

⚡ Example

let tree = { height: 10, color: 'green', grow() { this.height += 2; } };
delete tree.color;
console.log(tree.color); // undefined

⚡ Playgrounds

⭐ void Operator

OperatorDescriptionExample
voidEvaluates the given expression and then returns undefined.void expression

⚡ Example

void 0; // undefined
void (0); // undefined
void 1; // undefined
void (1); // undefined
void 'foo'; // undefined
void ('foo'); // undefined
void true; // undefined
void (true); // undefined
void false; // undefined
void (false); // undefined
void null; // undefined
void (null); // undefined
void NaN; // undefined
void (NaN); // undefined
void Infinity; // undefined
void (Infinity); // undefined
void -Infinity; // undefined
void (-Infinity); // undefined
void 0n; // undefined
void (0n); // undefined
void Symbol(); // undefined
void (Symbol()); // undefined
void Symbol('foo'); // undefined
void (Symbol('foo')); // undefined
void Symbol.iterator; // undefined
void (Symbol.iterator); // undefined
void {}; // undefined
void ({}); // undefined
void []; // undefined
void ([]); // undefined
void function() {}; // undefined
void (function() {}); // undefined
void (() => {}); // undefined
void ((() => {})); // undefined
void class {}; // undefined
void (class {}); // undefined
void new Date(); // undefined
void (new Date()); // undefined
void new Date().getTime(); // undefined
void (new Date().getTime()); // undefined
void new Date().getTime().toString(); // undefined
void (new Date().getTime().toString()); // undefined
void new Date().getTime().toString().split(''); // undefined
void (new Date().getTime().toString().split('')); // undefined
void new Date().getTime().toString().split('').map(Number); // undefined
void (new Date().getTime().toString().split('').map(Number)); // undefined
void new Date().getTime().toString().split('').map(Number).reduce((a, b) => a + b); // undefined
void (new Date().getTime().toString().split('').map(Number).reduce((a, b) => a + b)); // undefined
void new Date().getTime().toString().split('').map(Number).reduce((a, b) => a + b, 0); // undefined

⚡ Playgrounds

⭐ new Operator

OperatorDescriptionExample
newCreates an instance of a user-defined object type or of one of the built-in object types that has a constructor function.new objectName

⚡ Example

function Car(make, model, year) {
  this.make = make;
  this.model = model;
  this.year = year;
}
 
const mycar = new Car('Eagle', 'Talon TSi', 1993);
 
const kenscar = new Car('Nissan', '300ZX', 1992);
 
const vpgscar = new Car('Mazda', 'Miata', 1990);

⚡ Playgrounds

Revision 1 Comments Out