Study JavaScript #2 – Semicolon Usage

by

When writing JavaScript, it is common practice to omit semicolons (;) at the end of function statements but to include them in function expressions. This helps avoid potential issues caused by JavaScript’s automatic semicolon insertion (ASI).

Function Statement (Declaration)

A function statement defines a named function that can be used before its declaration due to hoisting. Semicolons are not required at the end.

JavaScript
// Function statement (declaration)
function addNumbers(x, y) {
    return x + y;
} // No semicolon needed

Function Expression

A function expression assigns a function to a variable. Unlike function statements, function expressions are not hoisted. It is recommended to use a semicolon (;) at the end to explicitly terminate the statement.

JavaScript
// Function expression
const addNumbers = function(x, y) {
    return x + y;
}; // Semicolon recommended

Why Semicolons Matter in Function Expressions

Although JavaScript does not enforce semicolon usage, omitting them in function expressions can lead to unexpected behavior, especially when followed by immediately invoked function expressions (IIFE).

Example of a Potential Issue

JavaScript
const func = function() {
    return 1;
} // Missing semicolon

(function() {
    console.log("test");
})();

What Happens?

  • JavaScript does not recognize the end of the function expression.
  • It attempts to interpret (function() {...})() as a function call on the returned value (1), leading to an error: TypeError: 1 is not a function

Conclusion

To prevent such issues, always include a semicolon (;) at the end of function expressions. This ensures better readability and avoids JavaScript’s automatic semicolon insertion (ASI) pitfalls.

Leave a Comment