JavaScript Variable Declaration

By: Ryan Kienstra on: January 24, 2015  in: JavaScript

JavaScript variable declarationGood PHP developers can learn basic JavaScript quickly.

But JavaScript variable declaration is different from PHP.

And forgetting declarations will cause subtle bugs, not errors.

Variable Declaration

Declare all variables by using var

var myVariable = 'foo_string';

If you don’t, you’ll make the variable global.

var scopeTest = function() {
        accidentalGlobal = 'The value inside the function';
}
scopeTest();
console.log( accidentalGlobal );

The console will log: 'The value inside the function'

accidentalGlobal should have had var before it.

var scopeTest = function() {
        var accidentalGlobal = 'The value inside the function'; // no longer global
}
scopeTest();
console.log( accidentalGlobal );

The console will log: Uncaught ReferenceError: accidentalGlobal is not defined

Declare At The Top

No matter where you declare a variable, the web browser will move the declaration to the top of the function.

Or the top of the file, if it’s not wrapped in a function.

For example, the declaration:

console.log( myNewValue );
var myNewValue = 'foo';

Is the same as:

var myNewValue;
console.log( myNewValue );
myNewValue = 'foo';

The browser will “hoist” the declaration to the top of the function.

Or the top of the file, in this case.

The book Single Page Web Applications explains this in Chapter 2.

So declare all variables at the top of their enclosing function or module.

Here’s the top of a JS file from my Widget Live Editor WordPress plugin.

( function ($) {

	var bindPanel , bindImageAndSlider , headingAndCopyBind , bindLinkHref;

	bindPanel = function ( panel_name ) {
                // omitted 

Even the function bindPanel is declared at the top, and later assigned.

This clarifies the scope.

Here’s a function in the same file.

value.bind( function( to ) {
        var maxHeight = 300 ,
            percentage = to ,
            imgHeight = Math.floor( maxHeight * percentage / 100 ) ,
            imgHeightInPixels = String( imgHeight ) + 'px';

        $( '.image_' + panel_name ).css( 'max-height' , imgHeightInPixels );
} );

(See the entire file on GitHub)

Suggested Syntax

The book Single Page Web Applications suggests to:

1. Separate with commas, and end with a semicolon.

var foo , bar , fooBar;

2. Put assignments on separate lines. Assignments use =

var exampleValue = 234 ,
    differentVal = 7834 ,
    anotherVal   = 364;

3. Make plain declarations first, followed by assignments.

var foo , bar , fooBar , // plain declarations
    exampleValue = 234 , // assignements
    differentVal = 7834 ,
    anotherVal   = 364;

Why Declare Variables?

  • Avoid bugs: private variables stay private when you use var
  • Clarity: shows what private variables are in scope

JavaScript variable declaration is very different from PHP.

But a few simple steps will make your code safer and clearer.

What’s your approach to JavaScript variable declaration?

Do you have any questions?

  • This field is for validation purposes and should be left unchanged.

Leave a comment

Get Free Updates

  • This field is for validation purposes and should be left unchanged.