JavaScript syntax is the set of grammar rules that define how code must be written for the engine to understand it. This lesson covers statements and semicolons, case-sensitivity, valid identifier names, comments, and reserved keywords.
1JavaScript Basic Syntax - In-Depth Guide Part 1
Welcome to JavaScript Basic Syntax. Just like human languages have grammar, programming languages have syntax—a set of rules that defines how programs are constructed.
// JavaScript Syntax: The Rules of the GameJS Syntax Rules
2JavaScript Basic Syntax - In-Depth Guide Part 2
The basic unit of a program is a 'Statement'. We separate statements with semicolons (;). This tells the browser where one instruction ends and the next begins.
console.log('Statement 1');
console.log('Statement 2');Statements
3JavaScript Basic Syntax - In-Depth Guide Part 3
JavaScript is strictly Case-Sensitive. This means 'score' and 'Score' are treated as two completely different variables. Precision is key!
let score = 100;
let Score = 200;
console.log(score); // 100Case Sensitivity
4JavaScript Basic Syntax - In-Depth Guide Part 4
Identifiers are the names you give to variables or functions. They must start with a letter, an underscore (_), or a dollar sign ($). They CANNOT start with a number.
let _user = 'Admin';
let $price = 99;
let user1 = 'Guest';
// ❌ let 1user = 'Error';Valid Names
5JavaScript Basic Syntax - In-Depth Guide Part 5
Comments are instructions for humans, not computers. Use // for single-line comments and for multi-line blocks of notes.
// Single line comment
Comments
6JavaScript Basic Syntax - In-Depth Guide Part 6
Reserved words are keywords that have special meaning to JavaScript (like let, function, if). You cannot use these as names for your own variables.
// ❌ let function = 'Error';
// ❌ let let = 'Error';Reserved Words
7JavaScript Basic Syntax - In-Depth Guide Part 7
Watch the render. See how perfectly formatted syntax allows the browser to execute instructions one after another without errors.
Syntax Accepted
8JavaScript Basic Syntax - In-Depth Guide Part 8
Whitespace and Indentation: While JS doesn't care about extra spaces, clean formatting makes your code much easier for you and your team to read.
function greet() {
console.log('Hello!');
}Formatting
9JavaScript Basic Syntax - In-Depth Guide Part 9
Syntax mastery achieved! You've learned the grammar of the web. Ready to store data with Variables & Data Types?
On to Variables
10Step-by-Step Breakdown
Welcome to JavaScript Basic Syntax. Just like human languages have grammar, programming languages have syntax—a set of rules that defines how programs are constructed.
The basic unit of a program is a 'Statement'. We separate statements with semicolons (;). This tells the browser where one instruction ends and the next begins.
JavaScript is strictly Case-Sensitive. This means 'score' and 'Score' are treated as two completely different variables. Precision is key!
Checkpoint: Will 'alert()' and 'Alert()' work the same way in JavaScript?
- →Yes, JS ignores case
- →No, JS is case-sensitive
Identifiers are the names you give to variables or functions. They must start with a letter, an underscore (_), or a dollar sign ($). They CANNOT start with a number.
Comments are instructions for humans, not computers. Use // for single-line comments and for multi-line blocks of notes.
Reserved words are keywords that have special meaning to JavaScript (like let, function, if). You cannot use these as names for your own variables.
Watch the render. See how perfectly formatted syntax allows the browser to execute instructions one after another without errors.
Checkpoint: Which of the following is a VALID variable name in JavaScript?
- →1total
- →total
Whitespace and Indentation: While JS doesn't care about extra spaces, clean formatting makes your code much easier for you and your team to read.
Checkpoint: What symbol should you use to end a JavaScript statement?
- →Comma (,)
- →Semicolon (;)
Syntax mastery achieved! You've learned the grammar of the web. Ready to store data with Variables & Data Types?
Level Up 🚀
Advanced cheat sheets, SEO tricks, and interview prep for this topic.
Browser Support
Fully supported.
Fully supported.
Fully supported.
Fully supported.
Accessibility (A11y)
1Descriptive Identifier Names Support Maintainability, Which Indirectly Supports Accessibility
Syntax rules don't dictate variable names beyond validity, but choosing clear names (e.g. `isMenuExpanded` instead of `x`) makes it far easier for a team to correctly wire up related ARIA state (`aria-expanded`) and keep it in sync with the code that actually toggles it.
SEO Implications
- 1
A Single Syntax Error Can Take Down an Entire Page's Interactive Content
Because JavaScript parsing fails all-or-nothing for a file, one invalid identifier or missing bracket can throw a script-blocking error that prevents unrelated interactive content (menus, forms, dynamically injected text) from ever rendering — which crawlers then see as missing or broken content.
Best Practices
Don't Rely on Automatic Semicolon Insertion (ASI)
JavaScript can often infer where a statement ends without an explicit semicolon, but ASI has documented edge cases (like a `return` statement followed by a newline) that silently produce different behavior than intended. Terminate statements with semicolons explicitly rather than depending on the parser to guess correctly.
Choose Descriptive, Case-Consistent Identifier Names
Since JavaScript is case-sensitive, `userId` and `userid` are two different variables — a common source of typo bugs. Pick one casing convention (typically camelCase) and apply it consistently so identifiers are both valid and unambiguous to every reader.
Frequent Bugs
A `return` statement followed immediately by a newline and then the actual value on the next line silently returns `undefined`.
Automatic Semicolon Insertion (ASI) inserts a semicolon right after `return` if a newline follows it, effectively turning `return \n { value }` into `return; { value }`. Always keep the returned expression on the same line as the `return` keyword, or wrap it in parentheses that start on that same line.
Using a reserved word (like `class`, `return`, or `let`) as a variable name throws a SyntaxError.
Reserved words are baked into the language's grammar and can't double as identifiers. Rename the variable to something that isn't a keyword — e.g. use `className` instead of `class`.
Real-World Examples
A Real ASI Bug from a Misplaced Newline
A function was expected to return an object, but callers kept receiving undefined. The bug was that 'return' was on its own line, with the object literal starting on the next line, so Automatic Semicolon Insertion silently terminated the return statement early.
// ❌ Buggy — returns undefined due to ASI
function getConfig() {
return
{
theme: 'dark'
};
}
// ✅ Fixed — object starts on the same line as return
function getConfig() {
return {
theme: 'dark'
};
}