JavaScript comments are valuable tools that can be used to explain and increase the readability of JavaScript code. They help other developers understand the purpose of specific sections of code and document any peculiarities or important behaviors.
Additionally, comments can be utilized to prevent the execution of code segments when testing alternatives or debugging. This allows developers to easily enable or disable parts of the code during the development process.
Single Line Comments
Single-line comments in JavaScript start with //
Any text following // on the same line will be ignored by JavaScript and not executed. This makes single-line comments useful for brief explanations or notes right beside the code, without affecting its execution.
Here's an example that uses a single-line comment before each line of code:
<!DOCTYPE html>
<html>
<body>
<h1 id="myH"></h1>
<p id="myP"></p>
<script>
// Change heading:
document.getElementById("myH").innerHTML = "JavaScript Comments";
// Change paragraph:
document.getElementById("myP").innerHTML = "My first paragraph.";
</script>
</body>
</html>
This example uses a single line comment at the end of each line to explain the code:
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Comments</h2>
<p id="demo"></p>
<script>
let x = 5; // Declare x, give it the value of 5
let y = x + 2; // Declare y, give it the value of x + 2
// Write y to demo:
document.getElementById("demo").innerHTML = y;
</script>
</body>
</html>
Multi-line Comments
Multi-line comments in JavaScript start with /* and end with .
Any text between /* and will be ignored by JavaScript, making this type of comment ideal for longer descriptions or for temporarily disabling blocks of code without removing them.
Here's an example that uses a multi-line comment to explain the code:
<!DOCTYPE html>
<html>
<body>
<h1 id="myH"></h1>
<p id="myP"></p>
<script>
/*
The code below will change
the heading with id = "myH"
and the paragraph with id = "myP"
*/
document.getElementById("myH").innerHTML = "JavaScript Comments";
document.getElementById("myP").innerHTML = "My first paragraph.";
</script>
</body>
</html>
Single-line comments are most commonly used in JavaScript for quick annotations or notes adjacent to code. These start with //, and the remainder of the line is ignored by the interpreter.
For more comprehensive documentation, block comments are preferred. They start with /* and end with , and are suitable for lengthier descriptions or complex code explanations, spanning multiple lines.
Using Comments to Prevent Execution
Using comments to prevent execution of code is a practical approach during code testing.
Adding // in front of a code line effectively transforms the code from an executable statement into a non-executable comment.
Here's an example where // is used to disable the execution of one of the code lines:
var total = 10; // Initialize variable with the value 10
// total += 5; // This line is commented out and will not execute
console.log(total); // Outputs: 10
This example uses a comment block to prevent execution of multiple lines:
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Comments</h2>
<h1 id="myH"></h1>
<p id="myP"></p>
<script>
/*
document.getElementById("myH").innerHTML = "Welcome to my Homepage";
document.getElementById("myP").innerHTML = "This is my first paragraph.";
*/
document.getElementById("myP").innerHTML = "The comment-block is not executed.";
</script>
</body>
</html>
