Use shorthand property syntax for object literals JS-0240
Anti-pattern
Minor
5 months ago
—
5 months old
Expected method shorthand
141 }
142 },
143 filters: {
144 moment: function (date) {145 return moment(date).format('YYYY-MM-DD, hh:mm:ss A');146 }147 }
148 }
149</script>Expected property shorthand
120 },
121 deletePost(id) {
122 axios.post(`/api/posts/delete/${id}`, {
123 'id': id124 })
125 .then(response => {
126 this.$notify({Expected method shorthand
134 }
135 },
136 filters: {
137 moment: function (date) {138 return moment(date).format('YYYY-MM-DD, hh:mm A');139 }140 }
141 }
142</script>Expected property shorthand
113 },
114 deletePost(id) {
115 axios.post(`/api/posts/delete/${id}`, {
116 'id': id117 })
118 .then(response => {
119 this.$notify({
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 }
}