destructuringConsistency

Use destructured variables over properties for consistency.

✅ This rule is included in the ts stylistic preset.

After destructuring properties from an object, access those properties through the destructured variables rather than the original object. Mixing destructured variables with property access on the same object leads to inconsistent code.

This rule reports property accesses that use a previously destructured property.

Examples

❌ Incorrect

const obj = { a: 1, b: 2 };
const { a } = obj;
console.log(obj.a);

const data = { name: "test", value: 10 };
const { name, value } = data;
console.log(data.name);

const config = { port: 3000, host: "localhost" };
const { port } = config;
const url = config.host + ":" + config.port;

✅ Correct

const obj = { a: 1, b: 2 };
const { a } = obj;
console.log(a);

const data = { name: "test", value: 10 };
const { name, value } = data;
console.log(name);

const obj = { a: 1, b: 2 };
const { a } = obj;
console.log(obj.b);

Options

This rule is not configurable.

When Not To Use It

If your codebase intentionally mixes destructured access with property access for clarity or other reasons, you may disable this rule. Some patterns may require accessing the original object even after destructuring.

Further Reading

• MDN documentation on Destructuring assignment

Equivalents in Other Linters

• ESLint: unicorn/consistent-destructuring