Use shorthand property syntax for object literals JS-0240
Anti-pattern
Minor
5 months ago
—
3 years old
Expected method shorthand
8214 union: function (e) {
8215 return e
8216 },
8217 contains: function () { 8218 return !1 8219 } 8220 }),
8221 (e.Set.prototype.contains = function (e) {
8222 return !!this.elements[e]Expected method shorthand
8211 intersect: function () {
8212 return this
8213 },
8214 union: function (e) { 8215 return e 8216 }, 8217 contains: function () {
8218 return !1
8219 }Expected method shorthand
8208 }
8209 }),
8210 (e.Set.empty = {
8211 intersect: function () { 8212 return this 8213 }, 8214 union: function (e) {
8215 return e
8216 },Expected method shorthand
8203 union: function (e) {
8204 return e
8205 },
8206 contains: function () { 8207 return !0 8208 } 8209 }),
8210 (e.Set.empty = {
8211 intersect: function () {Expected method shorthand
8200 intersect: function (e) {
8201 return e
8202 },
8203 union: function (e) { 8204 return e 8205 }, 8206 contains: function () {
8207 return !0
8208 }
Description
ECMAScript 6 provides a concise form for defining object literal methods and properties. This syntax can make defining complex object literals much cleaner.
Here are a few common examples using the ES5 syntax:
const x = 1, y = 2, z = 3;
// properties
const foo = {
x: x,
y: y,
z: z,
};
// methods
const foo = {
a: function() {},
b: function() {}
};
The ES6 equivalent syntax is::
// properties
const foo = {x, y, z};
// methods
const bar = {
a() { return 1 },
b() { return 2 }
};
NOTE: The shorthand properties are equivalent to function expressions.
Meaning that they do not bind their own this inside their bodies.
It is still possible to access properties from the object inside a shorthand member function:
const object = {
x: 1,
getX() {
return this.x // valid
}
}
Bad Practice
const foo = {
bar: function () { return 1 }
};
Recommended
const foo = {
bar() { return 1 }
}