JS-0240 · Use shorthand property syntax for object literals

gochan-org / gochan

Active

Use shorthand property syntax for object literals JS-0240

Anti-pattern

Minor

2 months ago — 2 years old

Expected property shorthand

 95		const op = data.posts[0];
 96		const threadObj: WatchedThreadJSON = {
 97			id: threadID as number,
 98			board: board, 99			posts: data.posts.length,
100			op: op.name,
101			latest: data.posts[data.posts.length-1].no

Expected property shorthand

frontend/ts/watcher/watcher.ts

 36						newPosts: data.posts.slice(thread.posts),
 37						newNumPosts: data.posts.length,
 38						op: thread.id,
 39						board: board 40					});
 41				}
 42			}).catch(e => {

Expected property shorthand

frontend/ts/notifications.ts

10
11export function notify(title: string, body: string, img = noteIcon) {
12	const n = new Notification(title, {
13		body: body,14		image: img,
15		icon: noteIcon
16	});

Expected method shorthand

frontend/ts/management/sections.ts

37				changesButtonAdded = false;
38				$("div#save-changes").remove();
39			},
40			error: function(t, xhr, errorText) {41				if(!errorShown) {42					alertLightbox(`Received an error when saving changes (only the first one will be shown): ${errorText}`, "Error");43					errorShown = true;44				}45			}46		}).fail((xhr,err,errorText) => {
47			if(!errorShown) {
48				alertLightbox(`Received an error when saving changes (only the first one will be shown): ${errorText}`, "Error");

Expected method shorthand

frontend/ts/management/sections.ts

32				sectionhidden: sectionhidden,
33				save_section: "Save section"
34			},
35			success: function() {36				alertLightbox("Section order changes saved successfully!", "Success");37				changesButtonAdded = false;38				$("div#save-changes").remove();39			},40			error: function(t, xhr, errorText) {
41				if(!errorShown) {
42					alertLightbox(`Received an error when saving changes (only the first one will be shown): ${errorText}`, "Error");

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 }
};

gochan-org / gochan

Bad Practice

Recommended