Skip to main content

How to Resolve the "Expected parentheses around arrow function argument (arrow-parens)" ESLint Rule Warning in javaScript

When writing arrow functions in JavaScript, you may encounter the ESLint warning Expected parentheses around arrow function argument (arrow-parens). This is a stylistic rule designed to enforce consistency in your codebase, not an error in your code's logic.

This guide will explain what the arrow-parens rule does, show you the two primary styles it can enforce ("always" vs. "as-needed"), and teach you how to configure it to match your project's coding standards.

Understanding the arrow-parens Rule​

In JavaScript, the parentheses around the argument of an arrow function are optional only if there is exactly one argument.

// These two functions are syntactically identical
const funcA = x => x + 1;
const funcB = (x) => x + 1;

// Parentheses are REQUIRED for zero, two, or more arguments
const funcC = () => 'Hello';
const funcD = (a, b) => a + b;

The arrow-parens ESLint rule exists to enforce a consistent style for the single-argument case, preventing developers from mixing both styles in the same project.

Option 1: "always" - Always Use Parentheses (The Default)​

By default, ESLint sets this rule to "always". This means it requires parentheses around the argument in all cases, eliminating the exception for single-argument functions.

For example, this code triggers the warning because the num parameter is not wrapped in parentheses.

// ⛔️ Expected parentheses around arrow function argument. (arrow-parens)
const increment = num => {
  return num + 1;
};

To fix the warning, simply add the parentheses.

// ✅ No ESLint warning
const increment = (num) => {
  return num + 1;
};
note

This style is often preferred for its consistency. It also has the advantage of making code modifications easier; if you need to add a second argument or a type annotation (in TypeScript), the parentheses are already there.

Option 2: "as-needed" - Use Parentheses Only When Required​

Many developers prefer a more minimal style, omitting parentheses wherever they are not syntactically required. You can configure ESLint to enforce this by setting the arrow-parens rule to "as-needed".

With this rule, the original "problematic" code is now the only correct style for a single argument.

// ✅ No warnings with "as-needed"
const increment = num => {
  return num + 1;
};

In fact, with this setting, adding unnecessary parentheses will now cause an ESLint error.

// ⛔️ Unexpected parentheses around arrow function argument. (arrow-parens)
const increment = (num) => {
  return num + 1;
};

How to Configure the Rule in Your .eslintrc File​

You can easily configure this rule for your entire project in your ESLint configuration file.

note

Choose only one of these options to set your project's standard.

.eslintrc.js
module.exports = {
  rules: {
    // To enforce using parentheses always (the default)
    'arrow-parens': ['error', 'always'],

    // OR: to enforce using parentheses only when needed
    'arrow-parens': ['error', 'as-needed'],

    // OR: to completely disable the rule
    'arrow-parens': 'off',
  },
};

Conclusion: Which Style Should You Choose?​

The choice between "always" and "as-needed" is purely a matter of personal or team preference. The most important thing is to choose one and be consistent.

  • "always" (the default) is a great choice for consistency and is often considered a safer default. It simplifies code reviews and makes adding/removing arguments or types less disruptive.
  • "as-needed" is preferred by those who favor a more minimal and concise coding style.

Whichever you choose, configuring it in your project's .eslintrc file will ensure your entire codebase follows the same convention.

Table of Contents