JS-102 | Operators & Expressions

JS Operator is a symbol that tells the compiler or interpreter to perform specific mathematical, relational or logical operation and produce final result.

Javascript code

Section	Topic
JS Comments	Comments
JS Operators	1 Unary 2 Binary 3 Ternary or Conditional 4 Assignment 5 Comparison 6 Arithmatic 7 Bitwise 8 Logical 9 Misc
JS Expressions	Expressions

Comments

Comments behave like whitespace, and are discarded during script execution.
Comments on method, exremely powerfull in describing purpose of method and documentation
Comments on property, exremely powerfull in describing purpose of property and documentation

Comment-Type	Example
single-line comment	`// a one line comment`
multi-line comment	`/* this is a longer,` `* multi-line comment` `*/`
nested comment	`/* You can't, but, /* nest comments / end /`

You might also see a third type of comment syntax at the start of some JavaScript files, which looks something like this: #!/usr/bin/env node.

This is called hashbang comment syntax, and is a special comment used to specify the path to a particular JavaScript engine that should execute the script. See Hashbang comments for more details.

Operators

Unary

Operators that operate on single operand

Name	Operator	Meaning	Examples
Unary Plus	+	Attempts to convert the operand to a number, if it is not already eg. (+“3” returns 3) , (+true returns 1) 1	View
Increment	++	Adds one to its operand. If used as a prefix operator (++x), returns the value of its operand after adding one; if used as a postfix operator (x++), returns the value of its operand before adding one	View
Decrement	- -	Subtracts one from its operand. If used as a prefix operator (- -x), returns the value of its operand after adding one; if used as a postfix operator (x- -), returns the value of its operand before adding one	View
Unary Negation	-	Returns the negation of its operand eg. if x is 3, then -x returns -3	View

Binary

Operator that operate on two operands like Arithematic Operators

Ternary or Conditional

operator that takes three operands

Name	Operator	Meaning	Examples
Ternary or Conditional	? :	is the only operator that takes three operands: a condition followed by a question mark (?), then an expression to execute if the condition is truthy followed by a colon (:), and finally the expression to execute if the condition is falsy. This operator is frequently used as an alternative to an if…else statement	View

Assignment

Name	Operator	Meaning	Examples
Assingment	x = y	x = y	View
Addition Assignment	x += y	x = x + y	View
Subtraction Assignment	x -= y	x = x - y	View
Multiplication Assignment	x *= y	x = x * y	View
Division Assignment	x /= y	x = x / y	View
Remainder Assignment	x %= y	x = x % y	View
Exponentiation Assignment	x **= y	x = x ** y	View
Left Shift Assignment	x <<= y	x = x << y	View
Right Shift Assignment	x >>= y	x = x >> y	View
Unsigned-Right-Shift Assignment	x >>>= y	x = x >>> y	View
Bitwise AND Assignment	x &= y	x = x & y	View
Bitwise XOR Assignment	x ^= y	x = x ^ y	View
Bitwise OR Assignment	x \|= y	x = x \| y	View
Logical AND Assignment	x &&= y	x = x && (x = y)	View
Logical OR Assignment (Shorting)	x \|\|= y	x = x \|\| (x = y)	View
Logical Nullish Assignment	x ??= y	x = x ?? (x = y)	View

Bitwise operator can also used with boolean

Destructring Assignment View

Array Desctrucutring

var foo =['one','two','three'];

// without destructuring 
var one = foo[0];
var two = foo[1];
var three = foo[2];

// with destructuring
var [one,two,three] = foo;

Object Desctrucutring

var bar ={one:'one',two:'two',three:'three'};

// without destructuring 
var one = bar.one;
var two = bar.two;
var three = bar.three;

// with destructuring
var {one,two,three} = bar;

Comparison

Name	Operator	Meaning	Examples
Equality	==	Returns true if the operands are equal	View
Inequality	!=	Returns true if the operands are not equal	View
Identity (strict equality)	===	Returns true if the operands are equal and of the same type	View
Nonidentity (strict inequality)	!==	Returns true if the operands are of the same type but not equal, or are of different type	View
Greater than	>	Returns true if the left operand is greater than the right operand	View
Greater Than Or Equal	>=	Returns true if the left operand is greater than or equal to the right operand	View
Less Than	<	Returns true if the left operand is less than the right operand.	View
Less Than Or Equal	<=	Returns true if the left operand is less than or equal to the right operand.	View

Arithmatic

Name	Operator	Meaning	Examples
Remainder	%	Returns the integer remainder of dividing two operands It always takes the sign of the dividend	View
Division	/	Returns the integer quotient of dividing two operands	View
Multiplication	*	Returns the product of two operands	View
Addition	+	Returns the sum of two operands	View
Subtraction	-	Returns the difference of two operands	View
Exponentiation	**	Returns the result of raising the first operand to the power of the second operand It is equivalent to Math.pow, except it also accepts BigInts as operands	View

Bitwise

Operater operates on bit representation of operand. further classfies in to 2 more categories

Logical bitwise

