JavaScript

coding learning websites codepractice

JS Basics

JS Variables & Operators

JS Data Types & Conversion

JS Numbers & Math

JS Strings

JS Dates

JS Arrays

JS Control Flow

JS Loops & Iteration

JS Functions

JS Objects

JS Classes & Modules

JS Async Programming

JS Advanced

JS HTML DOM

JS BOM (Browser Object Model)

JS Web APIs

JS AJAX

JS JSON

JS Graphics & Charts

JS Syntax


JavaScript syntax refers to the set of rules that define how JavaScript code should be written and structured. Proper syntax ensures that the browser can correctly interpret and execute the code. Understanding JavaScript syntax is critical for writing error-free programs, as even small mistakes like missing semicolons, brackets, or quotes can lead to unexpected behavior or runtime errors.

In this chapter, you will learn the essential rules of JavaScript syntax, common structures, best practices, practical examples, common mistakes, and real-world applications.

Basics of JavaScript Syntax

JavaScript syntax consists of the following fundamental components:

  • Statements

  • Variables

  • Operators

  • Functions

  • Objects and arrays

  • Comments

  • Expressions

  • Keywords

Every JavaScript program is composed of one or more statements written using these components. Statements are separated by semicolons (;), although JavaScript allows automatic semicolon insertion in many cases.

Case Sensitivity

JavaScript is case-sensitive. For example, myVariable and myvariable are treated as different identifiers.

let Name = "Alice";
let name = "Bob";
console.log(Name); // Outputs: Alice
console.log(name); // Outputs: Bob

Whitespace and Line Breaks

JavaScript ignores extra spaces, tabs, and line breaks. However, proper indentation improves readability.

let a = 10;
let b = 20;
let sum = a + b;
console.log(sum);

Variables and Data Types

Variables store data values and are declared using let, const, or var.

Example

let age = 25;          // Number
const name = "Alice";   // String
var isStudent = true;   // Boolean
  • Numbers can be integers or decimals.

  • Strings are enclosed in single ' ' or double " " quotes.

  • Booleans represent true or false.

Operators

Operators perform operations on values or variables. Common operators include:

  • Arithmetic: +, -, *, /, %

  • Assignment: =, +=, -=

  • Comparison: ==, ===, !=, !==, >, <, >=, <=

  • Logical: &&, ||, !

Example

let x = 10;
let y = 5;
console.log(x + y);  // Outputs: 15
console.log(x > y);  // Outputs: true

Functions

Functions group statements to perform specific tasks. They can accept parameters and return values.

Example

function greet(name) {
    return "Hello, " + name + "!";
}

console.log(greet("Alice")); // Outputs: Hello, Alice!

Functions improve code reusability and organization.

Objects and Arrays

JavaScript uses objects and arrays to store multiple values.

Example: Object

let person = {
    name: "Alice",
    age: 25,
    isStudent: true
};

console.log(person.name); // Outputs: Alice

Example: Array

let colors = ["Red", "Green", "Blue"];
console.log(colors[0]); // Outputs: Red

Comments

Comments are notes in code that the browser ignores. They help explain the purpose of code and improve readability.

  • Single-line comments: // Comment here

  • Multi-line comments: /* Comment here */

Example

// This is a single-line comment
/*
This is a multi-line comment
explaining the code below
*/
let sum = 10 + 5;

Expressions and Statements

An expression produces a value, while a statement performs an action.

let result = 10 + 5; // Expression produces 15, statement assigns it to result

Keywords and Reserved Words

JavaScript has reserved keywords that cannot be used as identifiers, such as if, else, for, function, return, let, const, and var. Using them incorrectly results in syntax errors.

Practical Example Combining Syntax Elements

// Variable declaration
let name = "Alice";
let age = 25;

// Conditional statement
if (age >= 18) {
    console.log(name + " is an adult."); // Output statement
} else {
    console.log(name + " is a minor.");
}

// Loop
for (let i = 1; i <= 3; i++) {
    console.log("Message " + i);
}

// Function
function greet(user) {
    return "Welcome, " + user + "!";
}

console.log(greet(name));

This example demonstrates variables, expressions, statements, loops, conditionals, functions, and comments working together.

Common Mistakes

  • Forgetting semicolons or brackets

  • Mismatched quotes in strings

  • Using reserved keywords as variable names

  • Missing parentheses in function calls

  • Misusing operators or assignment vs comparison

  • Incorrect nesting of blocks

Recognizing these mistakes early prevents syntax errors and runtime issues.

Best Practices

  • Use let and const instead of var

  • Write readable and indented code

  • Comment complex sections for clarity

  • Avoid deep nesting of blocks

  • Test code regularly in the browser console

  • Use consistent naming conventions for variables and functions

  • Keep expressions and statements simple and concise

Adhering to syntax best practices ensures code reliability and maintainability.

Real-World Applications

Understanding JavaScript syntax is essential for:

  • Writing interactive webpages

  • Form validation and user input handling

  • Dynamic content updates

  • Building web applications with frameworks like React, Angular, or Vue

  • Developing server-side applications using Node.js

  • Debugging and troubleshooting code

Mastering syntax is the first step toward writing professional and error-free JavaScript programs.

Summary of JS Syntax

JavaScript syntax defines how code should be written and structured. It includes rules for statements, variables, operators, functions, objects, arrays, comments, expressions, and reserved keywords. Following proper syntax ensures that the browser executes code correctly and prevents errors. Best practices such as using let and const, commenting code, and writing readable structures are essential for maintainable, professional JavaScript development.


Practice Questions

Q1. How do you declare a variable city and assign the value "Delhi" using JavaScript syntax?

Q2. What is the correct way to write a single-line comment in JavaScript?

Q3. How do you declare two variables x and y, assign values 10 and 20, and add them together in a new variable sum?

Q4. How can you write a JavaScript block that logs "Good Morning" only if a variable hour is less than 12?

Q5. How do you declare a constant named PI and assign the value 3.14 to it using correct syntax?

Q6. How do you write a multi-line comment in JavaScript explaining what a function does?

Q7. How do you define a function called greet that logs "Welcome!" when called?

Q8. What is the correct way to name a variable that stores a user's age, following JavaScript identifier rules?

Q9. How do you use an operator to subtract 5 from 15 and store the result in a variable named difference?

Q10. How do you write a loop that runs 3 times and logs the index value using proper JavaScript syntax?


Try a Short Quiz.

coding learning websites codepractice

No quizzes available.

JavaScript

online coding class codepractice

JS Basics

JS Variables & Operators

JS Data Types & Conversion

JS Numbers & Math

JS Strings

JS Dates

JS Arrays

JS Control Flow

JS Loops & Iteration

JS Functions

JS Objects

JS Classes & Modules

JS Async Programming

JS Advanced

JS HTML DOM

JS BOM (Browser Object Model)

JS Web APIs

JS AJAX

JS JSON

JS Graphics & Charts

Go Back Top