如何解决函数中reduce方法处的no shadowed variable linting警告？

Hey there! Let’s sort out that lint warning popping up on your .reduce() callback parameters. Here’s the breakdown and straightforward fixes:

What’s Causing the Warning? #

The "no-shadowed-variable" rule flags when a variable inside a nested scope (like your reduce callback) has the same name as a variable in an outer scope. For example, if you already have a key or nestedObject variable defined somewhere outside the .reduce() call, using those same names for the callback parameters "shadows" the outer variable—and linters hate this because it can lead to accidental bugs and make code harder to read.

Fix 1: Rename the Callback Parameters (Best Practice) #

The simplest and most recommended fix is to give the reduce callback parameters unique names that don’t clash with outer variables. Use common, intuitive names for reduce parameters to make your code clearer too:

• For the accumulator (your nestedObject), use acc (short for accumulator) or currentObj
• For the current element (your key), use currentKey, prop, or item

Example Before (Problematic): #

// Outer scope variable that's being shadowed
const key = "userName";

const nestedResult = keysArray.reduce((nestedObject, key) => {
  // Lint warning here: 'key' shadows outer variable
  nestedObject[key] = someValue;
  return nestedObject;
}, {});

Example After (Fixed): #

const key = "userName";

const nestedResult = keysArray.reduce((acc, currentKey) => {
  acc[currentKey] = someValue;
  return acc;
}, {});

Fix 2: Adjust the Lint Rule (Last Resort) #

If for some specific reason you absolutely need to keep the parameter names (not recommended), you can disable the no-shadow rule either globally or for that specific line. However, this is a last step since shadowing variables is generally considered a code smell.

Disable Globally (ESLint Example): #

Add this to your .eslintrc.json or equivalent config file:

{
  "rules": {
    "no-shadow": "off"
  }
}

Disable for a Single Line: #

Add a comment above the line with the warning:

const key = "userName";

// eslint-disable-next-line no-shadow
const nestedResult = keysArray.reduce((nestedObject, key) => {
  nestedObject[key] = someValue;
  return nestedObject;
}, {});

Pro Tip #

Stick to conventional names for reduce parameters (acc for accumulator, curr for current item) whenever possible. It not only avoids shadowing issues but also makes your code more readable for other developers who’re familiar with reduce patterns.

内容的提问来源于stack exchange，提问作者Sandra Willford