Few useful javascript tips, tricks and shorthands to make your code smaller

author-avatar
Paul Shan Tue Jul 15 2014
This article contains few handy tricks and shorthands for your everyday code in javascript. Using these shorthands you will be able to save few minutes for your girlfriend :P. Few of them also increases the readability of your code.

#Null check in objects

Instead of checking the properties and sub properties of an object one by one, you can use some shortcuts to get it done with minimum code and better readability.
//Normal:
var myVar;
if(anObject)
	if(anObject.aProperty)
		if(anObject.aProperty.aSubProperty)
			myVar = anObject.aProperty.aSubProperty;

//Shorthand:
var myVar = anObject && anObject.aProperty && anObject.aProperty.aSubProperty;

#If else statement

Ternary operators are fast to write and also in executing. But long statements in it may hamper your readability.
//Normal:
if(aCondition){
	doSuccessThings();
}
else{
	doFailureThings();
}

//With ternary operators:
aCondition ? doSuccessThings() : doFailureThings();
var myVar=aCondition ? "This is true" : "This is false";

#Conditional assertion

To insert value in a varible you may not have to check the existance of them; as there are shortcuts. Below is an example.
//Normal:
if(valueA)
	myVar=valueA;
else
	myVar=valueB;

Shorthand:
myVar = valueA || valueB;

#Same variable multi condition

To check if a variable have few specific values or not, you dont have to write a long expression. Put the values in an array and check if the existing value of your variable is there in the array or not. But over use of this will increase your garbage memory.
//Normal:
if(myVar==1 || myVar==22 || myVar==43 || myVar==51 || myVar==63 || myVar==83 || myVar==92 || myVar==99){
	doSomething();
}

//Shorthand:
if([1,22,43,51,63,83,"A string value", "AnotherString"].indexOf(myVar)!=-1){
	doSomething();
}

#Convert string to number

//Normal:
var intValue = parseInt("stringValue");
var stringValue = intValue.toString();

//Shorthand:
var intValue = +"stringValue";
var stringValue = intValue+"";

#Round a number

Without even using Math.ceil or Math.floor it's possible to perform the same operations very easily and quickly.

1. Round a number upward to its nearest integer:

//Normal:
var intValue = Math.ceil(2.8); //3

//Shorthand:
var intValue = -~2.8 // A minus is required as normally ~2.8 returns a negative value
//do the above only if you are dealing with actual float values
//cause -~ increments the integer
// -~3 = 4

2. Round a number downward to its nearest integer:

//Normal:
var intValue = Math.floor(2.8); //2

//Shorthand:
var intValue = ~~2.8

#Shorthand with truthy and falsy

Know the falsy values in javascript.
//Normal:
if((myVar!=null || myVar!=NaN || myVar!=undefined || myVar!="" || myVar!=0 || myVar!=false))
	doSomething();

//Shorthand:
if(myVar)
	doSomething();

#Array to CSV and vice versa

A shortcut to convert an array to a csv string and vice versa.
//Shorthand:
var anArray = [1,2,3,4,5];
var csvString = anArray.valueOf();
var againAnArray = csvString.split(',');

#Calling a function as a string

Executing a function and similar thing using strings and without using eval.
function myFunc(){
	console.log("This is myFunc")
}
//calling the function
window["myFunc"]();
Javascripttipsshorthand

Written By

Paul Shan

Collections

  • E

    ES6

  • R

    React JS

  • C

    CSS

    Cascading style sheets only

  • S

    SEO

    Search engine optimization

  • E

    ES7

  • C

    CMS

    wordpress, drupal, jumla, magento and more


Show All

Tags

vue-js
advanced js
youtube
Web development
vue css
social share buttons
real-life-example
react datetime picker
progra
Online
MathJax
jsfiddle
jquery chart library
instant search using vue
handlebars
event loop
Design
console.log
best practices
imorph

Show All