Use shorthand property syntax for object literals JS-0240
Anti-pattern
Minor
8 months ago
—
a year old
Expected method shorthand
11
12 $("#tabs").tabs({
13 active: oldIndex,
14 activate: function (event, ui) {15 // Get future value16 var newIndex = ui.newTab.parent().children().index(ui.newTab);17 // Set future value18 try {19 dataStore.setItem(index, newIndex);20 } catch (e) { }21 }22 }).addClass("ui-tabs-vertical ui-helper-clearfix");
23 $("#tabs li").removeClass("ui-corner-top").addClass("ui-corner-left");
24});Expected property shorthand
3671 if (options.equalizeWidth) {
3672 width_parent = self.$dropdown_content.innerWidth() - getScrollbarWidth();
3673 width = Math.round(width_parent / n);
3674 $optgroups.css({width: width});3675 if (n > 1) {
3676 width_last = width_parent - width * (n - 1);
3677 $optgroups.eq(n - 1).css({width: width_last});Expected method shorthand
3571 labelClass : 'selectize-dropdown-header-label',
3572 closeClass : 'selectize-dropdown-header-close',
3573
3574 html: function(data) {3575 return (3576 '<div class="' + data.headerClass + '">' +3577 '<div class="' + data.titleRowClass + '">' +3578 '<span class="' + data.labelClass + '">' + data.title + '</span>' +3579 '<a href="javascript:void(0)" class="' + data.closeClass + '">×</a>' +3580 '</div>' +3581 '</div>'3582 );3583 }3584 }, options);
3585
3586 self.setup = (function() {Expected method shorthand
3545 ui.placeholder.css('width', ui.helper.css('width'));
3546 $control.css({overflow: 'visible'});
3547 },
3548 stop: function() {3549 $control.css({overflow: 'hidden'});3550 var active = self.$activeItems ? self.$activeItems.slice() : null;3551 var values = [];3552 $control.children('[data-value]').each(function() {3553 values.push($(this).attr('data-value'));3554 });3555 self.setValue(values);3556 self.setActiveItem(active);3557 }3558 });
3559 };
3560 })();Expected method shorthand
3541 items: '[data-value]',
3542 forcePlaceholderSize: true,
3543 disabled: self.isLocked,
3544 start: function(e, ui) {3545 ui.placeholder.css('width', ui.helper.css('width'));3546 $control.css({overflow: 'visible'});3547 },3548 stop: function() {
3549 $control.css({overflow: 'hidden'});
3550 var active = self.$activeItems ? self.$activeItems.slice() : null;
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 }
}