Cafe Arcane

A cozy, caffeinated corner of the web

Best Practices JavaScript Coding

by ·

One of the strengths and unfortunate weaknesses of JavaScript is its easy, almost casual structure and rules when compared to some more formally structured languages.  This makes it very welcoming to newcomers to programming but it also makes developing bad habits very easy.  I know I’m personally guilty of several of these, whether out of early endeavors, quick/dirty updates or just going with the flow of pre-existing code.  However, this will come back to haunt you and the longer you avoid learning and using best practices, the harder it will be to correct these habits.  The following are some of the basic issues you should be aware of and try to follow.

Naming Conventions

Although you are officially only required to use numbers, letter, underscores, the dollar sign and NOT start a variable name with a number, following only these bare minimums can lead to some ugly and unintuitive names.  Basic best practices for naming convention:

  • Use camel case for readability and add additional context to names:  bestPractices, checkBalance, mapLocation
  • Avoid underscores. Although this is pretty common some other programming languages, it isn’t in keeping with JavaScript’s inherent naming structure.
  • Implement noun and verb format to provide additional contextual meaning to names:  createElement, appendChild, calculateTotal

Structure and Format

JavaScript uses the well-known C-based format (at least to C family programmers) for its braces {} structure.  This practice is to place the first open brace on the same line as the keyword (if, while, for, else, function).  Closing braces are placed at the beginning of a line.  Always use these blocks even when they are strictly required, this will help future-proof your code if updates make it necessary.  Example:
if  (something) {
    something
    } else {
}
Use indenting to help give your code additional readability and structure.  JavaScript is very forgiving with white-space so this is almost entirely for the reader/programmers benefit and you should use it for your benefit.

Defining Functions

Where possible, define your variable upfront, before they are called.  You don’t have to be specific, a simple declaration will help prevent strict validators (like JSLint) from tripping up on your code and there are a few niche cases where it may cause problems.

Minification

Not technically a coding practice, but at some point you will come across JavaScript code that looks like runs all together in a solid, dense block of code.  This was probably not written this way by a human being but generated from normally formatted JavaScript by a tool.  The short of it is that  this is done for performance reasons.  It reduces page sized and increases load time; particularly helpful with large JavaScript application and large sites. However, consider the value of minification carefully.  If you are handing off code or not sure an “unminified” version will be kept on hand, it can make the code very hard to maintain and update down the road.

General Benefits of Best Practices

  • Your code will be easier for others to understand and maintain; vital in any collaborate programming or where you will be handing off your creations.
  • Accessing and understanding code examples,  snippets and pre-existing code. This will help you greatly when attempting to learn by example, understand tutorials and integrate techniques into your creations.
  • Makes it easier for you to review your own code, identify problems, perform updates and make enhancements, even if you haven’t work on a particular project in some time.

 

References:

 

 

Tags:

You may also like...

Leave a Reply