JS-0240 · Use shorthand property syntax for object literals

Use shorthand property syntax for object literals JS-0240

Anti-pattern

Minor

3 months ago — 3 months old

Expected method shorthand

 92		    	$("#dlmsg2").show();
 93		    	$("#dlmsg").hide();
 94		    },
 95		    error: function(data) 96		    { 97		    	alert("Sorry, script failure occurred :("); 98		    	$("#dlmsg").hide(); 99		    }100		  });
101	});
102

Expected method shorthand

htdocs/td/dl/dl.js

 87		  $.ajax({
 88		    url: 'dl.py',
 89		    data: $(this).serialize(),
 90		    success: function(data) 91		    { 92		    	$("#dlmsg2").show(); 93		    	$("#dlmsg").hide(); 94		    }, 95		    error: function(data)
 96		    {
 97		    	alert("Sorry, script failure occurred :(");

Expected method shorthand

htdocs/oauth2.js

206	  			console.log(msg);
207	  			alert("Encountered error: "+ msg);
208	  	  }, 
209		  success: function(data, status) {210			// Save this object back to globals for later use211		  	spreadsheetDocs[i] = $(data);212		  	if (i == 0){213		    	farmercodes = [];214		    	spreadsheetDocs[i].find('entry').each(function(i,x){215		    		$(x).children().each(function(j,c){216		    			if (c.nodeName == 'gsx:farmercode'){217		    				farmercodes.push( $(c).text() );218		    			}219		    		});220		   		});221		    	setSelector(farmercodes);222		  	}223		    }224		  });
225	});
226}

Expected method shorthand

htdocs/oauth2.js

197		  headers: {
198		    'Authorization': 'Bearer ' + access_token
199		  },		  
200	  	  error: function(data, status){201	  			msg = "";202	  			for (prop in data){203	  				msg += "property: " + prop + " value: [" + data[prop] + "]\n";204205	  			}206	  			console.log(msg);207	  			alert("Encountered error: "+ msg);208	  	  }, 209		  success: function(data, status) {
210			// Save this object back to globals for later use
211		  	spreadsheetDocs[i] = $(data);

Expected method shorthand

htdocs/oauth2.js

173	  		success: function(data, status) {
174	  			if (i == 0) alert("Saved Entry, thank you!");
175	  		},
176	  		error: function(data, status){177	  			msg = "";178	  			for (prop in data){179	  				msg += "property: " + prop + " value: [" + data[prop] + "]\n";180181	  			}182	  			console.log(msg);183	  			alert("Encountered error: "+ msg);184	  		}185	  	});
186    });
187

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

isudatateam / datateam

Bad Practice

Recommended