You are using an older browser that might negatively affect how this site is displayed. Please update to a modern browser to have a better experience. Sorry for the inconvenience!

JavaScript Best Practices Using in Lightning Component


By: Venkata

Javascript Best Practices using Lightning Component.

JavaScript is a client side scripting language that runs in a web browser. It has the behavior of functional programming language and concepts of object oriented language. While developing lightning component, JavaScript will help us develop the components easily. So, the Lightning developer requires JavaScript knowledge to perform various tasks on client side. Let’s discuss some JavaScript useful tips and tricks to use when using JavaScript in Lightning controllers.

1. Type conversion v/s Equality (=== vs ==) 

In JavaScript, we have two different kinds of equality operators (‘===’ and ‘==’). It is a good practice to use ‘===’ instead of ‘ ==’. Because the == operator will compare for equality after doing any necessary type conversions. The ===operator will not do the conversion, so if two values are not the same type === will simply return false. Both are equally quick.

Using the == operator (Equality) 

Text Box

Using the === operator (Identity) 

javascript best practices

2. Avoid Global Variables 

In JavaScript, minimize the use of global variables. Global variables and functions can be overwritten by other scripts. So, all variables used in a function should be declared as local variables. Local variable must be declared with var keyword; otherwise they will become global variables.

3. Undefined vs Null 

JavaScript has additional type which is called “undefined”. undefined means a variable has been declared but has not yet been assigned a value. On the other hand, null is an assignment value. It can be assigned to a variable as a representation of no value.

javascript best practices

javascript best practices

So, the developer must always handle blank, null and undefined.

4. Use JS Lint  

JSLint is a code analysis tool. it takes a JavaScript source and quickly scans for any noticeable issues and errors in your code. It’s returns a message describing the problem and an approximate location within the source.

5.Use Switch Statement to handle multiple conditions 

javascript best practices

The switch statement is used to perform different actions based on different conditions. the switch statement to select one of many blocks of code to be executed.

6. Use Curly Braces  

Most of the developers neglect curly braces and semi colon. So, most browsers will misbehave from the original functionality as people think.

javascript best practices

However, Consider this

Text Box

People think the above would be equivalent to

javascript variable declaration best practices

Unfortunately, here it would be wrong. It means

javascript variable declaration best practices

7. Optimize loops 

If you don’t use loops properly it will hamper your code performance. The common mistake we do in loops is that we read the length attribute of an array at every iteration

javascript variable declaration best practices

In the above statement, every time the loop runs, JavaScript will read the length of the array. You can avoid that by defining the length value outside the loop and in a different variable

Better Way: 

javascript variable declaration best practices

8. Avoid using eval () 

Eval function is called “evil” in JavaScript language. Eval takes a String as a argument and JavaScript compiler executes String as JavaScript on run-time.

The code written in eval is executed at run-time and that makes it a security risk

9. Don’t use JavaScript reserved words 

Don’t use reserved words such as abstract, package, else, false and so on. It will cause you issues when you attempt to run your application. A complete listing of these words can be found at the http://www.w3schools.com/js/js_reserved.asp.

10. Use {} Instead of New Object () 

There are multiple ways to create objects in JavaScript. Perhaps the more traditional method is to use the “new” constructor, like so

javascript best practices

However, this method receives the “bad practice” stamp without being so. Instead, we   can use the much more robust object literal method

javascript best practices

References: 

  1. www.w3schools.com
  2. https://code.tutsplus.com/tutorials/24-javascript-best-practices-for-beginners–net-5399