Better way to prepend/append the same thing to multiple variables

[csdude55]

I'm working with code that looks like this:

// each variable was defined previously
membersSSE = includePath + '/members_sse.php?user=' + cookie_user + '&h=';
membersPath = includePath + '/members.php?user=' + cookie_user + '&h=';
pmPath = includePath + '/members_pm.php?user=' + cookie_user + '&h=';
loginPath = includePath + '/members_login.php?user=' + cookie_user + '&h=';

You can see that each variable starts with "includePath" and have the same ending.

This is just one example; it's a common enough structure in my code that I'm curious if there's a way to make it shorter, process faster, or just generally "better".

This variation is considerably shorter:

membersSSE =
membersPath =
pmPath =
loginPath = includePath + '/members';

var h = '.php?user=' + cookie_user + '&h=';

membersSSE += '_sse' + h;
membersPath += h;
pmPath += '_pm' + h;
loginPath += '_login' + h;

That's slightly harder to read, of course, but I'm the only one that'll ever see the coding so it doesn't really matter.

Are there any other better options before I run with that?

[robzilla]

Second one is fine if you don't use h. Use easy to read and understand variable names, leave the optimization to your CSS compressor.

[csdude55]

I've always used the "h" param in the query string to append a timestamp and limit or bypass cache. I don't remember why I originally chose it (short for "hour", maybe), but it dates back to the early-aughts :-) It's a param that I've set Google to ignore, too. And it's one that I'm going to immediately recognize in my own code.

Beyond that, though, I was hoping there might be a cool built-in JS method to do it :-)

This is my third variation, which I think is easier to read and maintain (although it's slightly larger than the second option above):

var obj = {
 // variable_name : path_before_append
 'membersSSE' : '_sse',
 'membersPath' : '',
 'pmPath' : '_pm',
 'loginPath' : '_login'
}; 

for (var key in obj)
 window[key] = includePath + '/members' + obj[key] + '.php?user=' + cookie_user + '&h=';

This fourth variation is more complicated and harder to read, but it's more versatile and would make each individual page slightly smaller (which means that they'll open faster). This one puts the loop in a function that could be cached in a separate .JS file (which I already use anyway), then I would just define prepend, append, and the Object on individual pages:

var obj = {
 'membersSSE' : '_sse',
 'membersPath' : '',
 'pmPath' : '_pm',
 'loginPath' : '_login'
};

// createVars(object [required], prepend, append)
createVars(obj,
 includePath + '/members',
 '.php?user=' + cookie_user + '&h=');

function createVars(obj, prepend='', append='') {
 for (var key in obj)
  window[key] = prepend + obj[key] + append;
}

[tangor]

Just something to think about:

[devclass.com...]

[robzilla]

That's fine, but above you were also declaring it in js to have the value '.php?user=' + cookie_user + '&h=', so then you have two h variables with different contents and meanings.

I would probably go for something like this:

var urlPrefix = includePath + '/';
var urlSuffix = '.php?user=' + cookie_user + '&h=';

membersSSE = urlPrefix + 'members_sse' + urlSuffix;
membersPath = urlPrefix + 'members' + urlSuffix;
pmPath = urlPrefix + 'members_pm' + urlSuffix;
loginPath = urlPrefix + 'members_login' + urlSuffix;

A decent balance between DRY and KISS.

(Of course you could just use includePath instead of urlPrefix and prefix 'members' etc with a forward slash, but urlPrefix seems to me a better name for this purpose than includePath.)

[csdude55]

@tangor, I saw that headline a few days ago, too, but didn't read it. I doubt that JavaScript is going away any time soon, there's just no practical way to accomplish the majority of on-screen interactions without it.

@robzilla, I see what you mean, you didn't like me using var h=... in addition to the GET param of &h=. That's fair, I see what you mean. I had just come up with that one on the fly while posting, anyway, so I'm not married to it :-)

I'm leaning towards using the separate function, though, since I have similar formats spread across the site. Might as well shave a few bytes where I can, right?