Real‑world examples of missing semicolon errors in JavaScript

If you write JavaScript long enough, missing semicolon errors will bite you. They’re small, annoying, and often show up in production at the worst possible time. In this guide, we’ll walk through real, practical examples of examples of missing semicolon errors in JavaScript, show you how they break your code, and how modern tooling helps you catch them before users do. These aren’t toy snippets; they’re patterns that show up in everyday frontend and Node.js projects. We’ll look at how automatic semicolon insertion works, why it sometimes fails, and where a single missing character can silently change your logic. Along the way, you’ll see examples of subtle bugs in return statements, chained method calls, and arrow functions that look harmless at first glance. By the end, you’ll have a clear mental checklist of the best examples to watch out for, plus practical debugging habits that actually fit into a 2024–2025 JavaScript workflow with ESLint, TypeScript, and modern build tools.
Written by
Jamie
Published

Everyday examples of missing semicolon errors in JavaScript

Let’s start where the pain is real: concrete code. The best examples of missing semicolon errors in JavaScript are the ones that look perfectly fine at a glance, but behave nothing like what you intended.

Here’s a classic:

function getUser() {
  return
  {
    name: 'Alex'
  }
}

console.log(getUser()); // => undefined

There’s no syntax error here. The JavaScript engine inserts a semicolon right after return, so it reads this as:

function getUser() {
  return; // inserted semicolon
  {
    name: 'Alex'
  }
}

This is one of the most important real examples of how a missing semicolon interacts with automatic semicolon insertion (ASI) and quietly changes the meaning of your code.


Real examples of missing semicolons breaking logic

1. Return statement on a new line

This is probably the most famous example of missing semicolon errors in JavaScript:

function buildConfig() {
  return
  {
    apiUrl: 'https://api.example.com',
    timeout: 5000
  }
}

You expect an object. You get undefined. In a frontend app, that might cascade into TypeError: Cannot read properties of undefined. In a Node.js backend, it might mean your configuration loader silently returns nothing and a different part of the code falls back to defaults.

The fix is simple: keep the value on the same line as return:

function buildConfig() {
  return {
    apiUrl: 'https://api.example.com',
    timeout: 5000
  };
}

This example of a missing semicolon isn’t about the semicolon itself; it’s about how ASI decides where to insert one when your formatting is ambiguous.


2. Chained calls after a line break

Another one of the best examples of confusing behavior comes from chaining methods:

const users = getUsers()
[0].sendEmail();

You might think this means: call getUsers(), then take the first element and call sendEmail().

The engine sees:

const users = getUsers()[0].sendEmail();

