Use shorthand property syntax for object literals JS-0240
Anti-pattern
Minor
4 days ago
—
5 months old
Expected property shorthand
160 setLiked(!liked);
161 setBlog((prevBlog) => ({
162 ...prevBlog,
163 likeCount: likeCount164 }));
165 } catch (error) {
166 console.error('Error updating like status:', error);Expected property shorthand
150 }
151
152 await update(ref(db, `articles/${id}`), {
153 likeCount: likeCount154 });
155
156 await update(userRef, {Expected property shorthand
115 title: blog.title,
116 content: blog.content,
117 tags: blog.tags,
118 id: id119 }
120 });
121 };Expected property shorthand
130 dob: dob,
131 gender: gender,
132 age: age,
133 user_type: user_type,134 });
135
136 }Expected property shorthand
129 email: email,
130 dob: dob,
131 gender: gender,
132 age: age,133 user_type: user_type,
134 });
135
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 }
}