JavaScript Introduction

JavaScript Syntax

Learn JavaScript syntax, including statements, values, variables, operators, expressions, keywords, identifiers, comments, and code blocks.

JavaScript syntax means the set of rules used to write JavaScript code correctly.

Just like English has grammar rules, JavaScript also has rules. If we do not follow these rules, the browser may show an error or the code may not work properly.

JavaScript syntax includes statements, variables, values, operators, functions, comments, and code blocks.

What is JavaScript Syntax?

JavaScript syntax defines how JavaScript programs are written.

Example:

Example

javascript

let message = "Hello JavaScript";
document.write(message);

In this example:

Part	Meaning
`let`	Used to declare a variable
`message`	Variable name
`"Hello JavaScript"`	Text value
`document.write()`	Displays output on the web page
`;`	Ends the statement

JavaScript Statements

A JavaScript program is made up of statements.

A statement is an instruction that tells the browser what to do.

Example

html

<!DOCTYPE html>
<html>
<head>
  <title>JavaScript Statements</title>
</head>
<body>
  <h2>JavaScript Statements</h2>
  <script>
    let name = "Amit";
    document.write(name);
  </script>
</body>
</html>

In this example, there are two JavaScript statements:

Example

javascript

let name = "Amit";
document.write(name);

The first statement creates a variable, and the second statement displays the value.

JavaScript Values

JavaScript can use different types of values.

The two common types of values are:

Value Type	Example
Fixed values	`10`, `"Hello"`
Variable values	`name`, `age`, `total`

Fixed values are also called literals.

Example

javascript

document.write(25);
document.write("Hello World");

Here, 25 and "Hello World" are fixed values.

JavaScript Variables

Variables are used to store data.

In JavaScript, variables can be declared using let, const, or var.

Example

html

<!DOCTYPE html>
<html>
<head>
  <title>JavaScript Variables</title>
</head>
<body>
  <h2>JavaScript Variables</h2>
  <script>
    let course = "JavaScript";
    document.write(course);
  </script>
</body>
</html>

Here, course is a variable, and it stores the value "JavaScript".

JavaScript Operators

Operators are used to perform operations on values and variables.

Example

html

<!DOCTYPE html>
<html>
<head>
  <title>JavaScript Operators</title>
</head>
<body>
  <h2>JavaScript Operators</h2>
  <script>
    let a = 10;
    let b = 5;
    let result = a + b;
    document.write(result);
  </script>
</body>
</html>

In this example, the + operator adds two values.

Common JavaScript operators:

Operator	Use
`+`	Addition
`-`	Subtraction
`*`	Multiplication
`/`	Division
`=`	Assignment

JavaScript Expressions

An expression is a combination of values, variables, and operators that produces a result.

Example

javascript

let total = 10 + 20;

Here, 10 + 20 is an expression.

Another example:

Example

javascript

let fullName = "Amit" + " " + "Kumar";

Here, strings are joined using the + operator.

JavaScript Keywords

JavaScript keywords are reserved words that have special meaning.

Examples of JavaScript keywords:

Keyword	Use
`let`	Declares a variable
`const`	Declares a constant variable
`var`	Declares a variable
`function`	Defines a function
`if`	Creates a condition
`else`	Runs code when condition is false
`return`	Returns a value from a function

You cannot use keywords as variable names.

Wrong example:

Example

javascript

let function = "test";

Correct example:

Example

javascript

let functionName = "test";

JavaScript Identifiers

Identifiers are names used for variables, functions, and objects.

Example:

Example

javascript

let studentName = "Rahul";

Here, studentName is an identifier.

Rules for JavaScript Identifiers

JavaScript identifiers must follow these rules:

Rule	Example
Can contain letters	`name`
Can contain digits, but not at the beginning	`name1`
Can contain underscore `_`	`student_name`
Can contain dollar sign `$`	`$price`
Cannot contain spaces	`studentName`
Cannot be a JavaScript keyword	`let`, `function`, `if`

Wrong examples:

Example

javascript

let 1name = "Amit";
let student name = "Rahul";
let if = "test";

Correct examples:

Example

javascript

let name1 = "Amit";
let studentName = "Rahul";
let userAge = 20;

JavaScript is Case-Sensitive

JavaScript treats uppercase and lowercase letters differently.

Example

html

<!DOCTYPE html>
<html>
<head>
  <title>JavaScript Case Sensitive</title>
</head>
<body>
  <h2>JavaScript is Case-Sensitive</h2>
  <script>
    let name = "Amit";
    let Name = "Rahul";
    document.write(name + "<br>");
    document.write(Name);
  </script>
</body>
</html>

In this example, name and Name are two different variables.

JavaScript Semicolons

Semicolons are used to separate JavaScript statements.

Example:

Example

javascript

let name = "Amit";
let age = 20;
document.write(name);

JavaScript can sometimes work without semicolons, but using semicolons is a good practice for beginners.

JavaScript Code Blocks

A code block is a group of statements written inside curly braces {}.

Code blocks are commonly used with functions, conditions, and loops.

Example

html

<!DOCTYPE html>
<html>
<head>
  <title>JavaScript Code Block</title>
</head>
<body>
  <h2>JavaScript Code Block</h2>
  <button onclick="showMessage()">Click Me</button>
  <p id="demo"></p>
  <script>
    function showMessage() {
      document.getElementById("demo").innerHTML = "This code is inside a block.";
    }
  </script>
</body>
</html>

In this example, the function body is written inside {}.

JavaScript Comments

Comments are used to explain code. Comments are ignored by the browser.

JavaScript supports two types of comments:

Comment Type	Syntax
Single-line comment	`// comment`
Multi-line comment	`/* comment */`

Example

html

<!DOCTYPE html>
<html>
<head>
  <title>JavaScript Comments</title>
</head>
<body>
  <h2>JavaScript Comments</h2>
  <script>
    // This is a single-line comment
    document.write("Hello JavaScript");
    /*
      This is a multi-line comment.
      It can be written in more than one line.
    */
  </script>
</body>
</html>

Complete Example

Example

html

<!DOCTYPE html>
<html>
<head>
  <title>JavaScript Syntax Example</title>
</head>
<body>
  <h1>JavaScript Syntax</h1>
  <p id="demo"></p>
  <button onclick="showResult()">Show Result</button>
  <script>
    function showResult() {
      let firstNumber = 10;
      let secondNumber = 20;
      let total = firstNumber + secondNumber;
      document.getElementById("demo").innerHTML = "Total: " + total;
    }
  </script>
</body>
</html>

Try It Yourself

Run the above examples in the Try It Editor.

Try changing variable names, text values, and numbers to see how JavaScript syntax works.

Important Notes

JavaScript syntax must be written carefully.

JavaScript is case-sensitive, so name and Name are different.

Strings should be written inside quotes.

JavaScript statements usually end with semicolons.

Code blocks are written inside curly braces {}.

Common Mistakes

Beginners often forget quotes around text values.

Wrong example:

Example

javascript

let name = Amit;

Correct example:

Example

javascript

let name = "Amit";

Another common mistake is writing wrong capitalization.

Wrong example:

Example

javascript

document.getElementByID("demo");

Correct example:

Example

javascript

document.getElementById("demo");

Also, do not use JavaScript keywords as variable names.

Conclusion

JavaScript syntax is the set of rules for writing JavaScript code.

It includes statements, values, variables, operators, expressions, keywords, identifiers, comments, and code blocks.

Learning JavaScript syntax properly is the first step toward writing clean and error-free JavaScript programs.

PreviousJavaScript Features