JavaScript Tutorial
JS - Introduction JS - Basic JS - Placement JS - Output JS - Statements JS - Syntax JS - Variables JS - Comments JS - Data Types JS - Operators JS - Operator Precedence JS - Condition JS - Switch JS - Functions JS - Objects JS - Loops For JS - Loops While JS - Break JS - Strings JS - String Methods JS - Numbers JS - Number Methods JS - Arrays JS - Array Methods JS - Array Iteration JS - Events JS - Event Listener JS - Event Propagation JS - Date JS - Math JS - Random JS - Boolean JS - Type Conversion JS - RegExp JS - Exception JS - Scope JS - Debugging JS - Hoisting JS - Strict Mode JS - this Keyword JS - Mistakes JS - Best Practices JS - Performance JS - Form Validation JS - ES6 Features
JS Objects
Object Definitions Object Properties Object Methods Object Constructors Object Prototypes
JS Functions
Function Definitions Function Parameters Function Call Function Apply Function Closures
DOM Introduction DOM Methods DOM Selectors DOM HTML DOM CSS DOM Attributes DOM Navigation
JS Browser BOM
JS - Window JS - Screen JS - Location JS - History JS - Navigator JS - Popup Alert JS - Timing JS - Cookies
AJAX - Introduction AJAX - XMLHttp AJAX - Request AJAX - Response AJAX - PHP
JSON - Introduction JSON - Syntax JSON - Data Types JSON - Parse JSON - Stringify JSON - Objects JSON - Arrays JSON - PHP JSON - JSONP
JS References
JavaScript Reference JavaScript Methods HTML DOM Reference

JavaScript Best Practices

Everyone writes JavaScript a little differently. We finally decided it was time that we got together and agree on how we write JavaScript. The following is a fairly simple set of JavaScript guidelines.

Avoid Global Variables

Minimize the use of global variables. This includes all data types, objects, and functions.

Global variables and functions can be overwritten by other scripts. Use local variables instead.

Local variables must be declared with the let, const and var keyword, otherwise they will become global variables.

Always Declare Variables

When declaring variables and constants, use the let and const keywords, not var.

There are many good reasons for this — for example it avoids problems due to accidental reassignment, and avoids hoisting, which can affect readability.

It is a good coding practice to put all declarations at the top of each script or function.

This will give cleaner code and provide a single place to look for all variables.

Use expanded syntax

To maximize readability we use expanded syntax, with each line of JS on a new line.

You should include spaces between operators and operands, parameters, etc:

Don't Declare Number, String, or Boolean as Objects

Always treat numbers, strings, or booleans as primitive values. Not as objects.

Declaring these types as objects, slows down execution speed, and produces unexpected results.

Run code

Objects cannot be compared:

Run code

Don't Use new Object()

  • Use {} instead of new Object()
  • Use "" instead of new String()
  • Use 0 instead of new Number()
  • Use false instead of new Boolean()
  • Use [] instead of new Array()
  • Use /()/ instead of new RegExp()
  • Use function (){} instead of new Function()
Run code

Beware of Automatic Type Conversions

JavaScript is a loosely typed or a dynamic language. Variables in JavaScript are not directly associated with any particular value type, and any variable can be assigned (and re-assigned) values of all types.

Run code

When doing mathematical operations, JavaScript can convert numbers to strings:

Run code

Beware that numbers can accidentally be converted to NaN (Not a Number):

Run code

Use Strict Equality

The == comparison operator always converts (to matching types) before comparison.

The === strict equality operator forces comparison of values and type.

Use Template Literals

For inserting values into strings, use template literal (` `).

General purpose looping

When using for, or for...of loops, make sure to define the initializer properly, with a let keyword.

Also bear in mind:

  • There should be no space between a loop keyword and its opening parenthesis.
  • There should be a space between the parentheses and the opening curly brace.

Function Naming

For function names use lowerCamelCasing, and use concise, human-readable, semantic names where appropriate.

End Your Switches with Default

Always end your switch statements with a default. Even if you think there is no need for it.

Run code

Error handling

If certain states of your program throw uncaught errors, they will halt execution and potentially reduce the usefulness of the example.

You should therefore catch errors using a try...catch block.