Comments in Javascript
Comments in Javascript start with //
or /* */
and they are ignored by the Javascript engine.
Comments don't get executed by the browser.
In other words, the comments are just notes you write for yourself or others who are dealing with your code. You'll learn the "Why" in a moment.
Here is an example usage of comments from the real world:
//Step 1: Select the "show-password" input element
let showPasswordField = document.querySelector("#show-password");
//Step 2: Attach the event listener to it
showPasswordField.addEventListener("click", function(){
let passwordField = document.querySelector("#password");
//Step 3: Everytime the user clicks on the "Show password" field, first check whether the field is "checked"
if( showPasswordField.checked ){
//Step 4: If yes, then execute this line of code to reveal the password
passwordField.type = "text";
}
else {
//Step 5: If not, then execute this line of code to hide the password
passwordField.type = "password";
}
});
In the above code snippet, I have written comments about what each line of code is doing.
If you read those comments, you'll understand that this Javascript is about Showing or Hiding the password on a login form.
Comments are helpful in this scenario because, even if I open up the above code in the distant future, I can quickly skim through the comments and understand what the code is doing. This will save me a lot of frustration.
There are two more reasons to use comments. More on it at the end of this lesson.
For now, let's see how you can write comments in your Javascript code.
There are two types of comments in Javascript:
- Single line comments
- Multiline comments
Single line comments
Single-line comments start with double slashes (//
) followed by the note on the same line.
// Alerts the user about deleting a blog post.
alert("Are you sure about deleting the blog post?");
Anything that follows after the double slash //
on the same line is ignored by Javascript. Javascript will not run it.
You can also put a //
comment in the same line as the code.
let weight = 70; // Accepted metric is kilos. Not pounds.
let height = 170; // Accepted metric is centimeters. Not inches.
So, watch out for them.
Sometimes, you will end up writing a large note where a single-line comment is not enough.
And this is where multiline comments are useful.
Multiline Comments
Multiline comments start with /*
and end with */
For example:
/*
Collect the following details from the user:
Name:
Email:
Username:
Password:
Subscription Plan:
*/
Anything in between /* */
is not run by Javascript.
Here is another good example where we are using single-line and multiline comments at the same time while delegating a task to a colleague.
/* I didn't find time to sanitize the email, so just make sure to sanitize it and let me if you find it difficult to do. I will help you out. Don't hesitate to reach out to me. */
let email = userSubmittedEmail; // Sanitize the email
Now that you understand how to create comments in Javascript, I want to tell you two more reasons why you should use comments.
Hey! Why are you spending so much time explaining comments? I don't think that they are a building block!
I know, I know. Nobody calls comments a building block of a programming language.
And indeed, they are not.
But they play a special role:
- If you're a beginner
- Or when you're sharing your code with others
1) If you're a beginner
I would recommend you to write in comments about how you want to perform a task.
As a beginner, whenever you're writing code, it is hard to stare a blank screen and not knowing what to type.
You can overcome this problem by writing comments about how you can perform the task.
This will give you a vision for finishing the task.
For example, If you want to perform a task of showing or hiding the password on a login form, you can start writing comments in plain English about how you want to perform the task:
//Step 1: Select the "show-password" input element
//Step 2: Attach the event listener to it
//Step 3: Every time the user clicks on the "Show password" field, first check whether the "show-password" field is "checked"
//Step 4: If yes, reveal the password
//Step 5: If not, hide the password
Now that you have a clear vision, you can start writing functional code for every comment and finish the job.
This is one of the proven methods to learn programming in a good way.
Also, you don't have to keep doing this every time you code a project. Just do it enough times until you can visualize the next steps in your mind.
It doesn't even have to be so detailed. A starting point is enough.
Next...
Comments are for us and others when you're sharing your code
Comments are more like notes for yourself and for others who might end up using the code.
For example, you often end up opening a piece of code after a really long time because a client came back asking for help.
And if you have not written comments in your code, trust me, sometimes you'll be banging your head about what the heaven a particular line of code is doing.
Similarly, when you are sharing code with your team members and if it has comments about what the code is doing, they don't have to ask you doubts about what the code is doing.
This will save you and your team a lot of time.
So, never get lazy about writing comments in your code.
In the next lesson, we will start learning about the first real building block called functions.