JavaScript Syntax

Every language has rules for how its sentences are written. In JavaScript, those rules are called syntax. The good news is that the rules are few and simple. Learn them once, and every line of JavaScript you ever read will look familiar.

Diagram — see how it fits together

A JavaScript program is a list of statements — one instruction per statement. Each statement usually ends with a semicolon. The browser runs the statements in order, top to bottom, one after another. If a statement has a mistake, the browser stops and reports an error, and the rest of the program never runs.

Statements and semicolons

A statement is a single instruction, like "create a variable" or "show a message". Most statements end with a semicolon ;, which tells the browser "this instruction is finished". JavaScript can often guess where a statement ends without a semicolon, but guessing is risky — always write the semicolon yourself.

let cups = 2;
let price = 20;
let total = cups * price;
alert(total);

Four statements, four semicolons, one result: the number 40. Each line does one small thing, and together they solve a small problem. That is how all programs work — many small steps, in order.

Case sensitivity — small letters matter

JavaScript is case-sensitive: total, Total, and TOTAL are three different names. The built-in words are all lowercase, so alert works but Alert does not. This is the single most common beginner error — a capital letter in the wrong place, and the browser says the name does not exist.

let total = 40;
alert(total);   // works — shows 40
alert(Total);   // error — "Total" was never created

Whitespace and comments

Spaces, tabs, and blank lines are ignored by JavaScript — they exist for humans, not for the browser. Use them to make your code easy to read: one statement per line, a space after each comma, a blank line between sections. Code that is easy to read is code that is easy to fix.

Common mistakes

• Writing Alert or Document with a capital letter — built-in names are lowercase, and JavaScript treats capitals as different names.
• Forgetting a closing bracket } or parenthesis ) — the browser then cannot tell where your function ends, and nothing runs.
• Leaving out semicolons and relying on the browser to guess — it usually guesses right, until the one time it does not.
• Writing two statements on one line without a semicolon between them — the browser reads them as one broken statement.

Remember

• A program is a list of statements, run in order, top to bottom.
• End each statement with a semicolon ;.
• JavaScript is case-sensitive: total and Total are different names.
• Whitespace is for humans — use it to keep your code readable.

Example explained

• let cups = 4; — a statement that creates a variable called cups and stores 4 in it. The semicolon ends the statement.
• let price = 15; — a second statement, creating the price of one cup of Adrak Chai.
• let total = cups * price; — a third statement. The * multiplies 4 by 15, and the answer 60 is stored in total.
• document.getElementById("bill").textContent = "Total: ₹" + total; — the last statement writes the answer into the paragraph with id="bill". The + joins the text "Total: ₹" with the number 60.
• function showBill() { ... } — the four statements sit inside a function, so they run only when the button is clicked. The curly braces { } mark where the function starts and ends.