Name	Operator	Meaning	Examples
Bitwise AND	&	The bitwise AND operator ( & ) returns a 1 in each bit position for which the corresponding bits of both operands are 1s	View
Bitwise OR	\|	The bitwise OR operator ( \| ) returns a 1 in each bit position for which the corresponding bits of either or both operands are 1s.	View
Bitwise XOR	^	The bitwise XOR operator (^) returns a 1 in each bit position for which the corresponding bits of either but not both operands are 1s.	View
Bitwise NOT	~	The bitwise NOT operator (~) inverts the bits of its operand. Like other bitwise operators, it converts the operand to a 32-bit signed integer	View

Shift bitwise

Name	Operator	Meaning	Examples
Left Shift	<<	The left shift operator (<<) shifts the first operand the specified number of bits, modulo 32, to the left. Excess bits shifted off to the left are discarded. Zero bits are shifted in from the right	View
Right Shift	>>	The right shift operator (<<) shifts the first operand the specified number of bits, modulo 32, to the right. Excess bits shifted off to the right are discarded. Zero bits are shifted in from the left	View

Logical

Name	Operator	Meaning	Examples
Logical AND	&&	The logical AND ( && ) operator (logical conjunction) for a set of boolean operands will be true if and only if all the operands are true. Otherwise it will be false. More generally, the operator returns the value of the first falsy operand encountered when evaluating from left to right, or the value of the last operand if they are all truthy.	View
Logical OR Short Circuit	\|\|	The logical OR ( \|\| ) operator (logical disjunction) for a set of operands is true if and only if one or more of its operands is true. It is typically used with boolean (logical) values. When it is, it returns a Boolean value. However, the \|\| operator actually returns the value of one of the specified operands, so if this operator is used with non-Boolean values, it will return a non-Boolean value.	View
Logical NOT	!	The logical NOT (!) operator (logical complement, negation) takes truth to falsity and vice versa. It is typically used with boolean (logical) values. When used with non-Boolean values, it returns false if its single operand can be converted to true; otherwise, returns true.	View

Miscellaneous

Name	Operator	Meaning	Examples
instanceof	instanceof	The instanceof operator tests to see if the prototype property of a constructor appears anywhere in the prototype chain of an object. The return value is a boolean value. Its behavior can be customized with Symbol.hasInstance.	View
typeof	typeof	The typeof operator returns a string indicating the type of the unevaluated operand.	View
this	this	The value of this is determined by how a function is called (runtime binding). It can’t be set by assignment during execution, and it may be different each time the function is called.	View
super	super	The super keyword is used to access properties on an object literal or class’s [[Prototype]], or invoke a superclass’s constructor. The super.prop and super[expr] expressions are valid in any method definition in both classes and object literals. The super(…args) expression is valid in class constructors.	View
void	void	The void operator evaluates the given expression and then returns undefined.	View
null	null	The value null represents the intentional absence of any object value. It is one of JavaScript’s primitive values and is treated as falsy for boolean operations.	View
in	in	The in operator returns true if the specified property is in the specified object or its prototype chain.	View
await	await	The await operator is used to wait for a Promise. It can only be used inside an async function within regular JavaScript code; however it can be used on its own with JavaScript modules.	View
delete	delete	The JavaScript delete operator removes a property from an object; if no more references to the same property are held, it is eventually released automatically.	View
new	new	The new operator lets developers create an instance of a user-defined object type or of one of the built-in object types that has a constructor function.	View
Nullish coalescing	??	returns its right-hand side operand when its left-hand side operand is null or undefined, and otherwise returns its left-hand side operand	View
Optional Chaining or Elvis or Safe traversal	?.	The ?. operator is like the . chaining operator, except that instead of causing an error if a reference is nullish (null or undefined), the expression short-circuits with a return value of undefined. When used with function calls, it returns undefined if the given function does not exist	View

Expressions

An expression is any valid unit of code that resolves to a value.

Every syntactically valid expression resolves to some value but conceptually, there are two types of expressions: with side effects (for example: those that assign value to a variable) and those that in some sense evaluate and therefore resolve to a value.
The expression x = 7 is an example of the first type. This expression uses the = operator to assign the value seven to the variable x. The expression itself evaluates to seven.
The code 3 + 4 is an example of the second expression type. This expression uses the + operator to add three and four together without assigning the result, seven, to a variable.

JavaScript has the following expression categories:

Arithmetic: evaluates to a number, for example 3.14159. (Generally uses arithmetic operators.)
String: evaluates to a character string, for example, “Fred” or “234”. (Generally uses string operators.)
Logical: evaluates to true or false. (Often involves logical operators.)
Primary expressions: Basic keywords and general expressions in JavaScript.
Left-hand-side expressions: Left values are the destination of an assignment.

eg

You can use the new operator to create an instance of a user-defined object type or of one of the built-in object types. Use new as follows:
```
var objectName = new objectType([param1, param2, ..., paramN]);
```

Name	Expression	Meaning	Examples
class expression	class expression	The class expression is one way to define a class. Similar to function expressions, class expressions can be named or unnamed. If named, the name of the class is local to the class body only.	View
function expression	function expression	The function keyword can be used to define a function inside an expression. You can also define functions using the Function constructor and a function declaration.	View
regular expression	regular expression	Regular expressions are patterns used to match character combinations in strings. In JavaScript, regular expressions are also objects. These patterns are used with the exec() and test() methods of RegExp, and with the match(), matchAll(), replace(), replaceAll(), search(), and split() methods of String.	View

Published Sep 20, 2022

Solutions Architect • Web Developer • Quality Analyst • BloggerNikhil Rustagi on Twitter