Useful JavaScript Hacks For A Web Developer

As coders sometimes we make silly mistakes or there are times when we look at our old code and find out how easily that could have been done. In this post we will learn or maybe revise some good things that we can implement in our code.

Basic JavaScript Hacks that we can implement

What we will learn?

New shortcuts which we can use in our coding and simplify our coding life.

Variable Null Check

While coding we often use variables whose values can be null or undefined, So before using those variables in statements we normally check if the value of that variable is undefined so that our statement doesn't break. Lets take an example of a unassigned variable and then :

var dummyVariable;
var strDummy;
//Some code here
//
//
if(dummyVariable != null && dummyVariable != undefined)
{
    strDummy = dummyVariable.toString();
}

Now instead of placing two checks for checking the null value we can have a simple code. See the below code

var dummyVariable;
var strDummy;
//Some code here
//
//
//The below 'if' statement will only return true if the value is not null 
// and not 'undefined' and not 'blank' also
if(dummyVariable) 
{
    strDummy = dummyVariable.toString();
}

Placing this null check will save your few lines of code.

Be careful while using this shortcut because 'if(dummyVariable)' will return false in case of 0, undefined, null, empty string, false. So, keep that in mind while performing this check.

Using A String Variable In Arithmetic Operations

In JavaScript every variable is declared with var keyword. So a variable can have a string value or a integer value or any other value. So while using the variables in arithmetic operations we come across a situation when we get a variable with value in string and we have to parse it into Int or Float then only we can use it otherwise the output would be bizarre. Consider the below example:

var dummyVariable1 = 1;
var dummyVariable2 = "2";
//Some code here
//
//
var sum = dummyVariable1 + dummyVariable2; //Bizarre Output

output: 12

//To fix this we use parseInt or parseFloat as per need
var sum = dummyVariable1 + parseInt(dummyVariable2);

output: 3

Above code is just fine but you can just make things easier by appending '+' sign as a prefix to the variable name. This prefix will convert your string variable into a integer or float variable as per the value contained in it. Consider below example:

var dummyVariable1 = 1;
var dummyVariable2 = "2";
//Some code here
//
//
var sum = dummyVariable1 + +dummyVariable2; //Notice the prefix

output: 3

Note: Before using this prefix make sure that variable actually contains integer value, otherwise you operation would return 'NaN' value.

Setting Default Value To A Variable

Sometimes while assigning a value of a x variable to another y variable, we often check whether the value in x variable is legit, if not then we assign another default value to that variable. People do this but there is an easy way out without using if statements. By using '||' operator we can assign default values to a variable. Have a look at the below example

var x = undefined; 
var y = x || 10;
//Value of y is 10

If x would have been a legit value, suppose 5
Then value of y would be 5

Writing If Else In A Single Statement : Ternary Operator 

If you wish to write a conditional statement by which you wish to set the value of a variable then Ternary Operator is the key for you. '?' operator is used to determine the true and false part of the condition. Same operator is also used in various other languages like C#. See the example below.

var dummyVariable = (condition) ? true part : false part;
//Here if the condition returns true then the value in true part is assigned
//to the dummyVariable otherwise value in false part is assigned.
//This way we can write if/else statement in a single statement

Replace Text From All Occurrences

In JavaScript if we are trying to replace many occurrences of a string then .replace('replacethis', 'withthis') doesn't work. It works only for the first instance. So replace from all occurrences we need to  use little bit of regex. Follow below example

var mystr = "This is a sample string.";
console.log(mystr.replace('i', '')); //Outputs: Ths is a sample string.

//Using a regex approach
console.log(mystr.replace(/i/gi, ''));//Outputs: Ths s a sample strng.

/toBeReplacedString/gi is the regex you need to use. Here g represents for global match and i represents case insensitive. By default regex is case sensitive.


So these are few basic JavaScript hacks that we can use in our day-to-day coding. I'll keep on adding other hacks in this post and you can also comment other hacks, We will happily include those in our post.

Small Video to explain these concepts. Enjoy this video and subscribe to our channel on YouTube.

You can have a look at our other JavaScript Posts.

Happy Learning!