What are the rules for JavaScript's automatic semicolon insertion (ASI)?

JavaScript's automatic semicolon insertion (ASI) is a feature that automatically inserts missing semicolons in your code. Understanding ASI rules helps prevent unexpected behavior and syntax errors.

Statements Affected by ASI

The following JavaScript statements are affected by automatic semicolon insertion:

empty statement
var statement  
expression statement
do-while statement
continue statement
break statement
return statement
throw statement

Core ASI Rules

JavaScript follows these rules when deciding where to insert semicolons:

Rule 1: Offending Token

A semicolon is inserted before a token that cannot be parsed according to grammar rules, if:

• The offending token is a closing brace }
• The previous token is ) and the semicolon would complete a do-while statement

// ASI inserts semicolon before }
function test() {
    let x = 5  // semicolon inserted here
}

// do-while example
do {
    console.log("Hello")  // semicolon inserted here
} while (false)

Rule 2: End of Input

When the parser reaches the end of the input and cannot parse it as complete code, a semicolon is automatically inserted:

let message = "Hello World"  // semicolon inserted at end
console.log(message)

Hello World

Rule 3: Restricted Productions

Semicolons are inserted after specific keywords when a line break occurs. This affects return, throw, break, and continue statements:

function getValue() {
    return  // semicolon inserted here, returns undefined
    42      // this line is unreachable
}

console.log(getValue())  // undefined, not 42!

undefined

Common ASI Pitfalls

ASI can cause unexpected behavior. Here are examples to avoid:

// Problem: return statement split across lines
function getObject() {
    return   // ASI inserts semicolon here
    {
        name: "John"
    }
}

console.log(getObject())  // undefined, not the object

// Solution: keep return on same line
function getObjectCorrect() {
    return {
        name: "John"  
    }
}

console.log(getObjectCorrect())

undefined
{ name: 'John' }

Best Practices

To avoid ASI-related issues:

• Always use explicit semicolons for clarity
• Keep return, throw, break, and continue statements on single lines
• Be careful with line breaks after these keywords
• Use a linter to catch potential ASI problems

Conclusion

While ASI can make JavaScript more forgiving, relying on it can lead to bugs. Understanding these rules helps you write more predictable code and avoid common pitfalls.