{"componentChunkName":"component---src-templates-tag-js","path":"/tags/hacks/","result":{"data":{"site":{"siteMetadata":{"title":"LoginRadius Blog"}},"allMarkdownRemark":{"totalCount":1,"edges":[{"node":{"fields":{"slug":"/engineering/16-javascript-hacks-for-optimization/"},"html":"

JavaScript or JS helps implement complex things on web pages. Many of the developers know the importance of an minified Javascript file but few are aware of an Optimized Javascript code.

\n

An optimized code is a combination of smartly programmed logics and small hacks to optimize performance, speed and save time.

\n

Here are sweet 16 JS hacks and tips for developers  for optimizing Javascript to improve JS performance and improve execution time without affecting server resources.

\n

1. Use Array Filter

\n

It is a small hack to filter out bucket of elements from the array pool. This method creates an array filled with all array elements that pass a test (provided as a function). According to requirement create a callback function for non-required elements.

\n

In below example the bucket elements are null and are ready to get filtered out.

\n

Example:

\n
schema = ["hi","ihaveboyfriend",null, null, "goodbye"]\nschema = schema.filter(function(n) {\n return n\n });
\n
Output: ["hi","ihaveboyfriend", "goodbye"]
\n

This hack will save some time and lines of codes for developers.

\n

2. Using String replace function to replace all the values

\n

The String.replace() function allows you to replace strings using String and Regex.

\n

Basically this function replaces the string at its first occurrence. But to replace all using replaceAll() function, use /g at the end of a Regex:

\n

Example:

\n
var string = "login login"; \nconsole.log(string.replace("in", "out")); // "logout login" \nconsole.log(string.replace(/in/g, "out")); //"logout logout"
\n

3. Use breakpoints and Console for Debugging

\n

With the help of breakpoints or debugging points you can set multiple barriers to rectify source of error at every barrier.

\n

\"Use

\n

Press F11 for next call function and f8 to resume script execution.

\n

\"Use

\n

You can also check what dynamic values are generated by a function, using console and can check output on different values.

\n

4. Convert to floating number without killing performance

\n

Often we use math.floor, math.ceil and math.round for eliminating decimals. Instead of using them use “~~” to eliminate decimals for a value.

\n

It is also helpful in increasing performance when it comes to micro optimizations in a code.

\n

Example:

\n
Use\n\n~~ (math.random*100)\n\nInstead of\n\nmath.round(math.random*100)
\n

5. Using length to delete empty in an array

\n

This technique will help you in resizing and emptying an array.

\n

For deleting n elements in an Array, use array.length.

\n
 array.length = n\n\nSee this example:\n\nvar array = [1, 2, 3, 4, 5, 6]; \nconsole.log(array.length); // 6 \narray.length = 3; \nconsole.log(array.length); // 3 \nconsole.log(array); // [1,2,3]\n\nFor **emptying array** use\n\narray.length = 0;.
\n

Example:

\n
var array = [1, 2, 3, 4, 5, 6]; \narray.length = 0; \nconsole.log(array.length); // 0 \nconsole.log(array); // []
\n

This technique is mostly preferred over any other methods to resize/unset the array elements and is one of the best javascript practices most of the developers follow.

\n

6. Merging arrays without causing server load

\n

If your requirement is of merging two arrays, use Array.concat() function

\n

For merging two arrays:

\n
var array1 = [1, 2, 3]; \nvar array2 = [4, 5, 6]; \nconsole.log(array1.concat(array2)); // [1,2,3,4,5,6];
\n

This function works best for small arrays.

\n

To merge large arrays we use

\n
Array.push.apply(arr1, arr2)
\n

Reason is using Array.concat() function on large arrays will consume lot of memory while creating a separate new array.

\n

In this case, you can use Array.push.apply(arr1, arr2) which instead will merge the second array in the first one, hence reducing the memory usage.

\n

Example:

\n
var array1 = [1, 2, 3]; \nvar array2 = [4, 5, 6]; \nconsole.log(array1.push.apply(array1, array2)); // [1,2,3,4,5,6];
\n

It will also optimize the performance of your Javascript code irrespective of size of array.

\n

7. Use splice  to delete array elements

\n

This is probably the one of the best optimization tips for javascript. It optimizes speed of your JS code.

\n

Using splice instead of delete is a good practice, it will save some”null/undefined space” in your code.

\n

The downside of using delete is it will delete the object property, but will not reindex the array or update its length, leaving undefined values. Also it consumes a-lot of time in execution.

\n

Using splice

\n

Example

\n
myArray = ["a", "b", "c", "d"] \nmyArray.splice(0, 2) ["a", "b"]\n\nResult: myArray ["c", "d"]
\n

8. Checking values in an Object

\n

To check whether an object is empty or not,  use

\n
Object.keys(YOUR\\_OBJECT).length \n\n// 0 returns if object is empty
\n

Following code return the number of elements in an Object.

\n

9. Cache the variable

\n

Caching the variable tremendously increase javascript performance.

\n

Everytime we use document.getElementById() or getElementsByClassName(), JS travels through all elements repeatedly upon each similar element request.

\n

In Order to boost performance, cache your selections to some variable (if using the same selection multiple times).

\n

Example:

\n
var cached = document.getElementById('someElement');\ncached.addClass('cached-element');
\n

It is a simple optimization tip with drastic impact on performance, recommended for processing large arrays in loop(s).

\n

Check this link for performance results.

\n

10. Use switch case instead of if/else

\n

Generally switch cases are used over if/else statements to perform almost the same tasks.

\n

The fact that in switch statements  expression to test is only evaluated once, execution time becomes less for the script compared to if/else where for every if , it has to be evaluated.

\n

11. Short-circuits conditionals

\n

Short circuiting  is when a logical operator doesn't evaluate all its arguments.

\n

The code

\n
if (loggedin) { \nwelcome\\_messege();\n }
\n

Make it short by using combination of a verified variable and a function using && (AND operator) in between both.

\n

Now above code can be made in one line

\n
loggedin && welcome\\_messege();
\n

12. Getting the last item in the array

\n

Array.prototype.slice(begin, end) is used to cut arrays when you set the start and end arguments.  But if you don't set the end argument, this function will automatically set the max value for the array.

\n

A smart hack is it can also accept negative values and by setting a negative number as begin argument, you will get the last elements from the array.

\n
var array = [1, 2, 3, 4, 5, 6]; \nconsole.log(array.slice(-1)); // [6] \nconsole.log(array.slice(-2)); // [5,6] \nconsole.log(array.slice(-3)); // [4,5,6]
\n

13. Default values using || operator

\n

In JS there is a basic rule of having a default value otherwise process will halt at undefined values.

\n

To provide default value in a variable use || to stay away from this most common issue.

\n
var a = a || 'hello'
\n

The developer must check whether there are any conflicting values that might be passed to the function to avoid Bugs.

\n

14. Beautifying JS code

\n

For beautifying your Javascript  code use jsbeautifier. It formats a clumsy JS code into well structured code.

\n

Code before Beautifying

\n

\"Beautifying

\n

Code after Beautifying

\n

\"Beautifying

\n

15. Checking JS Performance

\n

To check how well a Javascript code is performing and share results use jsperf. It is easiest way to create and share testcases.

\n

16. Online javascript editor

\n

Jsfiddle and jsbin is a tool for experimenting with your Javascript code and other web languages.

\n

It is also a code sharing site. As you type into one of the editor panels the output is generated in real-time in the output panel.

\n

These are some useful hacks and tips for optimizing javascript performance. It is not mandatory to use them all the time because cases and conditions will vary. If you have tricks other than these, do share with us in comment section.

\n","frontmatter":{"date":"April 07, 2017","updated_date":null,"title":"Javascript tips and tricks to Optimize Performance","tags":["Engineering","JavaScript","Hacks","Array"],"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.3793103448275863,"src":"/static/0d6472e55ba0b111b3dfa895ec2dec57/7f8e9/16-JavaScript-Hacks-to-save-time-and-boost-productivity-768x555.webp","srcSet":"/static/0d6472e55ba0b111b3dfa895ec2dec57/61e93/16-JavaScript-Hacks-to-save-time-and-boost-productivity-768x555.webp 200w,\n/static/0d6472e55ba0b111b3dfa895ec2dec57/1f5c5/16-JavaScript-Hacks-to-save-time-and-boost-productivity-768x555.webp 400w,\n/static/0d6472e55ba0b111b3dfa895ec2dec57/7f8e9/16-JavaScript-Hacks-to-save-time-and-boost-productivity-768x555.webp 768w","sizes":"(max-width: 768px) 100vw, 768px"}}},"author":{"id":"Team LoginRadius","github":"LoginRadius","avatar":null}}}}]}},"pageContext":{"tag":"Hacks"}},"staticQueryHashes":["1171199041","1384082988","2100481360","23180105","528864852"]}