JavaScript Notes
HubYour First JavaScript Program — Hello World & Beyond Complete Guide 2026History of JavaScript — Complete Timeline from 1995 to 2026How JavaScript Runs — Complete Guide to Execution, Call Stack & Event LoopJavaScript Engine Explained — V8, JIT Compilation & How Code Gets FastJavaScript Use Cases — 15 Things You Can Build with JavaScript (2026)JavaScript vs Other Languages — Complete Comparison Guide 2026What is JavaScript? Complete BeginnerWhy Learn JavaScript in 2026? Career, Salary, Scope & Benefits GuideJavaScript Break Statement Tutorial – Complete Guide with ExamplesJavaScript Break and Continue Statements – Complete Guide with ExamplesJavaScript Continue Statement Tutorial – Skip Iterations with ExamplesJavaScript Do While Loop Tutorial – Execute at Least Once with ExamplesJavaScript Do-While Loop Tutorial – Complete Guide with ExamplesJavaScript For Loop Tutorial – Complete Guide with ExamplesJavaScript If Statement Tutorial – Conditional Logic with ExamplesJavaScript If Else Statement Tutorial – Complete Guide with ExamplesJavaScript If Statement Tutorial – Complete Guide with ExamplesJavaScript Nested If Statement Tutorial – Multi-Level Conditions with ExamplesNested Loops in JavaScriptJavaScript Control Flow Practice Programs – 20+ Exercises with SolutionsJavaScript Switch Statement Tutorial – Case Matching with ExamplesSwitch Statement in JavaScriptJavaScript While Loop Tutorial – Complete Guide with ExamplesJavaScript Arrow Functions Tutorial – Syntax, Use Cases & this BindingJavaScript Callback Functions Explained – Synchronous & AsynchronousJavaScript Closures Explained – Lexical Scope, Private State & MemoryJavaScript Function Declaration Tutorial – Hoisting, Syntax & ScopeJavaScript Function Expression Tutorial – Anonymous, Named & AssignedJavaScript Higher Order Functions Tutorial – map, filter, reduce & Custom HOFsJavaScript IIFE Explained – Immediately Invoked Function ExpressionJavaScript Functions Practice Programs – 20+ Exercises with SolutionsJavaScript Recursion Tutorial – Call Stack, Base Case & Recursive PatternsJavaScript Array Basics - Complete BeginnerJavaScript Array Methods - Complete Reference Guide with ExamplesJavaScript Array Programs - 20+ Practice Problems with SolutionsJavaScript Arrays Basics - Complete Guide with Examples & DiagramsJavaScript Array filter() Method - Complete Tutorial with ExamplesJavaScript filter() Method — Complete Guide with Examples 2026JavaScript Array find() Method - Complete Tutorial with ExamplesJavaScript find() & findIndex() — Complete Guide 2026JavaScript Array map() Method - Complete Tutorial with ExamplesJavaScript map() Method — Transform Arrays Complete Guide 2026JavaScript map() vs forEach() - Key Differences with ExamplesJavaScript Array push() and pop() - Complete Tutorial with ExamplesJavaScript Array reduce() Method - Complete Tutorial with ExamplesJavaScript reduce() Method — Complete Deep Dive with Examples 2026JavaScript Array shift() and unshift() - Complete Tutorial with ExamplesJavaScript Array sort() Method - Complete Tutorial with ExamplesJavaScript splice() vs slice() - Complete Tutorial with ExamplesJavaScript Object Destructuring - Complete Guide with ExamplesJavaScript Objects - Complete Guide to Object Basics with ExamplesJavaScript Object Methods - Built-in Methods & Custom Methods Complete GuideJavaScript Object Programs - Practice Problems with SolutionsJavaScript Object Properties - Keys, Values, Descriptors & Dynamic PropertiesJavaScript Rest Operator (...) - Parameters, Destructuring & Complete GuideJavaScript Spread Operator (...) - Complete Guide with ExamplesJavaScript this Keyword - Complete Guide with Binding Rules & ExamplesJavaScript String Basics - Complete Guide to Strings with ExamplesJavaScript String Methods - Complete Reference with Examples & OutputJavaScript String Programs - Practice Problems with SolutionsJavaScript String Replacing - replace(), replaceAll() & Regex Patterns GuideJavaScript String Searching Methods - includes, indexOf, startsWith, match GuideJavaScript Template Literals (ES6) - Complete Guide with Tagged TemplatesJavaScript DOM Changing Content - textContent, innerHTML, setAttribute Complete GuideJavaScript DOM Changing Styles - CSS Manipulation, classList & getComputedStyleJavaScript DOM Creating Elements - createElement, appendChild, DocumentFragment GuideJavaScript DOM Introduction - Complete Guide to Document Object ModelJavaScript DOM Traversal - Navigate Parent, Child & Sibling NodesJavaScript DOM Forms - Form Handling, Validation & FormData Complete GuideJavaScript localStorage - Complete Guide to Web Storage APIlocalStorage vs sessionStorage - JavaScript Web Storage Comparison GuideJavaScript DOM Removing Elements - remove(), removeChild() Complete GuideJavaScript DOM Selecting Elements - querySelector, getElementById Complete GuideJavaScript sessionStorage - Complete Guide to Session-Based Web StorageJavaScript Click Event - addEventListener, Event Handler Complete GuideEvent Bubbling in JavaScript – Complete Guide with Examples (2026)Event Capturing in JavaScript – Complete Guide to Capture Phase (2026)Event Delegation in JavaScript – Complete Guide with Examples (2026)JavaScript Event Object – Complete Guide with Examples (2026)JavaScript Form Events – Complete Guide with Examples (2026)JavaScript Keyboard Events – Complete Guide to keydown, keyup & Key Properties (2026)JavaScript Mouse Events – Complete Guide with Examples (2026)JavaScript Async Await - Complete Guide with Examples & Error HandlingJavaScript Call Stack - Complete Guide with Visual Diagrams & ExamplesJavaScript Callback Queue (Task Queue) - Complete Guide with DiagramsJavaScript Callbacks - Complete Guide with Callback Hell & PatternsJavaScript Event Loop - Complete Guide with Visual Diagrams & ExamplesJavaScript Fetch API - Complete Guide with Examples, Error Handling & Async/AwaitJSON in JavaScript - Complete Guide: Parse, Stringify, Fetch & Error HandlingJavaScript Promise.all, Promise.race, Promise.any, Promise.allSettled — Complete Guide 2026JavaScript Promises - Complete Guide with Chaining, Error Handling & Event LoopSynchronous vs Asynchronous JavaScript — Complete Explanation 2026JavaScript Web APIs - Complete Guide: setTimeout, fetch, DOM Events & MoreClosures in JavaScript — Complete Guide with Examples 2026Hoisting in JavaScript — Complete Guide with Examples 2026Prototype in JavaScript — Complete Guide with Examples 2026Scope in JavaScript — Complete Guide with Examples 2026Browser Object Model (BOM) in JavaScript — Complete GuideCanvas API in JavaScript — Complete Drawing & Animation GuideDrag and Drop API in JavaScript — Complete TutorialGeolocation API in JavaScript — Get User Location TutorialHistory API in JavaScript — SPA Routing & pushState GuideNotification API in JavaScript — Push Notifications TutorialService Workers in JavaScript — Offline, Caching & PWA GuideWeb Storage API in JavaScript — localStorage & sessionStorage GuideWeb Workers in JavaScript — Multithreading & Background Tasks GuideJavaScript Interview — Behavioral Questions and Soft Skills Guide 2026Common JavaScript Interview Mistakes — What to Avoid 2026JavaScript Interview Tips — Strategy and Preparation Guide 2026JavaScript Mock Interview — Practice Questions with Solutions 2026JavaScript System Design — Frontend Architecture Interview Guide 2026JavaScript apply() Method - Complete Guide with ExamplesJavaScript bind() Method - Complete Guide with ExamplesJavaScript call() Method - Complete Guide with ExamplesJavaScript call() vs apply() vs bind() - Complete Comparison GuideJavaScript Currying - Complete Guide with ExamplesJavaScript Debounce - Complete Guide with Timeline DiagramsJavaScript Execution Context - Complete Guide with Stack DiagramsJavaScript Garbage Collection - Memory Lifecycle & Mark-and-Sweep GuideJavaScript Generators - Complete Guide with yield and IterationJavaScript Hoisting - Complete Guide with var, let, const & FunctionsJavaScript Iterators - Complete Guide with Iterator ProtocolJavaScript Lexical Scope - Complete Guide with Scope Chain DiagramsJavaScript Memory Management - Complete Guide with Lifecycle DiagramsJavaScript Modules - Complete Guide with import export ExamplesJavaScript Scope - Complete Guide with var, let, const & Scope ChainJavaScript Symbols - Complete Guide with Well-Known SymbolsJavaScript Throttle - Complete Guide with Timeline DiagramsJavaScript Comments Complete Guide – Single Line, Multi-line & JSDoc with ExamplesJavaScript Data Types Complete Guide – Primitives, Objects & typeof with ExamplesJavaScript Input and Output Complete Guide – console.log, prompt, alert & DOM with ExamplesJavaScript Keywords Complete Guide – Reserved Words List with Examples for BeginnersJavaScript null vs undefined – Complete Guide with Differences, Examples & Interview Q&AJavaScript Operators Complete Guide – Arithmetic, Comparison, Logical & More with ExamplesJavaScript Strict Mode Complete Guide – JavaScript Type Conversion Complete Guide – Explicit & Implicit Coercion with ExamplesJavaScript var vs let vs const – Complete Guide with Scope, Hoisting & Best PracticesJavaScript Variables Complete Guide – Declaration, Naming Rules & Memory Model for BeginnersDeque (Double-Ended Queue) in JavaScript — Complete GuideLinked List in JavaScript — Nodes, Pointers & Operations GuideJavaScript Map — Key-Value Data Structure Complete GuideJavaScript Numbers — IEEE 754, Precision, and Number Methods GuidePriority Queue in JavaScript — Min Heap Implementation GuideQueue Data Structure in JavaScript — FIFO, Enqueue & Dequeue ExplainedJavaScript Set — Unique Values Data Structure GuideSorting Algorithms in JavaScript — Bubble, Merge, Quick Sort GuideStack Data Structure in JavaScript — LIFO, Push, Pop ExplainedJavaScript Typed Arrays — ArrayBuffer, Int32Array, Float64Array GuideJavaScript WeakMap — Weak References, Memory Management GuideJavaScript WeakSet — Complete Guide with Examples 2026Applications of JavaScript — Where JS is Used in 2026 Complete GuideJavaScript Backend Frameworks — Node.js, Express, NestJS Complete Guide 2026JavaScript Frontend Libraries — React, Vue, Angular, Svelte Complete Overview 2026JavaScript Full-Stack Frameworks — Next.js, Remix, Astro Complete Guide 2026JavaScript Career Paths & Jobs — Salary, Roles & Roadmap 2026JavaScript Libraries vs Frameworks — Difference & Examples Complete Guide 2026JavaScript Custom Errors – Extend Error Class, Custom Error Types & instanceofJavaScript Debugging – console Methods, DevTools, Breakpoints & Error Stack TracesJavaScript throw Statement – Throw Errors, Custom Messages & Error TypesJavaScript Try Catch Finally – Error Handling Complete GuideTop 30 JavaScript Closure Interview Questions & Answers 2026Top 30 JavaScript Coding Interview Questions 2026 (With Solutions)Top 25 JavaScript Event Loop Interview Questions & Answers 2026Top 50 JavaScript Interview Questions & Answers 2026Top 30 JavaScript Promise Interview Questions & Answers 202650 Tricky JavaScript Output Questions 2026 (With Answers)Build a JavaScript Calculator - Step by Step Project TutorialBuild a JavaScript Image Carousel - Step by Step Project TutorialBuild a JavaScript Counter Application - Step by Step Project TutorialBuild a JavaScript Digital Clock - Step by Step Project TutorialBuild a Dynamic Resume Builder in JavaScript - Step by Step TutorialBuild a JavaScript Email Validator - Step by Step Project TutorialBuild a JavaScript Employee Database Management App - Step by Step TutorialBuild a JavaScript Expense Tracker - Step by Step Project TutorialBuild a GitHub Profile Search App in JavaScript - Step by Step TutorialBuild a JavaScript Image Slider - Step by Step Project TutorialBuild a JavaScript Multi-Step Progress Bar - Step by Step TutorialBuild JavaScript Nested Chat Comments - Step by Step Project TutorialBuild a JavaScript Notes App - Step by Step Project TutorialBuild a JavaScript OTP Input Field - Step by Step Project TutorialBuild a JavaScript Palindrome Checker - Step by Step Project TutorialBuild a JavaScript Price Range Slider - Step by Step Project TutorialBuild a JavaScript Prime Number Checker - Step by Step Project TutorialBuild a JavaScript QR Code Generator - Step by Step Project TutorialBuild a JavaScript QR Code Scanner - Step by Step Project TutorialBuild a JavaScript Quiz App - Step by Step Project TutorialBuild a JavaScript Random Number Generator - Step by Step TutorialBuild a JavaScript Random Password Generator - Step by Step TutorialJavaScript Image Resize & Compress — Canvas API Project 2026JavaScript Responsive Admin Dashboard — DOM & CSS Project 2026JavaScript Show/Hide Password Toggle — Beginner DOM Project 2026JavaScript Sortable Filterable Table — DOM & Array Methods Project 2026JavaScript Stopwatch Project — setInterval & DOM Tutorial 2026JavaScript Student Grade Calculator — Arrays & Logic Project 2026JavaScript Task Scheduler Project — CRUD & localStorage Tutorial 2026JavaScript Tic-Tac-Toe Game — DOM Manipulation Project Tutorial 2026JavaScript Toast Notification Project — Custom Alerts Tutorial 2026Build a Todo App in JavaScript - Step by Step Project TutorialJavaScript Unicode Character Value Finder — charCodeAt & fromCharCode Project 2026JavaScript Weather App Project — Fetch API & DOM Complete Tutorial 2026JavaScript Cheat Sheet 2026 — Complete Quick ReferenceImportant JavaScript Concepts Every Developer Must Know in 2026JavaScript One Shot Notes 2026 — Complete JS in One PageJavaScript Quick Revision Notes — Interview Prep in 30 Minutes 2026Abstraction in JavaScript OOP – Hide Complexity, Expose SimplicityJavaScript Classes Tutorial – ES6 Class Syntax, Inheritance & MoreJavaScript Constructor Functions – new Keyword, Prototype & OOP PatternsEncapsulation in JavaScript – Private Fields, Getters, Setters & Data ProtectionJavaScript Inheritance – extends, super, and Prototype-Based InheritanceObject-Oriented Programming in JavaScript – OOP Concepts Complete GuideJavaScript OOP Projects – Build Real-World Apps with Classes & OOPPolymorphism in JavaScript – Method Overriding, Duck Typing & Many FormsJavaScript Prototype Chain – How Property Lookup Works in JavaScriptJavaScript Prototypes – Prototype-Based Inheritance, Object.create & prototype PropertyJavaScript Advanced Practice Problems — 15+ Interview-Level Challenges 2026JavaScript Assignments — 10 Project-Based Learning Tasks 2026JavaScript Beginner Practice Problems — 20+ Coding Exercises 2026JavaScript Coding Challenges — 25 Interview-Style Problems 2026JavaScript Intermediate Practice Problems — 20+ Coding Challenges 2026JavaScript MCQs — 50 Multiple Choice Questions with Answers 2026JavaScript Regex Character Classes – [abc], [^abc], Ranges & ShortcutsJavaScript Regex Email Validation – Pattern, Edge Cases & Best PracticesJavaScript Regex Flags – g, i, m, s, u, y Flags Explained with ExamplesJavaScript Regex Groups – Capturing, Non-Capturing & Named GroupsJavaScript Number Validation with Regex — Complete Patterns & Examples 2026JavaScript Password Validation with Regex — Strength Checker & Patterns 2026JavaScript Regex Quantifiers – *, +, ?, {n,m}, Greedy vs Lazy MatchingJavaScript Regex Basics – Regular Expressions Tutorial for BeginnersJavaScript Regex Projects — 10 Practical Mini-Projects with Code 2026JavaScript URL Validation with Regex — Complete Patterns & Examples 2026JavaScript Username Validation with Regex — Patterns & Form Examples 2026JavaScript TutorialJavaScript Lazy Loading — Images, Modules & Components Complete Guide 2026JavaScript Performance Optimization — Speed Up Your Code Complete Guide 2026JavaScript Unit Testing with Jest — Complete Guide for Beginners 2026
Master all JavaScript operators: arithmetic, assignment, comparison, logical, bitwise, ternary, nullish coalescing, and spread. Beginner guide with examples & interview Q&A.
An operator is a symbol that tells JavaScript to perform a specific operation on values (called operands). Operators are literally everywhere in JavaScript code — you use them in every conditional, every calculation, every assignment. This guide covers all operator types with clear examples.
Real World Analogy
Operators are like verbs in mathematics and logic:
- The
+operator is "add" - The
>operator is "is greater than" - The
&&operator is "and" (both must be true) - The
=operator is "assign the value of"
Just like you wouldn't confuse the math symbols = (equals) and ≠ (not equals), you need to know what each JavaScript operator symbol does.
1. Arithmetic Operators
Used to perform mathematical calculations.
Example
Operator │ Name │ Example
─────────┼────────────────┼──────────────
+ │ Addition │ 5 + 3 = 8
- │ Subtraction │ 5 - 3 = 2
* │ Multiplication │ 5 * 3 = 15
/ │ Division │ 10 / 4 = 2.5
% │ Modulus │ 10 % 3 = 1 (remainder)
** │ Exponentiation │ 2 ** 8 = 256
++ │ Increment │ x++ or ++x
-- │ Decrement │ x-- or --x
js example
let a = 10, b = 3;
console.log(a + b); // 13
console.log(a - b); // 7
console.log(a * b); // 30
console.log(a / b); // 3.3333...
console.log(a % b); // 1 (10 divided by 3 leaves remainder 1)
console.log(a ** b); // 1000 (10 to the power of 3)Output
13 7 30 3.3333333333333335 1 1000
Pre-increment vs Post-increment
Example
let x = 5;
console.log(x++); // 5 — returns THEN increments
console.log(x); // 6 — now incremented
let y = 5;
console.log(++y); // 6 — increments THEN returns
console.log(y); // 6
Output
5 6 6 6
2. Assignment Operators
Used to assign values to variables.
js example
let score = 100; // = basic assignment
score += 10; console.log(score); // 110 (score = score + 10)
score -= 5; console.log(score); // 105 (score = score - 5)
score *= 2; console.log(score); // 210 (score = score * 2)
score /= 3; console.log(score); // 70 (score = score / 3)
score %= 20; console.log(score); // 10 (score = score % 20)
score **= 2; console.log(score); // 100 (score = score ** 2)Output
110 105 210 70 10 100
Logical Assignment Operators (ES2021)
Example
let a = null;
let b = "Hello";
a ??= "Default"; // assigns only if a is null or undefined
b ||= "Fallback"; // assigns only if b is falsy
console.log(a); // "Default"
console.log(b); // "Hello" (b was truthy, no assignment)
Output
Default Hello
3. Comparison Operators
Used to compare two values. Always return a boolean (true or false).
Example
Operator │ Meaning │ Example
─────────┼──────────────────────────────────┼───────────────────
== │ Loose equality (coerces types) │ "5" == 5 → true
=== │ Strict equality (no coercion) │ "5" === 5 → false
!= │ Loose inequality │ "5" != 5 → false
!== │ Strict inequality │ "5" !== 5 → true
> │ Greater than │ 10 > 5 → true
< │ Less than │ 10 < 5 → false
>= │ Greater than or equal │ 5 >= 5 → true
<= │ Less than or equal │ 4 <= 5 → true
js example
console.log(5 == "5"); // true (string coerced to number)
console.log(5 === "5"); // false (different types)
console.log(5 != "5"); // false (loosely equal)
console.log(5 !== "5"); // true (strictly not equal)
console.log(10 > 5); // true
console.log(3 >= 3); // trueOutput
true false false true true true
4. Logical Operators
Used to combine or negate boolean expressions.
&& — AND (both must be truthy)
js example
const age = 20;
const hasID = true;
if (age >= 18 && hasID) {
console.log("Entry allowed");
} else {
console.log("Entry denied");
}Output
Entry allowed
|| — OR (at least one must be truthy)
Example
const isAdmin = false;
const isModerator = true;
if (isAdmin || isModerator) {
console.log("Access to dashboard");
}
Output
Access to dashboard
! — NOT (negates the value)
js example
const isLoggedIn = false;
console.log(!isLoggedIn); // true
console.log(!!isLoggedIn); // false (double negation → coerce to boolean)Output
true false
Short-Circuit Evaluation
Example
// && short-circuits: if first is falsy, second is NOT evaluated
const user = null;
const name = user && user.name; // won't crash! user is falsy, stops there
console.log(name); // null
// || short-circuits: if first is truthy, second is NOT evaluated
const displayName = user || "Guest";
console.log(displayName); // "Guest"
Output
null Guest
5. Ternary Operator ? :
The only ternary (3-operand) operator. A compact if-else on one line.
text example
Syntax:
condition ? valueIfTrue : valueIfFalsejs example
const marks = 78;
const grade = marks >= 60 ? "Pass" : "Fail";
console.log(grade);
const hour = 14;
const greeting = hour < 12 ? "Good morning" : hour < 18 ? "Good afternoon" : "Good evening";
console.log(greeting);Output
Pass Good afternoon
6. Nullish Coalescing ??
Returns the right operand only if the left is null or undefined. Unlike ||, it doesn't treat 0, "", or false as empty.
Example
const score = 0;
const name = "";
console.log(score || "No score"); // "No score" — 0 is falsy!
console.log(score ?? "No score"); // 0 — 0 is NOT null/undefined
console.log(name || "Anonymous"); // "Anonymous" — "" is falsy!
console.log(name ?? "Anonymous"); // "" — "" is NOT null/undefined
const user = null;
console.log(user ?? "Guest"); // "Guest" — null triggers ??
Output
No score 0 Anonymous Guest
7. Optional Chaining ?.
Safely accesses nested properties without crashing if any part is null or undefined.
js example
const user = { profile: { city: "Pune" } };
const guestUser = null;
console.log(user?.profile?.city); // "Pune"
console.log(guestUser?.profile?.city); // undefined (no crash!)
console.log(user?.email?.toUpperCase()); // undefined (email doesn't exist)Output
Pune undefined undefined
8. typeof Operator
Returns a string describing the type of a value.
js example
console.log(typeof "hello"); // "string"
console.log(typeof 42); // "number"
console.log(typeof true); // "boolean"
console.log(typeof undefined); // "undefined"
console.log(typeof null); // "object" ← famous bug!
console.log(typeof {}); // "object"
console.log(typeof []); // "object"
console.log(typeof function(){}); // "function"
console.log(typeof Symbol()); // "symbol"
console.log(typeof 42n); // "bigint"Output
string number boolean undefined object object object function symbol bigint
9. Spread ... and Rest ... Operators
Same symbol (...), different roles depending on context.
Example
// SPREAD: expands an array into individual elements
const nums = [1, 2, 3];
const moreNums = [...nums, 4, 5];
console.log(moreNums);
// Spread for function call
console.log(Math.max(...nums));
// REST: collects remaining arguments into an array
function sum(...numbers) {
return numbers.reduce((total, n) => total + n, 0);
}
console.log(sum(1, 2, 3, 4, 5));
Output
[1, 2, 3, 4, 5] 3 15
Operator Precedence (Order of Operations)
Example
HIGHEST PRIORITY (evaluated first)
┌─────────────────────────────────────────────┐
│ 1. () Parentheses / Grouping │
│ 2. ** (right-to-left) Exponentiation │
│ 3. !, ++, --, typeof, +/- (unary) │
│ 4. *, /, % Multiplication, Division │
│ 5. +, - Addition, Subtraction │
│ 6. <, <=, >, >= Comparison │
│ 7. ==, !=, ===, !== Equality │
│ 8. && Logical AND │
│ 9. || Logical OR │
│ 10. ?? Nullish Coalescing │
│ 11. ? : Ternary │
│ 12. =, +=, -=… Assignment │
└─────────────────────────────────────────────┘
LOWEST PRIORITY (evaluated last)
Example
// Without parentheses — follows precedence
console.log(2 + 3 * 4); // 14 (not 20) — * first!
console.log((2 + 3) * 4); // 20 — parentheses override precedence
console.log(true || false && false); // true — && evaluated before ||
console.log((true || false) && false); // false — parentheses change order
Output
14 20 true false
Common Mistakes
❌ Mistake 1: Using == instead of ===
js example
// ❌ WRONG — loose equality has surprise coercions
console.log(0 == false); // true!
console.log("" == false); // true!
console.log(null == 0); // false
console.log(null == undefined); // truejs example
// ✅ CORRECT — always use === unless you specifically need coercion
console.log(0 === false); // false (different types)
console.log("" === false); // false (different types)❌ Mistake 2: Confusing =, ==, and ===
js example
let x = 10;
// ❌ Assignment inside condition — likely a bug!
if (x = 5) { // assigns 5 to x, then checks if 5 is truthy
console.log("This runs!"); // yes it runs, but x is now 5 — bug!
}
// ✅ Comparison
if (x === 5) { // strictly compares x to 5
console.log("x is exactly 5");
}❌ Mistake 3: Not understanding || vs ?? for default values
Example
const userScore = 0; // valid score of zero!
// ❌ WRONG — || treats 0 as falsy, replaces it!
const display = userScore || "No score"; // "No score" — WRONG!
// ✅ CORRECT — ?? only replaces null/undefined
const displayFixed = userScore ?? "No score"; // 0 — correct!
Comparison: || vs ??
| Expression | `\ | \ | ` result | ?? result |
|---|---|---|---|---|
| `0 \ | \ | "default"` | "default" | 0 |
| `"" \ | \ | "default"` | "default" | "" |
| `false \ | \ | "default"` | "default" | false |
| `null \ | \ | "default"` | "default" | "default" |
| `undefined \ | \ | "default"` | "default" | "default" |
Key Takeaways
- Arithmetic operators (
+,-,*,/,%,**) perform math ===and!==are strict — always prefer them over==and!=- Logical operators (
&&,||,!) use short-circuit evaluation - Ternary
condition ? a : bis a concise one-line if-else ??(nullish coalescing) only falls back fornull/undefined, not other falsy values?.(optional chaining) safely navigates nested properties without crashing- Operator precedence determines evaluation order — use parentheses to be explicit
typeofreturns a string type name;nullbizarrely returns"object"
Interview Questions & Answers
Q1. What is the difference between == and === in JavaScript?
Answer: == is loose equality — it performs type coercion before comparing (converts both sides to a common type). === is strict equality — it compares both value AND type without coercion. Always use === in production code to avoid surprising bugs like 0 == false being true.
Q2. What is the ternary operator and when should you use it?
Answer: The ternary operator (condition ? valueIfTrue : valueIfFalse) is a compact, expression-based alternative to if-else. Use it for simple, readable single-value decisions. Avoid nesting multiple ternaries (readability suffers). For complex conditions, use a regular if-else block.
Q3. Explain short-circuit evaluation in JavaScript.
Answer: Logical operators don't always evaluate both operands:
a && b: ifais falsy,bis never evaluated (returnsa)a || b: ifais truthy,bis never evaluated (returnsa)
This is used practically to write user && user.name (safely access property only if user exists).
Q4. What is the difference between || and ???
Answer: Both provide fallback values, but they trigger differently:
||falls back when the left side is any falsy value (0,"",false,null,undefined,NaN)??only falls back when the left side is null or undefined specifically
Use ?? when 0 or empty string are valid values you want to preserve.
Q5. What does the spread operator ... do?
Answer: Spread expands an iterable (array, object) into individual elements. In array literals: [...arr1, ...arr2] merges arrays. In function calls: Math.max(...nums) passes each element as a separate argument. In object literals: {...obj1, ...obj2} merges objects (shallow copy).
Q6. What is operator precedence and how does it affect results?
Answer: Operator precedence determines the order in which operators are evaluated in an expression. Higher-precedence operators evaluate first (like * before +). 2 + 3 * 4 evaluates as 2 + 12 = 14, not 5 * 4 = 20. Use parentheses to override precedence and make intent explicit.
Q7. What does typeof return for different types?
Answer: typeof returns: "string", "number", "boolean", "undefined", "symbol", "bigint", "function", or "object". Notably, typeof null === "object" (a bug) and typeof [] === "object" (arrays are objects). Use Array.isArray() to detect arrays and explicit === null to check for null.
Q8. What is optional chaining ?. and when should you use it?
Answer: Optional chaining (?.) safely accesses a property or method on an object that might be null or undefined. Instead of throwing a TypeError, it returns undefined. Use it when accessing nested object properties where intermediate values might be absent: user?.address?.city instead of user && user.address && user.address.city.
Exam Focus
Revise definitions, diagrams, examples, and short-answer points for JavaScript Operators Complete Guide – Arithmetic, Comparison, Logical & More with Examples.
Interview Use
Prepare one clear explanation, one practical example, and one common mistake for this JavaScript Master Course topic.
Search Terms
javascript-complete-guide, javascript master course, javascript, complete, guide, basics, operators, javascript operators complete guide – arithmetic, comparison, logical & more with examples
Related JavaScript Master Course Topics
Continue learning this concept
BasicsJavaScript Comments Complete Guide – Single Line, Multi-line & JSDoc with ExamplesMaster JavaScript comments: single-line //, multi-line /* */, and JSDoc /** */. Learn when and why to comment your code with real examples, best practices & tips.BasicsJavaScript Data Types Complete Guide – Primitives, Objects & typeof with ExamplesLearn all JavaScript data types: string, number, boolean, null, undefined, BigInt, Symbol, and objects. Includes typeof, type checking, memory model & interview Q&A.BasicsJavaScript Input and Output Complete Guide – console.log, prompt, alert & DOM with ExamplesLearn JavaScript input and output methods: console.log, alert, prompt, confirm, document.write, and DOM manipulation. Beginner-friendly guide with real examples.BasicsJavaScript Keywords Complete Guide – Reserved Words List with Examples for BeginnersLearn all JavaScript keywords and reserved words: var, let, const, if, else, for, while, function, return, class, and more. Full list with examples and interview Q&A.BasicsJavaScript null vs undefined – Complete Guide with Differences, Examples & Interview Q&AUnderstand the real difference between null and undefined in JavaScript. Learn when to use each, how they behave in comparisons, typeof results, and common pitfalls.BasicsJavaScript Strict Mode Complete Guide – Learn JavaScript strict mode (