Comment line for javascript

Commenting Code in JavaScript — Types and Best Practices

The main purpose of writing code is so that a computer can interpret it as commands. However, it’s also important that the code we write is also easily interpretable by fellow developers.

Have you ever gone back to a project and had difficulty understanding the internal logic? Well that’s probably because said project hasn’t been commented properly.

Comments are notes written in the code that are ignored by the JavaScript engine, which means they don’t affect the output in any way. Their sole purpose describing how and why code works to other developers, and yourself.

In this article, we will look at how to comment JavaScript code, as which types of comments exist, and some best practices.

Single-Line Comments

Single-line comments are generally used to comment a part of the line or full line of code. Single-line comments in JavaScript start with // . The interpreter will ignore everything to the right of this control sequence until the end of the line.

Let’s see an example of a single-line comment in action:

// Print "Hello World" in the console console.log("Hello World"); 

Here, we are using a single-line comment to describe what the next line of code is doing.
If a single-line comment appears at the end of a line of code, it’s called an inline comment.

These are generally used to add quick annotations:

let c = a + b; // Assign sum of a, b to c 

Multi-Line Comments and JavaScript DocStrings

If we’d like to add a note that is spread across multiple lines, we can opt for multi-line comments or block-level comments.

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

/* The following program contains source code for a game called Tic-tac-toe. It is a paper-and-pencil game for two players, X and O, who take turns marking the spaces in a 3×3 grid. The player who succeeds in placing three of their marks in a horizontal, vertical, or diagonal row is the winner */ 

Here, a multi-line comment is used to describe tic-tac-toe. Generally, multi-line comments are used to introduce and explain a section of code, where a single line/sentence isn’t enough.

Another type of multi-line comment can oftentimes be seen as well:

/** * The following program contains source code for a game called Tic-tac-toe. * It is a paper-and-pencil game for two players, X and O, who take turns marking the * spaces in a 3×3 grid. * The player who succeeds in placing three of their marks in a horizontal, vertical, or * diagonal row is the winner */ 

Oftentimes, these comments can include information about the proceeding code, such as the parameters of a function or even the author of the code:

/** * Function that greets a user * @author John * @param name Name of the user * @return Greeting message */ function greetUser(name) < return `Greetings, $ !`; > 

These comments are referred to as DocStrings, as they’re essentially strings (comments) that constitute the documentation of your code.

These types of comments are really useful for other developers in your team, as you can clarify what the expected input is, what the output is, as well as who to contact if need be.

An added benefit is that you can generate documentation based on these DocStrings.

Using Comments for Debugging

Besides making notes, comments can also be used to quickly prevent code execution for debugging purposes. This is possible because JavaScript Engines do not interpret commented code. This is called as commenting out code.

If there’s an erroneous line, that’s causing problems, we can simply «comment it out» to disable it, without deleting the line. This can be paired with actual debuggers to help you asses what’s going on.

Consider the following code:

