CODEWITHSUNDEEP
javascriptstringperformanceoptimization
Znheb
Znheb

Reputation: 121

is it worth to optimize Javascript code replacing strings with constants?

I often works with jquery and sometimes my code contains lot of repeated css class names, like:

$('#div1').addClass('funny-class');
...
$('#div2').addClass('funny-class');
...
$('#div1').removeClass('funny-class');

etc... I was asking to myself if is it worth to clean the code using pseudo constants like:

var constants = {
    FUNNY: 'funny-class'
}
...
$('#div1').addClass(cnst.FUNNY);
$('#div2').addClass(cnst.FUNNY);
$('#div1').removeClass(cnst.FUNNY);

First: minimization. If "constants" is a local var (hidden into a scope) probably the minimizer could replace the occurrence of "constants.FUNNY" with something minimized like "a.B".

Second: speed. The code with "constants" is faster than the first one?

What do you think?

Upvotes: 1

Views: 691

Answers (4)

Gerardo Lima
Gerardo Lima

Reputation: 6703

You can use Google's closure compiler with advanced optimization to identify commonly repeated strings and replace them by constant variable references. But this optimization is marginal; if you want to improve your code you'd get a better improvement by caching jQuery objects (this is a matter usually overlooked by many programmers):

var $div1 = $('#div1');
var $div2 = $('#div2');
$div1.addClass('funny-class');
$div2.addClass('funny-class');
$div1.removeClass('funny-class');

Upvotes: 2

Joseph
Joseph

Reputation: 119847

Putting it in variables can provide you with a certain amount of "central control" rather than performance.

However, putting them deeply in an object will incur a performance penalty. Keep them near the surface as possible to avoid the overhead in scope resolution. (it's minimal, but still an overhead)

//this one is so deep:
constants.foo.bar.baz.bam

//this is just 1 level deep:
constants.bam

Also, I'd worry more about the jQuery calls you are making

//two calls to #div1!
$('#div1').addClass(cnst.FUNNY);       //$() for div1
$('#div2').addClass(cnst.FUNNY);
$('#div1').removeClass(cnst.FUNNY);    //another $() for div1

//do this instead
var div1 = $('#div1')             //reference div1 once in a local variable

div1.addClass(cnst.FUNNY);        //use the reference to the object
$('#div2').addClass(cnst.FUNNY);
div1.removeClass(cnst.FUNNY);     //use the same reference to the object

Upvotes: 0

Matt
Matt

Reputation: 75317

  1. Yes, a minifier will probably reduce the constants.FUNNY variable, where-as it probably won't detect the re-use of 'funny-class' and assign it to a variable.

  2. The speed difference will be so marginal you shouldn't care. On one side you have to resolve the variable in the scope chain (very quick), but in the other you have to create a String primitive (also quick).

The benefits of having your constants object is if you decide to change the name of the class you assign, you only have to do it in one place, not 3; this is the sole benefit you should be considering... not a 0.0000000000000001 second speed difference.

Upvotes: 1

gabitzish
gabitzish

Reputation: 9691

It might not be noticeable as performance, but it is always a good practice to use constants instead of strings because you can easily modify the value by changing the constant's value.

Upvotes: 1

Related Questions