Use shorthand property syntax for object literals JS-0240
Anti-pattern
Minor
15 days ago
—
3 years old
Expected method shorthand
127 console.log("activeTool", this.activeTool, value, key);
128 // this.activeTool.updateParameter(key, value);
129 },
130 computedSpecForMINT: function(minttype) {131 // Get the corresponding the definitions object from the componentAPI, convert to a spec object and return132 let definition = ComponentAPI.getDefinitionForMINT(minttype);133 let spec = [];134 for (let key in definition.heritable) {135 let item = {136 min: definition.minimum[key],137 max: definition.maximum[key],138 value: definition.defaults[key],139 units: definition.units[key],140 steps: (definition.maximum[key] - definition.minimum[key]) / 10,141 name: key142 };143 spec.push(item);144 }145 return spec;146 }147 }
148};
149</script>Expected method shorthand
73 return [this.activated ? this.activatedColor : "white", this.activated ? this.activatedTextColor : "blue--text", "mx-auto", "my-1", "btn"];
74 },
75
76 shortenedMINT: function() { 77 return this.mint.substring(0, 15); 78 } 79 },
80 mounted() {
81 // Setup an event for closing all the dialogsExpected method shorthand
69 let cloneSpec = JSON.parse(JSON.stringify(this.storedSpec));
70 return cloneSpec;
71 },
72 buttonClasses: function() { 73 return [this.activated ? this.activatedColor : "white", this.activated ? this.activatedTextColor : "blue--text", "mx-auto", "my-1", "btn"]; 74 }, 75
76 shortenedMINT: function() {
77 return this.mint.substring(0, 15);Expected method shorthand
65 };
66 },
67 computed: {
68 specClone: function(){ 69 let cloneSpec = JSON.parse(JSON.stringify(this.storedSpec)); 70 return cloneSpec; 71 }, 72 buttonClasses: function() {
73 return [this.activated ? this.activatedColor : "white", this.activated ? this.activatedTextColor : "blue--text", "mx-auto", "my-1", "btn"];
74 },Expected method shorthand
40 spec: {
41 type: Array,
42 required: false,
43 default: function() { 44 return [{ min: 0, max: 110, units: "", value: 0 }]; 45 } 46 },
47 activatedColor: {
48 type: String,
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 }
}