Logo
Tutorials Articles Code Playground
Sign In Get Started
Module: Control Flow

Operators

JavaScript Essentials: Control Flow - Operators

Operators are special symbols that perform specific operations on values (operands). They are fundamental to control flow and manipulating data in JavaScript. Here's a breakdown of common JavaScript operators, categorized for clarity:

1. Arithmetic Operators

These operators perform mathematical calculations.

Operator Description Example Result
+ Addition 5 + 3 8
- Subtraction 5 - 3 2
* Multiplication 5 * 3 15
/ Division 5 / 3 1.6666666666666667
% Modulus (remainder) 5 % 3 2
** Exponentiation 5 ** 3 125
++ Increment (adds 1) x++; or ++x; Increments x by 1. Important: Pre-increment (++x) returns the new value, while post-increment (x++) returns the original value.
-- Decrement (subtracts 1) x--; or --x; Decrements x by 1. Important: Pre-decrement (--x) returns the new value, while post-decrement (x--) returns the original value.

2. Assignment Operators

These operators assign values to variables.

Operator Description Example Equivalent to
= Assignment x = 5; x = 5
+= Add and assign x += 5; x = x + 5
-= Subtract and assign x -= 5; x = x - 5
*= Multiply and assign x *= 5; x = x * 5
/= Divide and assign x /= 5; x = x / 5
%= Modulus and assign x %= 5; x = x % 5
**= Exponentiate and assign x **= 5; x = x ** 5

3. Comparison Operators

These operators compare values and return a boolean (true or false).

Operator Description Example Result
== Equal to (value only) 5 == "5" true (Type coercion occurs)
=== Strict equal to (value and type) 5 === "5" false (No type coercion)
!= Not equal to (value only) 5 != "5" false (Type coercion occurs)
!== Strict not equal to (value and type) 5 !== "5" true (No type coercion)
> Greater than 5 > 3 true
< Less than 5 < 3 false
>= Greater than or equal to 5 >= 5 true
<= Less than or equal to 5 <= 3 false

Important Note: == and != perform type coercion, which can lead to unexpected results. It's generally recommended to use === and !== for more predictable comparisons.

4. Logical Operators

These operators combine or modify boolean expressions.

Operator Description Example Result
&& Logical AND true && true true
` ` Logical OR
! Logical NOT !true false

Short-Circuit Evaluation:

  • && (AND): If the first operand is false, the second operand is not evaluated. The entire expression evaluates to false.
  • || (OR): If the first operand is true, the second operand is not evaluated. The entire expression evaluates to true.

5. Ternary Operator (Conditional Operator)

A shorthand way to write an if...else statement.

Operator Description Example
condition ? expr1 : expr2 If condition is true, evaluate expr1; otherwise, evaluate expr2. age >= 18 ? "Adult" : "Minor"

6. Type Operators

These operators are used to determine the type of a variable or to convert a value to a specific type.

Operator Description Example
typeof Returns the type of a value as a string. typeof 5 // Returns "number"
instanceof Checks if an object is an instance of a particular constructor. x instanceof Array

7. Bitwise Operators

These operators work directly on the binary representation of numbers. Less commonly used in general JavaScript development.

  • & (Bitwise AND)
  • | (Bitwise OR)
  • ^ (Bitwise XOR)
  • ~ (Bitwise NOT)
  • << (Left shift)
  • >> (Right shift)
  • >>> (Unsigned right shift)

Operator Precedence

When an expression contains multiple operators, JavaScript follows a specific order of precedence to determine the order of operations. Here's a simplified overview (from highest to lowest):

  1. Parentheses ()
  2. Exponentiation **
  3. Multiplication, Division, Modulus *, /, %
  4. Addition, Subtraction +, -
  5. Bitwise Shift Operators <<, >>, >>>
  6. Comparison Operators >, <, >=, <=
  7. Equality Operators ==, ===, !=, !==
  8. Logical AND &&
  9. Logical OR ||
  10. Ternary Operator ? :
  11. Assignment Operators =, +=, -=, etc.

Using parentheses to explicitly define the order of operations is highly recommended for clarity and to avoid unexpected results.

This comprehensive overview provides a solid foundation for understanding and utilizing operators in JavaScript to control the flow of your programs and manipulate data effectively. Remember to prioritize using === and !== for reliable comparisons and to leverage parentheses for clarity in complex expressions.