JavaScript shorthand


JavaScript shorthand techniques will help you speed up your coding. A few ways to save on some bytes in your JavaScript code, as well as making it more readable and quicker to write.

1. Boolean Shorthand

If “a” is equal to true,
then do something.

Longhand:

var a;
if ( a == true ) {
	// do something...
}

Shorthand:

var a;
if ( a ) {
	// do something...
}

2. Boolean Shorthand

If “a” is NOT equal to true,
then do something.

Longhand:

var a;
if ( a != true ) {
	// do something...
}

Shorthand:

var a;
if ( !a ) {
	// do something...
}

3. Conditional Shorthand

If “a” is not defined, or is not equal to true,
then “a” is equal to “b”.

Longhand:

var a, b;
if ( !a ) {
	a = b;
}

Shorthand:

var a, b;
a = a || b;

4. Conditional Shorthand

If some condition is equal to true,
then “a” is equal to “b”, or else
“a” is equal to “c”.

Longhand:

var a, b, c;
if ( true ) {
	a = b;
} else {
	a = c;
}

Shorthand:

var a, b, c;
a = ( true ) ? b : c;

5. Assignment Operator Shorthand

Longhand:

var a, b;
a = a + b;

Shorthand:

var a, b;
a += b;

6. Assignment Operator Shorthand

“d” is equal to “c”, which is equal to “b”,
which is equal to “a”. Therefore, “d”, “c”,
and “b” are all equal to “a”.

Longhand:

var a, b, c, d;
b = a;
c = b;
d = c;

Shorthand:

var a, b, c, d;
d = c = b = a;

7. Object Shorthand

Longhand:

var a = new Array();
var b = new Object();
var c = new String("myString");

Shorthand:

var a = [];
var b = {};
var c = "myString"; // This is technically a primitive, and not an object.
// Execute a method on it, and it becomes an object.

8. Object Array Shorthand

Longhand:

var a = new Array();
a[0] = "myString1";
a[1] = "myString2";
a[2] = "myString3";

Shorthand:

var a = ["myString1", "myString2", "myString3"];

9. Object Hash Shorthand

Longhand:

var a = new Object();
a["myStringKey1"] = "myStringValue1";
a["myStringKey2"] = "myStringValue2";
a["myStringKey3"] = "myStringValue3";

Shorthand:

var a = {
	myStringKey1: "myStringValue1",
	myStringKey2: "myStringValue2",
	myStringKey3: "myStringValue3"
};

10. charAt() Shorthand

Longhand:

"myString".charAt(0);

Shorthand:

"myString"[0]; // Returns 'm'

The eval() function may not be as evil as some have been lead to believe, but there is still an alternative for when you are being scolded mercilessly by a senior developer. This bracket notation shorthand technique is much cleaner than an evaluation, and you will win the praise of colleagues who once scoffed at your amateur coding abilities.

eval() / Bracket Notation Shorthand

NOTE: Assumes a form with name attribute equal to “form_name”, and a form control with the value set equal to strFormControl.

Longhand:

var a, strFormControl;
a = eval( 'document.form_name.' + strFormControl + '.value' );

Shorthand:

var a, strFormControl;
a = document.form_name[strFormControl].value;

11. Object Literal Shorthand

Longhand:

function myFunction() {
	this.myMethod = function() {}
}
var myObject = new myFunction();

Shorthand:

var myObject = {
	myMethod: function() {}
};

12. Null, Undefined, Empty Checks Shorthand

When creating new variables sometimes you want to check if the variable your referencing for it’s value isn’t null or undefined. I would say this is a very common check for JavaScript coders.

Longhand:

1
2
3
if (variable1 !== null || variable1 !== undefined || variable1 !== '') {
     var variable2 = variable1;
}

Shorthand:

1
var variable2 = variable1  || '';

13. Regex Object Shorthand

In Javascript, a Regex object can be called like a function like so:

1
/test/("is test in here")

As opposed to the more verbose(but sometimes more appropriate in cases that you are reusing the Regex).

Longhand:

1
2
3
searchText = "padding 1234 rocket str austin TX 78704 more padding"
/\d+.+\n{0,2}.+\s+[A-Z]{2}\s+\d{5}/m(searchText)
//returns: ["1234 rocket str austin TX 78704"]

Shorthand:

1
2
3
var re = new RegExp(/\d+.+\n{0,2}.+\s+[A-Z]{2}\s+\d{5}/m);
re.exec(searchText);
//returns: ["1234 rocket str austin TX 78704"]

14. Comparison returns

We’re no longer relying on the less reliable == as !(ret == undefined) could be rewritten as !(ret) to take advantage of the fact that in an or expression, ret (if undefined or false) will skip to the next condition and use it instead. This allows us to trim down our 5 lines of code into fewer characters and it’s once again, a lot more readable.

Longhand:

1
2
3
4
5
if (!(ret == undefined)) {
    return ret;
} else{
   return fum('g2g');
}

Shorthand:

1
return ret || fum('g2g');
Advertisements

9 thoughts on “JavaScript shorthand

  1. I was suggested this blog by way of my cousin. I’m no longer certain whether or not this put up is written by him as nobody else realize such detailed about my trouble. You’re fantastic! Thanks!

  2. Thanks for providing such a fantastic write-up, it was superb and really informative. It is my very first time that I pay a visit to here. I located plenty of informative stuff inside your write-up. Maintain it up. Thank you.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s