The Front End Experience: JavaScript
What is JavaScript?
The programming language JavaScript is now being used on almost every web page that does more than display static information. JavaScript is run on the client side within the browser. Using JavaScript, you can manipulate any of the DOM elements on a webpage, add animations, insert new elements, and much more.
JavaScript code is the backbone for most of the features we take for granted on today’s websites. Since JavaScript is so ubiquitous, there are a variety of conventions about how to use it. In this post, we focus on the best practices that most JavaScript experts agree on, although some can be subjective.
Give your variable useful names
When declaring variables, avoid using names that don’t describe what the variable is doing in the code. This gives people who read your code a better idea of what the variable is trying to accomplish:
Avoid this:
var x1;
Instead, do this:
var usernameEntered;
Use camel case
Get used to writing in camel case because JavaScript is a case-sensitive language. JavaScript uses camel case by eliminating the spaces between words, starting the first word with a lowercase letter and subsequent words with a capital letter, like this:
thisIsMyVariable
Declare variables at the top
Declaring variables at the top of scripts or functions allows people who read your code to quickly find the variables and their initializations. Similarly, use ‘var’ and ‘let’ when declaring variables so they are declared as local variables, not global variables.
Initialize your variables
Along with declaring variables at the top of your scripts and functions, initialize them to avoid errors with undefined variables and to give clarity to their initial values:
number = 0;
array = [];
object = {};
When doing comparisons, use triple equals signs
When doing a comparison, use ‘===’ instead of ‘==’. This enforces value and type comparisons, whereas double equals signs only enforce values after doing a type conversion, if necessary.
Use helper functions to modularize your code
When writing code, break parts of a larger method into smaller ones so that if they ever need to be changed or enhanced, your code can remain modular. Also, using helper functions allows you to minimize redundant code within methods and simply update a helper to propagate changes to all methods that do the same thing.
Avoid declaring unnecessary variables
Variables take up memory. When writing code, try to consolidate what you are writing:
Avoid this:
var arrayIndex = 5;
var stringInArray = stringArray[arrayIndex];
Instead, do this:
var stringInArray = stringArray[5];
There’s a balance between readability and performance when writing very large calls, but it’s better to keep variables to a minimum.
Make use of shorthand when declaring objects or arrays
Arrays and objects can be declared using shorthand, which becomes much easier to read once you get used to it:
Avoid this:
var person= {};
person.age= 25;
person.name= ‘Steve’;
person.occupation= ‘Doctor’;
Instead, do this:
var person = {
age : 25;
name: ‘Steve’;
occupation: ‘Doctor’;
}
Avoid this:
var people= [];
people[0] = ‘Steve’;
people[1] = ‘Mary’;
people[2] = ‘Joe’;
Instead, do this:
var people= [
‘Steve’,
‘Mary’,
‘Joe’
];
JavaScript is a powerful programming language, and much of the code can be left to the user’s inventiveness. However, following these best practices will lead to clean, easy-to-read code that anyone can pick up right away.
About Cervello, a Kearney company
Cervello, a Kearney company is a data and analytics consulting firm and part of Kearney, a leading management consulting firm. We help our leading clients win by offering unique expertise in data and analytics, and in the challenges associated with connecting data. We focus on performance management, customer and supplier relationships, and data monetization and products, serving functions from sales to finance. We are a Salesforce partner and help our clients implement, customize, and optimize the platform into the best solution for their needs.
