{"componentChunkName":"component---src-templates-tag-js","path":"/tags/array/","result":{"data":{"site":{"siteMetadata":{"title":"LoginRadius Blog"}},"allMarkdownRemark":{"totalCount":2,"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}}}},{"node":{"fields":{"slug":"/engineering/angular-roster-tutorial/"},"html":"

If you're not familiar with Angular I'd highly recommend heading over to the Angular JS resource site and checking out what all the fuss is about. Once you've got a basic understanding of Angular and how to get it up and running this tutorial will show you some of the basic, but awesome features supported by Angular.

\n

Today I'm going to be building out a roster for my fantasy football team. If that's not your cup of tea then by all means feel free to substitute the content for whatever floats your boat.

\n

Players Array

\n

There might not be an I in team, but there are certainly players, so before we do anything in the HTML we'll have to make all the necessary components in the controller. First up let's make an array of all the players we want to include (initially at least) on our team.

\n

Every player is a special little snowflake, and our player objects should reflect that! With this in mind we will make each player an object with his or her own properties like: name, position and team. Here's an example of what our array might look like.

\n
$scope.players = [\n    {name: "Tom Brady", position: "QB", team: "Patriots"},\n    {name: "Tony Romo", position: "QB", team: "Cowboys"},\n    {name: "Peyton Manning", position: "QB", team: "Broncos"},\n    {name: "Rob Gronkowsi", position: "TE", team: "Patriots"},\n    {name: "JJ Watt", position: "DE", team: "Texans"},\n    {name: "Lavonte David", position: "LB", team: "Buccaneers"}\n];
\n

Repetitive department of repetition

\n

Now that we have our roster we can go back to the HTML and make use of Angular's ng-repeat directive. We put the ng-repeat on the element we want to be repeated, keeping in mind that all of its children will also get repeated.

\n
<!--\n    {{player.name}} - {{player.position}}\n-->
\n

Okay so if you're new to Angular there's a couple of things going on here. First like I said we've got the ng-repeat placed on the li (the thing we want repeated) which will create a new li for each player in the players array we defined earlier in the controller. Next up the data binding is being implemented here with each player name as well as position being used as the values for the list item.

\n

While we're on the topic of data binding, let's throw this in just for fun. Pretty simple, it will calculate the length of your roster and keep it updated as any changes are made.

\n
<!--You have {{players.length}} on your roster.-->
\n

Easiest Search Functionality of Your Life

\n

Next let's add some search functionality to our list. Sounds like a lot of work, probably have to iterate over the array elements, match them to the argument being passed in and... just kidding. With Angular it's a breeze.

\n
<!--\n...\n{{player.name}} - {{player.position}}\n-->
\n

Donezo.

\n

The shape of Italy

\n

Let's imagine one of our fantasy players isn't performing too well (ahem Peyton...) and we want to give him the boot (get it now?).

\n

We'll add a little delete button beside each of our players' names, and since we're doing it for each of them guess how we're going to implement it? That's right with ng-repeat we already have on the list items!

\n
<!--{{player.name}} - {{player.position}}\n    ×\n-->
\n

I'll also tack on a little button with an \"x\" as the content (as a side note, when you want to do this use × instead of \"x\" it looks much nicer). Then we'll attach an ng-click with a delete function where we pass in $index.

\n

$index is a neat little feature available with certain Angular directives, and ng-repeat is one of them. It will be assigned the index value (starting at 0) of the position it holds within the array being used with the ng-repeat.

\n

That's all we need in the HTML, so now back in the controller we create a $scope function by the same name used in the HTML and give it a parameter of index. The body of the function is a single line which makes use of the array.splice method where we pass in the index of the item we want to delete, and then 1 to denote that it's only 1 item we want removed.

\n
$scope.delete = function (index) {\n    $scope.players.splice(index, 1);\n};
\n

Acquisitions

\n

Now since we just cut someone from the team, we've gotta find their replacement. Let's chuck a few text inputs in there, give them all a respective ng-model to bind with their value and finally another button with an ng-click but this time calling an addPlayer function.

\n
<!--\n    Name:\n    \n    Position:\n    \n    Team:\n    \n    Add Player\n-->
\n

This one's a lil' different from delete, but still super simple. Working from the inside out, we will create a new player object which gets the name, position and team properties from the ng-models on the HTML and then push that object to the players array. After that we clear those values just for some good housekeeping practice.

\n
$scope.add = function () {\n    $scope.players.push({\n        name: $scope.new_name,\n        position: $scope.new_position,\n        team: $scope.new_team\n    });\n    $scope.new_name = "";\n    $scope.new_position = "";\n    $scope.new_team = "";\n};
\n

Nothing Lasts Forever

\n

Now since this was all done purely on the front end, and didn't make use of cookies, localstorage, or sessionstorage none of this will persist (aka be saved). For that kind of support you'd need some sort of back end, which is beyond the scope of this article.

\n

This was a very rudimentary example of what's possible with Angular JS, so if this interested you at all please dig a little deeper and play around with Angular some more!

\n

That brings us to the end of this tutorial. Feel free to check out the finished (yet unstyled) product here on Codepen

\n","frontmatter":{"date":"January 12, 2016","updated_date":null,"title":"Angular Roster Tutorial","tags":["Engineering","AngularJS","PlayersArray","Array","Search"],"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1,"src":"/static/3fd5bbf61c136944264b54c576652f32/58556/roster-angularjs-1.webp","srcSet":"/static/3fd5bbf61c136944264b54c576652f32/61e93/roster-angularjs-1.webp 200w,\n/static/3fd5bbf61c136944264b54c576652f32/1f5c5/roster-angularjs-1.webp 400w,\n/static/3fd5bbf61c136944264b54c576652f32/58556/roster-angularjs-1.webp 800w,\n/static/3fd5bbf61c136944264b54c576652f32/1fb14/roster-angularjs-1.webp 960w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Zakary Hughes","github":null,"avatar":null}}}}]}},"pageContext":{"tag":"Array"}},"staticQueryHashes":["1171199041","1384082988","2100481360","23180105","528864852"]}