console.log("Working code"); console.log("Erroneous code); 

If we’d like to remove the second statement, but don’t wish to delete it forever, we can simply comment it out:

console.log("Working code"); //console.log("Erroneous code); 

Pro Tip: In most of the code editors, we can use the keyboard shortcut Ctrl + / for Windows and Cmd + / for Mac to comment out a single line of code.

Additionally, you can also comment out entire sections if you’re unsure whether you’ll delete them or not:

Free eBook: Git Essentials

Check out our hands-on, practical guide to learning Git, with best-practices, industry-accepted standards, and included cheat sheet. Stop Googling Git commands and actually learn it!

/*console.log("Entering for loop"); for (let i = 0; i < 100; i++) < console.log(i); >*/ 

Good Commenting Practices

First of all, commenting is not an excuse to write unreadable code, and then just patch it up with five paragraphs of comments explaining it. We first have to focus on writing clean, self-explanatory code, which can later be improved with constructive comments.

Use comments to explain why you did something, not how you did it. If you find yourself explaining how you did something, then it’s time to take a step back and refactor your code into something self-explanatory.

Another piece of advice would be to not write comments which are obvious and are redundant by nature. For example, the following comment is completely unnecessary:

// Prints out the result console.log(result) 

There are useful tools, such as JSDOC 3 that can generate documentation, based just on the comments within your code, which are formatted as DocStrings outlined above.

Conclusion

In this article, we have gone over what comments are and how to create them in JavaScript. We have looked at different types of comments — single-line and multi-line comments, as well as mentioned JavaScript Docstrings.

We’ve also seen how to debug our code using a technique called «commenting out», and finally summed up some good commenting practices.

Источник

Javascript Comment: Explain Code

In this tutorial, you will learn to write comments in javascript. You can write single-line as well as multi-line comments in javascript. We will also look at why it is important to write comments in javascript.

Javascript comment is used to write comments within the programs to explain the purpose of code snippets, helps others to understand the code, and helps to maintain the code.

The comments written within the program are ignored and are not executed by compilers or interpreters.

You can use this property of comment to prevent a code snippet from being executed by commenting it out.

There are two types of comments in javascript:

Single Line Comment

Single line comments create for only one line of code.

Single line comments are written using the // symbol. Anything written after the // symbol in that line becomes part of the comment.

When you place 2 slashes // then the code or text of the current line is ignored until the next line.

The following code is a single-line comment.

// This is a single line comment console.log("Welcome to TutorialsTonight"); // What is your purpose? console.log("Learning Javascript!"); // code before the comment is executable var num = 10; // num represents number console.log(num);

Using comment to prevent execution

You can use single-line comments to prevent code from being executed by commenting out the code.

Commenting out code using a single-line comment. Uncomment the code below and run to understand.

Multi-line Comment

When you need to comment out a large block of code then commenting code using single-line comment is quite burdensome. To comment out multiple lines of code use multi-line comments.

Multi-line comments are used to write comments for multiple lines of code.

Multi-line comments are written using the /* and */ symbols.

Anything that is written between the /* and */ symbols in single or multiple lines is as a comment.

The following code is a multi-line comment.

/* This is a multi-line comment alert("This is commented"); only code outside this multi-line comment will run */ console.log("Learning multi-line comment");

Using multi-line comment to prevent the execution

You can use multi-line comments to prevent a large block of code from being executed by commenting out the code.

/* alert("this is commented") console.log("this is also commented") for(let i = 0;i < 10;i++) console.log("all of these are commented"); */ console.log("This will execute!");

Importance Of Comments In Programming

The importance of comments in programming is as follows:

1. Comments in code give extra information about the code like the use of some variable, function, etc.
2. Commenting code makes code more readable and easy to understand for the developers and maintainers.
3. Tricks used within the code can be explained using comments.
4. It can stop a block of code from execution if you don't want to execute for some case.
5. Comments help to understand code when you refer to it in the future.

Note : Writing comments in code is highly recommended.

Frequently asked questions

1. How many types of comments? There are two types of comments in javascript:
   • Single line comment
   • Multi-line comment
2. What is the difference between single line comment and multi-line comment? Single line comment is used to comment a single line of code. Multi-line comment is used to comment a large block of code.
3. How do you comment a script tag? You can comment a script tag using the symbol and your script tag in between the 2 dashes (). Example -->
4. What is the shortcut to comment out in JavaScript? You can comment out a line of code using the Ctrl + / shortcut for single line comment. For multi-line comment select the lines of code and press Ctrl + / .
5. What is the correct syntax for adding comments in JavaScript? You can add comments in JavaScript using the following syntax:
   • Single line comment: // comment
   • Multi-line comment: /* comment */

Источник

How to Comment Out in JavaScript

There are two ways you can comment out the code in JavaScript, and they are:

Let’s take a look at what each of these does:

1. Single line comment

A single-line comment is a type of comment that will create one line of comment. You can do this by adding double forward slashes // at the start of the JavaScript code. Any code between // and the end of the statement will be ignored by JavaScript.

// this is one line of comment 

A single-line comment is used when you want to comment out one line of code, or add a short description of what the code does.

Example uses of a single-line comment

Example 1: Describing what the code does.

// This function will change the text color to red on button click function turnRed() < document.getElementById("exampleText").style.color = "red"; > 

Example 2: Commenting out one line of code.

 function turnRed() < document.getElementById("exampleText").style.color = "red"; // console.log("Red button is clicked!");  > 

2. Multiple line comment

A multiple-line comment is a type of comment that will create multiple lines of comment. You can do this by adding a forward slash with an asterisk /* at the start and then an asterisk with a forward slash */ at the end of the JavaScript code. Any code between /* and */ will be ignored by JavaScript.

 /** * This is a multiple line comment * You use this when commenting out a large line of JavaScript code * You can also use it when giving a long description of what your code does */ 

A multiple-line comment is used when you want to comment out a large line of code, or add extra information so other people can understand what your code does or why it is used.

Example uses of multiple line comment

Example 1: Commenting out multiple lines of code.

 function turnRed() < document.getElementById("exampleText").style.color = "red"; > /* function turnBlue()  document.getElementById("exampleText").style.color = "blue"; > function turnYellow()  document.getElementById("exampleText").style.color = "yellow"; > */ 

Example 2: Using multiple line comment to give a long explanation of what the code does or why it is used.

/** * getElementById is used instead of querySelector because the querySelector * is not fully supported on Internet Explorer 8, and some of our biggest clients still * rely on this browser. To ensure that our feature works well on all browsers, we have * to use getElementById. */ function turnRed() < document.getElementById("exampleText").style.color = "red"; > 

Get my free e-book to prepare for the technical interview or start to Learn Full-Stack JavaScript

Источник