JavaScript Comments & Delimiters

Master the art of documenting your code and ensuring its stability with proper syntax.

✍️

Welcome! Let's learn how to leave notes in our code, making it clearer for ourselves and others.

// Your code's story begins here...

What Are Comments For?

Comments are notes in your code that are ignored by the JavaScript engine. They are written for humans to read. Use them to explain **why** you wrote a piece of code, not just **what** it does. Good comments make your code easier to understand, maintain, and debug.

Single-Line vs. Multi-Line

JavaScript has two main types of comments. Single-line comments start with // and continue to the end of the line. Multi-line comments start with /* and end with */, allowing you to write comments that span several lines.

The Semicolon Delimiter

The semicolon ; is a delimiter used to separate statements. While JavaScript has Automatic Semicolon Insertion (ASI), it's a **strong best practice** to always use them. Relying on ASI can lead to subtle and hard-to-find bugs in your code.

Comments for Debugging

Besides documentation, a common use for comments is **debugging**. You can temporarily disable a line or block of code by "commenting it out." This helps you isolate problems without permanently deleting code.

Practice Zone

Interactive Test 1: Match the Symbols

Drag each symbol to its correct description.

Arrastra en el orden correspondiente.

Arrastra las opciones:

;

Completa el código:

Starts a single-line comment______

Starts a multi-line comment______

Ends a multi-line comment______

Separates statements______

Unlock with Premium

Interactive Test 2: Comment the Code

Add the correct comment syntax to the code snippet.

Rellena los huecos en cada casilla.

 Calculate the total
let total = 100 + 50;


  This function adds two numbers.
  It returns their sum.

function add(a, b) {
  return a + b;
}

Unlock with Premium

Practice Example: Code Editor

Write a function that calculates the area of a circle. Include a single-line comment explaining the formula and a multi-line comment explaining the function's parameters and what it returns.

Enunciado:

* Escribe el código a continuación. Los caracteres correctos se mostrarán en verde y los incorrectos en rojo.

/*
  Calculates the area of a circle.
  @param {number} radius - The radius of the circle.
  @returns {number} The area of the circle.
*/
function calculateArea(radius) {
    // Formula: PI * radius^2
    return Math.PI * radius * radius;
}

Unlock with Premium

Knowledge Check

Why is it a good practice to use semicolons in JavaScript?

Unlock with Premium

Comments and Clean Code

Good comments are a sign of a professional developer. They clarify intent, document complex logic, and improve team collaboration. Let's explore some advanced concepts.

1. The Perils of Automatic Semicolon Insertion (ASI)

JavaScript tries to be helpful by adding semicolons where it thinks they are missing. This can lead to disastrous, hard-to-debug errors. Always end your statements with a semicolon to be explicit.

// This looks like it returns an object, but ASI breaks it!
function getUser() {
  return
  {
    name: 'Alex'
  }
}
// It actually returns 'undefined'!

BUG! 🐛

`return;` is inserted after `return`.

2. JSDoc: Professional Documentation

For functions and classes, it's standard practice to use a special multi-line comment format called JSDoc. Tools can read these comments to automatically generate documentation for your project.

/**
 * Adds two numbers together.
 * @param {number} num1 The first number.
 * @param {number} num2 The second number.
 * @returns {number} The sum of the two numbers.
 */
function add(num1, num2) {
  return num1 + num2;
}

Professional Takeaway: Write comments that explain the 'why', not the 'what'. Use JSDoc for functions, and never rely on ASI. Your future self (and your teammates) will thank you.

JavaScript Glossary

Comment: Text in a program that is ignored by the compiler or interpreter. It's used to add explanatory notes for human readers.
// (Single-Line Comment): Marks the rest of the line as a comment.
/* ... */ (Multi-Line Comment): Marks everything between the /* and */ as a comment, which can span multiple lines.
Delimiter: A character or sequence of characters that specifies a boundary between separate, independent regions in plain text or other data streams.
; (Semicolon): The primary delimiter in JavaScript, used to terminate a statement.
Statement: A single instruction or action to be executed by the program, like declaring a variable or calling a function.
Debugging: The process of finding and fixing errors (bugs) in source code. Commenting out code is a common debugging technique.