Defining constants in JavaScript

Question

I am aware JavaScript does not have the concept of constant variables, which in traditional languages, you would usually define as being static/class related since there's no point in having them defined in each object instance.

So we have to make do with defining regular vars in uppercase, and just treating those like constants.

But I wondered whether there's a particular style to make it clearer to other developers that this variable is a constant, other than to define it in uppercase. I have the following plugin I am writing:

    (function () {
    var URL_KEY = 'CurrentURL',
        appName = 'MyApp',
        directoryName = 'MyAppDir';

    function GUID() {
        function s4() {
            return Math.floor((1 + Math.random()) * 0x10000)
                .toString(16)
                .substring(1);
        }

        return s4() + s4() + '-' + s4() + '-' + s4() + '-' + s4() + '-' + s4() + s4() + s4();
    }

    function setURL(domain) {
        if (!domain) {
            throw 'domain parameter required';
        }

        localStorage.setItem(URL_KEY, domain);
    }

    function getURL() {
        return localStorage.getItem(URL_KEY) || null;
    }

    window.App = window.App || {
        name: appName,
        directory: directoryName,
        createGUID: function () {
            return GUID();
        },
        getURL: function () {
            return getURL();
        },
        setURL: function (newURL) {
            setURL(newURL);
        }
    };
}());

My constant currently is URL_KEY - which is blending into the regular variables which is confusing. Is there any particular style recommended to separate the constants and the regular variables?

I am aware there is just one variable currently, but as this module grows there will be more.

Answer 1

You could a least separate the variables declarations into constants and variables:

var URL_KEY = 'CurrentURL';

var appName = 'MyApp',
    directoryName = 'MyAppDir';

You could alternatively make a function that returns the constant.

function URL_KEY() { return 'CurrentURL'; }

Replacing a function (like URL_KEY = function() {...}) might be more of a mental barrier for some.

Answer 2

The reason your constant is blending into the rest of your variables is that it is just another variable. The only difference is that it's capitalized.

In other languages, when you declare a constant, it's differentiated by a different keyword or a function. For example in C++, you have to say #define FOO "BAR" and in PHP you have to say define("FOO", "BAR");.

Because JavaScript doesn't exactly allow you to define keywords, we'll have to use a function, like in PHP. Even something simple like this will work:

function define(name, value){
    window.name = value;
}

But as long as we're here, we might as well have it define an actual, unwritable variable using object.defineProperty.

function define(name, value, scope){
    scope = scope || window;
    Object.defineProperty(scope, name.toUpperCase(), {'value': value, 'writable': false});
}

I added a few extra goodies, such as adding the ability to specify the scope of the constant and forcing the name to be capitalized.

Now, if we look at your code, it's a lot more clear what you're doing:

define("URL_KEY", "CurrentURL");
var appName = "MyApp";
var directoryName = "MyAppDir";

Answer 3

You could put the constants in an object. Creating a namespace of sorts makes them isolated from regular variables:

var Const = {
  urlKey: 'CurrentURL'
};

Answer 4

I have seen others attach the type of variable to the name, usually like var oMyCustomDohikey = {} That make me think you could do

var const_URL_KEY = ...
var strng_appName = ...
var array_MyList  = ...

etc. As long as you're consistent I don't see why this would be an issue...

Food for thought.