Since the day Brendan Eich created it, JS has had many makeovers, changes, additions, and frameworks added to its body. After a lifetime of turbule...
For further actions, you may consider blocking this person and/or reporting abuse
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 thatconst container = document.getElementById('SomeId') ; container.innerHTML = "Hello"will work exactly the same way. Kyle Simpson (@getify) has a great discussion on this in YDKJS.Also, don't completely discard
varfrom 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.
Great article!
Thank you.
Came here to make literally these two comments!
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...
DOM elements are also global when accessed by ID. e.g.
window['my_element_id']ormy_element_id#oldschoolwebthis is a big DON'T
For sure a bad idea. Just a little anecdote.
Here's some more web anecdotes
I like using snake_case for variables. It improved readability by distinguishing them form camelCasedMethods.
And when it comes to
letvsconst, useconsteverywhere until you can't.Consistency is also a Best Practice. When authoring an article and suggesting that Javascript developers use:
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.
Formatting
Use Prettier. All formatting should be deterministic and fixable automatically.
constvsletI see a lot of people using
letfor 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.
Nice. I only found out about let the other week when chatting with a colleague and seeing let used frequently. I'd been a var user since I originally picked up JavaScript. It's really nice to read best practice articles.
Anyone can learn to code, but coding well, and not picking up bad habits are hugely important.
Nice :D
Great guide for javascript, but most thoughts apply to all languages independent of syntax.
Keep up the great work.
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.
Just getting into js and coming from Java. Great to know about the linters and Babel!
You are welcome 💪😉