Commenting in JavaScript Tutorial

In this section, we will learn what commenting is and how to use it in JavaScript.

What is Comment in JavaScript?

In the previous sections, the example and programs you saw were simple enough just to show you the concept of the topic. But in production, programs can easily end up having thousands of lines of codes.

The maintenance of such source code is not an easy task. Even just reading such source code without any knowledge of the work of the program can be a nightmare!

Even the developers who wrote the program can soon forget how they put the pieces of the program together.

Now, to ease the pain of code maintenance and increase its readability, one solution is to use `comments`.

We use comments in the source codes to explain the purpose and its details. This will help everyone to understand how the program works and they can read and enhance the program easier at later times if needed.

In JavaScript programming, we can put comments in places like:

  • Above or below a function, variables, blocks of code, etc.
  • In the empty spaces between the JavaScript keywords and those developers’ defined names.

Notes:

  • Even though we’re allowed to put comments in lots of places in a source code, we shouldn’t overdo commenting and only put comments in places where it really needs explanation.
  • The compiler simply ignores any comments they see in a program and compiles the rest of the source code. This is because comments are for developers, not compilers.

Let’s take a look at an example:

//Comments above a function. 
function /* comments between the name of function and the keyword `function`*/greet(){
  console.log("A message before the return-statement");//Comments after an statement
  //Comments above an statement. 
  return "John";
  console.log("This message will never be sent to the browser's console!");
}//Comments after closing braces. 
let name = greet();
console.log(/*Comments even in the parentheses*/name);

If you run the program above, the code will run without any problem even though we have mixed it with comments.

How to comment on JavaScript?

There are two ways with which we can create comments in JavaScript.

  • Single Line Comments
  • Multiline Comments

The syntax of commenting in the JavaScript follows the rules that are used in the C/C++, Java, and C# programming languages. So if you know how to write comments in those languages, you already know how to comment in a JavaScript source code.

JavaScript Single Line Comment

This type of comment starts with two forward-slashes `//` and after that we can put on comments.

Note: As the name suggests, this type of commenting is in a single line and if we need another line for comment, we need to start with two forward slashes `//` again.

Also, in a single line comment, we can’t put any actual source code and expect it to be compiled by the compiler! Because compilers simply ignore comments no-matter what is in that comment.

Single Line Syntax:

// A comment...

// Another single line comment...

Note: there’s no space between the two forward slashes!

Example: creating single line comment in JavaScript

//This is a multiline comment. 

console.log("Single line comment");

JavaScript Multiline Comment

This type of commenting is not limited to just one line and we can put comments on multiple lines that are part of the same comment.

Multiline Comment Syntax:

/*

Body of

the comment

*/

Remember: first we start with a forward slash and then immediately put an asterisk `*`. After that, the comments come in. At the end, when there’s no comment to add, we put an asterisk `*` and immediately put a forward slash.

Note: there’s no space between the forward-slash `/` and the asterisk `*` that comes before and after the comments.

Example: creating multiline comment in JavaScript

/* 
This is a multiline comment. 
*/
console.log("Multiline comment");

JavaScript Comment Note:

We can’t use comments between the reserved keywords of the JavaScript or those words that we define as the name of functions or variables.

Example:

ret/*a comment between the 'return' keyword! */urn 0;

This is illegal and the compiler will return error because the `return` is a JavaScript language keyword and we broke it by adding comments in between.

Commenting-out source codes in JavaScript:

One of the use cases for comments in JavaScript is when we have one or more lines of codes and want to temporarily disable the execution engine from accessing the codes (perhaps because of a test case or something like that). Now one solution would be to simply remove those codes from the source code and then bring them back after the test is done. But, the problem here is that we as developers tend to do lots of testing in a source code and change things constantly! So there’s a chance that we might actually forget that we’ve removed part of a code and cause problems at later times.

Now a better solution would be to use comments when it comes to disabling codes temporarily in a program! That way, the codes are still in the program, but the execution engine simply skips over them because now they are part of the comments of the program!

Example: JavaScript commenting out codes

/* 
console.log( "You’ll never see this message on the console! ");
 var name = "Omid"; 
*/
console.log("Multiline comment");

Output:

Multiline comment

Leave a Reply