Statements, comments & semicolons

How JavaScript reads your code

A JavaScript file is a list of instructions. JavaScript reads them from top to bottom, one after another. In an earlier lesson, you saw that a program is like a recipe: a list of steps done in order. This lesson is about how each step is written. You will learn about:

• Statements: complete instructions, like one step of a recipe.
• Expressions: smaller pieces inside a statement that make a value.
• Braces, { }, which group several steps together.
• Semicolons, ;, which mark where a step ends.
• Comments and spacing, which help people read the code.

First you will see tiny programs. Then you will see four common mistakes:

• return with its value on the next line.
• A missing semicolon before a line that starts with [.
• An extra semicolon right after if (...).
• Braces that look like an object but are not one.

To tell them apart, ask one question:

• For an expression, ask: what value does this make?
• For a statement, ask: what instruction does this give?

One line can have both. In let x = 5 + 3;, the whole line is a statement. It is a declaration: a statement that makes a new name, here x. The part 5 + 3 is an expression inside it.

1const teaPrice = 3;2const total = teaPrice + 2;3console.log(total);

Line 1 makes teaPrice and gives it the value 3. Line 2 is another declaration. First the expression teaPrice + 2 makes 5. Then the statement stores 5 in total. Line 3 calls console.log, which prints 5.

let cartTotal = 0;
cartTotal = 3 + 2;
console.log(cartTotal);

Line 1 starts cartTotal at 0. Line 2 is an assignment: a statement that gives a name a new value with =. The right side, 3 + 2, is an expression. It makes 5, and 5 replaces the old value. Line 3 prints 5.

const drink = "tea";
const label = drink.toUpperCase();
console.log(label);

Line 2 calls toUpperCase(), which turns text into capital letters. The call is an expression, because it makes a value: "TEA". Line 3 prints that value. So a call does not only do things, like printing. It can also give back a value.

The table below sums up four kinds of code. Read each row as: "to spot this kind of code, ask this question."

Now sort these cards. Look closely at console.log("hi");. The call is an expression, but we write it as a whole line because we want it to print. Doing something besides making a value, like printing, is called a side effect.

Later lessons use these words a lot:

• The condition of an if, inside its round brackets, is an expression.
• The code that an if runs is a statement.
• The line "use strict"; in the next lesson is an expression used as a statement. It has a special name: a directive.

Some expressions can stand alone as a whole line. Then they count as a statement. A few examples:

• score; is allowed, but it is almost never useful. It only reads the value and does nothing with it.
• console.log(score); is useful, because the call prints something.
• A semicolon on its own, ;, is allowed too. It is the empty statement: a complete instruction that does nothing on purpose.

1const score = 2 + 3;Run2score;3console.log("score:", score);4;

The player shows a completion value for each line. That is the result JavaScript notes down after it runs a statement. You don't see it in a normal program. Some tools show it, like the browser console and Node's vm.runInContext. A completion value is not printed output. console.log prints text on the screen, but its own value is undefined.

A block statement, or block, is a group of statements inside braces, { }. You will see blocks after if, after for, in functions, and in many other places. The braces only group the statements. They don't make a value, and they don't pause anything. The statements inside still run in order, from top to bottom.

1{2  console.log("start block");Run3  const message = "inside";4  console.log(message);5}6console.log("after block");

Look at const message. It is made inside the block. A name made with let or const inside braces belongs to that block. Code outside the braces can't use it. You will learn the full rules later, in the lessons on scope. For now, remember: braces often make a small room for names.

const hasItems = true;
if (hasItems) {
  console.log("Show checkout");
}
console.log("Page ready");

Line 2 checks hasItems. It is a boolean: a value that is either true or false. Here it is true, so line 3 runs and prints Show checkout. The block ends on line 4. Then line 5 prints Page ready. If hasItems were false, JavaScript would skip only the block. Line 5 would still print Page ready.

1{2  const drink = "tea";3  console.log(drink);4}5console.log(typeof drink);

Line 2 makes drink inside the braces. Line 3 prints tea. Line 5 is outside the block. It uses typeof, which tells you the type of a value as text. typeof is safe to use on a name that doesn't exist: it gives "undefined" instead of an error. So line 5 prints undefined. That shows drink can't be used outside its block.

Braces have two jobs in JavaScript:

• They can start a block, as you just saw.
• They can make an object: a value that holds named things, like { name: "Asha" }.

Where the braces are decides the job. At the start of a statement, { a: 1 } starts a block, not an object. Inside that block, a: is a label: a name with a colon, put in front of a statement. Labels are rare; you only need to know they exist. The 1 after the label is an expression used as a statement. So the completion value of the whole line is 1.

1{ a: 1 };2({ a: 1 });3(() => { a: 1 })();4(() => ({ a: 1 }))();

const user = { name: "Asha" };
console.log(user.name);

Here the braces come after =. After =, JavaScript expects a value, so the braces make an object. No round brackets are needed. Line 2 reads the object's name and prints Asha. You only need round brackets when an object is at the very start of a statement.

Arrow functions have the same problem. An arrow function is a short way to write a function, like () => 5. In () => { a: 1 }, the braces after => are the function's block. There is no return, so it gives back undefined. To give back an object, wrap it in round brackets: () => ({ a: 1 }).

A semicolon, ;, marks the end of a statement. If you leave one out, JavaScript can sometimes add it for you at a line break. This is called automatic semicolon insertion, or ASI for short. ASI is like autocorrect on your phone. It usually helps, but sometimes it guesses wrong.

First mistake: some lines can join onto the line before them. This happens when a line starts with [, (, or a backtick (`, used for template strings). JavaScript then reads the two lines as one statement. Switch the semicolon on and off below. In Chrome and Node, the version without it throws this error: TypeError: Cannot read properties of undefined (reading 'forEach'). Other browsers may word the message differently. The error type, TypeError, is the same.

1const a = 1Run2[1, 2].forEach((n) => console.log(n));

Second mistake: a line break right after return. The function below really gives back undefined. ASI adds a semicolon right after return, so the function stops there. The object on the next lines is never returned.

1function makeCard() {2  return3  {4    title: "JavaScript"5  };6}7console.log(makeCard());

1function makeCard() {2  return { title: "JavaScript" };3}4console.log(makeCard().title);

Line 2 keeps return and the object on the same line. So the function gives back the object, and line 4 prints its title: JavaScript. This is the normal way to return an object from a function.

Comments, spacing, and formatting

A comment is a note in your code for people. JavaScript skips comments; they never run. Use a comment to say why the code does something. It can also be a short note for whoever reads the code later. Don't use a comment to repeat what the code already says.

1// Explain why this line exists.2const page = "https://completefrontend.com";3/* A block comment can4   span several lines. */5/** JSDoc-style comments describe functions for tools. */6const text = "// this is text, not a comment";7console.log(page);

Line by line:

• Line 1 is a one-line comment.
• Lines 3 and 4 are one block comment, across two lines.
• Line 5 is a JSDoc comment, explained below.
• Line 6 is code. It stores text that happens to contain //.
• Line 7 prints page, so the output is https://completefrontend.com. The comments don't change it.

The rules for each kind of comment:

• // starts a one-line comment. It ends at the end of the line.
• /* ... */ is a block comment. It can cover several lines. You can't put one block comment inside another.
• /** ... */ is a JSDoc comment. It is still a block comment, but code editors read it to show help about a function.
• // inside quote marks is part of the text, not a comment.

// Show the greeting only after the user signs in.
const signedIn = true;
if (signedIn) {
  console.log("Welcome, Asha");
}

The comment on line 1 gives a reason. It doesn't describe the code on the next line. JavaScript skips line 1. It sees that signedIn is true, and prints Welcome, Asha. Avoid comments like // set signedIn to true. The code already says that.

Whitespace means spaces, tabs, and line breaks. It works like the spaces between words. Most whitespace helps people read, but it doesn't change what the code means. For example, 2+2 and 2 + 2 are the same expression. Tools called formatters, like Prettier, fix the spacing for you so it looks the same everywhere. You have already seen the two exceptions: a line break right after return, and a line break before a line that can join the line above.

1const price=3;2const total = price + 2;3console.log(total);

Line 1 has no spaces around =. Line 2 has spaces around = and +. Both lines work, and line 3 prints 5. Write it the second way. JavaScript gets the same values either way, but people find spaced code easier to read.

Where you'll use this

You will use these ideas in almost every program:

• The code inside a function is a list of statements.
• Conditions are expressions.
• if, loops, and functions use blocks.
• Comments explain choices that are not obvious.
• Semicolons and neat spacing show readers where each statement ends, so nobody has to guess.

1// Keep related steps together.2if (message.trim() !== "") {3  const loud = message.toUpperCase();4  console.log(loud);5}6 7// Start lines with [ safely after a statement.8const count = 1;9["ready"].forEach((word) => console.log(word));

Line 2 uses an expression as the condition of the if. The braces from line 2 to line 5 make a block. Line 8 ends with a semicolon, so line 9, which starts with [, is a new statement. The comments on lines 1 and 7 explain the reason for the code. They don't say the obvious, like "console.log prints".

const message = "  hello  ";
const cleanMessage = message.trim();
if (cleanMessage !== "") {
  console.log(cleanMessage.toUpperCase());
}

Text typed into a form often has extra spaces. Line 2 uses trim(), which removes spaces from both ends. It gives "hello". Line 3 checks that this text is not empty, so line 4 prints HELLO. This way, an empty form field never sends an empty message.

The next lesson, Strict mode, starts with the line "use strict";. That line is a directive: an expression used as a statement, at the top of a script or function, that turns on a special mode. You don't need the strict-mode rules yet. Just notice that you can now read how the line is built.

Common misconceptions

The table below lists code that looks like one thing but is another. Read each row as: "this looks like X, but it really is Y, so do Z."

Six exercises, from easy to harder. Try each one before you open the hints.

function label() {
  return
  {
    text: "done"
  };
}
console.log(label());

const a = 1
[1, 2].forEach((n) => console.log(n));

const a = 1;
[1, 2].forEach((n) => console.log(n));

let isReady = false;
if (isReady);
{
  console.log("Running anyway");
}

let isReady = false;
if (isReady) {
  console.log("Running only when ready");
}

console.log(({ a: 1 }).a);

// Keep the first item as a featured card for the layout.
const featured = items[0];

Answer each question before you open its explanation. For code questions, run the code in your head one statement at a time. Every answer was checked by running real JavaScript.

Key takeaways

• A statement is a complete instruction. An expression makes a value.
• An expression can be a whole line. That is useful when it does something, like console.log printing.
• A block is a group of statements in braces. Names made with let or const inside it stay inside it.
• At the start of a statement, braces make a block. Wrap them in round brackets when you want an object.
• ASI adds some missing semicolons. Watch out after return, and before lines that start with (, [, or a backtick.
• Comments are for people. Spacing is mostly for people too, and formatters keep it neat.

To look at the big picture again, go back to Why JavaScript?. Coming next: Strict mode.