I'm a near-intermediate JS developer and was surprised to learn that access by element id is the fastest way. Thanks for posting this! 😄
DOM elements are also global when accessed by ID. e.g. window['my_element_id'] or my_element_id #oldschoolweb
this is a big DON'T
For sure a bad idea. Just a little anecdote.
Here's some more web anecdotes
OK, so who's responsible for the capitalization of XMLHttpRequest?
04:58 AM - 04 Oct 2017
Why so? 😨
Because it's seems not standard :/ but you can easely recreate this idea:
document.querySelectorAll("[id]").forEach(el => window[el.id] = el);
It's totally standard.
You are welcome 💪😉
Formatting code: Prettier is something folks should know about; it integrates with ESLint quite nicely, and can be added to most code editors pretty easily.
let, const, and var: In the examples given, doing let container = document.getElementByID('SomeId') is more of a signal to the developers that it will somehow be changing. In fact, the variable itself never changes, it still points to the same DOM element object, which is changing internally. This can be hugely confusing to realize that const container = document.getElementById('SomeId') ; container.innerHTML = "Hello" will work exactly the same way. Kyle Simpson (@getify) has a great discussion on this in YDKJS.
let container = document.getElementByID('SomeId')
const container = document.getElementById('SomeId') ; container.innerHTML = "Hello"
Also, don't completely discard var from your vocabulary as it still has uses; instead understand when and where to apply it.
The adage "use const until you can't" is a good one if everyone understands that.
I come to the comments looking for an explanation about the let/const and why we should use them instead of var.
Can you clarify the difference for me?
No where near as well as Kyle does: github.com/getify/You-Dont-Know-JS...
Came here to make literally these two comments!
I like using snake_case for variables. It improved readability by distinguishing them form camelCasedMethods.
And when it comes to let vs const, use const everywhere until you can't.
const container = document.getElementById("someElementId");
And then later in that same article the author uses:
let container = document.getElementById("someElementId");
It can elicit the pernicious WTF response followed by an emoji :-)
Like the article says the let syntax indicates that the value is to be changed which happens in the code snippet.
Use Prettier. All formatting should be deterministic and fixable automatically.
I see a lot of people using let for an object when they plan to mutate it.
Even if they understand it's unnecessary and just use it as a convention it's very confusing to other developers who look for the binding being redefined further on.
On formatting code: using linters is a good way to make sure your code is consistent (e.g. in a team or contributions to open-source projects) but maybe more important is to look at recommended and standard configs to see which rules a specific linter enforces.
Anyone can learn to code, but coding well, and not picking up bad habits are hugely important.
Keep up the great work.
Just getting into js and coming from Java. Great to know about the linters and Babel!
We're a place where coders share, stay up-to-date and grow their careers.
We strive for transparency and don't collect excess data.