How to Resolve the "Expected property shorthand (object-shorthand)" ESLint Error in JavaScript

The ESLint error Expected property shorthand (object-shorthand) is a stylistic rule that encourages you to use a more concise, modern syntax when defining object properties and methods. This rule flags code where an object property is being assigned a variable of the same name, or where a function is being assigned to a property using the older function keyword.

This guide will explain the two scenarios where this error occurs and show you how to resolve them by adopting the modern ES6 shorthand syntax.

What is Object Shorthand?

ES6 introduced a more concise syntax for defining object literals. The object-shorthand rule enforces this modern style, which applies to both properties and methods.

Fixing "Expected property shorthand" for Variables

This is the most common case. The error appears when the name of a variable you are assigning is the same as the object key.

Example of code with problems:

const username = 'Alice';
const age = 30;

// ⛔️ Error: Expected property shorthand. (object-shorthand)
const user = {
  username: username,
  age: age,
};

As solution, if the key and the variable name are identical, you can simply specify the key. JavaScript will automatically infer the value from the variable of the same name in the current scope.

const username = 'Alice';
const age = 30;

// ✅ Correct: Using property shorthand syntax.
const user = {
  username,
  age,
};

console.log(user); // Output: { username: 'Alice', age: 30 }

Fixing "Expected method shorthand" for Functions

This variation of the error occurs when you define a function as a property on an object using the function keyword.

Example of code with problems:

// ⛔️ Error: Expected method shorthand. (object-shorthand)
const UserAPI = {
  getUser: function(id) {
    return { id: id, name: 'Test User' };
  }
};

ES6 introduced a more concise syntax for defining methods on an object. As solution, you can omit the colon (:) and the function keyword.

// ✅ Correct: Using method shorthand syntax.
const UserAPI = {
  getUser(id) {
    return { id, name: 'Test User' }; // Note: we can use property shorthand here too!
  }
};

note

This syntax is cleaner, more readable, and is the modern standard.

Why Use Object Shorthand?

Enforcing this rule provides several key benefits:

• Reduces Redundancy: It eliminates the repetitive key: key pattern, making your code less verbose.
• Improves Readability: The concise syntax makes object literals cleaner and easier to scan.
• Encourages Modern Practices: It helps keep your codebase consistent with modern ES6+ JavaScript standards.

How to Disable the Rule (When Necessary)

While refactoring your code is the best solution, you may need to disable the rule in certain cases.

For a Single Line:

const username = 'Alice';

const user = {
  // eslint-disable-next-line object-shorthand
  username: username, // This line is now ignored by ESLint
};

For an Entire File:

Place this comment at the top of your file.

/* eslint-disable object-shorthand */

For the Entire Project (in .eslintrc.js):

This is useful if you are working on a legacy codebase and do not want to refactor all instances.

// In .eslintrc.js
module.exports = {
  rules: {
    'object-shorthand': 'off',
  },
};

Conclusion

The object-shorthand ESLint error is a helpful nudge to adopt a cleaner, more modern JavaScript syntax.

• To fix a property error, refactor const obj = { x: x } to const obj = { x }.
• To fix a method error, refactor const obj = { myFunc: function() {} } to const obj = { myFunc() {} }.
• Embracing this rule by refactoring your code is the recommended best practice, as it leads to more readable and maintainable object literals.