JavaScript syntax: write code people can read and maintain

Learn how to structure statements, blocks and comments with intention so you avoid basic errors and build a strong foundation for the rest of the course.

How much do you know about JavaScript?

📘 Theory

Syntax as a communication contract

A badly written instruction breaks execution. A well written one removes ambiguity.

JavaScript reads instructions in sequence. If it finds a broken rule such as an open parenthesis, an unclosed brace or an invalid token, it stops the flow and throws an error.

That is why syntax matters twice: first so the engine can run the code, and second so people can read and maintain it.

Statement: the smallest executable unit.
Block: a group of statements wrapped in braces.
Comment: context for humans, not for the runtime.
Consistent style: fewer reading and review errors.

Statements and delimiters

Write explicit instructions and avoid relying on ambiguous guesses.

JavaScript has automatic semicolon insertion, but depending on it blindly can create surprising behavior in edge cases.

Keeping a stable convention with complete statements and uniform formatting reduces syntax bugs and makes teamwork easier.

One idea per line.
Use variable names that are clear and consistent.
Avoid cryptic expressions at the beginner stage.
Choose clarity over extreme brevity.

Blocks with braces and consistent indentation

Braces define scope. Indentation helps you reason quickly.

In `if`, `for`, `while` and functions, braces define the logical block. Errors around opening and closing them create bugs that beginners often struggle to read.

Indentation does not change execution, but it does change comprehension. A consistent structure helps you spot problems visually before running the code.

Useful comments and naming

Comment decisions, not obvious lines.

A useful comment explains business intent, constraints or temporary decisions. Obvious code does not need a comment.

Choosing better variable and function names reduces the need for comments and improves the readability of the whole file.

Use `//` for short clarifications.
Use `/* ... */` only for short targeted blocks.
Avoid generic names such as `data`, `x` or `tmp` without context.
Prefer names like `finalPrice`, `activeUser` or `cartTotal`.

Common syntax errors and how to detect them

Most early blockers come from the same three patterns.

At the beginner stage, the most common failures are unclosed delimiters, unbalanced quotes and misspelled names. All of them stop the script or create misleading errors.

The right way to solve them is to read the exact error, go to the reported line and check the immediate context: opening and closing symbols, tokens and names.

1 Syntax as a communication contract 2 Statements and delimiters 3 Blocks with braces and consistent indentation 4 Useful comments and naming 5 Common syntax errors and how to detect them

🧪 Learn by doing

Example Guided example: statements with intent Chain two simple statements and observe the reading order.

⌄

Example Guided example: a correct conditional block See how braces group multiple instructions inside the same block.

⌄

Example Interactive demo: syntax template generator Choose a base structure such as a statement, a block or a comment and preview a valid template.

⌄

🏁 Challenges

Challenge Challenge 1: useful comment plus valid statement Add a meaningful comment and write a simple console statement.

⌄

Challenge Challenge 2: an if block with two outputs Complete an `if` block by adding two messages inside the braces.

⌄

🧰 Resources

Useful links

MDN: Grammar and types MDN: Lexical grammar ECMAScript specification MDN: JavaScript reference javascript.info: code structure Prettier docs

Test

Check your knowledge with a test about JavaScript.

Test for JavaScript

Course resources 62

📘 Glossary 🎧 Audio 📄 PDFs 🖼️ Infographics 🎬 Videos 🔗 Links 🧠 Flashcards 🧩 Snippets

‹

Lesson 03

Browser console: practical debugging from day one

Lesson 05

Variables in JavaScript: model data with intention

›