# Useful JavaScript Tips, Tricks and Best Practices

## **1 – Don’t forget `var` keyword when assigning a variable’s value for the first time.**

Assignment to an undeclared variable automatically results in a global variable being created. Avoid global variables.

## **2 – use `===` instead of `==`**

The `==` (or `!=`) operator performs an automatic type conversion if needed. The `===` (or `!==`) operator will not perform any conversion. It compares the value and the type, which could be considered faster than `==`.

```javascript
[10] === 10    // is false
[10]  == 10    // is true
'10' == 10     // is true
'10' === 10    // is false
 []   == 0     // is true
 [] ===  0     // is false
 '' == false   // is true but true == "a" is false
 '' ===   false // is false 
```

## **3 – `undefined`, `null`, 0, `false`, `NaN`, `''` (empty string) are all falsy.**

## **4 – Use Semicolons for line termination**

The use of semi-colons for line termination is a good practice. You won’t be warned if you forget it, because in most cases it will be inserted by the JavaScript parser. For more details about why you should use semi-colons, take a look to this artice: [http://davidwalsh.name/javascript-semicolons](https://davidwalsh.name/javascript-semicolons).

## **5 – Create an object constructor**

```javascript
function Person(firstName, lastName){
    this.firstName =  firstName;
    this.lastName = lastName;        
}  

var Saad = new Person("Saad", "Mousliki");
```

## **6 – Be careful when using `typeof`, `instanceof` and `constructor`.**

* _typeof_ : a JavaScript unary operator used to  return a string that represents the primitive type of a variable,  don’t forget that `typeof null` will return “object”, and for the majority of object types (Array, Date, and others) will return also “object”.
* _constructor_ : is a property of the internal prototype property, which could be overridden by code.
* _instanceof_ : is another JavaScript operator that check in all the prototypes chain the constructor it returns true if it’s found and false if not.

```javascript
var arr = ["a", "b", "c"];
typeof arr;   // return "object" 
arr  instanceof Array // true
arr.constructor();  //[]
```

## **7 – Create a Self-calling Function**

This is often called a Self-Invoked Anonymous Function or Immediately Invoked Function Expression (IIFE). It is a function that executes automatically when you create it, and has the following form:

```javascript
(function(){
    // some private code that will be executed automatically
})();  
(function(a,b){
    var result = a+b;
    return result;
})(10,20)
```

## **8 – Get a random item from an array**

```javascript
var items = [12, 548 , 'a' , 2 , 5478 , 'foo' , 8852, , 'Doe' , 2145 , 119];

var  randomItem = items[Math.floor(Math.random() * items.length)];
```

## **9 – Get a random number in a specific range**

This code snippet can be useful when trying to generate fake data for testing purposes, such as a salary between min and max.

```javascript
var x = Math.floor(Math.random() * (max - min + 1)) + min;
```

## **10 – Generate an array of numbers with numbers from 0 to max**

```javascript
var numbersArray = [] , max = 100;

for( var i=1; numbersArray.push(i++) < max;);  // numbers = [1,2,3 ... 100] 
```

## **11 – Generate a random set of alphanumeric characters**

```javascript
function generateRandomAlphaNum(len) {
    var rdmString = "";
    for( ; rdmString.length < len; rdmString  += Math.random().toString(36).substr(2));
    return  rdmString.substr(0, len);

}
```

## **12 – Shuffle an array of numbers**

```javascript
var numbers = [5, 458 , 120 , -215 , 228 , 400 , 122205, -85411];
numbers = numbers.sort(function(){ return Math.random() - 0.5});
/* the array numbers will be equal for example to [120, 5, 228, -215, 400, 458, -85411, 122205]  */
```

A better option could be to implement a random sort order by code (e.g. : Fisher-Yates shuffle), than using the native sort JavaScript function. For more details take a look to [this discussion](https://stackoverflow.com/questions/962802/is-it-correct-to-use-javascript-array-sort-method-for-shuffling/962890#962890).

## **13 – A string trim function**

The classic trim function of Java, C#, PHP and many other language that remove whitespace from a string doesn’t exist in JavaScript, so we could add it to the `String` object.

```javascript
String.prototype.trim = function(){return this.replace(/^s+|s+$/g, "");};  
```

A native implementation of the trim() function is available in the recent JavaScript engines.

## **14 – Append an array to another array**

```javascript
var array1 = [12 , "foo" , {name "Joe"} , -2458];

var array2 = ["Doe" , 555 , 100];
Array.prototype.push.apply(array1, array2);
/* array1 will be equal to  [12 , "foo" , {name "Joe"} , -2458 , "Doe" , 555 , 100] */
```

## **15 – Transform the `arguments` object into an array**

```javascript
var argArray = Array.prototype.slice.call(arguments);
```

## **16 – Verify that a given argument is a number**

```javascript
function isNumber(n){
    return !isNaN(parseFloat(n)) && isFinite(n);
}
```

## **17 – Verify that a given argument is an array**

```javascript
function isArray(obj){
    return Object.prototype.toString.call(obj) === '[object Array]' ;
}
```

Note that if the toString() method is overridden, you will not get the expected result using this trick.

Or use…

```javascript
Array.isArray(obj); // its a new Array method
```

You could also use `instanceof` if you are not working with multiple frames. However, if you have many contexts, you will get a wrong result.

```javascript
var myFrame = document.createElement('iframe');
document.body.appendChild(myFrame);

var myArray = window.frames[window.frames.length-1].Array;
var arr = new myArray(a,b,10); // [a,b,10]  

// instanceof will not work correctly, myArray loses his constructor 
// constructor is not shared between frames
arr instanceof Array; // false
```

## **18 – Get the max or the min in an array of numbers**

```javascript
var  numbers = [5, 458 , 120 , -215 , 228 , 400 , 122205, -85411]; 
var maxInNumbers = Math.max.apply(Math, numbers); 
var minInNumbers = Math.min.apply(Math, numbers);
```

## **19 – Empty an array**

```javascript
var myArray = [12 , 222 , 1000 ];  
myArray.length = 0; // myArray will be equal to [].
```

## **20 – Don’t use delete to remove an item from array**

Use `splice` instead of using `delete` to delete an item from an array. Using `delete` replaces the item with `undefined` instead of the removing it from the array.

Instead of…

```javascript
var items = [12, 548 ,'a' , 2 , 5478 , 'foo' , 8852, , 'Doe' ,2154 , 119 ]; 
items.length; // return 11 
delete items[3]; // return true 
items.length; // return 11 
/* items will be equal to [12, 548, "a", undefined × 1, 5478, "foo", 8852, undefined × 1, "Doe", 2154,       119]   */
```

Use…

```javascript
var items = [12, 548 ,'a' , 2 , 5478 , 'foo' , 8852, , 'Doe' ,2154 , 119 ]; 
items.length; // return 11 
items.splice(3,1) ; 
items.length; // return 10 
/* items will be equal to [12, 548, "a", 5478, "foo", 8852, undefined × 1, "Doe", 2154,       119]   */
```

The delete method should be used to delete an object property.

## **21 – Truncate an array using length**

Like the previous example of emptying an array, we truncate it using the `length` property.

```javascript
var myArray = [12 , 222 , 1000 , 124 , 98 , 10 ];  
myArray.length = 4; // myArray will be equal to [12 , 222 , 1000 , 124].
```

As a bonus, if you set the array length to a higher value, the length will be changed and new items will be added with `undefined` as a value. The array length is not a read only property.

```javascript
myArray.length = 10; // the new array length is 10 
myArray[myArray.length - 1] ; // undefined
```

## **22 – Use logical AND/ OR for conditions**

```javascript
var foo = 10;  
foo == 10 && doSomething(); // is the same thing as if (foo == 10) doSomething(); 
foo == 5 || doSomething(); // is the same thing as if (foo != 5) doSomething();
```

The logical OR could also be used to set a default value for function argument.

```javascript
function doSomething(arg1){ 
    arg1 = arg1 || 10; // arg1 will have 10 as a default value if it’s not already set
}
```

## **23 – Use the map() function method to loop through an array’s items**

```javascript
var squares = [1,2,3,4].map(function (val) {  
    return val * val;  
}); 
// squares will be equal to [1, 4, 9, 16] 
```

## **24 – Rounding number to N decimal place**

```javascript
var num =2.443242342;
num = num.toFixed(4);  // num will be equal to 2.4432
```

NOTE : the `toFixed()` function returns a string and not a number.

## **25 – Floating point problems**

```javascript
0.1 + 0.2 === 0.3 // is false 
9007199254740992 + 1 // is equal to 9007199254740992  
9007199254740992 + 2 // is equal to 9007199254740994
```

Why does this happen? 0.1 +0.2 is equal to 0.30000000000000004. What you need to know is that all JavaScript numbers are floating points represented internally in 64 bit binary according to the IEEE 754 standard. For more explanation, take a look to [this blog post](http://www.2ality.com/2012/04/number-encoding.html).

You can use `toFixed()` and `toPrecision()` to resolve this problem.

## **26 – Check the properties of an object when using a for-in loop**

This code snippet could be useful in order to avoid iterating through the properties from the object’s prototype.

```javascript
for (var name in object) {  
    if (object.hasOwnProperty(name)) { 
        // do something with name                    
    }  
}
```

## **27 – Comma operator**

```javascript
var a = 0; 
var b = ( a++, 99 ); 
console.log(a);  // a will be equal to 1 
console.log(b);  // b is equal to 99
```

## **28 – Cache variables that need calculation or querying**

In the case of a jQuery selector, we could cache the DOM element.

```javascript
var navright = document.querySelector('#right'); 
var navleft = document.querySelector('#left'); 
var navup = document.querySelector('#up'); 
var navdown = document.querySelector('#down');
```

## **29 – Verify the argument before passing it to `isFinite()`**

```javascript
isFinite(0/0) ; // false 
isFinite("foo"); // false 
isFinite("10"); // true 
isFinite(10);   // true 
isFinite(undefined);  // false 
isFinite();   // false 
isFinite(null);  // true  !!! 
```

## **30 – Avoid negative indexes in arrays**

```javascript
var numbersArray = [1,2,3,4,5]; 
var from = numbersArray.indexOf("foo") ;  // from is equal to -1 
numbersArray.splice(from,2);    // will return [5]
```

Make sure that the arguments passed to `splice` are not negative.

## **31 – Serialization and deserialization (working with JSON)**

```javascript
var person = {name :'Saad', age : 26, department : {ID : 15, name : "R&D"} }; 
var stringFromPerson = JSON.stringify(person); 
/* stringFromPerson is equal to "{"name":"Saad","age":26,"department":{"ID":15,"name":"R&D"}}"   */ 
var personFromString = JSON.parse(stringFromPerson);  
/* personFromString is equal to person object  */
```

## **32 – Avoid the use of `eval()` or the `Function` constructor**

Use of `eval` or the `Function` constructor are expensive operations as each time they are called script engine must convert source code to executable code.

```javascript
var func1 = new Function(functionCode);
var func2 = eval(functionCode);
```

## **33 – Avoid using `with()` (The good part)**

Using `with()` inserts a variable at the global scope. Thus, if another variable has the same name it could cause confusion and overwrite the value.

## **34 – Avoid using for-in loop for arrays**

Instead of using…

```javascript
var sum = 0;  
for (var i in arrayNumbers) {  
    sum += arrayNumbers[i];  
}
```

…it’s better to use…

```javascript
var sum = 0;  
for (var i = 0, len = arrayNumbers.length; i < len; i++) {  
    sum += arrayNumbers[i];  
}
```

As a bonus, the instantiation of `i` and `len` is executed once because it’s in the first statement of the for loop. Thsi is faster than using…

```javascript
for (var i = 0; i < arrayNumbers.length; i++)
```

Why? The length of the array `arrayNumbers` is recalculated every time the loop iterates.

NOTE : the issue of recalculating the length in each iteration was fixed in the latest JavaScript engines.

## **35 – Pass functions, not strings, to `setTimeout()` and `setInterval()`**

If you pass a string into `setTimeout()` or `setInterval()`, the string will be evaluated the same way as with `eval`, which is slow. Instead of using…

```javascript
setInterval('doSomethingPeriodically()', 1000);  
setTimeout('doSomethingAfterFiveSeconds()', 5000);
```

…use…

```javascript
setInterval(doSomethingPeriodically, 1000);  
setTimeout(doSomethingAfterFiveSeconds, 5000);
```

## **36 – Use a switch/case statement instead of a series of if/else**

Using switch/case is faster when there are more than 2 cases, and it is more elegant (better organized code). Avoid using it when you have more than 10 cases.

## **37 – Use switch/case statement with numeric ranges**

Using a switch/case statement with numeric ranges is possible with this trick.

```javascript
function getCategory(age) {  
    var category = "";  
    switch (true) {  
        case isNaN(age):  
            category = "not an age";  
            break;  
        case (age >= 50):  
            category = "Old";  
            break;  
        case (age <= 20):  
            category = "Baby";  
            break;  
        default:  
            category = "Young";  
            break;  
    };  
    return category;  
}  
getCategory(5);  // will return "Baby"
```

## **38 – Create an object whose prototype is a given object**

It’s possible to write a function that creates an object whose prototype is the given argument like this…

```javascript
function clone(object) {  
    function OneShotConstructor(){}; 
    OneShotConstructor.prototype= object;  
    return new OneShotConstructor(); 
} 
clone(Array).prototype ;  // []
```

## **39 – An HTML escaper function**

```javascript
function escapeHTML(text) {  
    var replacements= {"<": "&lt;", ">": "&gt;","&": "&amp;", """: "&quot;"};                      
    return text.replace(/[<>&"]/g, function(character) {  
        return replacements[character];  
    }); 
}
```

## **40 – Avoid using try-catch-finally inside a loop**

The try-catch-finally construct creates a new variable in the current scope at runtime each time the catch clause is executed where the caught exception object is assigned to a variable.

Instead of using…

```javascript
var object = ['foo', 'bar'], i;  
for (i = 0, len = object.length; i <len; i++) {  
    try {  
        // do something that throws an exception 
    }  
    catch (e) {   
        // handle exception  
    } 
}
```

…use…

```javascript
var object = ['foo', 'bar'], i;  
try { 
    for (i = 0, len = object.length; i <len; i++) {  
        // do something that throws an exception 
    } 
} 
catch (e) {   
    // handle exception  
} 
```

## **41 – Set timeouts to `XMLHttpRequests`**

You could abort the connection if an XHR takes a long time (for example, due to a network issue), by using `setTimeout()` with the XHR call.

```javascript
var xhr = new XMLHttpRequest (); 
xhr.onreadystatechange = function () {  
    if (this.readyState == 4) {  
        clearTimeout(timeout);  
        // do something with response data 
    }  
}  
var timeout = setTimeout( function () {  
    xhr.abort(); // call error callback  
}, 60*1000 /* timeout after a minute */ ); 
xhr.open('GET', url, true);  

xhr.send();
```

As a bonus, you should generally avoid synchronous XHR calls completely.

## **42 – Deal with WebSocket timeout**

Generally when a WebSocket connection is established, a server could time out your connection after 30 seconds of inactivity. The firewall could also time out the connection after a period of inactivity.

To deal with the timeout issue you could send an empty message to the server periodically. To do this, add these two functions to your code: one to keep alive the connection and the other one to cancel the keep alive. Using this trick, you’ll control the timeout.

Add a `timerID`…

```javascript
var timerID = 0; 
function keepAlive() { 
    var timeout = 15000;  
    if (webSocket.readyState == webSocket.OPEN) {  
        webSocket.send('');  
    }  
    timerId = setTimeout(keepAlive, timeout);  
}  
function cancelKeepAlive() {  
    if (timerId) {  
        cancelTimeout(timerId);  
    }  
}
```

The `keepAlive()` function should be added at the end of the `onOpen()` method of the webSocket connection and the `cancelKeepAlive()` at the end of the `onClose()` method.

## **43 – Keep in mind that** [**primitive operations can be faster than function calls**](https://dev.opera.com/articles/view/efficient-javascript/?page=2#primitiveoperator)**. Use** [**VanillaJS**](http://vanilla-js.com/)**.**

For example, instead of using…

```javascript
var min = Math.min(a,b); 
A.push(v);
```

…use…

```javascript
var min = a < b ? a : b; 
A[A.length] = v;
```

## **44 – Don’t forget to use a code beautifier when coding. Use JSLint and minification (JSMin, for example) before going live.**



## **45. Replace All**

We know that the string.replace() function replaces only the first occurrence.\
You can replace all the occurrences by adding /g at the end of the regex.\


```javascript
var example = "potato potato";
console.log(example.replace(/pot/, "tom")); 
// "tomato potato"
console.log(example.replace(/pot/g, "tom")); 
// "tomato tomato"
```

## **46. Extract Unique Values**

We can create a new array only with the unique values by using the Set object and the Spread operator.\


```javascript
var entries = [1, 2, 2, 3, 4, 5, 6, 6, 7, 7, 8, 4, 2, 1]
var unique_entries = [...new Set(entries)];
console.log(unique_entries);
// [1, 2, 3, 4, 5, 6, 7, 8]
```

## **47. Convert number to string**

We just have to use the concatenation operator with an empty set of quotation marks.\


```javascript
var converted_number = 5 + "";
console.log(converted_number);
// 5
console.log(typeof converted_number); 
// string
```

## **48. Convert string to number**

All we need is the + operator.

Be careful with this one since it only works with 'string numbers'.\


```javascript
the_string = "123";
console.log(+the_string);
// 123

the_string = "hello";
console.log(+the_string);
// NaN
```

## **49. Shuffle elements from array**

**Every day I'm shufflin'**\


```javascript
var my_list = [1, 2, 3, 4, 5, 6, 7, 8, 9];
console.log(my_list.sort(function() {
    return Math.random() - 0.5
})); 
// [4, 8, 2, 9, 1, 3, 6, 5, 7]
```

## **50. Flatten multidimensional array**

Simply by using the Spread operator.\


```javascript
var entries = [1, [2, 5], [6, 7], 9];
var flat_entries = [].concat(...entries); 
// [1, 2, 5, 6, 7, 9]
```

## **51. Short Circuit Conditionals**

Let's take this example:\


```javascript
if (available) {
    addToCart();
}
```

And shorten it by simply using the variable together with the function:\


```javascript
available && addToCart()
```

## **52. Dynamic Property Names**

I always thought that I first had to declare an object before being able to assign a dynamic property.\


```javascript
const dynamic = 'flavour';
var item = {
    name: 'Coke',
    [dynamic]: 'Cherry'
}
console.log(item); 
// { name: "Coke", flavour: "Cherry" }
```

## **53. Use length to resize/empty an array**

We basically overwrite the length of the array.

If we want to resize the array:\


```javascript
var entries = [1, 2, 3, 4, 5, 6, 7];  
console.log(entries.length); 
// 7  
entries.length = 4;  
console.log(entries.length); 
// 4  
console.log(entries); 
// [1, 2, 3, 4]
```

If we want to empty the array:\


```javascript
var entries = [1, 2, 3, 4, 5, 6, 7]; 
console.log(entries.length); 
// 7  
entries.length = 0;   
console.log(entries.length); 
// 0 
console.log(entries); 
// []
```

