Proper Use of Semicolon

Beginners often add semicolons at the end of every code line because they believe it makes the code look neater. However, this belief is more of a personal opinion than a strict rule.

I once wrote an article on Medium about semicolon usage in JavaScript. You can find it through the following link, and hopefully, it will be useful.

After publishing and sharing it across several Facebook communities, my article sparked many debates. Some developers even disagreed without giving proper arguments.

From those reactions, I realized many of them did not read my article completely.

Personally, I choose not to use semicolons at the end of JavaScript statements. JavaScript already handles this automatically through a mechanism called Automatic Semicolon Insertion (ASI).

I believe omitting semicolons makes code cleaner and easier to read. Nevertheless, you must follow certain rules to avoid ambiguity and unexpected output. Let’s go through those rules step by step:

A line of code must be complete for JavaScript to automatically insert a semicolon.

const nama = 'iqbal' // complete statement 
const umur = 23

Pay attention when separating statements, because careless placement can cause errors.

const nama = 'iqbal' // statement is complete 
const umur = 23 // this breaks the previous statement correctly

You don’t need a semicolon at the end of a block enclosed in curly braces

const hallo = () => {
  return 'hallo world';
}



function helloWorld() {
  return 'hello world this is javascript';
}



if (true || false) {
  // code...
}

For example:

let result = '';
let i = 0;



do {
    i = i + 1;
    result = result + i;
} while (i < 5);

The continue keyword skips the current loop iteration and moves to the next one.

for (let i = 0; i < 10; i++) {
    if (i % 2 === 0) {
        continue; skip iteration if i is even
    }
    console.log(i) // prints only odd numbers
}

In the example above, when i is an even number, the continue keyword will be skipped and proceed to the next iteration without executing the code below it.

The break keyword stops the execution of a loop or a switch statement.

for (let i = 0; i < 10; i++) {
    if (i === 5) {
        break; // Stops the loop when i = 5
    }
    console.log(i); // Prints numbers from 0 to 4

}

In a switch statement:

let fruit = "apple";

switch (fruit) {
    case "apple":
        console.log("This is an apple.");
        break; // Exits the switch after printing the message
    case "banana":
        console.log("This is a banana.");
        break;
    default:
        console.log("Unknown fruit.");
}

Here, after finding a match in the case “apple”, the break statement is used to exit the switch, preventing the execution of the next case.

If this rule is ignored, statements can become ambiguous and result in errors.

const nama = "iqbal"[("niyaz", "dwi", "muhammad")].forEach((nama) => {
  console.log(nama);
}); // output -> TypeError: Cannot read property 'forEach' of undefined

This happens because JavaScript assumes that the forEach() function has not been defined, making the code invalid.

const nama = "iqbal"[("niyaz", "dwi", "muhammad")].forEach((nama) => {
  console.log(nama);
});

Personally, I am a programmer who does not use semicolons in JavaScript to maintain cleaner code, as I have explained above. Every tutorial I create also does not include semicolons.

However, if you feel more comfortable using semicolons, you should continue to do so. There are no strict rules regarding their usage, so let’s not debate about it anymore!

Source : Proper Use of Semicolon