Comments in JavaScript

By Mukul Latiyan

Updated on : 14 Oct 2022

7 mins read

Published on : 14 Oct 2022

Introduction to Comments

Comments in JavaScript are used when we want to make our code more readable and explain what JavaScript code does.

We can also use them if we want not to execute a particular section or part of the code, usually done while testing.

Why use comments?

Comments are valuable components and part of any programming language, including JavaScript. Below are the two most common uses of comments in JavaScript

1. Increasing Readability

Comments help in improving the readability of the code
Programmers can refer to them if they visit the code after some time.
New programmers can use comments to understand the code before starting to work.

2. Debugging

Comments are non-executable statements, so if we know that a particular part of the code is causing an error, we can easily comment on that part while debugging.

Types of Comments

In JavaScript, there are two types of comments. These are

Single Line Comment
Multi-Line Comment

Single Line Comment

The single-line comment starts with the // symbol. Any text that is present after // up to the end of the line will be ignored by JavaScript.

Consider the code that is shown below in which we are creating two single-line comments.

index.html

<!DOCTYPE html>
<html lang="en">

<head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Comments in JavaScript</title>
</head>

<body>
        <h1>Example</h1>

        <h2>Comments in JavaScript</h2>

        <script>
                let str = 0;

                // Using the Boolean method
                console.log(Boolean(str));

                str = "";

                // Using the Boolean method
                console.log(Boolean(str));
        </script>
</body>

</html>

Explanation - In the above example, we have created two comments // Using the Boolean method just before the console.log() function.

We will get the following output if we run the above code in the browser.

Output:

Multi-Line Comment

The multi-line comment starts with the /* symbol and ends with the */ symbol. Any text that is present between these /* and */ symbols will be ignored by JavaScript.

Consider the code that is shown below in which we are creating multi-line comments.

index.html

<!DOCTYPE html>
<html lang="en">

<head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Comments in JavaScript</title>
</head>

<body>
        <h1>Example</h1>

        <h2>Comments in JavaScript</h2>

        <script>
                let str = 0;

                /*
                        Using Boolean method
                        in the console.log()
                        shown below
                */
                console.log(Boolean(str));

                str = "";

                /*
                        Using the Boolean method
                        in the console.log()
                        shown below
                */
                console.log(Boolean(str));
        </script>
</body>

</html>

Explanation - In the above example, texts in between /* and */ (Using the Boolean method in the console.log() shown below) are two multi-line comments in JavaScript.

If we run the above code in the browser, we will get the following output.

Output:

Comments to prevent the execution of the code

We can even prevent some particular part of the code from being executed if we comment on that part of the code.

Consider the code shown below.

index.html

<!DOCTYPE html>
<html lang="en">

<head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Comments in JavaScript</title>
</head>

<body>
        <h1>Example</h1>

        <h2>Comments in JavaScript</h2>

        <script>
                let str = 0;

                /*
                        commenting the console.log()
                        functions call below
                */
                // console.log(Boolean(str));

                str = "";

                /*
                        Using Boolean method
                        in the console.log()
                        shown below
                */
                console.log(Boolean(str));
        </script>
</body>

</html>

Explanation - In the above code, we commented out a console.log(Boolean(str)); using a single line comment. When we run the code shown above, the interpreter will ignore the commented part.

Output:

Commenting out code is important, especially when we are debugging code. Because instead of removing code, we can comment them out, so they won't be executed and then uncomment whenever needed.

Good comments vs. Bad Comments

While comments for sure help us to increase readability and code experience, not all comments are good for the code.

Below are some of the ways with which you can distinguish good and bad comments:

Bad Comments:

Too much explanation
Misleading data
Not intention-revealing
Redundant comments

Good Comments:

Intent Explanation
Informative
Warning of Consequences

Conclusion

In this article, we have learned about comments in JavaScript. We also explored various types of comments and their usage.

Modules

Module 1

Module 2

Module 3

Module 4