In previous article we discussed about useful tips and things to use while developing Lightning components. Since Lightning development requires Javascript knowledge to perform various tasks on client side, so lets discuss about some Javascript useful tips and tricks to use when using Javascript in Lightning controllers. This article would be useful for developers who are migrated form Visualforce to Lightning and got little chance to work on Javascript during development on Visualforce framework.
Javascript is a multi-paradigm and imperative functional language. It has behavior of functional programing language and concepts of object-oriented programing. It means that you can create first class objects in Javascript and later change is properties and state in run-time.
Above properties provide super powers to Javascript but can cause great issues if not implemented correctly. Below are few things which should be considered when using Javascript:-
1. Type conversion v/s Equality ( === vs == )
In Javascript we have ‘===’ equality comparison operation in addition to ‘==’. It is good practice to use ‘===’ instead of ‘==’. Because double equal comparison can cause weird behavior in programing because it convert the type of data if it is not equal to right hand side data type. And programmer can never figure about why the value is true? Some examples:-
Using the === operator
true === 1; //false
"10" === 10; //false
1 === [1]; //false
Using the == operator
true == 1; //true
"10" == 10; //true
1 == [1]; //true
2. Concept of “undefined”
Javascript has additional NULL type which is “undefined”. Developer must always handle “blank double quotes (”), null (there in no NULL in javascript) and “undefined”.
'' == undefined; //false
undefined == '' //true
var a; console.log(a===undefined); //true
var a; console.log(a===null); // false
Comparing null with undefined using double equal (==) always return true but what if you get blank value instead of null/undefined. It will again cause a unexpected behavior.
3. Floating point Precision
If there is need to calculating decimal, it must be used with function `toFixed()’ or `toPrecision()`. Reason:-
Look at following post on Stackexchange salesforce. Apex Division Losing Precision. This applies to Javascript as well. Lets take the following example:-
0.1 + 0.2 === 0.3 //#1 false
Because it is actually 0.30000000000000004. Not that `toPrecision` and `toFixed` return `String` not the number type.
4. Use for loop instead of for-in
for-in loop like below we do not have control over iteration and calculation behind. IT can eat more processing time depending on object type.
var total = 0;
var items = new Array(4);
for (var i in items) {
total += items[i];
}
We can use the same in for loop in more optimized and controlled way:-
var total = 0;
var items = new Array(4);
for (var i = 0, len = items.length; i < len; i++) {
total += arrayNumbers[i];
}
In above example we have defined and calculated length in for-loop itself which will result into faster execution. Below is JSPerf test of both where iteration done adding value 1000 times in Chrome.
5. Use Map() to avoid duplicates
Instead of writing own algorithm to avoid duplicates in Array/List. Use Map() function. It works same as Apex Map, key and value pair. Below is the example:-
var myMap = new Map();
myMap.set('a', 1);
myMap.set('b', 2);
myMap.set('c', 3);
myMap.set('d', 4); // will be overriden
myMap.set('d', 5); // duplicate
for (var [key, value] of myMap) {
console.log(key, value);
}
//a 1
//b 2
//c 3
//d 5
Keeping above things while developing code we can avoid various issues in Javascript and make our code efficient when the code run on client-side. Lighting components have client side controllers so, Visualforce developers migrating to Lighting must understand best practices we should implement in code.
Ashwani Soni | Certified | Salesforce | Partner | Senior Team Lead | Consultant | Developer | Mobile | Integration | Contributor | SFSE 