Overview
A “comment” is a feature in a program that allows you to leave notes that do not affect the execution of the code. This is essential for providing additional explanations for processes or for temporarily disabling (commenting out) parts of the code during debugging. This article explains how to use single-line comments // and multi-line comments /* ... */, as well as recommended commenting styles for professional development.
Specifications (Input/Output)
- Input: Comment syntax written within JavaScript source code.
- Output:
- Commented sections are ignored by the browser during execution.
- Only the valid code portions are executed, and results are printed to the console.
Basic Usage
JavaScript has two main ways to write comments:
- Single-line comment: Everything from
//to the end of the line is treated as a comment. - Multi-line comment: Everything enclosed between
/*and*/is treated as a comment. This can be used in the middle of a line or across multiple lines.
Full Code (HTML / JavaScript)
HTML (index.html)
This is a simple HTML structure to verify the console output.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Comment-out Demo</title>
<script src="comment-demo.js" defer></script>
</head>
<body>
<div class="container">
<h1>Please check the console log</h1>
<p>Commented-out code is not executed and will be ignored.</p>
</div>
</body>
</html>
JavaScript (comment-demo.js)
This code simulates damage calculation in a game. It demonstrates how to explain variables and how to disable specific parts of a formula for testing.
/**
* Demo for calculating player attack power.
* Multi-line comments are often used for file headers
* or to describe function specifications.
*/
const calculateDamage = () => {
// Single-line comment: Setting base parameters
const baseAttack = 250; // Attack power of the sword
const strengthBonus = 1.5; // Strength multiplier
// Normal calculation process
const rawDamage = baseAttack * strengthBonus;
/* Multi-line comment example:
This is a temporary note.
I plan to add an "elemental bonus" later,
but it is currently unimplemented, so it is commented out.
*/
// Technique to comment out (disable) only a part of a line
// Temporarily turning off the + 500 bonus damage
const totalDamage = 1000 + 2000 /* + 500 */ + 300;
console.log(`Base Damage: ${rawDamage}`);
console.log(`Final Damage (Adjusting): ${totalDamage}`);
};
// Execute
calculateDamage();
Customization Points
- TODO Comments: Use prefixes like
// TODO: Fix this next timeor// FIXME: Has a bugas notes during development. Many code editors have extensions to track these tasks automatically. - JSDoc Format: Starting a comment with
/** ... */(two asterisks) allows you to write “JSDoc” comments. These are used by documentation generators and editor auto-completion tools to provide detailed info about functions and classes.
Important Points
- Avoid Redundancy: Do not write comments like
const a = 1; // Assign 1, which simply repeat what is obvious from the code. Comments should explain complex logic or the reason why the code was written in a certain way. - Keep Comments Updated: If you modify code but leave old comments, it will confuse other developers. Always update related comments when you change the code.
- Sensitive Information: Comments in HTML or JS can be viewed by anyone via “View Page Source.” Never include passwords, API keys, or private company information in comments.
Advanced Usage
Temporary Code Disabling (Debugging)
When identifying the cause of a bug, it is common to comment out suspicious lines instead of deleting them.
const user = {
name: "Alice",
age: 24,
// isAdmin: true, // Temporarily turn off admin rights to check behavior
};
Summary
Comments are messages for your “future self” and your “team members.” Use // for quick notes at the end of a line and /* ... */ for longer explanations or for hiding parts of a line. Using the right type for each purpose will help you write code that is much easier to maintain.
