Operators are the symbols JavaScript uses to act on values ā performing arithmetic, comparing values, combining boolean logic, and assigning results. This lesson covers arithmetic and modulo, strict versus loose equality, assignment shorthand, logical operators, the ternary operator, increment/decrement, and the nullish coalescing operator.
1JS Operators | JavaScript Tutorial - In-Depth Guide Part 1
Welcome to JavaScript Operators. If variables are containers, operators are the tools we use to manipulate the data inside themāperforming math, making comparisons, and combining logic.
// Operators: The Tools of Computation2JS Operators | JavaScript Tutorial - In-Depth Guide Part 2
Arithmetic Operators handle basic math. Addition (+), Subtraction (-), Multiplication (*), and Division (/).
let sum = 10 + 5; // 15
let prod = 10 * 2; // 203JS Operators | JavaScript Tutorial - In-Depth Guide Part 3
The Modulo operator (%) is specialāit returns the REMAINDER of a division. It' is incredibly useful for checking if a number is even or odd.
let remainder = 10 % 3; // 1 (10 divided by 3 is 3 remainder 1)4JS Operators | JavaScript Tutorial - In-Depth Guide Part 4
Comparison operators check relationships between values. In JS, always use '===' (Strict Equality) to check both the value and the data type.
5 == '5' // true (Loose - Avoid!)
5 === '5' // false (Strict - Use this!)5JS Operators | JavaScript Tutorial - In-Depth Guide Part 5
Assignment operators like '+=' allow you to update a variable's value relative to its current state in one step.
let count = 10;
count += 5; // Same as count = count + 56JS Operators | JavaScript Tutorial - In-Depth Guide Part 6
Logical operators combine conditions. AND (&&) requires both to be true. OR (||) requires only one to be true. NOT (!) reverses the state.
true && false // false
true || false // true
!true // false7JS Operators | JavaScript Tutorial - In-Depth Guide Part 7
Watch the render. See how complex logic gates determine whether a user can ' 'access' a feature based on multiple Boolean conditions.
8JS Operators | JavaScript Tutorial - In-Depth Guide Part 8
The Ternary Operator is a clean shorthand for If-Else. It takes a condition, a ' 'true' result, and a 'false' result, all in one line.
let status = (age >= 18) ? 'Adult' : 'Minor';9JS Operators | JavaScript Tutorial - In-Depth Guide Part 9
Increment (++) and Decrement (--) are shorthands to add or subtract 1 from a variable. They are very common in loops.
let lives = 3;
lives--; // 210JS Operators | JavaScript Tutorial - In-Depth Guide Part 10
Nullish Coalescing (??): This modern operator returns the right side only if the left side is null or undefined. Its safer than using OR (||).
let name = null;
let display = name ?? 'Guest';11JS Operators | JavaScript Tutorial - In-Depth Guide Part 11
You take a moment to really visualize how this interacts with the rest of your application state. When you grasp this underlying architecture, everything else in modern web development starts to make perfect sense. You've mastered the engines of computation. You can now perform complex math and building sophisticated logical decision trees.
console.log('Operational Status: 100%');12JS Operators | JavaScript Tutorial - In-Depth Guide Part 12
Operator mastery achieved! Now let
13Step-by-Step Breakdown
Welcome to JavaScript Operators. If variables are containers, operators are the tools we use to manipulate the data inside themāperforming math, making comparisons, and combining logic.
Arithmetic Operators handle basic math. Addition (+), Subtraction (-), Multiplication (*), and Division (/).
The Modulo operator (%) is specialāit returns the REMAINDER of a division. It' is incredibly useful for checking if a number is even or odd.
Checkpoint: What is the result of 7 % 2?
- ā0
- ā1
Comparison operators check relationships between values. In JS, always use '===' (Strict Equality) to check both the value and the data type.
Assignment operators like '+=' allow you to update a variable's value relative to its current state in one step.
Logical operators combine conditions. AND (&&) requires both to be true. OR (||) requires only one to be true. NOT (!) reverses the state.
Watch the render. See how complex logic gates determine whether a user can ' 'access' a feature based on multiple Boolean conditions.
Checkpoint: Which operator checks if two values are NOT equal in a strict way?
- ā==
- ā!==
The Ternary Operator is a clean shorthand for If-Else. It takes a condition, a ' 'true' result, and a 'false' result, all in one line.
Increment (++) and Decrement (--) are shorthands to add or subtract 1 from a variable. They are very common in loops.
Nullish Coalescing (??): This modern operator returns the right side only if the left side is null or undefined. Its safer than using OR (||).
You take a moment to really visualize how this interacts with the rest of your application state. When you grasp this underlying architecture, everything else in modern web development starts to make perfect sense. You've mastered the engines of computation. You can now perform complex math and building sophisticated logical decision trees.
Checkpoint: What is the value of ' 'true || false'?
- ātrue
- āfalse
Operator mastery achieved! Now let
Level Up š
Advanced cheat sheets, SEO tricks, and interview prep for this topic.
Browser Support
Fully supported.
Fully supported.
Fully supported.
Fully supported.
Accessibility (A11y)
1Use CSS calc() Instead of JavaScript Arithmetic for Layout Sizing Where Possible
Calculating an element's width or position with a JS operator (e.g. `width = screenWidth / 2`) and writing it as an inline style forces a synchronous layout recalculation and can conflict with how assistive tech and zoom/reflow features expect responsive sizing to work; CSS `calc()` keeps sizing declarative and responsive to viewport and font-size changes without JS intervention.
SEO Implications
- 1
Operator-Driven Conditional Rendering Can Hide Content from Crawlers If Not Server-Rendered
Logic like `isVisible && <Content />` or a ternary that renders different markup based on a runtime-only condition (e.g. window width) can result in content that never appears in the initial HTML a crawler sees. Ensure content meant to be indexed doesn't depend on client-only operator logic that only resolves after hydration.
Best Practices
Default to === and !== Over == and !=
Loose equality performs type coercion using rules that are easy to get wrong (`'' == 0` is true, `null == undefined` is true but `null == 0` is false) ā strict equality avoids this entire class of bugs by comparing type and value together.
Prefer ?? Over || for Default Values on Numbers, Booleans, or Empty Strings
`value || fallback` also substitutes the fallback for legitimate falsy values like 0, false, or '', which is rarely what you want for a quantity, flag, or optional text field. `value ?? fallback` only substitutes when value is null or undefined.
Frequent Bugs
Using `||` to provide a default for a numeric setting silently overrides a valid value of 0.
`const volume = userVolume || 10;` sets volume to 10 even when userVolume is intentionally 0 (muted), because 0 is falsy. Use `userVolume ?? 10` instead, which only falls back when userVolume is null or undefined.
Chained comparisons like `1 < x < 3` don't work the way they read mathematically.
JavaScript evaluates `1 < x < 3` left to right: `1 < x` first produces a boolean, which is then compared against `3` ā a boolean coerces to 0 or 1, so this expression is almost always true regardless of x. Use `x > 1 && x < 3` to express a proper range check.
Real-World Examples
Building a Feature-Access Check with Logical Operators
A dashboard needed to show an 'Upgrade' button only when a user was logged in and either lacked a premium plan or had an expired trial. The condition combined && and || to express this compound business rule in a single readable expression.
const canSeeUpgradeButton = isLoggedIn && (!hasPremium || trialExpired);
if (canSeeUpgradeButton) {
renderUpgradeButton();
}