JS: How to use abbreviations for full named variables?

Question

I prefer to declare all global variables at the beginning of my code using self-explanatory, full-named variables:

var $interval_start_dates          = [];    // date intervals
var $interval_end_dates            = [];

var $interval_start_milli          = [];    // convert dates to milliseconds
var $interval_end_milli            = [];

var $interval_start_milli_sorted   = [];    // sort millisecond dates
var $interval_end_milli_sorted     = [];

This naming convention often results in long variable-names which I find unhandy when using them in the code. Therefore I also prefer to use abbreviations for the variables in the code:

var _isd  = $interval_start_dates;
var _ied  = $interval_end_dates; 

var _ism  = $interval_start_milli; 
var _iem  = $interval_end_milli;

var _isms = $interval_start_milli_sorted;
var _iems = $interval_end_milli_sorted;

My questions in this regard are the following:

(1) Is it possible to output the intermediate variable (e.g. $interval_start_dates) using the abbreviation (e.g. _isd)?

(2) Does this naming convention result in worse performance of the code (e.g. speed) and if so is there a better way to use abbreviations?

One remark: I know that I could just use comments to inform about the full name of an abbreviated variable. But this means that I would have to repeat those comments many times in my code. I am looking for a more "slick" solution which allows me to use for example console.log to display the full name of a variable (if this is possible).

Answer 1

why not use some data structure. the advantage is the more readable format and you can use abbreviation for accessing the variables.

var interval = {
    start: {
        dates: [], // date intervals
        milli: [], // convert dates to milliseconds
        milli_sorted: [] // sort millisecond dates
    },
    end: {
        dates: [],
        milli: [],
        milli_sorted: []
    }
};
// use
var ie = interval.end;
alert(ie.dates);

Answer 2

1. Is it possible to output the intermediate variable (e.g. $interval_start_dates) using the abbreviation (e.g. _isd)?

Yes. They both refer to the same array, so it doesn't matter which you use to output the array.

(2) Does this naming convention result in worse performance of the code (e.g. speed) and if so is there a better way to use abbreviations?

No. They both refer to the same array, each is just as direct a reference as the other.

But, there are other potential issues. For instance, if you had need of filtering or mapping those arrays, it would be really easy to update one reference and forget the other, e.g.:

_isd = _isd.filter(function(entry) { return entry.foo < bar; });
// OOOPS! Now `_isd` and `$interval_start_dates` don't refer to the same array anymore!

If it's just typing out the names, any good IDE can make that easier for you.

I am looking for a more "slick" solution which allows me to use for example console.log to display the full name of a variable (if this is possible).

I'm not sure what you're asking here, but if you mean that you want to use _isd somewhere (for instance, a function) and have that function display $interval_start_dates in its output instead of _isd, then you can't (reasonably) do that. There is no link between _isd and $interval_start_dates, other than that they refer to the same array. But then, you can't do that anyway — if you passed $interval_start_dates into a function, it still can't infer the name of it, because the function's argument that receives the value isn't linked in any way to $interval_start_dates (other than that they refer to the same array).

---

Side note: If all of these things are arrays, and you want to have some way of knowing a "name" of the array based on an array reference, you can take advantage of the fact that standard arrays in JavaScript aren't really arrays at all, they're just objects and assign them a property with the name in, for instance:

var $interval_start_dates          = [];    // date intervals
$interval_start_dates.name = "$interval_start_dates";

// ...

var _isd = $interval_start_dates;
console.log(_isd.name); // "$interval_start_dates"

If you do that, be sure you're not using for-in to loop through the arrays (but there are better ways anyhow). Or use Object.defineProperty to define the name instead:

var $interval_start_dates          = [];    // date intervals
Object.defineProperty($interval_start_dates, "name", {
    value: "$interval_start_dates"
});

...and properties added that way are non-enumerable by default.

Answer 3

Performance-wise this does not matter. Your code will becoming less readable though. So you will have to decide what is more important to you: readability or coding faster. You can achieve both though by using an IDE which autocompletes your variable names.

Also, most of the time your variable names can be made shorter while not losing any meaning, for example:

var $interval_start_milli could be changed to var interval_start_ms or even var start_ms, since an interval has a start and an end, which would mean you would either have var interval_ms or start_ms and end_ms. Where var interval_ms is an array of objects with a start and an end property.

But that also depends on which other global variables you have declared though.

Another thing is that you shouldn't rely on global variables too much in javascript.