JavaScript: Syntax & Fundamentals

Master the building blocks of valid JavaScript: statements, expressions, semicolons, naming, and debugging tools.

Statements and Expressions

A statement is an instruction that performs an action. An expression is any piece of code that evaluates to a value. Every expression can appear inside a statement, but not every statement is an expression.

`Statements vs Expressions`

The core distinction that shapes how JavaScript code is structured.

Expression: produces a value: 5 + 3, true, name.toUpperCase()
Statement: performs an action: if, for, variable declarations
An expression statement is an expression used as a statement: console.log("hi");
Function declarations are statements; function expressions are expressions

Statements vs Expressions

Run this and observe: expressions produce the values that statements use.

Semicolons and Automatic Semicolon Insertion

Semicolons mark the end of a statement. JavaScript's parser will automatically insert them in most cases (ASI), but relying on ASI has well-known pitfalls that can cause silent bugs.

`ASI: Automatic Semicolon Insertion`

The JS engine adds semicolons for you in most places, but not always where you expect.

ASI inserts a semicolon when a line break appears in a position that would cause a parse error
Pitfall: a line starting with (, [, or ` is treated as a continuation of the previous line
Pitfall: return followed by a newline returns undefined, ASI inserts after return
Most style guides recommend always writing semicolons explicitly to avoid surprises

ASI Return Pitfall

Run this to see ASI silently insert a semicolon after return, causing undefined.

Case Sensitivity

JavaScript is fully case-sensitive. Variable names, function names, and keywords must match exactly, let is valid, Let is not. Two identifiers that differ only in casing are completely separate.

`Case Sensitivity Rules`

Capitalization mismatches are one of the most common beginner bugs.

myVar, MyVar, and MYVAR are three different variables
All built-in keywords are lowercase: let, const, function, return
console.log works; Console.Log throws a ReferenceError
HTML attribute names are case-insensitive, JavaScript identifiers are not

Case Sensitivity in Practice

score and Score are independent, a common source of hard-to-spot bugs.

Whitespace and Formatting

JavaScript ignores extra spaces, tabs, and blank lines between tokens. Formatting is purely for human readability, the engine sees the same code regardless of indentation or line breaks.

`Whitespace`

Whitespace is invisible to the JS engine but critical for readable code.

Spaces, tabs, and newlines between tokens are ignored
Consistent indentation (2 or 4 spaces) is a team convention, not a language rule
Blank lines between logical blocks improve readability
Tools like Prettier autoformat code, use one on every project

Whitespace Is Ignored by the Engine

Both lines do the same thing, but only one is maintainable.

Reserved Keywords

Reserved keywords are words that have a special meaning in JavaScript. You cannot use them as variable or function names, the parser will throw a SyntaxError.

`Reserved Keywords`

These identifiers belong to the language, you cannot redeclare them.

Declaration: var, let, const, function, class
Control flow: if, else, for, while, switch, return, break
Values: true, false, null, undefined
Future-reserved: enum, implements, interface, package

Using vs Misusing Keywords

You can use a keyword as part of a longer name, just not as the full name.

Code Organization and Style Guides

A style guide is a set of conventions for how code should be written and formatted. The most widely adopted JavaScript style guides are Airbnb and Google's. Tools like ESLint enforce them automatically.

`Style Guide Essentials`

Consistent style makes a codebase easier to read, review, and maintain.

Use const by default; use let only when reassignment is needed; avoid var
One statement per line: never chain multiple statements on one line
Opening braces go on the same line as the statement (K&R style)
Use ESLint to catch errors and enforce rules automatically

Poor vs Consistent Style

Both blocks do the same thing, only one survives a code review.

Naming Conventions

JavaScript has established naming conventions that signal the purpose and type of an identifier at a glance. Following them makes code self-documenting.

`Naming Conventions`

Convention-based names communicate intent without extra comments.

camelCase: variables and functions: getUserName, totalPrice
PascalCase: classes and constructors: UserProfile, ShoppingCart
UPPER_SNAKE_CASE: constants that never change: MAX_RETRIES, API_URL
_prefix: private/internal by convention: _internalState
Boolean variables should read like a question: isLoading, hasError

Naming Conventions in Practice

The name alone tells you what kind of thing it is, no comment needed.

Code Debugging Basics

The console object is your first line of defence when debugging. Different methods highlight different kinds of output and help you find bugs faster.

`Console Debugging Methods`

Knowing all console methods speeds up debugging significantly.

console.log(): print any value for inspection
console.error(): red output, stands out in the console
console.warn(): yellow output for non-fatal issues
console.table(): renders arrays/objects as a readable table
console.group() / groupEnd(): indent related logs together
console.time() / timeEnd(): measure how long a block takes

Console Debugging Toolkit

Run this to see log, table, warn, error, and timeEnd output together.

Knowledge Check

1. What is the difference between a statement and an expression in JavaScript?

2. What does ASI (Automatic Semicolon Insertion) do?

3. Which of the following is true about JavaScript case sensitivity?

4. Which naming convention is standard for JavaScript variables and functions?

5. Which of the following is a reserved keyword in JavaScript?

6. What does console.table() do?

7. Which ASI pitfall can cause a function to return undefined unexpectedly?

Previous Next