Juneikerc.com

How to add comments in JavaScript

Featured image of the post: How to add comments in JavaScript

What is a comment in JavaScript?

A comment is a way to document and annotate what our code does. For example, if you write a function to filter an array of objects, it can be very useful to leave some notes about any important process that your function performs.

Although commenting your code may seem like a good practice, you should not overdo it either.

If you leave too many comments, your code can look messy, and depending on its length, it could become hard to read.

Later on, you'll find some tips for using comments correctly.

Important note:

Comments can also contain code, but when declared as a comment, it will not be executed.

Types of comments in JavaScript

There are two ways to comment your code in JavaScript:

Single-line comments in JavaScript

This type of comment, as its name suggests, covers only one line of code, and to use them, you must precede them with two slashes like these // This type of comment is often used to explain the code on the following line.

js
// This is a single-line comment
// This variable stores a string with a welcome message
const greeting = "Hello, welcome"; // You can also add a comment after the code

Multi-line comments in JavaScript

This type of comment can span multiple lines and is often used to explain more complex parts of the code that require a much deeper explanation.

They are opened with a forward slash and an asterisk (/) and closed with an asterisk and a forward slash (/).

js
/*
This is a multi-line comment
To document complex parts of the code
*/
const greeting = "Hello, welcome";

Tips for Writing Comments in JavaScript

Comments are an essential part of any JavaScript code. They not only help document your code but also make collaboration and long-term maintenance easier. Here are some tips for writing effective comments in JavaScript:

1. Be Clear and Concise

When writing comments, be clear and concise in your explanations. Avoid unnecessarily long or complicated comments. Keep your comments straightforward and easy to understand.

Example:

js
// Bad: This comment is overly long and hard to follow.
// This is a loop that iterates through the data array and adds the values to the total variable.
// Good: A clear and concise comment.
// Sum up the values in the data array to the total variable.

2. Use Single-Line and Block Comments

In JavaScript, you can use single-line (//) and block comments (/* */) as needed. Single-line comments are useful for clarifying a specific line of code, while block comments are ideal for describing more extensive code sections.

Example:

js
// Single-line comment: Clarification of a specific line of code.
/*
Block comment: Can describe more extensive code sections.
This is an example of a block comment.
*/

3. Document Functionality

Ensure you explain the functionality of the code, especially if it's complex or not obvious. Describe what the code does and why it's necessary.

Example:

js
// Calculate the average of the numbers in the array.
function calculateAverage(array) {
// Sum the values in the array and divide by the number of elements.
// This provides the average.
}

4. Keep Comments Updated

As you make changes to the code, make sure to keep comments updated to reflect the current functionality. Outdated comments can lead to confusion.

5. Avoid Obvious Comments

Avoid comments that simply restate what the code does. Comments should add useful information, not redundancy.

Example:

js
// Bad: Obvious comment.
let x = 5; // Assigns 5 to the variable x.
// Good: Informative comment.
let x = 5; // Number of allowed attempts before locking access.

By following these tips, you can improve the quality of your comments in JavaScript and make your code more readable and easier to maintain.

Juneiker Castillo freelance web developer

I am Juneiker Castillo, a passionate front-end web developer deeply in love with programming and creating fast, scalable, and modern websites—a JavaScript enthusiast and a React.js lover ⚛️.

About me