Automatic Semicolon Insertion (ASI) is a mechanism in JavaScript that automatically inserts semicolons at certain points in the code if they are missing. It is an error recovery mechanism that helps to prevent syntax errors by automatically adding semicolons in certain cases.
For example, consider the following code:
const x = 10
const y = 20
Without ASI, this code would result in a syntax error because no semicolons are separating the two variable declarations. However, with ASI, JavaScript automatically inserts semicolons after each line, so the code is interpreted as follows:
const x = 10;
const y = 20;
The ASI rules are designed to insert semicolons in cases where they are expected, but they are not always accurate and can sometimes lead to unexpected behavior. For example, consider the following code:
const x = 10
(function() {
console.log(x);
})();
This causes the error "Uncaught TypeError: 10 is not a function" because JavaScript is trying to execute 10 as a function. The error you are seeing is caused by a missing semicolon after the variable declaration. Because of Automatic Semicolon Insertion (ASI), JavaScript is treating the code as follows:
const x = 10(function() {
console.log(x);
})();
To fix this, you can add a semicolon after the variable declaration:
const x = 10;
(function() {
console.log(x);
})();
Adding a semicolon after the const x = 10 separates the two statements, allowing JavaScript to correctly interpret the code.
Conclusion
In general, it is a best practice to always use semicolons in your code, rather than relying on ASI, to ensure that your code behaves as expected. However, in cases where you need to return an object literal from an arrow function, you must wrap the object literal in parentheses to avoid any confusion or issues that could arise from the ASI rules.
References
Follow me on Twitter for more such blogs.
Cheers 🍻