JavaScript syntax is the set of rules that defines how to write JavaScript code so the browser can understand it. Think of it as the grammar of the JavaScript language.

For a beginner, understanding syntax is crucial because even small mistakes like missing semicolons or brackets can break your code.

1️⃣ Statements

A statement is an instruction to the browser. Most JavaScript statements end with a semicolon (;) (optional in many cases, but recommended).

let name = "Alice"; // Assigns "Alice" to the variable 'name'
alert(name);         // Shows an alert box with the value of 'name'

let name = "Alice"; → declaration statement
alert(name); → function call statement

2️⃣ Case Sensitivity

JavaScript is case-sensitive, which means:

let Name = "Alice";
let name = "Bob";

console.log(Name); // Alice
console.log(name); // Bob

Name and name are considered different variables.

3️⃣ Comments

Comments are notes in code ignored by the browser. Useful for explaining code.

// This is a single-line comment

/*
  This is a multi-line comment
  explaining the code block
*/

4️⃣ Variables

Variables store data in JavaScript. There are three ways to declare them:

let age = 25;       // Can change later
const pi = 3.1416;  // Constant, cannot be changed
var city = "Paris"; // Older syntax, avoid using now

let → modern way, block-scoped
const → constant value
var → older, function-scoped

5️⃣ Data Types

Common JavaScript data types:

let name = "Alice";        // String
let age = 25;              // Number
let isStudent = true;      // Boolean
let colors = ["red","blue"]; // Array
let person = {name:"Alice", age:25}; // Object
let empty = null;          // Null
let notDefined;            // Undefined

6️⃣ Operators

Operators perform actions on values:

let x = 10;
let y = 5;

console.log(x + y); // 15 Addition
console.log(x - y); // 5 Subtraction
console.log(x * y); // 50 Multiplication
console.log(x / y); // 2 Division
console.log(x % y); // 0 Modulus (remainder)

7️⃣ Functions

Functions are reusable blocks of code:

function greet(name) {
  console.log("Hello, " + name + "!");
}

greet("Alice"); // Hello, Alice!

name → parameter
"Alice" → argument

8️⃣ Conditionals

Conditionals allow decision-making:

let age = 18;

if(age >= 18) {
  console.log("You are an adult");
} else {
  console.log("You are a minor");
}

9️⃣ Loops

Loops repeat code multiple times:

for(let i=1; i<=5; i++) {
  console.log("Number " + i);
}

1️⃣0️⃣ Events (Client-Side Interaction)

JavaScript can respond to user actions:

<button onclick="sayHello()">Click Me</button>

<script>
function sayHello() {
  alert("Hello, User!");
}
</script>

onclick → event
sayHello() → function called when button is clicked

Compilation of Entire Code

Explanation:

Declares a variable name
Defines a function updateMessage() that uses an if statement
Updates paragraph text dynamically when button is clicked
Uses a for loop to print messages to console

<!DOCTYPE html>
<html>
<head>
  <title>JavaScript Syntax Example</title>
</head>
<body>

  <h1>JavaScript Syntax Demo</h1>

  <p id="demo">Your message will appear here.</p>
  <button onclick="updateMessage()">Click Me</button>

  <script>
    // Variable declaration
    let name = "Alice";

    // Function declaration
    function updateMessage() {
      // Conditional
      if(name) {
        document.getElementById("demo").innerHTML = "Hello, " + name + "!";
      } else {
        document.getElementById("demo").innerHTML = "Hello, Guest!";
      }
    }

    // Loop example
    for(let i=1; i<=3; i++) {
      console.log("Loop count: " + i);
    }
  </script>

</body>
</html>

JavaScript Syntax

Compilation of Entire Code

Test Your Understanding

All Courses

Java Script