Platform under construction

JavaScript Basics

Basic

JavaScript Syntax

JavaScript syntax is the grammar of the language: values, variables, expressions, statements, blocks, strings, punctuation and readable formatting.

const name = "User A";
const tasks = 4;

if (tasks >= 3) {
  console.log(`${name} is making progress.`);
}

JavaScript Basics

Syntax tells JavaScript exactly what you mean.

JavaScript is case-sensitive. name, Name and NAME are three different identifiers. Small spelling and punctuation details matter.

A program is made from expressions and statements. Expressions produce values. Statements perform actions, declare things or control flow.

Readable syntax is not only about making the browser happy. It is about making the next developer understand your intent quickly.

Identifiers

Names for variables, functions and properties. Example: itemCount.

Literals

Values written directly in code. Example: 42, "hello", true or [].

Expressions

Code that produces a value. Example: price * quantity.

Blocks

Code between curly braces that groups statements together.

Examples

Good JavaScript is clear, scoped and easy to debug.

Readable JavaScript syntax

const itemPrice = 12;
const itemCount = 5;
const total = itemPrice * itemCount;

if (total > 50) {
  console.log("Large cart estimate");
}

Hard to read and easy to misunderstand

let x=12,y=5,z=x*y;if(z>50){console.log("ok")}

const ItemPrice = 12;
console.log(itemPrice); // Different name, error

Rules that matter

Learn the decision before memorizing the keyword.

JavaScript becomes much easier when you understand why a pattern exists. The syntax is only the surface; the real skill is choosing the right behavior for the interface.

Use clear names

itemPrice is more useful than x when the code grows.

Respect case sensitivity

One capital letter can create a completely different identifier.

Prefer const by default

Use const when a binding will not be reassigned. Use let when it will.

Use blocks clearly

Curly braces show which statements belong together.

Format consistently

Indentation and spacing help humans read code.

Understand semicolons

JavaScript has automatic semicolon insertion, but consistent semicolons avoid confusing edge cases.

Production thinking

JavaScript quality is visible in behavior, reliability and trust.

Why does this matter?

Syntax is the first gate. If JavaScript cannot parse your code, nothing else matters. If humans cannot read it, maintaining it becomes slow and risky.

Accessibility

A syntax error can stop all scripts on a page, including scripts that control accessible navigation, validation or feedback.

Production note

Use formatting and linting tools in production projects. They keep style consistent and catch many mistakes early.

SEO note

A syntax error in critical JavaScript can break content, internal links or rendered UI. That can affect crawling and user behavior.

Live code lab

Change the HTML, CSS or JavaScript and run the result.

The preview runs inside an isolated iframe. The JavaScript is placed inside the HTML editor for now, so every example stays together and remains easy to understand.

Mini assignment

Try this now.

Change userName to another value.
Change itemCount below 3 and add an else block.
Break the capitalization of output and observe the error.

Practice assignment

Do this before moving to the next topic.

Write three const declarations with clear names.
Write one if block using those values.
Use a template literal to create a readable message.

HTML + JavaScript CSS

Live preview

Self-check

Before you continue, prove that you understand JavaScript Syntax.