JavaScript ES6 Operators

JavaScript operators are a fundamental component in expressions to perform operations on operands. Simply put, expressions return values.

Consider this example of a basic JavaScript expression:

2 + 2  
//returns 4

Here, we use the arithmetic operator + to sum two operands, both 2. The result is 4.

Key Takeaways

• Arithmetic, relational, logical, and bitwise operators handle different types of computation and assignments.
• The ternary operator and typeof offer concise operation syntax.
• === is preferred for strict equality checks without type coercion.

Types of Operators

Operators fall into different categories: arithmetic, relational, logical, bitwise, and assignment. Let's break these down:

Arithmetic Operators

These are the backbone of math operations in JavaScript:

Addition +

2 + 2  
//returns 4

Subtraction -

4 - 2  
//returns 2

Multiplication *

5 * 5  
//returns 25

Division /

4 / 2  
//returns 2

Modulus %

6 % 5  
//returns 1

Increment ++

let a = 2;  
a++;  
//a is now 3

Decrement --

let b = 2;  
b--;  
//b is now 1

Relational Operators

Use these operators to compare values, returning either true or false:

Greater than >

2 > 1  
//returns true

Less than <

2 < 1  
//returns false

Greater or equal to >=

2 >= 2  
//returns true

Less than or equal to <=

1 <= 2  
//returns true

Equal to ==

6 == 5  
//returns false

Not equal to !=

2 != 3  
//returns true

Logical Operators

Combine multiple conditions with logical operators:

And &&

true && false  
//returns false

Or ||

true || false  
//returns true

Not !

!true  
//returns false

Assignment Operators

These operators help you efficiently update variable values:

Simple Assignment =

let x = 2;  
// x equals 2

Add Assignment +=

let x = 2;  
x += 1;  
// x is now 3

Subtract Assignment -=

let x = 2;  
x -= 1;  
// x is now 1

Multiply Assignment *=

let x = 2;  
x *= 2;  
// x is now 4

Divide Assignment /=

let x = 2;  
x /= 2;  
// x is now 1

Bitwise Operators

Used for operations on the binary form of numbers, they include:

And &

a & b  
// returns 1 if corresponding bits of both a and b are 1

Or |

a | b  
// returns 1 if any corresponding bit of a or b is 1

XOr ^

a ^ b  
// returns 1 for each bit where only one of a or b is 1

Not ~

~ a  
// inverts all bits of a

Left Shift <<

a << b  
// shifts a left by b bits, inserting 0s on the right

Right Shift >>

a >> b  
// shifts a right by b bits, discarding bits

Zero-fill Right Shift >>>

a >>> b  
// shifts a right by b bits, inserting 0s on the left

Don't stress over these unless you need them for high-performance coding tasks!

The Ternary Operator

This operator condenses if...else statements:

true ? 2 : 3  
// returns 2

Reads as "if true, return 2, otherwise 3," saving you a few lines of code.

typeof

This operator reveals the type of a value:

typeof 3  
// returns 'number'

Checking for Equality in JavaScript

Use == for comparisons but be cautious of type conversion. Prefer === to avoid unintended results. For instance:

0 == false //returns true  
0 === false //returns false

Though the first evaluates true by converting false to 0, === respects strict type checks.

Conclusion

Operators are essential tools in JavaScript for manipulating data and building application logic. Arithmetic, relational, and logical operators do the heavy lifting of computations and value comparisons, while assignment operators address the task of updating variable contents. The bitwise operators are available for low-level processing, ideal for niche scenarios.

FAQ

Are bitwise operators really necessary?

For most applications, JavaScript's arithmetic and logical operators suffice. Bitwise operators are mainly useful in performance-critical applications like graphics renderers or systems programming.

How does the ternary operator differ from an if...else statement?

Functionally similar, the ternary operator condenses decision-making into a single line, improving readability when simply choosing between two alternatives.

Why use === instead of ==?

=== offers a strict equality check, avoiding unintended true results due to type conversion, thereby ensuring more predictable code behavior.