JavaScript Introduction

JavaScript Comments

JavaScript comments are used to write notes inside code, explain logic, and temporarily disable JavaScript during testing.

JavaScript comments are used to write notes or explanations inside JavaScript code.

Comments are ignored by the browser. This means comments do not affect the output of the program.

Comments help developers understand the code better. They are also useful when you want to temporarily disable a line of code during testing.

Why Use Comments?

Comments are useful for making code easier to read and maintain.

You can use comments to:

Explain what the code does
Add notes for yourself or other developers
Make code easier to understand
Temporarily disable code
Separate different parts of a program

Comments are very helpful when working on large projects.

Types of JavaScript Comments

JavaScript supports two main types of comments:

Comment Type	Syntax
Single-line comment	<code>// comment here</code>
Multi-line comment	<code>/* comment here */</code>

Single-line Comments

Single-line comments start with two forward slashes //.

Anything written after // on the same line is treated as a comment.

Syntax

javascript

// This is a single-line comment

Example

html

<!DOCTYPE html>
<html>
<head>
  <title>JavaScript Single-line Comment</title>
</head>
<body>
  <h1>JavaScript Comments</h1>
  <p id="demo"></p>
  <script>
    // This line displays a message
    document.getElementById("demo").innerHTML = "Hello JavaScript!";
  </script>
</body>
</html>

In this example, the comment explains what the next line of code does.

Single-line Comment After Code

You can also write a single-line comment after a JavaScript statement.

Example

html

<!DOCTYPE html>
<html>
<head>
  <title>Comment After Code</title>
</head>
<body>
  <h1>Single-line Comment After Code</h1>
  <p id="demo"></p>
  <script>
    let name = "Amit"; // Store the name in a variable
    document.getElementById("demo").innerHTML = name;
  </script>
</body>
</html>

Here, the comment is written after the variable statement.

Multi-line Comments

Multi-line comments start with /* and end with */.

They are used when you want to write comments in more than one line.

Syntax

javascript

/*
  This is a multi-line comment.
  It can be written in more than one line.
*/

Example

html

<!DOCTYPE html>
<html>
<head>
  <title>JavaScript Multi-line Comment</title>
</head>
<body>
  <h1>JavaScript Multi-line Comments</h1>
  <p id="demo"></p>
  <script>
    /*
      This code creates a variable
      and displays its value on the page.
    */
    let course = "JavaScript";
    document.getElementById("demo").innerHTML = course;
  </script>
</body>
</html>

Multi-line comments are useful when you need to explain a larger block of code.

Comments for Disabling Code

Comments can also be used to stop a line of code from running.

This is useful during testing or debugging.

Example

html

<!DOCTYPE html>
<html>
<head>
  <title>Disable Code with Comment</title>
</head>
<body>
  <h1>Disable JavaScript Code</h1>
  <p id="demo"></p>
  <script>
    let message = "This message will be displayed.";
    // document.getElementById("demo").innerHTML = "This line is disabled.";
    document.getElementById("demo").innerHTML = message;
  </script>
</body>
</html>

In this example, the disabled line will not run because it is commented.

Commenting Multiple Lines of Code

You can use a multi-line comment to disable multiple lines of JavaScript code.

Example

html

<!DOCTYPE html>
<html>
<head>
  <title>Comment Multiple Lines</title>
</head>
<body>
  <h1>Comment Multiple Lines</h1>
  <p id="demo"></p>
  <script>
    /*
    let firstName = "Amit";
    let lastName = "Kumar";
    document.getElementById("demo").innerHTML = firstName + " " + lastName;
    */
    document.getElementById("demo").innerHTML = "The old code is disabled.";
  </script>
</body>
</html>

This is useful when you want to test a different version of the code without deleting the old code.

Comments with Variables

Comments can explain what variables are used for.

Example

html

<!DOCTYPE html>
<html>
<head>
  <title>Comments with Variables</title>
</head>
<body>
  <h1>Comments with Variables</h1>
  <p id="demo"></p>
  <script>
    // Store student's name
    let studentName = "Rahul";
    // Store student's age
    let studentAge = 18;
    // Display student information
    document.getElementById("demo").innerHTML =
      studentName + " is " + studentAge + " years old.";
  </script>
</body>
</html>

Good comments make the purpose of variables easier to understand.

Comments with Functions

Comments can explain what a function does.

Example

html

<!DOCTYPE html>
<html>
<head>
  <title>Comments with Functions</title>
</head>
<body>
  <h1>Comments with Functions</h1>
  <button onclick="showMessage()">Click Me</button>
  <p id="demo"></p>
  <script>
    // This function displays a message when the button is clicked
    function showMessage() {
      document.getElementById("demo").innerHTML = "Button clicked successfully!";
    }
  </script>
</body>
</html>

This type of comment is useful when a function performs an important task.

Good Comment Example

A good comment explains why the code is written, not just what is already obvious.

Example

javascript

// Use discount only when the cart total is greater than 1000
let discount = 100;

This comment is useful because it explains the reason behind the code.

Bad Comment Example

Avoid writing comments that simply repeat the code.

Example

javascript

// Create a variable named age
let age = 20;

This comment is not very useful because the code is already easy to understand.

Instead, comments should explain important logic or purpose.

Best Practices for JavaScript Comments

Use comments only when they add value.

Best Practice	Description
Keep comments short	Write clear and simple comments
Explain important logic	Comment complex or important code
Avoid unnecessary comments	Do not comment every simple line
Update comments	Change comments when code changes
Use comments for testing	Temporarily disable code when needed

Good comments make code easier to understand, but too many comments can make code messy.

Complete Example

Example

html

<!DOCTYPE html>
<html>
<head>
  <title>JavaScript Comments Example</title>
</head>
<body>
  <h1>JavaScript Comments Example</h1>
  <p id="result"></p>
  <script>
    // Store product price
    let price = 500;
    // Store product quantity
    let quantity = 3;
    /*
      Calculate total price by multiplying
      price with quantity.
    */
    let total = price * quantity;
    // Display final result
    document.getElementById("result").innerHTML = "Total Price: " + total;
  </script>
</body>
</html>

Try It Yourself

Run the examples in the Try It Editor.

Try adding your own comments. Also try commenting out some JavaScript lines and check how the result changes.

Important Notes

JavaScript comments are ignored by the browser.

Single-line comments start with //.

Multi-line comments start with /* and end with */.

Comments are useful for explaining code and temporarily disabling code.

Do not write too many unnecessary comments.

Common Mistakes

Beginners sometimes forget to close a multi-line comment.

Wrong example:

Example

javascript

/*
  This comment is not closed
let name = "Amit";

Correct example:

Example

javascript

/*
  This comment is properly closed
*/
let name = "Amit";

Another common mistake is writing comments that are too obvious.

Avoid this:

Example

javascript

// This is name
let name = "Amit";

Write comments only when they help explain the code better.

Conclusion

JavaScript comments are used to explain code and make it easier to understand.

Single-line comments are written using //, and multi-line comments are written using /* */.

Comments do not run in the browser, but they are very useful for developers. Good comments make your JavaScript code cleaner, easier to read, and easier to maintain.

PreviousJavaScript Output