Use shorthand property syntax for object literals JS-0240
Anti-pattern
Minor
9 months ago
—
2 years old
Expected property shorthand
1203 var drawn = putWord(settings.list[i])
1204 var canceled = !sendEvent('wordclouddrawn', true, {
1205 item: settings.list[i],
1206 drawn: drawn1207 })
1208 if (exceedTime() || canceled) {
1209 stoppingFunction(timer[timerId])Expected property shorthand
872 }
873
874 if (interactive) {
875 infoGrid[x][y] = { item: item, dimension: dimension } 876 }
877 }
878Expected property shorthand
872 }
873
874 if (interactive) {
875 infoGrid[x][y] = { item: item, dimension: dimension } 876 }
877 }
878Expected property shorthand
715 fillTextOffsetY: fillTextOffsetY,
716 fillTextWidth: fw,
717 fillTextHeight: fh,
718 fontSize: fontSize 719 }
720 }
721Expected property shorthand
712 gw: cgw,
713 gh: cgh,
714 fillTextOffsetX: fillTextOffsetX,
715 fillTextOffsetY: fillTextOffsetY, 716 fillTextWidth: fw,
717 fillTextHeight: fh,
718 fontSize: fontSize
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 }
}