Is it safe to copy a reference to a native JavaScript method?

Question

For example

var w = document.getElementById;
var b = w('header');
var c = w('footer');
var d = w('body');

Edit: Semicolons are another one of those big arguments. I thought I would edit the question for fun.

Edit: Responses to Andrey's comments found on his answer.

"How does copying reference make it more effective with JS compilers?"
Response: JS compilers are to shorten and/or obfuscate code. If there were 40 calls to document.getElementById(..), it would be much more compact if they called getById(..) which would be renamed to something like O(..).

"Also, when you handle html element events, you usually specify a js method, and inside the method you put the logic, not directly in the html event handlers - that is not required but a good practice"
Response: I know. But we have many many web systems and they rarely follow good practice completely.

"Also, using built in methods directly makes the code way more readable" Response: Given these two examples, I think the latter is more readable

document.getElementById('total').value = document.getElementById('subtotal').value + document.getElementById('salestax').value - document.getElementById('discount').value
document.getElementById('yousaved').value = document.getElementById('discount').value / (document.getElementById('subtotal').value + document.getElementById('salestax').value)

or

var byId = document.getElementById
byId('total').value = byId('subtotal').value + byId('salestax').value - byId('discount').value
byId('yousaved').value = byId('discount').value / (byId('subtotal').value + byId('salestax').value)

There are a lot of people out here who get mad at me for that, but I have my personal preferences. @Matti — 700 Software, Feb 02 '11 at 22:31
@George: How about switching to VBScript then, you can't even *have* semicolons in VBScript! — Matti Virkkunen, Feb 02 '11 at 22:35
@Matti Virkkunen: Semicolons? They are not required in JS. Or was it some hidden sarcasm? :) — Andrey, Feb 02 '11 at 23:11
@Matti Virkkunen: Sometimes I have hard time recognizing when people are messing with me :) — Andrey, Feb 02 '11 at 23:15
@Andrey: They are required in the same sense that using sensible function and variable names are required. — Matti Virkkunen, Feb 02 '11 at 23:17
@Matti: you are commenting on coding style which is completely irrelevant, especially since George already expressed his preferences in this area. His code is 100% valid, the end. — Martin Jespersen, Feb 02 '11 at 23:21
@Martin: So if my coding preference was to name all my functions using UUID identifiers, you would be 100% OK with that? — Matti Virkkunen, Feb 02 '11 at 23:23
@George: there is nothing wrong with the reference, go ahead, use it to your hearts desire. Just remember that if others need to maintain your code later, they might just hate you for it ;) — Martin Jespersen, Feb 02 '11 at 23:23
@Matti: I think you should moderate your tone a little... the idea with this forum is to help others, and i doubt your comments here are helpful to anyone. — Martin Jespersen, Feb 02 '11 at 23:27
@Martin: I sincerely hope that they will be helpful to someone else who is considering writing bad code. — Matti Virkkunen, Feb 02 '11 at 23:29
I don't doubt that you do, however I am sure they won't, and that will be the last of this nonsense for me, have a fantastic time ranting on, you seem to be pretty good at it ;) — Martin Jespersen, Feb 02 '11 at 23:35
@Matti: using semicolons in JS is not considered "good practice", it's just a matter of habit - usually developers who use JS also use some server side language where semicolons ARE required. If you know otherwise, please show a link where this good practice described. — Andrey, Feb 02 '11 at 23:58
@Andrey: Here, for instance: http://stackoverflow.com/questions/444080/do-you-recommend-using-semicolons-after-every-statement-in-javascript — Matti Virkkunen, Feb 03 '11 at 00:00
@Matti: Sorry, but I don't participate in holly wars. There are couple of cases when you DO NEED semicolons; the rest (like OP's example) is pure preference and arguing about it is pointless. — Andrey, Feb 03 '11 at 17:32
@Andrey: You ask for a link, I give you one and you're accusing me of taking part in a holy war of some sort? There is no war here, no, there are only facts. — Matti Virkkunen, Feb 04 '11 at 01:38
That link explained why you need semicolons in one particular case which I agree with. I was asking for a link with common good practices of using JS, where it states that a common rule is to end all statements with semicolon. — Andrey, Feb 04 '11 at 02:36

score 3 · Accepted Answer · edited May 23 '17 at 10:33

3

Did you mean

var w = document.getElementById

?

Thsi link explains in detail why you shouldn't do that: JavaScript function aliasing doesn't seem to work

edited May 23 '17 at 10:33

Community

1
1

answered Feb 02 '11 at 22:17

Andrey

20,487
26
108
176

Yes. That is what I mean. I am just a little nervous about making a copy of a (reference to a) native method because I have never done it before and, you know, "Windows Internet Explorer". So I thought I would post a question up here to get a few experienced eyes over it before I start doing it. – 700 Software Feb 02 '11 at 22:22
What's the matter with 'Windows Internet Explorer'? – GolezTrol Feb 02 '11 at 22:24
And then again, why would you want to copy the reference? – GolezTrol Feb 02 '11 at 22:25
Internet Explorer: You never know what it will do next to mess you up. – 700 Software Feb 02 '11 at 22:29
Why Copy the Reference: To be more effective with JavaScript compilers and to make code easier to read when working with HTML attributes that contain code for JavaScript events. – 700 Software Feb 02 '11 at 22:30
@George Bailey: how does copying reference make it more effective with JS compilers? Also, when you handle html element events, you usually specify a js method, and inside the method you put the logic, not directly in the html event handlers - that is not required but a good practice – Andrey Feb 02 '11 at 23:09
@George Bailey: Also, using built in methods directly makes the code way more readable – Andrey Feb 02 '11 at 23:10
It does not work in Chrome. See my edit for responses to the rest of your comments. – 700 Software Feb 03 '11 at 15:06
@George - you are right, you actually shouldn't be doing this kind of aliasing, according to http://stackoverflow.com/questions/1007340/javascript-function-aliasing-doesnt-seem-to-work – Andrey Feb 03 '11 at 17:29

700 Software · Answer 2 · 2011-02-03T17:47:43.563

Well, it happens that it does not even work in Chrome. I suppose I could have tested it before posting up here. I get TypeError: Illegal invocation.

The alternative is instead of

var byId = document.getElementById

just use

function byId(a) {return document.getElementById(a)}

This is not as efficient,, but it is shorter and many compilers will have no trouble at all converting

function getElementById(id) {return document.getElementById(id)}

into

function q(a){return document.getElementById(a)}

Edit: Thanks to Andrey: I now know that the reason the first example did not work was because I was changing document.getElementById to window.getElementById.

The following works in my test and based on what I am reading, it should work everywhere.

var d = document
d.i = d.getElementById

it expects "this" inside the getElementById method call to be document, but it is "window" when you call it as byID(), so it fails — Andrey, Feb 03 '11 at 17:31

score 0 · Answer 3 · answered Feb 08 '11 at 00:25

Actually it turns out that the compiler benefit is not useful in the event you are using gzip. gzip already has deduplication built in while looking for any string. So if every instance of document had a dot after it it would deduplicate the dot also.

In fact, if you have a variable with a string in it, Google Closure Compiler will -- by default -- replace all references to the variable with the string itself and remove the variable and assume that it will have made a profit with gzip's help.

See: https://groups.google.com/group/closure-compiler-discuss/browse_thread/thread/857bdaa095a8685e

Is it safe to copy a reference to a native JavaScript method?

3 Answers3

Linked