13 javascript techniques to improve your code

13 javascript techniques to improve your code

• 1.
  13 JAVASCRIPT TECHNIQUESTO IMPROVE YOUR CODE by Vikash Gupta | Aug 17, 2017 | Mobile development, Web Development | 0 comments We all write codes in di erent ways with a di erent style and most of the times forgot about standardization, let’s discuss JavaScript Techniques to Improve Your Code. This post includes the top tips to write JavaScript code, that would make your code Apple of one’s eye. This post is referred to both i.e. beginner to javascript as well as experienced javascript developers. For newbie javascript developers, Javascript is a client-side scripting language. If you want to use it on server-side, you have to use some speci c framework like Nodejs. The World of javascript has been changed since Nodejs framework has come into action. For an experienced developer, you know that almost all web applications use Javascript as primary, you should know about these tips. These tips will make your code clean. Understand that, when I say clean code, that points to the code that is: 1. Easy to understand, no matter that code is given to some other developer. 2. Easy to maintain, means small changes can be made U a
• 2.
  So, I amgoing to share these tips, that I have learned during development. These tips will start with an easy to advanced level, So don’t be bored If you already know the starting ones. 1. Uses of proper variable name: This is the rst tip that you have to learn if you want to be the best developer. A variable name should be relevant to the function. These are some convention I follow during naming: Variable and function names are written as camelCase. Global variables are written in UPPERCASE. Constants (like PI) written in UPPERCASE. 2. Uses of proper text-indent in code snippets: Your code might have good logic with proper variable naming but there is a question. Is the code easy to read? Giving a proper text-indent means providing right space in each line. There is some good example for it. 3. The power of comments: The only thing that can make your code more reusable is the way you use comments for it. If you don’t know how to write the proper comments, then your life as a programmer will be in danger J. In above example, you can see. In the following tips, I will elaborate more about comments. 4. No need to use var for multiple times:
• 3.
  4. No needto use var for multiple times: Exactly, There is no need to use ‘var’ to initialize multiple variables. Instead of, you can initialize in following way- 5. The power of Comma Operator: For making your code small, you can use comma operator in following way- 6. Use of ‘===’ instead of ‘==’ Most of the programmer know about it but somehow they always forget to use it. But it makes a large di erence in what they code and lls their code like bugs. For javascript newbies, ‘==’ is used in time of comparison, when you want to compare only values, and use ‘===’ when you want to compare a variable value as well as its data type. So use these comparison variables wisely. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 // Not Recommended   Var a=10;   Var b=7;   Var c=12;   // Recommended   Var a=10,   b=7,   c=12; 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 // Standard way   var x=1,   x++,   y=100;   //I recommend   var x=1,   y=( x++,100 );   console.log(x); // x will be equal to 2.   console.log(y);// y will be equal to 100;
• 4.
  For example- Forjavascript, if(‘1’==1) statement will return true value and if(‘1’===1) returns false. 7. Magic of ‘use strict’ This statement gives your code the power that you can’t use undeclared variables. This makes your code hard to break and easy to maintain. You can use it as following at the above of each program le- 8. Verify variable Before use: Before using an argument passed to function, you should check its data type. Otherwise, your code will break. There is a javascript function to check each and every data type named ‘type of’. You can use it in following way- For more information, go to https://developer.mozilla.org/en- US/docs/Web/JavaScript/Reference/Operators/typeof. 9. Use for loop in an optimized way: A normal for loop looks like this, but this doesn’t mean that we should do it in exactly the same way. We all should avoid this syntax and try as following- 1 “use strict”; 1 2 3 4 5 6 7 8 9 10 11 // for Number check as   type of (input)===’number’   // for string check as   Type of (input)===’string’   // for Boolean check as   type of (input)===’boolean' 1 2 3 4 5 for(var i=0;i< array.length;i++){   //Some Code   }
• 5.
  As per thisabove loop, the instantiation of i and length variable is done exactly one time that makes your code fast. 10. Use of Comparison operators This is the normal way, you perform a conditional statement. But with help of conditional operators like ‘&&’ and ’| |’, we can simplify our code more as following way- 11. Use of switch case I have seen in programs that in the case of multiple conditional statements, they use a series of the nested if-else statement. That does execute correctly, but it looks somehow clumsy or hard to understand. So in that condition, we should use switch case statements. For more information on switch-case, go to https://www.w3schools.com/js/js_switch.asp. 12. Uses of Immediately Invoke function expression(IIFE)( Self-calling 1 2 3 4 for(var i=0; length=array.length,i<length;i++){ // Some code   } 1 2 3 4 5 6 7 var a;   If(!a){  // if a do not exists   a=’India’;   } 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 // I Recommended as   var a;   a=””||”India”;   You can use ‘&&’ in following way-   // A Standard Way   If(a){  // if a exists   Console.log(‘America will grow’);   }   // But you can do as   a && console.log(‘America will grow’);
• 6.
  12. Uses ofImmediately Invoke function expression(IIFE)( Self-calling function) An IIFE is a function that executes automatically where you create them in the program. They don’t have any name. 13. Use Javascript tools At the end, there are a number of websites that you can to make your code beautiful and error free. I will point to these three pillars, that helped me a lot. 1. https://codebeautify.org/jsvalidate This website will help you with javascript validation as well as with proper text-indent. 2. http://lisperator.net/uglifyjs/ This website will help you to provide a mini ed le of your javascript code. 3. http://jshint.com/ This website will provide you a complete analysis of your code with a description, warnings, and errors.   Conclusion: Now you know how to improve your code with help of Javascript techniques. These javascript tips not only make your code look clean but also make easy to understand, fast and optimized. Habilelabs is a premier software product development and IT-service provider company. We provide best web based and mobile App solutions. Hope you found this post pretty useful, So don’t forget to share this post. 1 2 3 4 5 6 7 8 9 var response = (function(){ var x = 0; // in the scope of this function return function(y){ x += y; return x; }; })(); alert(response(10)); //10 alert(response(11)); //21 ContactUs We are offline
• 7.
  Please add whattechnique I missed in this post and what is common mistakes you did most of the times while coding, share with us in the comment. Share on Facebook Share on Twitter Share on Google+ Share on Linkedin  Post Views: 63 13 JavaScript Techniques to Improve Your Code 13 Basic Linux Commands for Beginners to Know 4 Bene ts to Use Angular JS With Salesforce Learning of Less CSS Variables Creation and Uses What is Meteor.js, a complete tutorial for beginners 3 Simple Steps to Create React JS Components Recent Posts Mobile development Our Partners Tech stack Migration Web Development Categories Node Js Angular Js Android Technologies We are offline Leave us a Message 
• 8.
  Talk to ourexperts now Have a project or looking for development team? Contact us. Ionic MongoDB Salesforce Meteor Js ios Windows Phone Contact Now Contact Us Habilelabs © All rights reserved. Quick Links  4th Floor, I.G.M. Public School Campus, Sec-93 Agarwal Farm, Jaipur – 302020  +91-9828247415  info@habilelabs.io About Us Our Team Careers Contact Us
• 9.
  Services Social Links Subscribe Newsletter Email Subscribe WebDevelopment Mobile Development Tech Stack Migration Cloud Scaling Production UI UX Design Test Driven Development      Blog