PHASE 0Beginner ~26 min· topic 4 of 4

Topic 0.4

Your First Program

In one line

A JavaScript program is a list of statements run from top to bottom; semicolons end statements (and are added automatically in most, but not all, places), comments are notes the engine ignores, and every name is case-sensitive.

Think of it like this

Steps on a recipe card. Each numbered step is one statement: "boil the water", "add the rice". You do them in order, top to bottom. The full stop at the end of each step is the semicolon. Notes in the margin like "Grandma's tip: use less salt" are comments: helpful to the reader, ignored by the cook.

Words you'll meet

New words in this topic, in plain English. Come back here whenever one feels fuzzy.

Program: A set of instructions the computer follows, in order.
Statement: One complete instruction, like declaring a value or printing it.
Expression: Code that produces a value, like 2 + 3 or "Hi".
Semicolon: The ; that marks the end of a statement.
ASI: Automatic Semicolon Insertion: the engine's rule for adding missing semicolons at some line breaks.
Comment: A note in the code (// or /* */) that the engine ignores.
Case-sensitive: Capital and small letters count as different: name and Name are two names.
Identifier: A name you give to something, like price or userName.
Reserved word: A word the language already uses, like if or return, so you can't use it as a name.

Step by step

01Plan it in plain words

Our first program works out a shopping bill: 3 notebooks at 40 rupees and 2 pens at 15. Before writing code, write the steps as comments. This is how professionals start too.

bill.jswhole filejavascript

// 1. Remember the prices and how many of each
// 2. Work out the total
// 3. Show the total

02Turn each step into statements

const creates a named value (you'll learn it fully in Phase 1). Each line is one statement ending with ;. The engine runs them in this exact order, so total can use the values declared above it.

bill.jswhole filejavascript

// 1. Prices and quantities
const notebookPrice = 40;
const notebooks = 3;
const penPrice = 15;
const pens = 2;

// 2. The total
const total = notebookPrice * notebooks + penPrice * pens;

// 3. Show it
console.log("Total:", total);

terminal

$ node bill.js

── expected output ──

Total: 150

03See how the engine reads it

Top to bottom, one statement at a time. Comments and blank lines are skipped. If a statement throws an error, the ones after it never run.

See how the engine reads itdiagram

Rendering diagram…

04Know where semicolons matter

These two lines look like two statements, but because the second starts with [, the engine reads them as one: 1[1, 2].forEach(...). That reads a property of the number 1 that doesn't exist (undefined), then calls forEach on it.

asi.jswhole filejavascript

const a = 1
[1, 2].forEach((n) => console.log(n))
// TypeError: Cannot read properties of undefined (reading 'forEach')

05Check the capitals

Every built-in name must be spelled with exactly the right capitals. When an error says ... is not defined or ... is not a function, check the capitals first.

case.jswhole filejavascript

console.log("works");
Console.log("fails");  // ReferenceError: Console is not defined

Try it yourself

1
Add an item
In the bill example, add an eraser at 5 rupees, 4 of them. Predict the new total before you run it (it should be 170).
2
Switch a line off
Put // in front of the console.log("Pens:", ...) line. Predict the console output, then run it.
3
Repair the glued lines
In the third example, add one semicolon so the program prints item 1, item 2 and never printed. Try both places: the end of line 2 and the start of line 3.
4
Fix the bad return
In the ASI example, move the { up onto the same line as return in getUserBad. What does it print now? (Also remove the ; after "Asha" inside the object, since object properties are separated by commas.)

Code & diagrams

A shopping bill program New tab

Comments are ignored when the code runs. Try adding a third item.

Preview

Press Run to see the page.

Console

Nothing logged yet.

Expected console output

Notebooks: 120
Pens: 30
Total: 150

ASI after return New tab

In the bad one, a semicolon is inserted right after `return`, so it returns nothing. The braces below are then read as a separate block of code, never reached.

Preview

Press Run to see the page.

Console

Nothing logged yet.

Expected console output

good: { name: 'Asha' }
bad: undefined

When two lines become one New tab

Add a `;` after `const a = 1` (or at the start of the next line) and both items print.

Preview

Press Run to see the page.

Console

Nothing logged yet.

Expected console output

Before the problem
Uncaught TypeError: Cannot read properties of undefined (reading 'forEach')

Case matters New tab

`console.Log` doesn't exist, so it's `undefined`. Using a name that was never declared (`scoRe`) is a ReferenceError.

Preview

Press Run to see the page.

Console

Nothing logged yet.

Expected console output

10 20 30
function undefined
Uncaught ReferenceError: scoRe is not defined

Break it on purpose

Errors are the best teachers. Make each change, read the error, guess what went wrong, then reveal the answer.

Break #1

Wrong capital in a built-in method

Write document.getElementByID("bill") (capital D at the end).

terminal

$ Console

── what you'll see ──

Uncaught TypeError: document.getElementByID is not a function

Break #2

A comment that never ends

Start a comment with /* and forget the closing */.

terminal

$ Console

── what you'll see ──

Uncaught SyntaxError: Invalid or unexpected token

Break #3

Use a reserved word as a name

Write const class = "5B";.

terminal

$ Console

── what you'll see ──

Uncaught SyntaxError: Unexpected token 'class'

Myth vs fact

Myth

Semicolons are optional, so they never matter.

Fact

ASI fills most of them in, but not after return with a line break, and not before lines that start with (, [ or a backtick. Either always write them or know these rules (many teams let a formatter add them).

Myth

More comments always make code better.

Fact

Comments that repeat the code (// add 1 above count + 1) just add noise and go out of date. Good comments explain why something is done, or warn about a trap.

Myth

Console.log and console.log are the same thing.

Fact

JavaScript is case-sensitive. Only console.log exists.

Pro corner

Extra depth for experienced readers. New to this? Skip it for now and come back later.

▸
ASI is defined precisely in the ECMAScript spec: a semicolon is inserted when the next token can't be parsed, at the end of the input, or after a line break in a restricted production: return, break, continue, throw, yield, postfix ++/--, and before => in arrow functions. Learning these few cases is all ASI really requires.
▸
Lines starting with (, [, a backtick, +, - or / are the hazards in no-semicolon style. Linters like ESLint (rule no-unexpected-multiline) catch these. Prettier's semi: false option adds a leading ; where needed.
▸
Scripts can opt into strict mode with "use strict"; as the first statement; modules and class bodies are strict automatically. Strict mode turns silent mistakes into errors, for example assigning to an undeclared name throws a ReferenceError instead of creating a global.
▸
Since ES2023, a file may start with a hashbang line like #!/usr/bin/env node, so a script can run directly from a Unix shell. Identifiers can use Unicode letters (const café = 1 is valid), though ASCII names are easier for teams to type.

Remember this

1
A statement is one complete instruction, like const price = 40; (remember a value) or console.log(price); (print it). The engine runs statements one after another, from top to bottom, unless something like an if or a loop changes the order (Phase 2). An expression is a piece of code that produces a value, like 40 * 3 or "Hi " + name; statements are often built from expressions.
2
A semicolon ; marks the end of a statement. JavaScript has a rule called ASI (Automatic Semicolon Insertion): if a line break comes where the code can't continue, the engine acts as if you had typed a semicolon. That's why code without semicolons usually works. Both styles are common; the important thing is to know where ASI fails.
3
ASI fails in two ways. First, after return, break, continue and throw, a line break always ends the statement, so return alone on a line returns undefined and the value on the next line is ignored. Second, if the next line starts with (, [ or a backtick, the engine does not insert a semicolon: it glues the two lines together, as in const a = 1 followed by [1, 2].forEach(...), which becomes 1[1, 2].forEach(...). If you leave semicolons out, start such lines with ;.
4
Comments are notes for people. // like this runs to the end of the line. /* like this */ can span many lines but can't be nested. /** ... */ is a JSDoc comment that editors read to show hints about a function. Use comments to explain why the code does something; the code itself already says what. A quick trick while learning: put // in front of a line to switch it off without deleting it.
5
JavaScript is case-sensitive: score, Score and SCORE are three different names, and console.log works while Console.log doesn't exist. Built-in names have fixed capitals: document.getElementById (capital I, small d), Math.max, JSON.parse. A wrong capital is one of the most common beginner bugs, and it shows up as a ReferenceError or ... is not a function.
6
Names you create (identifiers) may contain letters, digits, _ and $, but can't start with a digit and can't be reserved words like if, let, class or return. The usual style is camelCase: totalPrice, userName. Whitespace (spaces, tabs, line breaks) mostly doesn't matter to the engine, so indent to make the structure clear for people. A tool called Prettier (the Format button in Hectal's editor uses it) does this for you.

Explain it without notes

What is the difference between a statement and an expression?

Explain Automatic Semicolon Insertion and give two cases where it surprises people.

What does case-sensitive mean in JavaScript, and what errors does a wrong capital cause?

When should you write a comment, and when shouldn't you?

Practice

Write a program that stores the length (8) and width (5) of a room, works out the area, and logs Area: 40, with a comment for each step.

This code prints undefined. Fix it so it prints { ok: true }: ``js function check() { return { ok: true } } console.log(check())

Find and fix the two bugs: const UserName = "Ravi"; console.Log("Hi", userName);

Trade-offs

↔
Always writing semicolons means never thinking about ASI hazards, at the cost of a little typing; leaving them out looks cleaner but you must know the few dangerous line starts (or let a formatter handle it). Pick one style per project and let a tool enforce it.

Done when you can

I can write a short program as a list of statements that runs top to bottom.
I can explain what ASI does and spot the return and leading-bracket traps.
I can write line and block comments, and switch a line off with //.
I know names are case-sensitive and check capitals when I see not defined.
I know the rules for naming things and avoid reserved words.

Command Palette

Words you'll meet

Step by step

01Plan it in plain words

02Turn each step into statements

03See how the engine reads it

04Know where semicolons matter

05Check the capitals

Try it yourself

Add an item

Switch a line off

Repair the glued lines

Fix the bad return

Code & diagrams

Break it on purpose

Wrong capital in a built-in method

A comment that never ends

Use a reserved word as a name

Myth vs fact

Pro corner

Remember this

Explain it without notes

Practice

Trade-offs

Done when you can