Optional catch binding

ECMAScript 10 (ES2019) introduced optional catch bindings, allowing developers to omit the parameter in the catch clause when it is not used. This feature simplifies error-handling code, especially in scenarios where specific error details are unnecessary.

Basic Syntax of Optional catch Binding

Traditional try...catch statements require the catch clause to include a binding parameter, even if it is unused. ES10 allows this parameter to be omitted entirely:

// Traditional syntax
try {
  // Code that may throw an error
} catch (error) {
  // The 'error' parameter must be declared
  console.log('An error occurred');
}

// ES10 optional binding syntax
try {
  // Code that may throw an error
} catch {
  // No need to declare the 'error' parameter
  console.log('An error occurred');
}

Why Optional Binding is Useful

In real-world development, there are many cases where we don’t care about the specific error object. For example:

1. When only knowing that an operation failed is sufficient, without needing error details.
2. In performance-sensitive code, avoiding the creation of unnecessary objects.
3. Cleaner code style with less visual clutter.

// Scenario where error details are unnecessary
function safeParseJSON(json) {
  try {
    return JSON.parse(json);
  } catch {
    return null;
  }
}

Compatibility with TypeScript

TypeScript 3.6 and later support this syntax. When using it in .ts files, ensure the target in tsconfig.json is set to ES2019 or higher:

// Usage in TypeScript
try {
  someRiskyOperation();
} catch {
  handleError();
}

Practical Use Cases

1. Resource Cleanup

let resource = acquireResource();
try {
  useResource(resource);
} catch {
  // No need to know the specific error—just ensure resource release
  releaseResource(resource);
  throw; // Re-throw the error
}

2. Fallback Handling

function getCachedData(key) {
  try {
    return getFromCache(key);
  } catch {
    // Fall back to network if cache fails
    return fetchFromNetwork(key);
  }
}

3. Test Cases

describe('error handling', () => {
  it('should throw on invalid input', () => {
    try {
      processInput(null);
      fail('Expected error');
    } catch {
      // Test passes
    }
  });
});

Performance Considerations

Omitting the catch binding can offer minor performance benefits because:

1. No error object needs to be created.
2. Fewer variables are added to the scope.
3. Reduced garbage collection pressure.

// Usage in performance-sensitive loops
for (let i = 0; i < 1e6; i++) {
  try {
    processItem(items[i]);
  } catch {
    skipItem();
  }
}

Browser Compatibility

As of now, all modern browsers support optional catch bindings:

• Chrome 66+
• Firefox 58+
• Safari 11.1+
• Edge 79+
• Node.js 10+

For older environments, tools like Babel can transpile the code:

// .babelrc
{
  "presets": [
    ["@babel/preset-env", {
      "targets": {
        "ie": "11"
      }
    }]
  ]
}

Usage with async/await

Optional bindings work particularly well with asynchronous code:

async function fetchWithRetry(url, retries = 3) {
  for (let i = 0; i < retries; i++) {
    try {
      return await fetch(url);
    } catch {
      if (i === retries - 1) throw;
      await new Promise(r => setTimeout(r, 1000));
    }
  }
}

Code Style Guidelines

When deciding whether to use optional bindings, consider these guidelines:

1. Keep the binding if the error will be logged or used for decision-making.
2. Omit the binding for simple handling or error propagation.
3. Maintain consistency with your team's coding style.

// Recommended: When error details are needed
try {
  // ...
} catch (error) {
  logger.error('Operation failed', error);
  throw new CustomError('Wrapper', error);
}

// Recommended: When error details are unnecessary
try {
  // ...
} catch {
  retry();
}

Static Analysis Tool Support

Tools like ESLint already support optional binding syntax checks. Configure rules like this:

// .eslintrc.json
{
  "rules": {
    "no-unused-vars": ["error", {
      "args": "none",
      "caughtErrors": "none"
    }]
  }
}

Comparison with Promise.catch

Promise chains have always allowed omitting the parameter in .catch():

somePromise
  .then(handleSuccess)
  .catch(() => handleFailure()); // Parameter has always been optional

ES10's optional catch binding brings synchronous error handling in line with asynchronous patterns.

Debugging Considerations

While omitting the binding simplifies code, it may obscure error details during debugging. Balance this with:

try {
  // ...
} catch {
  console.error('Operation failed (see debugger for details)');
  debugger; // Preserve debugging capability
  throw;
}

Interaction with DOM APIs

Optional bindings are especially useful for DOM operations:

function getElementOrNull(selector) {
  try {
    return document.querySelector(selector);
  } catch {
    return null;
  }
}

Server-Side Applications

Handling potentially failing operations in Node.js:

function readConfigSync(path) {
  try {
    return fs.readFileSync(path, 'utf8');
  } catch {
    return DEFAULT_CONFIG;
  }
}

JSON Operations

Handling potentially invalid JSON:

function tryParseJSON(json) {
  try {
    return JSON.parse(json);
  } catch {
    return { error: 'Invalid JSON' };
  }
}

Assertions in Testing Frameworks

Verifying that errors are thrown in tests:

test('should throw', () => {
  expect(() => {
    try {
      shouldThrow();
    } catch {
      throw new Error('Expected error');
    }
  }).toThrow();
});

Usage in Class Methods

Using optional bindings in class methods:

class DataProcessor {
  process(data) {
    try {
      return this._validate(data);
    } catch {
      this._logFailure();
      throw;
    }
  }
}

Integration with Generator Functions

Error handling in generator functions:

function* resilientGenerator(items) {
  for (const item of items) {
    try {
      yield processItem(item);
    } catch {
      yield SKIP_VALUE;
    }
  }
}

Module System Applications

Error handling for dynamic module imports:

async function loadOptionalModule(name) {
  try {
    return await import(`./${name}.js`);
  } catch {
    return null;
  }
}