because it does not insert a semicolon after getUsers() when the next line starts with [ or ( or a template literal. This is one of those examples of missing semicolon errors in JavaScript that shows up in code reviews more than in stack traces, because it looks like two statements but is actually one.

To avoid this:

const users = getUsers();
users[0].sendEmail();

Or, if you really want to split lines, add the semicolon explicitly.


3. IIFE after a variable declaration

Immediately Invoked Function Expressions (IIFEs) are less trendy in 2024, but they still appear in older codebases and some libraries. Here’s a real example of how a missing semicolon breaks them:

const config = {}
(function () {
  // setup code
  config.env = 'production';
})();

The engine reads this as:

const config = {}(function () { ... })();

which is equivalent to trying to call the empty object as a function. You’ll see:

TypeError: config is not a function

Drop in the semicolon and life is better:

const config = {};
(function () {
  config.env = 'production';
})();

This is one of the cleanest examples of examples of missing semicolon errors in JavaScript that produce a hard crash instead of a silent logic bug.


4. Arrow functions returning objects

With arrow functions, you get a twist on the earlier return example:

const createUser = () => {
  name: 'Alex'
};

console.log(createUser()); // undefined

This is not ASI; it’s just how arrow function bodies work. Without parentheses, the braces are treated as a block, not an object literal. But people often combine this with missing semicolons and line breaks, which makes debugging more annoying.

The correct version:

const createUser = () => ({
  name: 'Alex'
});

In practice, this often appears alongside other examples of missing semicolon errors in JavaScript inside React components or Redux selectors, where a tiny formatting change changes what gets returned.


5. Misleading multiline expressions

Consider this snippet inside a React component or any UI code:

let isValid = false
isValid
  ? showSuccess()
  : showError();

You might intend a ternary based on isValid. What you actually wrote is two separate statements:

let isValid = false;
isValid; // pointless expression
  ? showSuccess()
  : showError(); // syntax error
``

Here, ASI inserts a semicolon after `false`. The next line starts with an identifier, so the parser treats it as a new statement and then chokes on the `?`.

If you want the ternary, keep it on one line or rewrite it clearly:

```js
let isValid = false;

if (isValid) {
  showSuccess();
} else {
  showError();
}

This is an example of a missing semicolon combined with a layout choice that confuses the parser.


6. Object literals next to function calls

This one appears in configuration-heavy code, such as Express middleware or front-end routing:

setupApp()
{
  mode: 'production'
}.init();

You might have meant to write two statements: call setupApp() and then work with a config object. Because there’s no semicolon, the engine tries to treat the object as a block and then call .init() on the result, which doesn’t exist. You’ll end up with something like:

TypeError: Cannot read properties of undefined (reading 'init')

Splitting statements clearly, with semicolons, makes this intent obvious.


7. Missing semicolons in minified or bundled code

In 2024–2025, most production JavaScript is bundled, minified, and sometimes transformed by TypeScript or Babel. Modern bundlers assume you either:

  • use semicolons consistently, or
  • follow a style that’s safe for ASI.

Here’s a simplified real-world style issue:

// file A
export default function init() {
  // ...
}

// file B
import init from './init'
(function () {
  init();
})();

When these get concatenated without a semicolon between them, you can end up with:

export default function init() { /* ... */ }
import init from './init'(function () { /* ... */ })();

That’s invalid. Modern tools like Webpack, Rollup, and esbuild are better at inserting safe boundaries, but not every build chain is configured perfectly. This is why many style guides still recommend a semicolon at the top of IIFEs and some UMD wrappers:

;(() => {
  // safe even after concatenation
})();

These real examples of missing semicolon errors in JavaScript show up more in older or hand-rolled build setups, but they’re still worth understanding if you maintain legacy code.


Why automatic semicolon insertion is not your friend

JavaScript’s automatic semicolon insertion is defined in the language spec. The short version:

  • The parser may insert semicolons in specific places where the grammar would otherwise fail.
  • It does not just sprinkle semicolons at every line break.

Some key rules that create tricky examples of missing semicolon errors in JavaScript:

  • No semicolon is inserted before (, [, ` or some operators if the parser thinks the expression continues.
  • A semicolon is inserted after return, break, continue, and throw if followed by a line break.

You can read the formal behavior in the ECMAScript specification hosted by Ecma International:
https://tc39.es/ecma262/

The point isn’t to memorize the rules; it’s to recognize patterns where ASI is likely to surprise you, like the return example or chained calls that start on the next line.


2024–2025 tooling: how linters catch missing semicolons

The good news: in 2024–2025, you shouldn’t be spotting most of these by eye. Modern tooling catches nearly all realistic examples of missing semicolon errors in JavaScript before they hit production.

Common tools:

  • ESLint with rules like semi and no-unexpected-multiline flags suspicious line breaks.
  • TypeScript adds an extra layer of checking that often highlights the downstream type errors caused by a missing semicolon.
  • Prettier formats your code in a consistent style, reducing the number of risky layouts.

If you like semicolons, configure ESLint and Prettier to require them. If you prefer a no-semicolon style, use a configuration that’s designed to be ASI-safe (for example, always starting lines with operators when continuing an expression).

Even academic and educational resources now emphasize tooling as part of learning JavaScript. Many university courses hosted on .edu domains pair JavaScript lectures with linting and formatting in their starter repos, reflecting how the industry actually works in 2024.


Preventing missing semicolon errors in real projects

Instead of memorizing every example of a weird ASI corner case, treat missing semicolons as a workflow problem.

Some practical habits:

  • Pick a style and automate it. Whether you’re pro-semicolon or not, use ESLint + Prettier to enforce it.
  • Avoid fragile line breaks. Don’t start new lines with (, [, template literals, or operators unless you know exactly how ASI will behave.
  • Watch your return statements. Never put the returned value on the next line unless you’re returning nothing on purpose.
  • Review minified output when debugging odd production bugs. If something only breaks after bundling, a missing semicolon or unsafe concatenation is a suspect.

These practices matter more than memorizing every single example of missing semicolon errors in JavaScript syntax.

For general debugging habits and error-handling strategies, many programming courses and guides from universities (for example, materials you’ll find through MIT’s or Stanford’s CS departments on .edu domains) emphasize consistent style and automated checks as a core part of software reliability.


FAQ: examples and common questions

What are some common examples of missing semicolon errors in JavaScript?

Some of the most common real examples include:

  • A return followed by a line break and then an object literal, which returns undefined instead of the object.
  • A function call followed by a new line starting with ( or [, turning two statements into one chained expression.
  • Variable or constant declarations followed immediately by an IIFE on the next line, causing TypeError: x is not a function.
  • Ternary expressions split across lines in a way that makes ASI insert a semicolon in the middle.

These are the best examples to study because they show how a missing semicolon interacts with ASI, not just where the parser throws a syntax error.

Can a missing semicolon cause security bugs or just crashes?

Most of the time, a missing semicolon leads to syntax errors or logic bugs, not direct security vulnerabilities. But logic bugs can absolutely become security issues if they break authentication checks, validation, or access control. For example, if a configuration object is never returned because of a return + newline issue, your app might fall back to insecure defaults.

Security-focused resources from organizations like the OWASP Foundation (https://owasp.org) emphasize that small logic mistakes can become part of larger vulnerability chains.

Do I still need semicolons if modern JS tools are smart?

You can write JavaScript without explicit semicolons if you:

  • Understand how ASI works, and
  • Use a style guide and formatter that avoid risky patterns.

However, many teams still prefer semicolons everywhere because they reduce ambiguity and make minified/bundled output more predictable. The important part is consistency; mixing styles is where weird examples of missing semicolon errors in JavaScript tend to appear.

Is there a simple example of a missing semicolon that only breaks after minification?

Yes. A typical example of missing semicolon trouble after minification is when one file ends with a function or class expression, and the next file starts with ( or [ for an IIFE or array. Without a semicolon between them, the minifier might treat them as a single expression and produce invalid code. This is why some libraries start IIFEs with a leading semicolon.

How can I quickly spot these errors in a large codebase?

Turn on ESLint with the no-unexpected-multiline rule and a consistent semi rule. Run it as part of your CI pipeline and as a pre-commit hook. In practice, that’s far more effective than trying to eyeball every example of missing semicolon errors in JavaScript across thousands of lines of code.

For general advice on debugging workflows and error reduction in software projects, engineering programs and research from universities (for example, material you’ll find via Harvard’s CS courses at https://cs50.harvard.edu) often highlight automated tooling as a standard part of professional practice.

Explore More Compilation Errors

Discover more examples and insights in this category.

View All Compilation Errors