ESLint: Expected property shorthand object-shorthand [Fixed]

# Table of Contents

# ESLint: Expected property shorthand object-shorthand [Fixed]

The ESLint warning "Expected property shorthand object-shorthand" is shown when you use the longer form syntax when property names and values can be shortened.

To resolve the issue, use the property shorthand syntax or disable the ESLint rule.

expected property shorthand object shorthand

Here is an example of when the warning is shown.

index.js

Copied!
const x = 100

const obj = {
  // ⛔️ Expected property shorthand. eslint object-shorthand
  x: x,
}

The issue in the code sample is that the object has a property named x whose value is set to the value of a variable with the same name x.

The code can be shortened in the following way.

index.js

Copied!
const x = 100;

const obj = {
  x,
};

console.log(obj.x); // 👉️ 100

Notice that we didn't have to specify the value of the x property.

When you omit the value, JavaScript knows to look for a variable that has the same name as the object's property (x in the example).

Here is another example of using shorthand property names.

index.js

Copied!
const x = 100;
const fullName = 'bobby hadz';
const site = 'bobbyhadz.com';

const obj = {
  x,
  fullName,
  site,
};

console.log(obj.x); // 👉️ 100

console.log(obj.site); // 👉️ bobbyhadz.com

console.log(obj.fullName); // 👉️ bobby hadz

The names of the object's properties are the same as the names of the variables, so we can use the shorter syntax.

You can also mix and match.

Some of your object's property values will likely have to be specified explicitly.

index.js

Copied!
const x = 100;
const fullName = 'bobby hadz';
const site = 'bobbyhadz.com';

const obj = {
  x,
  fullName,
  site,
  foo: 'bar',
};

console.log(obj.x); // 👉️ 100

console.log(obj.site); // 👉️ bobbyhadz.com

console.log(obj.fullName); // 👉️ bobby hadz

The foo property uses the longer syntax because there is no foo variable that is available in the scope.

All other object properties use the shorter syntax because variables with the same names are available.

# Expected method shorthand. eslint object-shorthand

You might also get the warning "Expected method shorthand. eslint object-shorthand" when you use the longer-form syntax to declare a function within an object.

Here is the longer-form syntax that causes the issue.

index.js

Copied!
const obj = {
  // ⛔️ Expected method shorthand. eslint object-shorthand
  doWork: function() {
    console.log('doing work');

  }
}

Instead, you should use the more modern and shorter ES6 syntax.

index.js

Copied!
const obj = {
  doWork() {
    console.log('doing work');
  },
};

Here is a more full-featured example.

index.js

Copied!
const obj = {
  doWork() {
    console.log('doing work');
  },
  greet(fullName) {
    console.log(`Hello ${fullName}`);
  },
};

console.log(obj.doWork());

console.log(obj.greet('bobby hadz'));

# Disabling the ESLint `object-shorthand` rule globally

In some cases, you might want to disable the object-shorthand ESLint rule.

If you aren't ready to use the more modern shorthand syntax, disable the rule by updating your .eslintrc.js file as follows.

index.js

Copied!
module.exports = {
    rules: {
        'object-shorthand': 'off',
    },
};

disable object shorthand eslint rule

If you use a .eslintrc.json file, make sure to double-quote all properties and values.

.eslintrc.json

Copied!
{
  "rules": {
    "object-shorthand": "off"
  }
}

The following code wouldn't show a warning if the object-shorthand property is set to off.

index.js

Copied!
const x = 100

const obj = {
  // ✅ no warnings shown
  x: x,
}

# Disabling the ESLint `object-shorthand` rule for an entire file

If you need to disable the object-shorthand rule for an entire file, add the following comment at the top of your file.

index.js

Copied!
/* eslint-disable object-shorthand */

const x = 100

const obj = {
  // ✅ no warnings shown
  x: x,
}

Note that the comment has to be placed at the top of your file for it to take effect.

# Disabling the ESLint `object-shorthand` rule for a single line or a block of code

You can also disable the object-shorthand rule for a single line by using a comment.

index.js

Copied!
const x = 100

const obj = {
  // eslint-disable-next-line object-shorthand
  x: x,
}

Note that the comment has to be placed directly above the line that causes the issue for it to work.

You can use the comment as many times as necessary but this clutters your code.

index.js

Copied!
const x = 100;
const site = 'bobbyhadz.com';

const obj = {
  // eslint-disable-next-line object-shorthand
  x: x,

  // eslint-disable-next-line object-shorthand
  site: site,
}

If you have to use the comment more than a few times, it's better to disable the rule for the entire file (as shown previously) or to disable the rule for a block of code.

Here is an example that disables the object-shorthand rule for a block of code.

index.js

Copied!
/* eslint-disable object-shorthand */
const x = 100

const obj = {
  x: x,
}

/* eslint-enable object-shorthand */

const obj2 = {
  // ⛔️ Expected property shorthand. eslint object-shorthand
  x: x,
}

The eslint-disable object-shorthand comment on the first line disables the rule.

Then the eslint-enable object-shorthand comment enables the rule.

Notice that the warning is shown in obj2 because the variable was declared after enabling the rule.

# Additional Resources

You can learn more about the related topics by checking out the following tutorials:

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.

You can use the search field on my Home Page to filter through all of my articles.

ESLint: Expected property shorthand object-shorthand [Fixed]

# Table of Contents