JavaScript tips and tricks

1. Global scope

Use objects/classes to encapsulate your application logic and try not to pollute the global variable scope as this can cause frustrating problems such as libraries not working from variables being overridden.

Below is an example how you can structure your application’s logic in a simple way without polluting the global scope.

var app = {};



app.initialize = function() {



//do sth



}

app.someAction = function() {



// do sth else



}

app.properties = {}

app.properties.isStarted = 1;

2. Chain methods wherever possible

Method chaining in JavaScript can simplify your application’s logic. To chain methods, the previous method must return the instance that it operates on,  and the next method will make changes to that instance and again return it. jQuery is a good example of the possibility for method chaining:

$(“div”).css(“background-color”, “crimson”)



.height(400)



.css(“border”, “4px solid green”)

In the example above, we work with the selected divs to perform as many changes on them as we want.

3. Use the strict equals comparison

The equals comparison (==) would hold a truthy value even if the variables are not of the same type which often cause problems. For example, “” == 0 would return True, which may not be what you want if you at a point want to check if the first operand is zero and not just a falsy value. Therefore, it is best to stick to using the strict equals operator (===) , in most situations, which checks both the value and the type. With the strict equals, “” === 0 would return False and only 0 === 0 would return True.

4. Short-circuit conditionals

If you can arrange your code to execute a function if a particular condition is met, you can short-circuit that in a single line.

In other words, instead of:

If (sth) {



doSthElse();



}

You can just write sth && doSthElse();.

5. Setting default variable values

Somewhere in your application, you might be setting up your variables like this:

If (!alpha) {



var alpha = 42;

}

You can set default values in a one-liner using the OR operator, like this:

var alpha =  alpha || 42;

6. Getting array elements in reverse order

If you want to reverse an array, you can use the reverse method on the array, like this:

var arr = [1,3,5,6,7];



arr.reverse()



[7, 6, 5, 3, 1]

However, if you just want to get a specific number of elements off the back of the array, you can use the slice method with a negative first parameter, like this:

arr.slice(-3)



[5, 3, 1]

You just have to replace -3 with the number of array items from the back of the array that you want.

7. Use strict mode

By starting your scripts with the string “use strict”; you save yourself from some of the common code mistakes that could be made, such as declaring global variables within a local scope (skipping the var keyword).

For example,

myVariable = 3.14;       // This will not cause an error unless use strict is found in that scope or the global scope.

Please subscribe for more tricks.