Best Practices

  • Always use lower case file names
  • Place <script> before the </body>
  • Declare all variables on top
  • Use var once then comma(,) thereafter when declaring variables
  • Save selections into variables: var $name = $(selector);
  • Reduce activity in Loops code
  • Reduce DOM Access code
  • Avoid global variables,  avoid new,  avoid  ==
  • Add Content as Few Times as Possible example
  • Add comment at the end of } or //end ready at the end of jquery ready function
  • Use let instead of var – let is scoped to the nearest block and are not hoisted; can be reassigned but cannot be redeclared within the same scope
  • Use console.time & console.timeEnd to test the speed of code
  • Avoid using with and use var to cache objects instead
  • Avoid using eval and use JSON.parse() instead
  • Use a document.createDocumentFragment() to insert additions all at once
  • Optimizing Your Selectors
  1. Use ID Selectors if at all possible
  2. Use IDs first, as part of a descendant selector: $(‘#main a’)
  3. Use the .find function: $(‘#main’).find(‘a’)
  4. Avoid too much specificity
  • Use Ternary Operator instead of If-Else condition: 
a > b ? true : false
var varName = a > b ? true : false
"string"+(a > b ? true : false)
  • Use OR || Logical Assignment
var x = item1 ? item1 : []; TO var x = item1 || [];
  • Use Switch Block instead of If-Else if-Else condition: example
switch (varName) {
  case "value1": 
    …;
    break;
  case "value2": 
    …;
    break;
  default:
    …;
 break;
}

Multiple inputs with the same output:
switch (varName) {
  case "value2": 
    …;
    break;
  case "value1": 
  case "value5":
    …;
    break;
}

Hierarchical Fall-Through: example
  • Use For-Loop for Arrays:
var person = {
  Name: "John",
  Age: 25,
  Race: [white, black, asian] }
Before
for(var i=0;i<person.race.length;i++){
  console.log(person.race[i]);
}
After
var list = person.race;
for(var i=0, x=list.length; i<x; i++) {
 console.log(list[i]);
}
  • Use Prototype for all shared properties and methods
function PersonOne(Name, ID){
  this.personName = Name;
  this.numberID = ID;
}
PersonOne.prototype = {
  currentAge: function(birthyear){
    this.currentAge = currentyear-birthyear;
  }
  BMI: function(){
    ...
  }
}
Call the Function:
var guestOne = new PersonOne("John", 01);
guestOne.currentAge(1990);
  • Namespacing

namespace1

namespace2

  • Anonymous Closure

1. Use Immediately-invoked Function Expression / IIFE to privatize properties
var Varname = (function(){…})();
2. Change global variables inside the IIFE to local variables
3. Move all values and methods to the top of the function
4. Use ‘return {…};‘ to make some properties public

anonymous-closure

anonymous-closure2

  • Global Imports

global-import

global-import2

  • Augmentation

augmentation

augmentation2

Any new properties will have no access to the private data from the earlier closure. The earlier public properties, however, will retain the reference.

Declared codes that needs space in memory are first hoisted to the top of scope before any operation code is run

function getNumber(){
  function chooseNumber(){
    return 12;
  }
  return chooseNumber(); 
  function chooseNumber(){
    return 7;
  }
}
getNumber(); is 7 because first function was overwritten

Function Expressions are never hoisted, they are treated as assignments

function getNumber(){
  var chooseNumber = function(){
    return 12;
  }
  return chooseNumber(); 
  var chooseNumber = function (){
    return 7;
  }
}
getNumber(); is 12 because call ended after getting the first function
function getNumber(){
  return chooseNumber(); 
  var chooseNumber = function(){
    return 12;
  }
  var chooseNumber = function (){
    return 7;
  }
}
getNumber() is error

Errors: syntax error, run-time error, ReferenceError, TypeError

Try block – method for identifying and recovering from errors
Catch(error) – contains the details of error
Finally – holds code that should execute whether any errors were present or not

https://modernweb.com/2013/12/23/45-useful-javascript-tips-tricks-and-best-practices/

http://jstherightway.org/

 

Advertisements

About bernadetteengleman

Hello, I am Bernadette from New York City. I moved here from Chicago in 2013. I am originally from the Philippines. I started studying web programming in 2015. I love it because I like making fun websites and web apps. The projects that I built so far are posted below. I like to cook and I love to travel. I also like to volunteer and I am a team leader with the non-profit organization, NYCares.
This entry was posted in JavaScript and tagged , , , , , , , , , . Bookmark the permalink.