Explain Comments in JavaScript

Javascript Web Development Front End Technology

In this tutorial, we will learn different types of comments available in JavaScript. Comments are used to show the message in a meaningful way. Comments are used to explain the code and give information about the warnings, suggestions, and code so that anyone working on that code can easily understand the technical flow. When the compiler runs, comments are not executed. JavaScript engine will skip the commented part

In JavaScript, there are two types of comments.

Single-line comments (//)
Multi-line comments (/*…*/)

Single-line Comments

Any text between a // and the end of a line is treated as a comment and is ignored by the JavaScript engine. The single-line comments are also used to give information about code or warnings.

Syntax

// This is a single-line comment

Example 1

The program below demonstrates how to use single-line comments in JavaScript.


<!DOCTYPE html>
<html>
<body>
   <h1 id="myHeader">Single line comments </h1>
   <p id="text" style="font-size : 20px"> Hello </p>
   <p id="person" style="font-size : 20px"> Devika </p>
   <p id = "result" style = "font-size : 20px"></p>
   <script>
      // Changing paragraph text with id text
      document.getElementById("text").innerHTML = "Hi, "
      
      // Changing paragraph text with id person
      document.getElementById("person").innerHTML = "Devika Rani";
      
      // Adding text to result id paragraph
      const text = document.getElementById("text").textContent;
      const person = document.getElementById("person").textContent;
      document.getElementById("result").innerHTML = text + person;
   </script>
</body>
</html>

Example 2

Comments we can also use at the end of the line to explain the code and what is going on. Like,


<!DOCTYPE html>
<html>
<body>
   <h2 id="myHeader">Single line comments </h2>
   <p id = "result" style = "font-size : 20px"></p>
   <script>
      const value1 = 120; // assigning 120 to value1 variable
      const value2 = 50; // assigning 50 to value2 variable
      const res = value1 + value2; // adding value1 and value2
      
      // Adding res to the result id paragraph
      document.getElementById("result").innerHTML = res;
   </script>
</body>
</html>

Multi-line Comments

Any text between the characters /* and */ is treated as a comment. This may span multiple lines. we can use this for commenting on a single line as well as for multiple lines.

Syntax

Following is the syntax for the multi-line comments.

/* This is a multiline comment in JavaScript
…
…
*/

The code between /* and */ will be ignored by the JavaScript engine while doing the compilation.

Example 3

In the example below, we use multi-line comments to comment some text in the script block.


<!DOCTYPE html>
<html>
<body>
   <h2 id="textHeader"></h2>
   <p id="text"></p>
   <script>
      /*
      Here we will add text to header with id = "textHeader"
      and to the paragraph with id = "text"
      */
      document.getElementById("textHeader").innerHTML = "Hello, ";
      document.getElementById("text").innerHTML = "Devika.";
   </script>
</body>
</html>

Preventing Execution

We can use comments to prevent the execution of the code. If we add //in front of the code lines, the code lines will be changed to comment. Let's see an example for preventing code from execution using multi-line comments.

Example 4

In the below example, we comment on some lines of code so that we can prevent these lines of code from being executed.


<!DOCTYPE html>
<html>
<body>
   <h2 id="textHeader"></h2>
   <p id="text"></p>
   <script>
      document.getElementById("textHeader").innerHTML = "Hello, ";
      document.getElementById("text").innerHTML = "Devika";
      /*document.getElementById("textHeader").innerHTML = "Hi, ";
      document.getElementById("text").innerHTML = "Devika Rani";
      */
   </script>
</body>
</html>