LearningJavaScript TutorialSyntax, Statements & Console
CHAPTER 2 · FOUNDATIONS

JavaScript Syntax, Statements & Console

JavaScript ka code readable rules follow karta hai: expressions values produce karte hain, statements actions describe karte hain, blocks code ko group karte hain, aur browser console learning aur debugging ka sabse useful starting tool hai.

English + Hinglish28 min readPractice included

What is JavaScript syntax?

Syntax means the rules that define how JavaScript code is written. Correct keywords, identifiers, operators, punctuation, quotes and brackets help the engine understand your program.

Basic syntaxJS
console.log("Hello, JavaScript!");
console.log(10 + 5);
Hinglish Explanation

Syntax ko language ki grammar samjho. Jaise sentence me words ka order matter karta hai, waise code me parentheses, quotes aur brackets ka correct place matter karta hai.

Statements

A statement is an instruction that JavaScript can execute. Many programs are a sequence of statements.

statements.jsJS
console.log("Step 1");
console.log("Step 2");
console.log("Step 3");

JavaScript generally executes these statements from top to bottom unless later control-flow features change that order.

Expressions

An expression is code that produces a value. Expressions can appear inside statements.

expressions.jsJS
2 + 3
"Broun" + "Stack"
10 > 5

console.log(2 + 3);

2 + 3 is an expression that produces 5. Wrapping it in console.log() creates a statement that prints that result.

Simple difference: Expression value banata hai; statement program ko koi instruction deta hai. Real code me dono often saath use hote hain.

Semicolons

Semicolons can explicitly terminate many JavaScript statements. JavaScript also has automatic semicolon insertion, but a consistent project style is important.

semicolons.jsJS
console.log("One");
console.log("Two");

Beginners ke liye semicolons consistently use karna code boundaries ko visually clear rakhta hai.

Important: Automatic semicolon insertion par blindly depend mat karo. Kuch line breaks surprising behavior create kar sakte hain.

Whitespace and line breaks

JavaScript usually ignores extra spaces and many line breaks outside strings, so you can format code for readability.

Both validJS
console.log(5 + 5);

console.log(
  5 + 5
);

Readable formatting matters even when the engine can understand compressed code.

Code blocks

Curly braces group statements into a block. You will use blocks heavily with conditions, loops and functions.

block previewJS
{
  console.log("Inside a block");
  console.log("Still inside");
}

Chapter 5 onward me blocks ka real use if, loops aur functions ke saath clearly dikhega.

Comments

Comments help developers explain non-obvious intent and temporarily annotate code. They are ignored during normal execution.

comments.jsJS
// Single-line comment
console.log("Hello");

/* Multi-line comment
   for useful context */
console.log("World");
Good comment: Why explain karo, obvious code ko repeat mat karo.

Quotes and strings

Text values can use single quotes, double quotes or template literals. We will study strings deeply in later chapters; for now, keep opening and closing quotes matched.

strings.jsJS
console.log("Double quotes");
console.log('Single quotes');
console.log(`Template literal preview`);

Case sensitivity

JavaScript is case-sensitive. Different letter casing means different identifiers and property names.

case.jsJS
console.log("works");
// Console.log("different name");

The built-in browser console object is named console, not Console.

Browser console

The developer console lets you run JavaScript, inspect values, read warnings and errors, and test small ideas before adding them to a project.

Use it daily

Console sirf beginner tool nahi hai. Professional developers bhi debugging, value inspection aur quick experiments ke liye DevTools Console use karte hain.

console.log()

console.log() is the most common console method for general output.

console-log.jsJS
console.log("User loaded");
console.log(25);
console.log(10 + 15);

Useful console methods

Different console methods can communicate different debugging intent.

console-methods.jsJS
console.log("Normal message");
console.info("Information");
console.warn("Warning message");
console.error("Error message");

Browser appearance can vary, but warnings and errors are usually visually emphasized.

console.table() and grouping

console.table() can make arrays or objects easier to inspect. console.group() can organize related logs.

organized-console.jsJS
console.table([
  { topic: "HTML", status: "complete" },
  { topic: "CSS", status: "complete" }
]);

console.group("Course status");
console.log("HTML complete");
console.log("CSS complete");
console.groupEnd();

console.clear()

console.clear() requests that the console output be cleared. Browser DevTools may preserve some messages depending on settings.

clear.jsJS
console.clear();
console.log("Fresh output");

Running code in a page

For small experiments, JavaScript can be written inside a page-level <script> element. Larger projects usually move JavaScript into separate files for maintainability.

Inline scriptHTML + JS
<script>
  console.log("Page script is running");
</script>
Next step: Variables aur data types ke baad hum increasingly practical browser code likhenge. External script loading ko project examples me properly use karenge.

Syntax errors

A syntax error happens when JavaScript cannot parse your code because the written structure is invalid.

Broken codeJS
console.log("Hello";

The missing closing parenthesis prevents the code from being parsed correctly. Console message and line number read karna debugging ka first step hai.

A simple debugging flow

  1. Error message exactly read karo.
  2. Reported line aur nearby lines inspect karo.
  3. Quotes, brackets, parentheses aur spelling compare karo.
  4. One small fix karo.
  5. Code dobara run karo.
  6. Expected output ko console me verify karo.

Clean beginner syntax habits

  • Consistent indentation use karo.
  • One statement per line prefer karo while learning.
  • Meaningful spacing rakho.
  • Matching brackets and quotes carefully close karo.
  • Case sensitivity remember karo.
  • Comments ko useful context ke liye use karo.
  • Console output ko final UI ka replacement mat samjho.

Common beginner mistakes

  • Opening quote close karna bhoolna.
  • Parenthesis ya curly brace missing kar dena.
  • console ko wrong casing me type karna.
  • Expression aur console output ko same concept samajhna.
  • Every line me random semicolon style mix karna.
  • Error message ko ignore karke random changes karna.
  • console.log() ko production user interface ke roop me use karna.

Chapter checklist

  • Syntax ka meaning explain kar sakte ho?
  • Statement aur expression ka basic difference clear hai?
  • Semicolons aur whitespace ka role samajh aaya?
  • Code block aur comments recognize kar sakte ho?
  • console.log(), warn(), error() aur table() use kar sakte ho?
  • Syntax error ko console se locate kar sakte ho?

Practice Task — Console Lab

Browser Console me syntax aur debugging practice karo.

  1. Three separate console.log() statements likho.
  2. 12 + 8 expression ko directly run karo, phir same expression ko console.log() me print karo.
  3. console.info(), console.warn() aur console.error() ka output compare karo.
  4. Two sample records ko console.table() me show karo.
  5. Ek console.group() bana kar three related messages organize karo.
  6. Single-line aur multi-line comment likho.
  7. Intentionally ek quote missing karke syntax error read karo; phir fix karo.
  8. Ek closing parenthesis missing karke error location identify karo.
  9. console.clear() run karke fresh practice session start karo.
  10. Same exercises dobara bina copy-paste ke khud type karo.