2

Why do tutorials teach us to get an element's property in two statements such as this:

var sample = document.getElementById("sample");
var mySample = sample.value;

Instead of doing it all in one statement like this?

var mySample = document.getElementById("sample").value;

I understand that if you needed to access several different properties of the same element, it would result in less code and also make it easier to read but why do people do this even when there's only one property being accessed?

AlwaysLearning
  • 311
  • 4
  • 12
  • 2
    Cutting and pasting `.getElementById()` calls is a common bad practice. – Pointy Apr 23 '16 at 13:38
  • If you are need to reference more than one property than storing a reference is better than looking it up over and over. – epascarello Apr 23 '16 at 13:51
  • I suspect `document.getElementById` is so long so that when you copy-paste it multiple times it looks ugly. jQuery didn't do this and then you see things like (ab)using `$` to get the same collection of elements at each iteration of a loop. – Oriol Apr 23 '16 at 13:53
  • Especially in a tutorial, it makes sense to do only one thing at a time (one thing per statement), and it's also incredibly useful to have a name (variable) for each value so that you can talk about it. – Bergi Apr 23 '16 at 14:21
  • You don't even need the `var sample = document.getElementById("sample");` line. If the id of the DOM element is in camelCase or with under_score you can officially access it directly like var `mySample = sample.value;` . However if the id is with-dash you may still do like `mySample = window["with-dash"].value;` – Redu Apr 23 '16 at 14:22
  • @Redu: But [you really really should not](http://stackoverflow.com/q/25325221/1048572). Not only for not confusing newbies, but also to save yourself from bugs. – Bergi Apr 23 '16 at 14:22
  • @Bergi it's not me who is populating the window scope with the DOM elements' ids, it's the DOM API itself so what's wrong with using it.? Hmm you say they might get overridden by some application who dare to write on window scope relentlessly .. so ok. Agreed..! – Redu Apr 23 '16 at 14:28
  • @Redu: The DOM API only specifies this to ensure compatibility with early versions of Internet Explorer that did this, and to not break websites which rely on this behaviour. Not because it would be a good practice. – Bergi Apr 23 '16 at 14:30

2 Answers2

1

It depends on how many times/properties you need to manipulate on that object. You're right - if you're just getting/setting the value, then absolutely use your 2nd example. Often several properties have to be manipulated, so setting a local variable improves performance a little as well as helps DRY - you don't have to repeat the text of the ID.

n8wrl
  • 19,439
  • 4
  • 63
  • 103
1

Tutorials do this because they (usually) try to teach the general case before the special case; it happens much more often that you need to access multiple properties than a single property, and it's much better to have internalized a general rule (where the worst thing that can happen is a redundant line of code) than the exception (where the problem is not so much the amount of code or readability, but that you do a lot of unnecessary function calls, (although with modern browsers you can always hope they are optimized away internally).

If you have learned the general rule that you can always make exceptions for simple cases (and if you don't nothing bad happens).

The thing you really should be asking is why tutorials, in this age of modern browsers, teach getElementById when there is broad support for document.queryselector.

Eike Pierstorff
  • 31,996
  • 4
  • 43
  • 62
  • Why `getElementById` instead of `querySelector`? Because it's simpler - you don't need to explain selectors. It's a similar reason why it would be preferred over `getElementsByClassName` or `querySelectorAll`. – Bergi Apr 23 '16 at 14:57
  • @Bergi Instead you need to explain ids, which only works for a single case whereas querySelector works for a broad selection of possible cases (which is more or less my argument). YMMV, so let's just agree we differ on that. – Eike Pierstorff Apr 23 '16 at 15:04
  • 1
    It's not that I disagree with you - selectors are handy and every js/css dev eventually needs to learn about them - I'm just giving another point of view :-) – Bergi Apr 23 '16 at 15:43