Tutorials JavaScript Tutorial

Operators — Complete Guide

Operators — Complete Guide: free step-by-step lesson with examples, common mistakes, and interview tips — part of JavaScript Tutorial on Toolliyo Academy.

On this page

JavaScript Tutorial · Lesson 4 of 100

Operators

BasicsObjects & dataAsync & DOMAdvancedToolsProjects

Beginner · 1 — Learn by example · ~6 min · JS Tutorial — Basics

What is this?

Operators are symbols that do work on values: + adds, === checks equality, && means "and". You use them in every program to calculate, compare, and combine conditions.

Why should you care?

Shopping carts add prices with +. Login checks password === stored hash. Discount logic uses > and &&.

See it live — copy this example

Paste into an HTML file or the browser console (F12). Use Run below when the live editor is available.

let price = 499;
let qty = 2;
let total = price * qty;
let isFreeShipping = total > 999;
console.log("Total:", total);
console.log("Free shipping?", isFreeShipping);

Run Example »

Edit the code below and click Run to see the result in Toolliyo’s live editor.

Code
Result

What happened?

  • * multiplies.
  • > compares numbers.
  • isFreeShipping becomes true or false (a boolean).
  • console.log can print several values separated by commas.

Practice next

  1. Run the cart example and note total and isFreeShipping.
  2. Change qty to 3 and watch total cross the free-shipping threshold.
  3. In the console, compare 5 === "5" vs 5 == "5".
  4. Add a discount operator: total * 0.9 when qty >= 3.
  5. Use the modulo operator to check if total is divisible by 100.

Remember

Arithmetic: + - * / Comparison: === !== > < Logical: && || !

ScriptVerse cart totals

An e-commerce cart calculates subtotal, tax, and free-shipping eligibility with comparison and arithmetic operators.

Outcome: Correct operator choice prevents wrong prices shown to customers.

Interview prep for this lesson

Practice these questions aloud after reading—each links to a full structured answer.

Junior PDF Detailed
What is the difference between inline-block and block?
Short answer: block elements take full width and start on a new line. inline-block behaves like inline (stays in the same line) but allows setting width, height, margin, and padding. Example code .block { display: block;…
Mid PDF Detailed
Explain the difference between HTML4 and HTML5.
Short answer: HTML5 is the modern evolution of HTML4, introducing better structure, multimedia support, and APIs. Explain a bit more Follow me on LinkedIn: HTML4 mainly focused on document markup, while HTML5 focuses on…
Mid PDF Detailed
Class selector: Targets elements with a class.?
Short answer: .highlight { background: yellow; } .highlight { background: yellow; } .highlight { background: yellow; } .highlight { background: yellow; } .highlight { background: yellow; } .highlight { background: yellow…
Mid PDF Detailed
How does the browser parse and render HTML?
Short answer: When a browser loads a webpage, it goes through these main steps: Real-world example (ShopNest) ShopNest’s browser cart uses modern JavaScript: fetch APIs with async/await, modules, and clear error handling…
Junior PDF Detailed
What is Bootstrap?
Short answer: Follow me on LinkedIn: Bootstrap is a popular front-end framework for building responsive, mobile-first web pages using HTML, CSS, and JavaScript components. Real-world example (ShopNest) ShopNest’s browser…
Questions on this lesson 0

Sign in to ask a question or upvote helpful answers.

No questions yet — be the first to ask!

JavaScript Tutorial
Course syllabus

JavaScript Tutorial

Tutorial — Basics
Control Flow & Functions
Objects & Collections
Strings, Dates & RegEx
Async JavaScript
HTML DOM & Web APIs
Advanced
Performance & Security
Testing & Tooling
Projects
Toolliyo Assistant
Ask about tutorials, ebooks, training, pricing, mentor services, and support. I use public site content only—not admin or internal tools.

care@toolliyo.com

Need callback? Share your details